/* ===================== Markenfläche mit transparentem Logo (Runde 2e, js/marke.js) =====================
   .mk-flaeche[data-marke="bau"|"med"] trägt das transparente Logo, nie ein weisser Kasten.
   Hell: sanfter Verlauf Weiss zu zartem Rot (MediPersonal Blau und Grün) mit feiner Lichtkante.
   Dunkel: Graphit-Glas mit Schimmer aus der Ecke oben rechts (iPersonal Rot, MediPersonal Blau mit Grün).
   Das rote „i“ bzw. die Bildmarke steht links, der Schimmer rechts oben: Logo-Kontrast bleibt.
   Sichtbar ist je Thema eine Logo-Fassung: html[data-theme="light"] .mk-hell, sonst .mk-dunkel. .mk-immer-dunkel (Anmeldung) bleibt dunkel. */
.mk-flaeche, .im-schild .im-schild-logo {
  --mk-rgb: 228, 3, 19; --mk2-rgb: 228, 3, 19;
  position: relative; isolation: isolate; box-sizing: border-box; flex: none; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
  border-radius: 13px; border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(120% 170% at 100% 0%, rgba(var(--mk-rgb), .18), rgba(var(--mk-rgb), 0) 56%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
    #17191e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 26px -18px rgba(0, 0, 0, .75);
}
.mk-flaeche[data-marke="med"], .im-schild[data-m="med"] .im-schild-logo {
  --mk-rgb: 10, 155, 217; --mk2-rgb: 46, 170, 96;
  background:
    radial-gradient(120% 170% at 100% 0%, rgba(var(--mk-rgb), .2), rgba(var(--mk-rgb), 0) 58%),
    radial-gradient(90% 140% at 0% 100%, rgba(var(--mk2-rgb), .12), rgba(var(--mk2-rgb), 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
    #17191e;
}
/* Feine Lichtkante: schmaler Glanz oben, kaum sichtbar */
.mk-flaeche::before, .im-schild .im-schild-logo::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 30%, rgba(var(--mk-rgb), .45) 78%, rgba(255, 255, 255, 0)); }
/* Spezifität (0,2,0) und mehr: schlägt alte Regeln wie .logo-platte img und .anm-logo img */
.mk-flaeche .mk-logo { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; }
.mk-flaeche .mk-hell { display: none; }

/* Hell (Thema hell, nicht auf der Anmeldung) */
html[data-theme="light"] .mk-flaeche:not(.mk-immer-dunkel), html[data-theme="light"] .im-schild .im-schild-logo {
  border-color: rgba(var(--mk-rgb), .1);
  background: linear-gradient(135deg, #fff 0%, #fff 30%, #fff5f5 68%, #fde9eb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(17, 17, 26, .05), 0 10px 22px -18px rgba(var(--mk-rgb), .45);
}
html[data-theme="light"] .mk-flaeche[data-marke="med"]:not(.mk-immer-dunkel), html[data-theme="light"] .im-schild[data-m="med"] .im-schild-logo {
  border-color: rgba(var(--mk-rgb), .14);
  background: linear-gradient(135deg, #fff 0%, #fff 36%, #f6fbfe 70%, #eff8f3 100%);
}
html[data-theme="light"] .mk-flaeche:not(.mk-immer-dunkel)::before, html[data-theme="light"] .im-schild .im-schild-logo::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 40%, rgba(255, 255, 255, 0)); }
html[data-theme="light"] .mk-flaeche:not(.mk-immer-dunkel) .mk-hell { display: block; }
html[data-theme="light"] .mk-flaeche:not(.mk-immer-dunkel) .mk-dunkel { display: none; }

/* Grössen: s mobile Kopfleiste, m Seitenleiste und Portal, l Anmeldung und Registrierung */
.mk-s { height: 42px; padding: 0 12px; border-radius: 11px; }
.mk-s .mk-logo { max-height: 22px; }
.mk-s[data-marke="med"] .mk-logo { max-height: 28px; }
.mk-m { height: 52px; padding: 0 14px; }
.mk-m .mk-logo { max-height: 29px; }
.mk-m[data-marke="med"] .mk-logo { max-height: 35px; }
.mk-l { height: 50px; padding: 0 16px; border-radius: 12px; }
.mk-l .mk-logo, .logo-platte.mk-rahmen .mk-l .mk-logo { height: 26px; }
.mk-l[data-marke="med"] .mk-logo, .logo-platte.mk-rahmen .mk-l[data-marke="med"] .mk-logo { height: 34px; }

/* Seitenleiste: der alte weisse Kasten .brand2 (styles.css) wird zum durchsichtigen Rahmen, die Fläche füllt ihn */
.sidebar .brand2.mk-rahmen { padding: 0; background: none; border: 0; box-shadow: none; display: flex; align-items: stretch; justify-content: stretch; }
.sidebar .brand2.mk-rahmen > .mk-flaeche { width: 100%; height: 100%; }
/* Registrierung und Einladung: .logo-platte (styles.css) ohne weissen Grund */
.logo-platte.mk-rahmen { padding: 0; background: none; border: 0; box-shadow: none; height: auto; }
/* Vermittler-Portal und Pflichtseite */
.mk-portal { align-self: center; }
/* Massenimport, Schild „Ziel“ (js/import.js): gleiche Markenfläche statt weissem Kasten. Das Logo kommt als Bild der Fläche
   (gebündelte transparente Fassung je Thema), ein hochgeladenes Logo bzw. der Schriftzug darin wird ausgeblendet. */
.im-schild .im-schild-logo { width: 132px; min-width: 0; height: 44px; padding: 0; border-radius: 11px; }
.im-schild .im-schild-logo > * { display: none; }
.im-schild .im-schild-logo::after { content: ""; position: absolute; inset: 11px 12px; z-index: 1; background: url(/brand/logo-ipersonal-dunkel.png) center / contain no-repeat; }
.im-schild[data-m="med"] .im-schild-logo::after { inset: 8px 11px; background-image: url(/brand/logo-medipersonal-dunkel.png); }
html[data-theme="light"] .im-schild .im-schild-logo::after { background-image: url(/brand/logo-ipersonal-transparent.png); }
html[data-theme="light"] .im-schild[data-m="med"] .im-schild-logo::after { background-image: url(/brand/logo-medipersonal-transparent.png); }

@media (max-width: 900px) {
  /* Mobile Kopfleiste: Rahmen 132 × 42 aus styles.css, Logo etwas kleiner */
  .sidebar .brand2.mk-rahmen > .mk-flaeche { padding: 0 10px; border-radius: 11px; }
  .sidebar .brand2.mk-rahmen .mk-logo { max-height: 21px; }
  .sidebar .brand2.mk-rahmen [data-marke="med"] .mk-logo { max-height: 27px; }
}
@media (max-width: 420px) {
  .mk-l { padding: 0 14px; }
}