/* Gemeinsame Kopfzeile + Tabbar der MDG-Software (Intranet und MDG AI Client binden diese Datei ein).
   Braucht die Farb-Variablen der Seite (wie glocke.css) und optional --kopf-h (Höhe, Standard 64px/56px). */
.mk { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--linie); padding-top: env(safe-area-inset-top); }
.mk-in { max-width: 1400px; margin: 0 auto; height: var(--kopf-h, 54px); padding: 0 20px; display: flex; align-items: center; gap: 10px; }
@media (min-width: 1000px) { .mk-in { max-width: none; padding: 0 32px; } }   /* bündig mit den Client-Seiten (volle Breite, 32 px) – auf 1920 px stand das Logo 115 px eingerückt über dem Seitentitel */
.mk-marke { flex: none; }
.mk-marke img { display: block; height: 34px; width: auto; }
.mk-nav { display: flex; align-items: center; gap: 1px; margin-left: 8px; min-width: 0; }
.mk-nav a { position: relative; padding: 7px 11px; border-radius: 999px; text-decoration: none; color: var(--leise); font-weight: 600;
  font-size: 14px; white-space: nowrap; transition: background .15s, color .15s; }
.mk-nav a:hover { background: var(--flaeche-3); color: var(--tinte); }
.mk-nav a.an { background: var(--akzent-2); color: var(--akzent-tinte); }
.mk-trenner { width: 1px; height: 20px; background: var(--linie); margin: 0 6px; flex: none; }
.mk-zahl { display: inline-block; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: #C23A2B;   /* fest: Weiß auf hellem Rot im Dunkelmodus war 2,2:1 */
  color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; vertical-align: 1px; }
.mk-nav .mk-zahl { position: absolute; top: -3px; right: -5px; margin: 0; box-shadow: 0 0 0 2px var(--flaeche); }   /* als Marke an der Ecke: eine neue Zahl verschiebt die Navigation nicht */
.mk-suche { margin-left: auto; position: relative; flex: 1 1 160px; min-width: 120px; max-width: 280px; }
.mk-suche .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--leise); pointer-events: none; }
/* bewusst spezifisch: beide Anwendungen haben eigene, stärkere Regeln für Eingabefelder */
.mk .mk-suche input[type=search] { width: 100%; height: 38px; padding: 0 12px 0 38px; border-radius: 999px; border: 1px solid transparent;
  background: var(--flaeche-2); color: var(--tinte); font: inherit; font-size: 14px; box-shadow: none; }
.mk .mk-suche input[type=search]:focus { outline: none; background: var(--flaeche); border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-2); }
.mk-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--tinte); background: none;
  border: 0; cursor: pointer; text-decoration: none; font-size: 18px; }
@media (hover: hover) { .mk-icon:hover { background: var(--flaeche-3); } }   /* Touch: :hover klebt nach dem Antippen */
.mk-suche-knopf { display: none; margin-left: auto; }
.mk-melden { display: none; }   /* „Problem melden“ gibt es nur, wo feedback.js geladen ist (Client-Seiten) */
body.mit-melden .mk-melden { display: grid; }
.mk .mglocke { flex: none; }
.mk-menue { position: relative; flex: none; }
.mk-menue summary { list-style: none; cursor: pointer; border-radius: 50%; display: block; }
.mk-menue summary::-webkit-details-marker { display: none; }
.mk-menue .av { border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.mk-menue .av-init { background: var(--verlauf); color: #fff; font-weight: 700; }
.mk-menue summary .av { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3.5px var(--linie); }
.mk-menue[open] summary .av { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3.5px var(--akzent); }
.mk-menue-box { position: absolute; right: 0; top: calc(100% + 10px); width: 290px; max-height: min(78vh, 640px); overflow-y: auto; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten-hoch); padding: 6px; z-index: 40; }
.mk-menue-kopf { display: flex; gap: 11px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--linie-2); margin-bottom: 4px; }
.mk-menue-kopf div { min-width: 0; display: flex; flex-direction: column; }
.mk-menue-kopf small { color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-menue-box a, .mk-menue-box button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px;
  text-decoration: none; color: var(--tinte); font: inherit; font-size: 14.5px; background: none; border: 0; cursor: pointer; text-align: left; }
