:root {
  --cassiopeia-color-primary: #004C63;
  --cassiopeia-color-link: #004C63;
 /* 
  --link-color: hsl(220, 67%, 40%);
  --link-color-rgb: 34, 79, 170;
  */
  --link-color: #004C63;
  --link-color-rgb: #004C63;
  --cassiopeia-color-hover: #000000;
}
/* Announcement-Box für Cassiopeia-Module */
.mi-announcement{
  position:relative;
  margin: .75rem 0 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: #0b2a36;          /* dunkles Blau/Grün */
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  isolation: isolate;
}

/* „Spezial“-Rahmen (dezenter Glow/Gradient) */
.mi-announcement::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  padding: 2px; border-radius: 12px;
  background: linear-gradient(135deg,#26d0ce,#1a75ff,#00d084);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Icon-Badge links */
.mi-announcement::after{
  content: "★";
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display:grid; place-items:center;
  border-radius: 50%;
  background: #ffffff1a;
  box-shadow: inset 0 0 0 1px #ffffff33;
  font-weight: 700;
}

/* Platz fürs Icon schaffen */
.mi-announcement > *{
  margin-left: 58px;  /* Text rückt rechts neben das Icon */
}

/* Typografie im Modulinhalt harmonisieren */
.mi-announcement h3,
.mi-announcement h4{
  margin: 0 0 .25rem; color:#fff;
}
.mi-announcement p{ margin: .25rem 0 0; }
.mi-announcement a{
  color: #fff; text-decoration: underline;
  text-underline-offset: 2px;
}

/* kleine „Badge“ für das Datum, falls im Text verwendet */
.mi-announcement .mi-badge{
  display:inline-block; margin-left:.5rem; font-weight:600;
  padding:.15rem .5rem; border-radius:.5rem;
  background:#ffffff22; border:1px solid #ffffff33;
}

/* kompaktere Variante */
.mi-announcement.mi-announcement--compact{
  padding: .85rem 1rem;
}
.mi-announcement.mi-announcement--compact::after{
  width:34px; height:34px; left:12px;
}
.mi-announcement.mi-announcement--compact > *{
  margin-left: 52px;
}

.mi-announcement ul {
  margin-bottom: 0px;
}


@media (max-width: 600px){
  .mi-announcement{
    font-size: .9rem;   /* alles im Block kleiner */
    line-height: 1.3;
    padding: .75rem 1rem .75rem 3.2rem; /* Platz sparen + Icon berücksichtigen */
  }
  .mi-announcement h3,
  .mi-announcement h4{
    font-size: 1rem;
    margin: 0 0 .25rem;
  }
  .mi-announcement p{
    font-size: .9rem;
    margin: .25rem 0 0;
  }
  .mi-announcement .mi-badge{
    font-size: .85rem;
    padding: .1rem .4rem;
  }
  .mi-announcement::after{
    width: 30px; height: 30px; left: .75rem;
  }
}
@media print{
  .mi-announcement{ display:none; }
}