/* =========================================
   Einheitsgröße – Info Icon (ℹ️ im Quadrat)
   -> Layout bleibt (Größe/Abstand/Position), nur Darstellung = ℹ️
========================================= */

/* Icon */
.mw-eg-icon,
button.mw-eg-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:18px;
  height:18px;
  margin-left:6px;

  /* Wir wollen KEINEN Kreis / keine Box von CSS.
     Das Quadrat kommt vom Zeichen "ℹ️" selbst. */
  border:0;
  background:transparent;

  color:#0B66C3;
  font-weight:900;
  font-size:16px; /* steuert die Größe des ℹ️ */
  line-height:1;

  cursor:pointer;
  vertical-align:middle;

  padding:0; /* sicherheit */
}

.mw-eg-icon:hover,
button.mw-eg-icon:hover{
  filter:brightness(.95);
}

/* Mobile minimal größer */
@media (max-width: 768px){
  .mw-eg-icon,
  button.mw-eg-icon{
    width:20px;
    height:20px;
    font-size:18px;
  }
}

/* =========================================
   Modal (unverändert)
========================================= */

.mw-eg-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}

.mw-eg-modal.is-open{ display:block; }

.mw-eg-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.mw-eg-modal__panel{
  position:relative;
  width:min(680px, calc(100% - 28px));
  margin:10vh auto 0;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  padding:18px 18px 16px;
}

.mw-eg-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.1);
  background:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.mw-eg-modal__title{
  font-size:18px;
  font-weight:900;
  margin:0 0 10px;
}

.mw-eg-modal__body{
  font-size:14px;
  line-height:1.55;
  color:#222;
}

body.mw-eg-modal-open{
  overflow:hidden;
}