/* Platz fuer eigene Ergaenzungen. Diese Datei wird bei Template-Aktualisierungen
   nicht ueberschrieben und immer zuletzt geladen. */

/* ---------- Korrekturen Handy/Tablet (WES, 28.09.2026) ---------- */

/* Joomla laedt keine Icon-Schrift: Pfeil der Untermenue-Knoepfe als Zeichen. */
.navigation_top .mod-menu__toggle-sub .icon-chevron-down::before{content:"\25BE"}
.navigation_top .mod-menu__toggle-sub .icon-chevron-down{display:inline-block;font-style:normal;font-size:1.3em;transition:transform .2s}
.navigation_top .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down{transform:rotate(180deg)}

/* Lange Links und E-Mail-Adressen duerfen umbrechen statt seitlich
   ueberzustehen. */
#inhalt a,#inhalt joomla-hidden-mail{overflow-wrap:anywhere}

/* Tablet quer: die Menueleiste bleibt einzeilig. */
@media (min-width:821px) and (max-width:1100px){
  .navigation_top{width:100%}
  .navigation_top .mod-menu > li > a{padding:0 8px;font-size:.92em}
}

@media (max-width:820px){
  /* body ist ein Flex-Container - ohne Breite schrumpft die Leiste
     auf ihren Inhalt und steht schmal in der Mitte. */
  .navigation_top{width:100%}
  /* Drei Balken uebereinander, Beschriftung daneben. */
  .nav-toggle{display:grid;grid-template-columns:24px auto;grid-template-rows:repeat(3,3px);row-gap:5px;column-gap:12px;justify-content:start;align-content:center}
  .nav-toggle-bar{grid-column:1}
  .nav-toggle-bar:nth-child(2){grid-row:2}
  .nav-toggle-bar:nth-child(3){grid-row:3}
  .nav-toggle-bar+.nav-toggle-bar{margin-top:0}
  .nav-toggle-label{grid-column:2;grid-row:1 / 4;align-self:center;margin-left:0}
  /* Trennlinie auch ueber dem Aufklapp-Knopf, damit sie durchgeht. */
  .navigation_top .mod-menu__toggle-sub{border-top:1px solid rgba(255,255,255,.5);min-width:52px}
}

@media (max-width:620px){
  /* Blocksatz reisst auf schmalen Schirmen grosse Luecken. */
  .item-page .intro,.intro,
  .boxen-grid .modul p:not(.Mehr_erfahren),
  #inhalt > .inhalt2 > .modul p{text-align:left}
  /* Im Editor gesetzter Blocksatz (Inline-Stil) - nur hier ueberstimmt. */
  #inhalt [style*="justify"]{text-align:left !important}
  /* Kleine Bilder links weiter umfliessen, grosse rechts als eigener Block. */
  .imglinks{float:left;margin:0 12px 8px 0;max-width:35%;height:auto}
  .imgrechts{display:block;max-width:100%;height:auto;margin:0 auto 12px}
}

/* Gaestegalerie: bei 9 Bildern bleiben 3 Spalten, sonst steht das letzte allein. */
@media (max-width:480px){
  .wes-bildraster .gaeste-grid{grid-template-columns:repeat(var(--wes-spalten,3),1fr)}
}

/* Bewertungs-Knoepfe: Schriftkontrast nach WCAG (vorher 1,9:1 bzw. 4,2:1). */
.btn-google{color:var(--schwarz)}
.btn-fb{background:#1464d6}