/* ───────── Overlay ───────── */
.overlay{
  position:fixed;           /* immer über der Seite, folgt keinem Scroll */
  inset:0;                  /* füllt den gesamten Viewport */
  display:grid;             /* Lightbox zentrieren */
  place-items:center;
  background:rgba(0,0,0,.55);
  z-index:9999;             /* über allem */
  opacity:0; visibility:hidden;
  transition:opacity .3s ease;
}

/* sichtbarer Zustand wird per JS durch die Klasse .open aktiviert */
.overlay.open{opacity:1; visibility:visible;}

/* ───────── Lightbox ───────── */
.lightbox{
  position:relative;
  width:clamp(280px, 90vw, 520px);
  padding:1.8rem 2.2rem;
  background:#fff;
  border-radius:1rem;       /* abgerundete Ecken */
  box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.30);
  max-height:90vh;          /* Gesamthöhe begrenzen */
  display:flex;             /* Spalten-Layout */
  flex-direction:column;    /* Header oben, Content wächst */  
}

.lb-content{
  overflow-y:auto;          /* Scrollbar bei Bedarf */
  margin-top:1rem;
  flex:1 1 auto;            /* darf wachsen und schrumpfen */
}

/* ───────── ✕-Button ───────── */
.close-btn{
  position:absolute; top:.6rem; right:.6rem;
  border:0; background:transparent;
  font-size:2rem; line-height:1;
  color:#666; cursor:pointer;
}
.close-btn:focus-visible{outline:2px solid #000; outline-offset:2px;}

h2{
    font-family: verdana;
}
h3{
    font-family: verdana;
}
li{
    font-family: verdana;
    margin-bottom: 10px;
}
ul{
    font-family: verdana;
}
ol{
    font-family: verdana;
}
p{
    font-family: verdana;
/*    text-align: justify;*/
}