/* ============================================================
   Mudenbach-Archiv - Responsive-Nachruestung
   Version: v14 - 2026-09-01
   Wird NACH assets/css/*.css geladen. Neutralisiert die
   handgeschriebenen Regeln, die Contaos Responsive-Layout aushebeln.
   ============================================================ */

img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* ============================================================
   Lange Woerter und URLs umbrechen - auf ALLEN Breiten.
   Die Startseite enthaelt ASCII-Trennlinien aus 65-68
   Gleichheitszeichen und eine 80 Zeichen lange Ticket-URL.
   Ohne diese Regel schiebt das den Desktop-Umbruch um 210px
   auf und erzeugt einen waagerechten Scrollbalken.
   ============================================================ */
#main, #left, .mod_article, .ce_text {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================================
   Impressum und Datenschutzerklaerung
   Die alten Seiten formatierten Ueberschriften per
   <span style="font-size:14pt">. Die neuen nutzen echte
   Ueberschriften - hier bekommen sie ihr Aussehen.
   ============================================================ */
.rechtstext h2 {
  font: bold 20px/1.3 Verdana, sans-serif;
  color: #3d5423; margin: 0 0 4px;
}
.rechtstext .rechtstext-unter {
  font-size: 11px; color: #6b7360; margin: 0 0 20px;
  padding-bottom: 12px; border-bottom: 1px solid #d8ddcd;
}
.rechtstext h3 {
  font: bold 14px/1.35 Verdana, sans-serif;
  color: #23301a; margin: 24px 0 7px;
}
.rechtstext h4 {
  font: bold 12.5px/1.35 Verdana, sans-serif;
  color: #23301a; margin: 15px 0 5px;
}
.rechtstext p  { margin: 0 0 10px; line-height: 1.65; }
.rechtstext ul { margin: 8px 0 12px; padding-left: 20px; }
.rechtstext li { margin-bottom: 5px; line-height: 1.6; }
.rechtstext .rechtstext-adresse {
  background: #f0f4e8; border-left: 3px solid #a8b394;
  padding: 11px 15px; margin: 6px 0 12px; line-height: 1.7;
}
.rechtstext .rechtstext-verweis {
  margin-top: 26px; padding-top: 14px;
  border-top: 1px solid #d8ddcd; font-weight: bold;
}

@media (max-width: 767px) {
  .rechtstext h2 { font-size: 22px !important; }
  .rechtstext h3 { font-size: 17px !important; margin-top: 26px; }
  .rechtstext h4 { font-size: 16px !important; }
  .rechtstext .rechtstext-unter { font-size: 13px !important; }
}

/* ============================================================
   Aktiver Menuepunkt und Uebersichtslisten
   (gesetzt von menue_und_leerseiten.py)

   Contao rendert den Punkt der gerade geoeffneten Seite als leeres
   <li> - der Titel fehlt also im Markup und der Eintrag verschwand
   aus dem Menue. Er wird nachgetragen und hier so gesetzt, dass er
   wie die anderen Eintraege sitzt, aber als aktueller erkennbar ist.
   ============================================================ */
.mod_navigation .aktiv-titel {
  display: block;
  color: #2f4a16;
  font-weight: bold;
  cursor: default;
}

/* Uebersicht auf Sammelseiten ohne eigenen Inhalt */
.unterseiten {
  margin: 4px 0 24px;
}
.unterseiten h2 {
  font-size: 15px;
  margin: 0 0 10px;
  color: #3d5423;
}
.unterseiten ul {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid #d8ddcd;
}
.unterseiten li { margin: 0; }
.unterseiten li a {
  display: block;
  padding: 9px 4px;
  border-bottom: 1px solid #e7eade;
  text-decoration: none;
}
.unterseiten li a:hover { background: #f2f5ec; text-decoration: underline; }
.unterseiten ul ul { border-top: 0; margin-left: 18px; }

/* ============================================================
   Archiv-Hinweis auf der Startseite
   (wird von startseite_hinweis.py eingesetzt)
   ============================================================ */
#archiv-intro {
  background: #f0f4e8;
  border: 1px solid #c4d3a8;
  border-left: 5px solid #4a6b2a;
  border-radius: 0 4px 4px 0;
  padding: 18px 22px;
  margin: 0 0 22px;
  font-family: Verdana, sans-serif;
  color: #23301a;
  line-height: 1.6;
}
#archiv-intro h2 {
  margin: 0 0 10px;
  font-size: 19px;
  color: #3d5423;
  font-weight: bold;
}
#archiv-intro p { margin: 0 0 10px; font-size: 13px; }
#archiv-intro p:last-child { margin-bottom: 0; }
#archiv-intro a { color: #3d5423; font-weight: bold; }
#archiv-intro .archiv-intro-dank {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #d5e0c0;
  font-style: italic; color: #4e5c40;
}

