/* Heuwusler München – Menüleiste sichtbar (weißer Text braucht farbigen Grund) */
.container-nav {
    background-color: #6b8e23;
    border-radius: 6px;
    padding: 0 .5rem;
    margin-bottom: 1rem;
}
.container-nav .mod-menu > li > a,
.container-nav .mod-menu > li > .mm-toggler-link,
.container-nav .mod-menu > li > .mm-toggler {
    color: #ffffff;
    font-weight: 600;
}
.container-nav .mod-menu > li > a:hover,
.container-nav .mod-menu > li:hover > a {
    background-color: rgba(255,255,255,.18);
    color: #fff;
}
/* Dropdown-Untermenüs lesbar (dunkler Text auf hell) */
.container-nav .mod-menu .mm-collapse a,
.container-nav .mod-menu ul a { color: #22262a; }

/* Primary-Buttons sichtbar (Cassiopeia-Farbschema liefert Button-Bg nicht -> weiss auf transparent) */
.btn-primary, .button-primary {
    background-color: #6b8e23;
    border-color: #6b8e23;
    color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #5a7a1e;
    border-color: #5a7a1e;
    color: #ffffff;
}
/* Links in den neuesten Beitraegen im Grün der Marke */
.mod-articles-latest a, .mod-articles-latest a:visited { color: #4a6118; }

/* Footer sichtbar (weisse Links brauchen farbigen Grund) */
.container-footer, footer.container-footer {
    background-color: #6b8e23;
    padding: 1.2rem 1rem;
    margin-top: 2rem;
}
.container-footer, .container-footer a, .container-footer a:visited { color: #ffffff; }
.container-footer a:hover { color: #e8f0d8; }

/* Logo zentrieren (wie Prod) */
.container-header .grid-child, .container-header { justify-content: center; text-align: center; }
.container-header .navbar-brand { margin-left: auto; margin-right: auto; float: none; display: inline-block; }
/* Footer-Copyright (wie Prod) */
.container-footer::before {
    content: "\00A9 Heuwusler M\00FCnchen e.V.";
    display: block;
    color: #ffffff;
    margin-bottom: .4rem;
    font-size: .95rem;
}

/* Naeher an Prod: hellgrauer Seitenhintergrund (Prod hat grau, nicht weiss) */
body.site { background-color: #e8e8e8; }
.container-header { background-color: #ffffff; }
/* Gruene Ueberschriften wie Prod */
.page-header h1, .com-content-article__title, h1.page-title,
main h1, .item-page h2, .blog h2 a, .moduletable > h3, .mod-articles-latest ~ * h3,
h3.card-header { color: #6b8e23; }
.page-header h1 { color: #6b8e23; }

/* Menue horizontal wie Prod: Dropdown-Pfeil NEBEN dem Text (nicht darunter), alles in einer Zeile */
.mod-menu_dropdown-metismenu > li.metismenu-item { flex-wrap: nowrap; }
.mod-menu_dropdown-metismenu > li.metismenu-item > a { padding-right: .1rem; white-space: nowrap; }
.mod-menu_dropdown-metismenu > li.metismenu-item > button.mm-toggler {
  width: auto; min-width: 0; height: auto; padding: 0 .2rem 0 0; margin: 0;
  display: inline-flex; align-items: center;
}

/* KORREKTUR: metismenu setzt li auf flex-direction:column -> Pfeil landet UNTER dem Text. Auf row zwingen: */
.mod-menu_dropdown-metismenu > li.metismenu-item { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; }
.mod-menu_dropdown-metismenu > li.metismenu-item > button.mm-toggler { align-self: center; }
/* Submenu weiterhin als Overlay (nicht inline in der Zeile) */
.mod-menu_dropdown-metismenu > li.metismenu-item > ul.mm-collapse { position: absolute; }

/* Menue kompakter, damit alle 10 Punkte in eine Zeile passen (Breite 1406->~1200px) */
.mod-menu_dropdown-metismenu > li.metismenu-item > a {
  font-size: .92rem; padding-left: .5rem; padding-right: .25rem;
}
.mod-menu_dropdown-metismenu > li.metismenu-item > button.mm-toggler { padding: 0 .35rem 0 0; }

/* Menue noch kompakter + hoehere Spezifitaet, damit die Zeile <=1280px bleibt */
.container-nav .mod-menu_dropdown-metismenu > li.metismenu-item > a {
  font-size: .8rem !important; padding: .4rem !important; padding-right: .15rem !important; letter-spacing: 0 !important;
}
.container-nav .mod-menu_dropdown-metismenu > li.metismenu-item > button.mm-toggler { padding: 0 .25rem 0 0 !important; }

/* Suchbox nach oben rechts in den weissen Kopf (wie Prod), raus aus der gruenen Leiste */
.container-header { position: relative; }
.container-search { position: absolute; top: 1.1rem; right: 1.5rem; z-index: 5; margin: 0; width: auto; }
.container-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Label visuell aus (nur Eingabefeld wie Prod) */
.container-search input[type=search], .container-search .form-control { max-width: 200px; }

/* Grauer Content-Hintergrund bis zur Mitte der Menueleiste hochziehen (weisser Streifen unter dem Menue weg) */
.container-header { background: linear-gradient(to top, #e8e8e8 53px, #ffffff 53px) !important; }
/* Suchfeld buendig an die rechte Container-Kante statt am Viewport-Rand */
.container-search { right: 16px; }

/* Footer wie Prod: EINE kompakte Zeile - Copyright links, Menue rechts horizontal mit Trennstrich */
.container-footer, footer.container-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .4rem 1.5rem; padding: .75rem 2rem !important; margin-top: 2rem;
}
.container-footer::before { display: inline-block !important; margin: 0 !important; order: 0; }
.container-footer > .grid-child { order: 1; margin: 0; width: auto; }
.container-footer ul.mod-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.container-footer ul.mod-menu > li { display: inline-flex; align-items: center; }
.container-footer ul.mod-menu > li + li::before {
  content: ""; display: inline-block; width: 1px; height: 1em; background: rgba(255,255,255,.6); margin: 0 1rem;
}

/* Footer-Menue in EINER Zeile halten (Impressum | Kontakt nebeneinander) */
.container-footer > .grid-child { flex: 0 0 auto; white-space: nowrap; }
.container-footer ul.mod-menu { flex-wrap: nowrap !important; white-space: nowrap; }

/* Footer-Menue: Cassiopeia setzt .mod-menu auf flex-direction:column -> auf row zwingen */
.container-footer ul.mod-menu { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; }

/* Suchfeld + Footer buendig an die zentrierte Container-Kante (Grid-Container = 1352px), nicht am Viewport-Rand */
.container-search { right: max(16px, calc((100% - 1352px) / 2)) !important; }
.container-footer, footer.container-footer {
  padding-left: max(1rem, calc((100% - 1352px) / 2)) !important;
  padding-right: max(1rem, calc((100% - 1352px) / 2)) !important;
}

/* ================= MENUE SAUBER: Hover / Aktiv / Pfeil / Dropdown ================= */
/* Haupt-Links: konsistente Groesse, kein Unterstrich, Pill-Radius */
.mod-menu.mod-menu_dropdown-metismenu > li > a {
  font-size: .8rem !important; font-weight: 600; padding: .4rem .55rem !important;
  text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; border-radius: 5px;
}
.mod-menu.mod-menu_dropdown-metismenu > li { border-radius: 5px; transition: background .12s ease; }

/* Alten grauen Hover-Kasten auf a/button entfernen */
.mod-menu a:hover, .mod-menu a:focus, .mod-menu .mm-toggler:hover, .mod-menu .mm-toggler:focus { background: transparent !important; }

/* Aktiv (aktuelle Seite): dezent dunklerer Pill */
.mod-menu.mod-menu_dropdown-metismenu > li.current,
.mod-menu.mod-menu_dropdown-metismenu > li.active { background: rgba(0,0,0,.20); }
.mod-menu.mod-menu_dropdown-metismenu > li.current > a,
.mod-menu.mod-menu_dropdown-metismenu > li.active > a { text-decoration: none !important; }
/* Hover: hellerer Pill (gewinnt ueber Aktiv) */
.mod-menu.mod-menu_dropdown-metismenu > li:hover { background: rgba(255,255,255,.18); }

/* Fokus: kein haesslicher Maus-Outline, aber sichtbar bei Tastatur */
.mod-menu a:focus:not(:focus-visible), .mod-menu .mm-toggler:focus:not(:focus-visible) { outline: none !important; }
.mod-menu a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Pfeil klein, sauber, vertikal zentriert; dreht bei geoeffnetem Dropdown */
.mod-menu.mod-menu_dropdown-metismenu > li > button.mm-toggler {
  width: auto !important; min-width: 0 !important; height: auto !important;
  padding: 0 .4rem 0 .1rem !important; background: transparent !important; align-self: center;
}
.mod-menu.mod-menu_dropdown-metismenu > li > button.mm-toggler::before { content: none !important; border: 0 !important; }
.mod-menu.mod-menu_dropdown-metismenu > li > button.mm-toggler::after {
  content: "" !important; display: inline-block !important; width: 0 !important; height: 0 !important; margin: 0 !important;
  border-left: 4px solid transparent !important; border-right: 4px solid transparent !important;
  border-top: 5px solid currentColor !important; border-bottom: 0 !important; transition: transform .12s ease;
}
.mod-menu.mod-menu_dropdown-metismenu > li:hover > button.mm-toggler::after { transform: rotate(180deg); }

/* Dropdown-Panel: gleiche Schriftgroesse wie Hauptmenue, klare Hover-Highlights */
.mod-menu ul.mm-collapse {
  border-radius: 6px; border: 1px solid #e3e3e3; padding: .3rem 0 !important; margin-top: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}
.mod-menu ul.mm-collapse a {
  font-size: .8rem !important; font-weight: 500 !important; color: #333 !important;
  padding: .45rem .95rem !important; display: block !important; text-decoration: none !important; border-radius: 0 !important;
}
.mod-menu ul.mm-collapse li { border-radius: 0 !important; }
.mod-menu ul.mm-collapse li:hover > a, .mod-menu ul.mm-collapse a:hover, .mod-menu ul.mm-collapse a:focus {
  background: #eef3e4 !important; color: #4a6118 !important;
}

/* Dropdown auf Desktop per Hover oeffnen (Klick bleibt Fallback fuer Touch/Tastatur) */
@media (hover: hover) and (min-width: 992px) {
  .mod-menu.mod-menu_dropdown-metismenu > li.parent:hover > ul.mm-collapse,
  .mod-menu.mod-menu_dropdown-metismenu > li.deeper:hover > ul.mm-collapse { display: block !important; }
}

/* ===== SCEditor modernes Restyling (Heuwusler, 2026-09) ===== */
.sceditor-container{border:1px solid #cdddc0!important;border-radius:10px!important;overflow:hidden!important;box-shadow:0 1px 4px rgba(0,0,0,.07)!important;}
div.sceditor-toolbar{background:#f4f8ef!important;border-bottom:1px solid #e2ebd6!important;padding:7px 8px!important;box-shadow:none!important;display:flex;flex-wrap:wrap;gap:2px;}
.sceditor-group{background:none!important;border:none!important;border-right:1px solid #e4ecda!important;box-shadow:none!important;margin:2px 6px 2px 0!important;padding:0 6px 0 0!important;}
.sceditor-group:last-child{border-right:none!important;}
.sceditor-button{border-radius:7px!important;margin:1px!important;background:transparent!important;border:none!important;width:26px!important;height:26px!important;}
.sceditor-button div,.sceditor-button svg{filter:grayscale(1) opacity(.55)!important;transition:filter .15s,background .15s;}
.sceditor-button:hover{background:#e4efd7!important;}
.sceditor-button:hover div,.sceditor-button:hover svg{filter:grayscale(0) opacity(1)!important;}
.sceditor-button.active{background:#6b8e23!important;}
.sceditor-button.active div{filter:brightness(0) invert(1)!important;}
.sceditor-container textarea,.sceditor-container iframe{padding:8px!important;}
/* ===== Ende SCEditor Restyling ===== */

/* ===== SCEditor mobil bedienbar (Heuwusler, 2026-09-21) =====
   BEFUND (gemessen bei 360x800, eingeloggt, auf /reply):
   33 Toolbar-Knoepfe brachen in 9 Zeilen um, die Toolbar war 361 px hoch - hoeher als
   der Container (288 px). SCEditor rechnet Schreibflaeche = Containerhoehe minus
   Toolbarhoehe, es blieben 17 px, und die lagen zusammen mit dem Kopieren-Knopf
   ausserhalb des durch overflow:hidden beschnittenen Bereichs. Ergebnis: Man sah nur
   Werkzeugknoepfe und konnte nichts eintippen.

   NICHT GEWAEHLT: Toolbar in eine wischbare Zeile. Das funktioniert zwar, blaeht aber
   den Container auf ueber 1700 px auf, wodurch die ganze Seite seitlich scrollt - der
   Layout-Viewport waechst dann auf 1440 px und Breitenangaben in Prozent laufen ins
   Leere. Wurde getestet und wieder verworfen.

   GEWAEHLT: Toolbar umbrechen lassen (nichts wird zu breit), Container mitwachsen
   lassen, Schreibflaeche feste Hoehe geben, und die auf dem Handy entbehrlichen
   Gruppen ausblenden. Die Auswahl erfolgt ueber den INHALT der Gruppe, nicht ueber
   ihre Position - so verrutscht nichts, wenn Kunena die Toolbar umsortiert.
   Ausgeblendet: Ausrichtung, Schriftart/Groesse/Farbe, Social-Einbettungen.
   Sichtbar bleiben 20 Knoepfe inkl. Ausschneiden/Kopieren/Einfuegen. */
@media (max-width: 767px) {
  .sceditor-container {
    height: auto !important;
    overflow: visible !important;
  }
  div.sceditor-toolbar {
    flex-wrap: wrap !important;
    gap: 2px !important;
    padding: 4px !important;
  }
  .sceditor-group {
    margin: 0 2px 0 0 !important;
    padding: 0 2px 0 0 !important;
    border-right: none !important;
  }
  /* 26 px waren auf dem Touchscreen nicht zu treffen; Richtwert ist 44 px */
  .sceditor-button {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }
  .sceditor-container textarea,
  .sceditor-container iframe {
    height: 240px !important;
    min-height: 240px !important;
    /* SCEditor gibt dem iframe 5 px Rand je Seite. Mit width:100% ergibt das
       256 + 2x5 = 266 px in einem 258 px breiten Container: die Schreibflaeche
       schiebt sich rechts ueber die gruene Rahmenlinie und verdeckt sie.
       Auf dem Desktop faellt das nicht auf, weil der Container dort
       overflow:hidden hat und den Ueberstand abschneidet.
       Deshalb die 10 px Rand aus der Breite herausrechnen. */
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    box-sizing: border-box !important;
  }
  /* Auf dem Handy entbehrliche Gruppen, ueber ihren Inhalt adressiert */
  .sceditor-group:has([data-sceditor-command="left"]),
  .sceditor-group:has([data-sceditor-command="font"]),
  .sceditor-group:has([data-sceditor-command="map"]) {
    display: none !important;
  }
}
/* ===== Ende SCEditor mobil ===== */

/* ===== Lange URLs umbrechen (Heuwusler, 2026-09-21) =====
   Auf der Startseite stand ein Facebook-Link als Klartext im Artikel:
   "www.facebook.com/heuwusler.muenchen" — 371 px breit bei 360 px Viewport.
   Eine URL ohne Leerzeichen gilt als EIN Wort und wird bei overflow-wrap:normal
   nicht umbrochen; die Seite wurde dadurch 393 px breit und scrollte seitlich.
   Gilt bewusst nur fuer Fliesstext-Bereiche, nicht global — sonst brechen
   Navigation und Tabellen an unerwuenschten Stellen um. */
.com-content-article__body,
.com-content-article__body a,
.blog .com-content-article__body,
.item-page a,
#kunena .kmsgtext,
#kunena .kmsgtext a {
  overflow-wrap: anywhere;
}
/* ===== Ende lange URLs ===== */

/* Suchfeld breiter, damit der Platzhalter hineinpasst.
   Der Platzhalter lautet seit 23.09.2026 "Website durchsuchen …" (Sprachoverride
   MOD_FINDER_SEARCH_VALUE) — er stellt klar, dass die Joomla-Suche nur die Website
   durchsucht, nicht das Forum. Gemessen: Text 193 px, Feld bot innen nur 168 px,
   der Text wurde also abgeschnitten. 240 px reichen (innen dann 202 px).

   BEWUSST erst ab 576 px: Das Suchfeld liegt absolut positioniert im Kopfbereich und
   ueberlagert auf schmalen Schirmen das Logo. Diese Ueberlagerung gab es schon vorher
   mit 200 px; ein breiteres Feld wuerde sie verstaerken. Unterhalb von 576 px bleibt
   es deshalb bei 200 px — der Platzhalter wird dort abgeschnitten, was hinnehmbar ist,
   weil "Website durchsuche…" die Aussage noch traegt. */
@media (min-width: 576px) {
  .container-search input[type=search],
  .container-search .form-control { max-width: 240px; }
}