@charset "UTF-8";
/* =============================================================================
   responsive-modern.css
   Wird NACH der bisherigen Template-CSS geladen und überschreibt gezielt
   die Stellen, die auf Smartphone und Tablet Probleme machen.
   Speichern als UTF-8 (ohne BOM).
   Foundation-5-Breakpoints: 40.063em (medium), 64.063em (large)
   ============================================================================= */

/* ---------- 1. Design-Variablen: Farben nur noch an einer Stelle ändern ---- */
:root {
  --akzent: #7d2248;
  --akzent-dunkel: #5e1a36;
  --text: #2b2b2b;
  --text-hell: #5a5a5a;      /* statt #777: besserer Kontrast (WCAG AA) */
  --linie: #e3e3e3;
  --flaeche: #ffffff;
  --seitenhintergrund: #eaf4f4;
  --fokus: #0b6ea8;
  --radius: 8px;
  --rand: clamp(1rem, 4vw, 2.5rem);   /* seitlicher Abstand, wächst mit der Breite */
}

/* ---------- 2. Grundlagen ---------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--seitenhintergrund);
  background-attachment: scroll;     /* "fixed" ruckelt auf Smartphones */
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;                /* verhindert seitliches Wackeln */
}
img, video, svg, iframe, embed, object {
  max-width: 100%;
}
img, video {
  height: auto;
}
iframe {
  border: 0;
}
table {
  max-width: 100%;
}

/* ---------- 3. Typografie: fließende Größen, gut lesbare Zeilenlänge ---------- */
#main p,
#main .row {
  font-weight: 400;                  /* Roboto Light 300 ist auf Handys zu dünn */
}
h1,
#main h1 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.2rem); line-height: 1.2; }
#main h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); line-height: 1.25; }
#main h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.3; }
#main .artikel_details h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); }
#main .artikel_details h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem); }
#main .artikel_details h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }

article p,
aside p,
#mod_dritte_spalte .artikel_content1 {
  text-align: left;                  /* Blocksatz erzeugt auf schmalen Spalten Lücken */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
#main .artikel_details p,
#main .artikel_details li {
  max-width: 70ch;                   /* angenehme Zeilenlänge */
}

/* ---------- 4. Seitenaufbau ------------------------------------------------- */
#content {
  padding-left: var(--rand);
  padding-right: var(--rand);
}
#kopflogo {
  margin: 1rem var(--rand) 0.5rem;
}
#kopflogo img {
  max-width: min(100%, 320px);
}
.artikel_details {
  padding-right: 0;
}
.artikel_details .large-7,
#main .artikel_details .large-7,
#main .large-8 {
  border-right: 0;
  min-height: 0;
}
#sidebar {
  padding-left: var(--rand);
  padding-right: var(--rand);
}

/* Trennlinien zwischen Spalten erst, wenn die Spalten nebeneinander stehen */
@media (min-width: 64.063em) {
  #main .large-8 {
    border-right: 1px solid var(--linie);
  }
  #main .artikel_details .large-7 {
    border-right: 1px solid #ccc;
    min-height: 300px;
  }
  .artikel_details {
    padding-right: 30px;
  }
}

/* Smartphone: Spalten untereinander, nichts schwebt mehr */
@media (max-width: 40em) {
  #sidebar,
  #mod_dritte_spalte,
  #mod_menue_sub {
    float: none;
    width: 100%;
  }
  #mod_sprachwahl {
    position: static;
    text-align: right;
    padding: 0.5rem var(--rand) 0;
  }
  #mod_suchbox {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0.5rem var(--rand);
  }
  .link_poweredbypapoo {
    float: none;
    margin: 1rem 0;
  }
  .subfooter {
    margin-bottom: 2rem;
  }
}

/* ---------- 5. Navigation (Foundation top-bar) ------------------------------ */
.top-bar-section li:not(.has-form) a:not(.button) {
  min-height: 44px;                  /* Touch-Ziel */
  display: flex;
  align-items: center;
}
@media (max-width: 40em) {
  .top-bar,
  .top-bar.expanded,
  .top-bar .title-area,
  .top-bar-section ul {
    background: var(--flaeche);
  }
  .top-bar-section li:not(.has-form) a:not(.button),
  .top-bar-section .has-dropdown a {
    background: var(--flaeche) !important;
    color: var(--text) !important;
    font-size: 1rem;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--linie);
  }
  .top-bar-section li:not(.has-form) a:not(.button):hover,
  .top-bar-section li:not(.has-form) a:not(.button).menuxaktiv_back {
    background: var(--akzent) !important;
    color: #fff !important;
  }
  /* Burger-Symbol sichtbar machen (Foundation färbt es sonst weiß) */
  .top-bar .toggle-topbar.menu-icon a {
    color: var(--text);
  }
  .top-bar .toggle-topbar.menu-icon a span::after {
    box-shadow: 0 0 0 1px var(--text), 0 7px 0 1px var(--text), 0 14px 0 1px var(--text);
  }
}