/* Einordnung ueber dem alten Grusswort */
.archiv-einordnung {
  background: #f5f5f0;
  border-left: 3px solid #a8b394;
  padding: 9px 14px;
  margin: 0 0 14px;
  font-size: 12px !important;
  font-style: italic;
  color: #55604a;
  line-height: 1.5;
}

@media (max-width: 767px) {
  #archiv-intro { padding: 15px 16px; margin-bottom: 18px; }
  #archiv-intro h2 { font-size: 19px !important; }
  #archiv-intro p { font-size: 15px !important; }
  .archiv-einordnung { font-size: 14px !important; }
}

/* ============================================================
   Archiv-Banner (wird von seiten_aufraeumen.py eingesetzt)
   Ordnet die Seite ein: Archivstand, nicht amtlich.
   ============================================================ */
#archiv-banner {
  background: #3d5423;
  color: #f2f5ec;
  font: 13px/1.5 Verdana, sans-serif;
  padding: 9px 16px;
  text-align: center;
}
#archiv-banner strong { color: #fff; letter-spacing: .02em; }
#archiv-banner a { color: #c3e59a; text-decoration: underline; }
#archiv-banner a:hover { color: #fff; }

@media (max-width: 767px) {
  #archiv-banner { font-size: 13px !important; padding: 10px 14px; text-align: left; }
}


#navToggle { display: none; }