.mk-menue-box a:hover, .mk-menue-box button:hover { background: var(--flaeche-3); }
.mk-menue-box .ic { color: var(--leise); flex: none; display: block; }
.mk-menue-box hr { border: 0; border-top: 1px solid var(--linie-2); margin: 4px 0; }
.mk-menue-box form { margin: 0; }
.mk-tabbar { display: none; }
@media (max-width: 1240px) { .mk-suche { display: none; } .mk-suche-knopf { display: grid; } }
@media (max-width: 999px) {
  .mk-in { padding: 0 14px; }
  .mk-marke img { height: 32px; }
  .mk-nav { display: none; }
  .mk-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 4px env(safe-area-inset-bottom);
    height: calc(var(--tab-h, 64px) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--linie); }
  .mk-tabbar a { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: var(--leise); font-size: 10.5px; font-weight: 600; border-radius: 12px; white-space: nowrap; }
  .mk-tabbar a.an { color: var(--akzent-tinte); }
  .mk-tabbar .ic { display: block; }
  .mk-tabbar a.an .ic { stroke-width: 2.3; }
  .mk-tabbar .mk-zahl { position: absolute; top: 2px; left: calc(50% + 4px); margin: 0; }
  body.mk-mit-tabbar { padding-bottom: calc(var(--tab-h, 64px) + env(safe-area-inset-bottom)); }
}