/* Brotkrumen: eine Zeile, seitlich wischbar statt umbrechen */
#mod_breadcrump {
  padding: 0.5rem var(--rand);
  overflow-x: auto;
  white-space: nowrap;
}

/* ---------- 6. Bildwechsler (Orbit) ------------------------------------------ */
/* Hinweis: Foundation Orbit setzt Höhen per JavaScript. Nach Änderungen testen. */
#mod_bildwechsler {
  max-height: none;
}
.orbit-container .orbit-slides-container img {
  width: 100%;
  object-fit: cover;
}

/* ---------- 7. Teaser und Artikellisten -------------------------------------- */
.cm_teaser_img {
  height: auto;                      /* vorher fix 105px */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.cm_teaser_img img,
.teaselinkcm_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Titel: bis zu 2 Zeilen statt hartem Abschneiden nach einer Zeile */
#mod_dritte_spalte h3,
#main .artikel_content1 h3,
#main .artikel_content1 h2 {
  height: auto;
  line-height: 1.3;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.artikel_liste {
  padding-bottom: 1.5rem;
}
#main .floatbox .teaser img {
  float: none;
  display: block;
}

/* Linkliste */
div.linkitem {
  min-height: 0;
}
.linkbilditem img {
  float: none;
  display: block;
  width: 100%;
  max-width: 250px;
  margin: 0 0 0.5rem;
}
@media (min-width: 40.063em) {
  .linkbilditem img {
    float: right;
    margin: 0 0 5px 10px;
  }
}

/* ---------- 8. Galerie (Pinterest-Stil): Spalten passen sich der Breite an ---- */
#columns {
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: auto;                /* überschreibt die festen 1/3/4 Spalten */
  column-width: 16rem;
  column-gap: 1rem;
}
.pin {
  margin: 0 0 1rem;
  padding: 1rem 1rem 0.5rem;
}

/* ---------- 9. Kalender, Karte, Tabellen -------------------------------------- */
.kalender_front_content {
  overflow-x: auto;                  /* Kalender seitlich wischbar statt Layout sprengen */
}
.kalender_front_content table {
  min-height: 0;
}
.kalender-samstag {
  transform: none;
}
#map_canvas {
  width: 100% !important;            /* überschreibt die festen 370/450px */
  max-width: 100%;
  min-height: 280px;
}

/* ---------- 10. Formulare und Buttons ---------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  font-size: 1rem;                   /* 16px verhindert das Zoomen auf dem iPhone */
  min-height: 44px;
}
#sidebar fieldset,
#formk fieldset,
.formwrap_guest fieldset {
  margin: 0 0 1rem;
  padding: 1rem;
}
.formwrap_guest {
  padding-right: 0;
}

/* Alle Buttons einheitlich (vorher: 3 verschiedene Hover-Farben) */
input[type="submit"],
button.secondary,
#main a.button.secondary,
.button.secondary {
  background-color: var(--akzent);
  border: 1px solid var(--akzent);
  color: #fff;
  border-radius: var(--radius);
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  font-weight: 400;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
button.secondary:hover,
button.secondary:focus-visible,
#main button.secondary:hover,
#main .button.secondary:hover,
#main a.button.secondary:hover,
.button.secondary:hover {
  background-color: var(--akzent-dunkel);
  border-color: var(--akzent-dunkel);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* ---------- 11. Kontrast ------------------------------------------------------- */
.date_article,
#mod_freiemodule_3,
#mod_freiemodule_3 p,
#mod_freiemodule_3 a,
#mod_freiemodule_3 i {
  color: var(--text-hell);
}

/* ---------- 12. Barrierefreiheit --------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
/* Sprunglink ("Zum Inhalt springen") wird bei Tastaturfokus sichtbar */
#menue_sprung:focus-within {
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--flaeche);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 13. Link-Listen im Modul mod_menue_top (Footer / Servicemenü) ---- */
#mod_menue_top li a {
  display: inline-block;
  padding: 0.65rem 0;                /* größere Touch-Fläche, auch bei Zeilenumbruch */
}
#mod_menue_top .ignore {             /* Nummerierung nur für Screenreader */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}