/* Kachel Light/Dark */
.ech-md{
  --bg-light: rgb(242,242,242);
  --bg-dark:  rgb(60,60,60);
  --fg-light: rgb(0,0,0);
  --fg-dark:  rgb(242,242,242);
  --accent:   rgb(0,84,134);
  --radius:   16px;

  background: var(--bg-light);
  color: var(--fg-light);
  border-radius: var(--radius);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
@media (prefers-color-scheme: dark){ .ech-md{ background:var(--bg-dark); color:var(--fg-dark);} }
.ech-md.ech-dark{ background:var(--bg-dark); color:var(--fg-dark); }

/* Grid 50/50 */
.ech-md__grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:980px){ .ech-md__grid{ grid-template-columns:1fr; } }

/* LINKS: Menü (20px links & oben frei) */
.ech-md__menu{ padding:20px 20px 20px 20px; }
.ech-md__menu-list{ list-style:none; margin:0; padding:0; }
.ech-md__menu-list li{
  position:relative;
  padding-left: 55px;          /* 20 (frei) + 25 (Icon) + 10 (Abstand) */
  min-height:25px;
  margin:10px 0;
}
.ech-md__menu-list li::before{
  content:"";
  position:absolute;
  left:20px; top:0.2em;
  width:25px; height:25px;
  background:no-repeat center / 25px 25px
    url("https://data.ech.group/pictograms/svg/expand_circle_right_blue_30x30.svg");
}
.ech-md.ech-dark .ech-md__menu-list li::before{
  background-image:url("https://data.ech.group/pictograms/svg/expand_circle_right_white_30x30.svg");
}
@media (prefers-color-scheme: dark){
  .ech-md .ech-md__menu-list li::before{
    background-image:url("https://data.ech.group/pictograms/svg/expand_circle_right_white_30x30.svg");
  }
}
.ech-md__menu a{ text-decoration:none; color:inherit; }
.ech-md__menu a:hover{ text-decoration:underline; }

/* RECHTS: H3 und Download-Kachel */
.ech-md__right{ padding:20px; }
.ech-md__headline{
  background: var(--accent);
  color: rgb(242,242,242);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  font-weight:700;
  line-height:1.2;
  padding:10px;
  margin:0 0 20px 0;
}

/* Blaue Download-Kachel */
.ech-md__dl-tile{
  background: var(--accent);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  padding:20px 20px 20px 20px;  /* 20px top & links (und konsistent) */
  color:RGB(0,84,134);
}
.ech-md__dl-list{ list-style:none; margin:0; padding:0; }
.ech-md__dl-list li{
  position:relative;
  padding-left:55px;           
  min-height:25px;
  margin:10px 0;
}
.ech-md__dl-list li::before{
  content:"";
  position:absolute;
  left:20px; top:0.2em;
  width:25px; height:25px;
  background:no-repeat center / 25px 25px
    url("https://data.ech.group/pictograms/svg/pdf_white_30x30.svg");
}
.ech-md__dl-list a{
  color:RGB(242,242,242); text-decoration:none;
}
.ech-md__dl-list a:hover{
  text-decoration:underline;
}


/* Sicherheit: Links sichtbar und klickbar machen */
.ech-md__menu-list a,
.ech-md__dl-list a {
  display: block;
  color: inherit;             /* links: erbt hell im Dark-Theme */
  text-decoration: none;
  line-height: 1.4;
}
.ech-md__menu-list a:hover,
.ech-md__dl-list a:hover {
  text-decoration: underline;
}

/* Falls ein globales Reset font-size:0 o.ä. setzt */
.ech-md__menu-link,
.ech-md__dl-link {
  font-size: 1rem;
}

/* Verhindere, dass das PDF-Icon den Text überdeckt (sicher ist sicher) */
.ech-md__dl-list li { position: relative; }
.ech-md__dl-list li::before { z-index: 0; }
.ech-md__dl-list a { position: relative; z-index: 1; }

.ech-md__menu-list a,
.ech-md__dl-list a {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
  font-size: 1rem;
}
.ech-md__menu-list a:hover,
.ech-md__dl-list a:hover { text-decoration: underline; }