@charset "UTF-8";
/* Seite in Leichter Sprache (leichte-sprache.php) und der Kurzteil in Leichter Sprache auf barrierefreiheit.php.
   Wird über $extra_head nur auf diesen Seiten geladen; styles.css bleibt unverändert.
   Regeln für die Darstellung: größere Schrift, viel Zeilenabstand, linksbündig, ein Satz pro Zeile (im HTML mit <br>),
   Bild links neben dem Abschnitt, auf schmalen Bildschirmen darüber. */

#grau .leicht p,
#grau .leicht li {
  font-size: clamp(1.1rem, 1.05rem + .25vw, 1.25rem);
  line-height: 1.75;
  text-align: left;
  hyphens: manual; /* Keine automatische Silbentrennung: Wörter werden nur am Bindestrich getrennt */
}
#grau .leicht p { margin-block: 0 1.1em; }
#grau .leicht ul { padding-left: 1.3em; margin-block: 0 1.1em; }
#grau .leicht li::marker { color: var(--blau, #41749d); }
#grau .leicht h2 { font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); }

/* Abschnitt mit Bild: Bild links, Text rechts */
.leicht-abschnitt {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0 clamp(16px, 3vw, 32px);
  align-items: start;
}
.leicht-abschnitt > img {
  width: 100%; height: auto; margin-top: .4em;
  border-radius: var(--radius-klein, 8px);
}
@media (max-width: 560px) {
  .leicht-abschnitt { grid-template-columns: minmax(0, 1fr); }
  .leicht-abschnitt > img { max-width: 12rem; margin: 0 0 1em; }
}

/* Wichtige Angaben (Telefon, E-Mail, Adresse) in einem weißen Kasten */
#grau .leicht .leicht-kasten {
  background: #fff; border-radius: var(--radius, 12px); box-shadow: var(--schatten, 0 2px 10px rgba(0, 0, 0, .08));
  border-left: 5px solid var(--blau, #41749d); padding: 16px 22px;
  overflow-wrap: anywhere;
}

/* Hinweis bei Links zu Seiten in schwerer Sprache */
.leicht-hinweis { display: block; font-size: .9em; color: var(--grau-dunkel, #4a5a63); }