/* App-Umschalter: weitere Anwendungen der Gruppe (dCM je Gesellschaft, KI-Chat) */
.mk-apps summary.mk-icon { display: grid; border-radius: 50%; }
.mk-apps[open] summary.mk-icon { background: var(--flaeche-3); }
.mk-apps-titel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); padding: 6px 10px 4px; }
.mk-apps .mk-menue-box a span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mk-apps .mk-menue-box a small { color: var(--leise); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-apps .mk-menue-box a b { font-weight: 600; }
.mk-app-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--flaeche-3); color: var(--akzent-tinte); font-weight: 750; }
.mk-apps .mk-menue-box a.eigen .mk-app-ic { background: var(--akzent); color: var(--auf-akzent, #fff); }
@media (max-width: 760px) { .mk-apps { display: none; } }   /* Handy: steht im Profilmenü */
.nur-handy-mk { display: none !important; }
@media (max-width: 760px) { .mk-menue-box a.nur-handy-mk { display: flex !important; } .mk-menue-box hr.nur-handy-mk { display: block !important; } }
@media (max-width: 600px) { .mk-menue-box { position: fixed; right: 12px; left: 12px; width: auto; top: calc(var(--kopf-h, 54px) + env(safe-area-inset-top) + 8px); } }   /* bildschirmbreites Blatt nur am Handy */
.mk-nav a { line-height: 1.5; }   /* gleiche Höhe in Intranet und Client */

/* Aktivitätsstatus am Profilbild: Ring in Grün (aktiv), Gelb (2–10 Min nichts getan), Rot (länger) */
[data-uid].st-gruen { outline: 2.5px solid #2BB673; outline-offset: 1.5px; }
[data-uid].st-gelb { outline: 2.5px solid #E5A823; outline-offset: 1.5px; }
[data-uid].st-rot { outline: 2.5px solid #D8504A; outline-offset: 1.5px; }

/* Rückmeldung beim Seitenwechsel */
.mk-laedt { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--akzent), transparent) no-repeat; background-size: 40% 100%; animation: mk-laedt 1s linear infinite; }
.mk-laedt[hidden] { display: none; }
@keyframes mk-laedt { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.mk-tabbar a.mk-geht { color: var(--akzent-tinte); }
.mk-tabbar a.mk-geht .ic { opacity: .25; }
.mk-tabbar a.mk-geht::before { content: ""; position: absolute; top: 8px; left: calc(50% - 11px); width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--akzent); border-top-color: transparent; animation: mk-dreh .7s linear infinite; }
.mk-nav a.mk-geht { opacity: .6; }
.mk-nav a.mk-geht::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%;
  border: 2px solid var(--akzent); border-top-color: transparent; animation: mk-dreh .7s linear infinite; vertical-align: -1px; }
@keyframes mk-dreh { to { transform: rotate(360deg); } }

/* KI-Sprechblase in der Kopfzeile: Ersatz, wo die Blase unten rechts im Weg wäre (einblenden: Client-app.css) */
.mk-ki { display: none; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent, #fff); text-decoration: none; }
@media (min-width: 1000px) { .mk-ki { display: grid; visibility: hidden; } }   /* Platz immer frei halten: Einblenden verschiebt die Kopfzeile nicht */

/* Seitenwechsel wie in einer App: weich überblenden statt weißem Aufblitzen (Safari 18.2+, Chrome; sonst ohne Wirkung) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* Handy quer im Browser (niedrig, ohne App-Hülle): Tab-Leiste flach, Symbol + Text nebeneinander – mehr Höhe für Mailtext/Entwurf */
@media (max-width: 999px) and (max-height: 500px) and (orientation: landscape) {
  html:not(.nativ-app), html:not(.nativ-app) body.mk-mit-tabbar { --tab-h: 46px; }
  html:not(.nativ-app) .mk-tabbar { padding-top: 2px; padding-bottom: env(safe-area-inset-bottom); }
  html:not(.nativ-app) .mk-tabbar a { flex-direction: row; gap: 6px; font-size: 12.5px; }
  html:not(.nativ-app) .mk-tabbar .mk-zahl { position: static; margin-left: -2px; }   /* Zahl hinter dem Text statt darüber */
}
/* Touch: Kopfzeilen-Symbole mit 44-px-Tippfläche (Apple HIG), sichtbar bleiben sie 40 px */
@media (pointer: coarse) { .mk-icon, .mk-menue summary, .mk .mglocke > summary { position: relative; } .mk-icon::after, .mk-menue > summary::after, .mk .mglocke > summary::after { content: ""; position: absolute; inset: -2px; } .mk-menue > summary::after { inset: -4px; border-radius: 50%; } }

/* KI-Blase (Client .bubble, Intranet .ki-knopf) beim Runterscrollen weg, beim Hochscrollen wieder da (iOS-Muster, kopf.js) */
@media (max-width: 999px) {
  .bubble, .ki-knopf { transition: transform .2s ease, opacity .2s ease; }
  html.blase-weg .bubble, html.blase-weg .ki-knopf { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
}

/* Chip-Reihen einzeilig mit „Mehr ▾“ (kopf.js) – kein seitliches Wischen */
.chip-reihe { overflow: visible !important; flex-wrap: nowrap !important; position: relative; }
.chip-reihe > .mehr-weg { display: none !important; }
.chip-reihe > * { flex-shrink: 0; }
.chip-mehr { position: relative; flex: none; margin-left: auto; }
.chip-mehr[hidden] { display: none; }
.chip-mehr > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.chip-mehr > summary::-webkit-details-marker { display: none; }
.chip-mehr-box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; min-width: 180px; max-width: min(300px, calc(100vw - 24px));
  max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  box-shadow: var(--schatten-hoch, 0 10px 30px rgba(0, 0, 0, .16)); display: flex; flex-direction: column; gap: 1px; }
.chip-mehr-eintrag { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--tinte); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; white-space: nowrap; }
.chip-mehr-eintrag:hover { background: var(--flaeche-3, var(--flaeche-2)); }
.chip-mehr > summary:not(.chip) { display: block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--tinte); font-size: 14px; font-weight: 600; }
.chip-mehr.nach-oben .chip-mehr-box { top: auto; bottom: calc(100% + 6px); }

@media print { .mk, .mk-tabbar, .mk-ki, .ladebalken { display: none !important; } }
@media (max-width: 359px) { .mk-in { padding: 0 8px; gap: 4px; } .mk-marke img { height: 28px; } }   /* 320: Avatar ragte 3 px raus → Seite breiter, Tab-Leiste unten abgeschnitten */
@media (pointer: coarse) { .mk-menue-box a, .mk-menue-box button { min-height: 44px; } }   /* Profilmenü: Zeilen ≥ 44 pt (Usability 09.11.) */