/* ============================================================
   MOBIL  (bis 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* -- 1. Die Saboteur-Regeln neutralisieren -- */
  #header    { width: auto !important; max-width: 100% !important;
               left: 0 !important; top: 0 !important; height: auto !important; }
  #mb_header { display: none !important; }
  #mb_header_bg { display: none !important; }
  #left      { left: 0 !important; margin-left: 0 !important; right: 0 !important;
               width: auto !important; float: none !important; }
  #footer    { margin-left: 0 !important; text-align: left !important;
               height: auto !important; margin-top: 16px; }
  #wrapper   { width: auto !important; margin: 0 !important; }
  #container { padding-left: 0 !important; padding-right: 0 !important; }
  #main      { float: none !important; width: auto !important; }

  /* -- 2. Inhaltsbloecke: feste 700px aufloesen -- */
  .mod_article, .ce_text, #main div, #main p, #main ul, #main ol {
    width: auto !important; max-width: 100% !important; }
  .mod_article { padding-top: 12px !important; }

  /* -- 3. Logo -- */
  #mb_logo { position: static !important; width: auto !important;
             padding: 10px 12px !important; }
  #mb_logo img { width: auto !important; max-width: 70% !important; height: auto; }

  /* -- 4. Hintergrundbild spart Daten -- */
  body { background-image: none !important; margin-bottom: 0; background: #fff; }

  /* -- 5. Lesbare Schrift statt 12px -- */
  body, div, p, li, td, th, ul, ol, label, input, select, textarea {
    font-size: 16px !important; line-height: 1.55 !important; }
  #main .inside, #left .inside, #footer .inside { padding: 12px !important; }
  h1 { font-size: 24px !important; } h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }

  /* -- 6. Kopfbild -- */
  #header .inside { padding: 0 !important; }
  #header img { width: 100% !important; height: auto !important; display: block; }

  /* -- 7. Hamburger-Button -- */
  #navToggle {
    display: block; width: 100%; box-sizing: border-box;
    padding: 14px 16px; margin: 0;
    font: 600 17px/1.2 Verdana, sans-serif; text-align: left;
    background: #4a6b2a; color: #fff; border: 0; cursor: pointer;
  }
  #navToggle::before { content: "\2630\00a0\00a0"; }
  #navToggle[aria-expanded="true"]::before { content: "\2715\00a0\00a0"; }

  /* -- 8. Navigation: eingeklappt, Superfish-Hover abschalten --

     Wichtig ist die Reihenfolge: Contao schreibt den Inhalt (#main)
     VOR die Navigation (<aside id="left">) und zieht die Spalte auf
     dem Desktop per negativem Rand nach links. Sobald hier die
     Umfluesse aufgehoben werden, greift die Quelltext-Reihenfolge -
     und Menuetaste samt Navigation landen unter dem Inhalt.
     Mit einer Flex-Spalte und order drehen wir das um.                */
  #container {
    display: flex !important;
    flex-direction: column;
  }
  #navToggle { order: -2; }
  #left      { order: -1; }
  #main      { order: 0; }

  #left { display: none; }
  #left.nav-offen { display: block; }
  #left .mod_navigation { width: auto !important; }
  #left ul.sf-menu, #left ul.sf-menu ul {
    position: static !important; width: auto !important;
    float: none !important;
    margin: 0 !important; padding: 0 !important;
    list-style: none !important; box-shadow: none !important;
  }
  /* Nur die erste Ebene ist offen. Untermenues erscheinen erst auf
     Tastendruck - sonst stehen hier 201 Links untereinander. */
  #left ul.sf-menu       { display: block !important; }
  #left ul.sf-menu ul    { display: none !important; }
  #left ul.sf-menu li.auf > ul { display: block !important; }

  #left ul.sf-menu li {
    position: relative !important; float: none !important;
    width: auto !important; display: block !important;
  }

  /* Aufklapp-Taste rechts am Eintrag */
  #left .nav-auf {
    position: absolute; top: 0; right: 0;
    width: 52px; height: 46px;          /* bequemes Tippziel */
    border: 0; background: transparent;
    border-left: 1px solid rgba(0,0,0,.10);
    cursor: pointer; padding: 0;
  }
  #left .nav-auf::before {
    content: "";
    display: block; margin: 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid #3d5423;
    border-bottom: 2px solid #3d5423;
    transform: rotate(45deg);           /* Pfeil nach unten */
    transition: transform .15s ease;
  }
  #left li.auf > .nav-auf::before { transform: rotate(-135deg); }
  #left .nav-auf:focus-visible { outline: 2px solid #3d5423; outline-offset: -2px; }

  /* Platz fuer die Taste, damit lange Titel nicht darunterlaufen */
  #left ul.sf-menu li > a { padding-right: 60px !important; }

  /* Der nachgetragene Titel sitzt wie ein Link, nur ohne Verweis */
  #left ul.sf-menu .aktiv-titel {
    display: block !important;
    padding: 13px 60px 13px 16px !important;
    border-bottom: 1px solid rgba(0,0,0,.12) !important;
    font-size: 16px !important; line-height: 1.35 !important;
    background: rgba(61,84,35,.07);
  }
  #left ul.level_2 .aktiv-titel { padding-left: 32px !important; font-size: 15px !important; }
  #left ul.level_3 .aktiv-titel { padding-left: 48px !important; font-size: 15px !important; }
  .unterseiten li a { padding: 12px 4px !important; font-size: 16px !important; }
  #left ul.sf-menu a {
    display: block !important; float: none !important;
    width: auto !important; box-sizing: border-box;
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(0,0,0,.12) !important;
    font-size: 16px !important; line-height: 1.35 !important;
    text-decoration: none;
  }
  #left ul.level_2 a { padding-left: 32px !important; font-size: 15px !important; }
  #left ul.level_3 a { padding-left: 48px !important; font-size: 15px !important; }
  #left ul.level_2 { background: rgba(0,0,0,.04); }
  #left ul.level_3 { background: rgba(0,0,0,.07); }

  /* -- 9. FOTOGALERIE: tn3 laeuft auf Mobil nicht, die rohe
        Bildliste wird zum responsiven Raster -- */
  .mygallery, .tn3.album { width: auto !important; height: auto !important;
                           position: static !important; background: none !important; }
  .mygallery ol {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
  }
  .mygallery ol li {
    width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    float: none !important; position: static !important; display: block !important;
  }
  .mygallery figure.image_container { margin: 0 !important; padding: 0 !important; }
  .mygallery ol li img {
    width: 100% !important; height: auto !important;
    display: block; aspect-ratio: 4/3; object-fit: cover;
  }
  /* Dateinamen als Bildunterschrift ausblenden - stoert nur */
  .mygallery .tn3.description { display: none !important; }

  /* Falls tn3 doch startet: Reste baendigen */
  .tn3-gallery, .tn3-image, .tn3-albums, .tn3-inalbums, .tn3-controls-bg {
    max-width: 100% !important; width: auto !important; }

  /* -- 10. Contao-Galerien -- */
  #main .ce_gallery ul, #main .mod_gallery ul {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important; margin: 0 !important; padding: 0 !important;
    list-style: none !important;
  }
  #main .ce_gallery li, #main .mod_gallery li {
    float: none !important; width: auto !important;
    margin: 0 !important; padding: 0 !important; height: auto !important;
  }
  #main .ce_gallery li img, #main .mod_gallery li img { width: 100% !important; height: auto !important; }

  /* -- 11. Tabellen scrollbar statt Layout sprengen -- */
  #main table { display: block !important; max-width: 100% !important;
                overflow-x: auto !important; width: auto !important; }

  /* -- 13. Slider/Splash unnoetig -- */
  #splash, #slider-list { display: none !important; }

  /* -- 14. Eingebettete Videos (YouTube): Seitenverhaeltnis wahren -- */
  #main iframe, #main embed, #main object, #main video {
    width: 100% !important; max-width: 100% !important; height: auto !important;
    aspect-ratio: 16 / 9;   /* wird per JS aus width/height praezisiert */
  }

  /* -- 15. Inline-Breiten im Inhalt aushebeln -- */
  #main [style*="width"] { max-width: 100% !important; }

  /* -- 16. Formularfelder nie breiter als der Bildschirm -- */
  #main input, #main textarea, #main select, #main button,
  #main fieldset, #main .widget {
    max-width: 100% !important; box-sizing: border-box !important;
  }
  #main textarea { width: 100% !important; }
}

/* ============================================================
   TABLET  (768px - 991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
  #wrapper   { width: auto !important; margin: 0 12px !important; }
  #header    { width: auto !important; left: 0 !important; }
  /* Absolut positioniert - mit fester Breite ragt es ueber den
     12px-Rand des Wrappers hinaus. left/right statt width. */
  #mb_header { width: auto !important; left: 0 !important; right: 0 !important; }
  #container { padding-left: 200px !important; }
  #left      { width: 200px !important; right: 200px !important; left: 0 !important; }
  #footer    { margin-left: 200px !important; }
  .mod_article { width: auto !important; max-width: 100% !important; }
}

/* ============================================================
   ZUM SEITENANFANG

   Durch das Einbauen der "Weiterlesen"-Artikel sind manche Seiten
   sehr lang geworden - die Wandergruppe traegt jetzt 36 Artikel
   auf einer Seite. Ohne Rueckweg muesste man sich nach oben
   zurueckwischen, und auf dem Handy sitzt das Menue ganz oben.

   Der Knopf erscheint erst nach 400px Rollweg, damit er auf
   kurzen Seiten nicht im Weg steht. Angelegt wird er von
   responsive.js - so bleiben die 21.000 HTML-Dateien unberuehrt.
   ============================================================ */
#nach-oben {
  position: fixed !important;
  right: 16px; bottom: 16px; z-index: 900;
  width: 46px; height: 46px; box-sizing: border-box; padding: 0;
  background: #4a6b2a !important; color: #fff !important;
  border: 0; border-radius: 4px;
  font: 400 24px/46px Verdana, sans-serif !important;
  text-align: center; text-decoration: none !important;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .18s linear, visibility .18s linear;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
#nach-oben::before { content: "\2191"; }
#nach-oben.sichtbar { opacity: .85; visibility: visible; }
#nach-oben:hover, #nach-oben:focus { opacity: 1 !important; color: #fff !important; }
#nach-oben:focus { outline: 2px solid #fff; outline-offset: -4px; }

/* Der Rahmen bekommt beim Sprung nur den Fokus, keinen Rand. */
#wrapper:focus { outline: none !important; }

@media (max-width: 767px) {
  #nach-oben { right: 12px; bottom: 12px; width: 44px; height: 44px;
               font: 400 22px/44px Verdana, sans-serif !important; }
}

/* Ab 992px ist der Inhalt eine feste, mittige Spalte von 992px.
   Ein am Fensterrand klebender Knopf sitzt dann nicht beim Text,
   sondern auf dem Hintergrundbild - auf einem 1600px-Schirm gut
   230px daneben. Hier wird er deshalb an die rechte Kante der
   Inhaltsspalte gerechnet:

       halbe Fensterbreite - halbe Spaltenbreite   = Aussenrand
       davon 16px wieder hinein                    = 50% - 480px

   max() faengt Fenster ab, die schmaler als die Spalte sind -
   sonst rutschte der Knopf aus dem Bild.                          */
@media (min-width: 992px) {
  #nach-oben { right: max(16px, calc(50% - 480px)); }
}

/* Dazwischen hat der Rahmen 12px Rand (siehe #wrapper oben), sonst
   blieben vom Abstand zur Textkante nur 4px uebrig. */
@media (min-width: 768px) and (max-width: 991px) {
  #nach-oben { right: 28px; }
}

@media print { #nach-oben { display: none !important; } }