@charset "UTF-8";
/* CSS Document */
@font-face {
   font-family: "FS Me W01 Light";
   src: url("../fonts/5963814/4ff257e8-b47e-482e-9fe1-69c0f5e814a2.woff2") format("woff2"), url("../fonts/5963814/566917f7-b819-43e4-a102-831d1b77c970.woff") format("woff");
}
@font-face {
   font-family: "FS Me W01 Regular";
   src: url("../fonts/5963851/dd00d9f2-4364-410c-a230-c80aa01f79eb.woff2") format("woff2"), url("../fonts/5963851/7b1c030f-d5e1-4313-afd9-2a8747e861e2.woff") format("woff");
}
@font-face {
   font-family: "FS Me W01 Bold";
   src: url("../fonts/5963870/7b88d3d2-f039-4460-98fc-47c718ce0379.woff2") format("woff2"), url("../fonts/5963870/de2ab461-3fb8-4c23-8138-46aeeb0c2f57.woff") format("woff");
}
:root {
   /* Titelbilder und Wellen skalieren bis 1024 px Breite mit (darüber wie bisher 800/200 px) */
   --held: min(78.125vw, 800px);
   --welle: min(19.53vw, 200px);
}
html {
   background-color: #4C7D9F;
}
body {
   font-family: "FS Me W01 Regular", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
   max-width: 1024px;
   align-content: center;
   background-color: #fff;
   margin: 0 auto;
   padding: 0;
}
div#header, p#footer {
   text-align: left;
   width: calc(100% - 20px);
   padding: 10px;
   margin: 0px auto;
}
#header {
   text-align: left;
   padding: 0;
   margin: 0 auto;
   background-color: #fedb67;
}
#header, #inhalt, #footer {
   width: 100%;
   max-width: 1024px;
   margin: 0px auto;
   padding: 0px;
}
#inhalt {
   padding: 0px;
   margin: 0 auto;
}
#inhalt a {
   color: #3f8238;
}
img.normal {
   max-width: 100%;
}
#inhalt li {
   padding-bottom: 10px;
}
#headerleichtesprache {
   background-color: #3f8238;
   color: white;
   padding: 15px;
   margin: 0px;
   display: none;
    text-align: center;
}
#iconleichtesprache:hover,
#iconvorlesen:hover {
    cursor: pointer;
} 
#iconleichtesprache:hover > #headerleichtesprache {
   display: block;
} 





.hilfevorlesen {
   display: block;
   margin: 0px auto;
   padding: 0px;
   width: 100px;
   height: 50px;
}
.vorlesen {
   display: none;
}
.hilfebutton .hilfevorlesen:hover {
   text-align: center;
   width: 100%;
}
.hilfebutton .hilfevorlesen:hover p.vorlesen {
   display: block;
}
.hilfebutton .hilfevorlesen:hover p.vorlesenbutton {
   display: none;
}
.hilfeleichtesprache {
   display: block;
   margin: 0px auto;
   padding: 0px;
   width: 100px;
   height: 50px;
}
.leichtesprache {
   background-color: #3f8238;
   color: white;
   padding: 15px;
   margin: 10px;
   display: none;
   border-radius: 15px;
}
.hilfebutton .hilfeleichtesprache:hover {
   text-align: center;
   width: 100%;
   height: auto;
}
.hilfebutton .hilfeleichtesprache:hover p.leichtesprache {
   display: block;
}
.hilfebutton .hilfeleichtesprache:hover p.leichtesprachebutton {
   display: none;
}
.hilfebutton {
   margin: 0px auto;
   text-align: center;
   padding: 0px;
}
.hilfebutton img {
   height: 40px;
   margin: 0px;
   padding: 0px;
}




.startseite #box1 {
   margin: 0 auto 0;
   padding: 10px;
   background-color: #576749;
   width: auto;
   color: white;
   text-align: center;
}
.startseite #box1 div.logo {
   text-align: right;
}
.startseite #box1 img {
   height: 100px;
   text-align: right;
}
.startseite #box1 h1 {
   margin: 10px 0 5px;
}
.startseite #box1 h2 {
   font-weight: normal;
   opacity: 0.92;
   margin: 0 0 15px;
}
.startseite #box1bild img {
   z-index: auto;
   object-fit: cover;
   margin: calc(-1 * var(--welle)) 0px 0px 0px;
   width: 100%;
   height: var(--held);
}
.startseite #box2 {
   text-align: center;
   margin: 0 auto 0;
   padding: 1% 5%;
   background-color: white;
   width: auto;
   color: black;
}
.startseite #box2 #boxen {
   margin: 25px auto 10px;
}
.startseite #box2 a.kachel {
   display: inline-block;
   box-sizing: border-box;
   width: 280px;
   max-width: 100%;
   margin: 5px 10px 15px;
   padding: 15px 10px 12px;
   vertical-align: top;
   background-color: #576749;
   border-radius: 15px;
   color: white;
   text-decoration: none;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
   transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.startseite #box2 a.kachel:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.startseite #box2 a.kachel:focus-visible {
   transform: translateY(-4px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.startseite #box2 a.kachel img {
   display: block;
   width: 100%;
   height: 300px;
   object-fit: cover;
   border-radius: 8px;
}
.startseite #box2 a.kachel strong {
   display: block;
   margin: 12px 0 3px;
   font-size: 1.05em;
   text-align: center;
}
@media (prefers-reduced-motion: reduce) {
   .startseite #box2 a.kachel {
      transition: none;
   }
   .startseite #box2 a.kachel:hover {
      transform: none;
   }
   .startseite #box2 a.kachel:focus-visible {
      transform: none;
   }
}
.startseite #box3 {
   margin: 0 auto 0;
   padding: 10px;
   background-color: #576749;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.startseite #veranstaltungbox {
   width: 100%;
   max-width: 600px;
   height: 333px;
   margin: 20px auto 30px;
   overflow-y: auto;
   overflow-x: hidden;
}
.startseite #veranstaltungen {
   width: 100%;
   max-width: 600px;
   table-layout: fixed;
   color: #F1F1F1;
   padding: 0;
   /* gleicht die border-spacing-Luecke vor der ersten Zeile aus */
   margin-top: -15px;
   border-spacing: 0px 15px;
}
.startseite #veranstaltungen td {
   background-color: #2C3E50;
   padding: 15px;
   margin: 10px;
   vertical-align: top;
   -webkit-hyphens: auto;
   hyphens: auto;
   overflow-wrap: break-word;
}
.startseite #veranstaltungen td:first-child {
   width: 110px;
   -webkit-hyphens: none;
   hyphens: none;
}
.startseite #veranstaltungen span {
   display: block;
   text-align: left;
}
.startseite #veranstaltungen a {
   color: white;
}
.startseite #veranstaltungen a:hover {
   cursor: pointer;
   text-decoration: underline;
}
.startseite #veranstaltungen span.datum {
   font-size: 1.2em;
   font-weight: bold;
}
.startseite #veranstaltungen span.uhrzeit {
   font-size: 1em;
}
.startseite #veranstaltungen span.kategorie {
   margin-top: 10px;
   font-size: 1em;
}
.startseite #veranstaltungen span.titel {
   font-size: 1.2em;
}
.startseite #veranstaltungen span.standort {
   font-size: 1em;
   margin-top: 10px;
}
.unterseite #box1 {
   margin: -10px 0px 0px 0px;
   padding: 25px 5%;
   background-color: #576749;
   /*width: calc(100% - 20px);*/
   color: white;
   text-align: center;
}
.unterseite #box1 div.logo {
   text-align: right;
}
.unterseite #box1 img {
   height: 100px;
   text-align: right;
}
.unterseite #box1bild img {
   z-index: auto;
   object-fit: cover;
   margin: calc(-1 * var(--welle)) 0px 0px 0px;
   width: 100%;
   height: var(--held);
}
.unterseite #box2 {
   text-align: center;
   margin: -10px 0px 0px 0px;
   padding: 25px 5%;
   background-color: white;
   /*width: calc(100% - 30% + 20px);*/
   color: black;
}
.unterseite #box2 #boxen {
   margin: 10px auto;
}
.unterseite #box2 .boxen {
   width: 29%;
   float: left;
   margin: 15px 2%;
}
.unterseite #box2 .boxen img {
   width: 100%;
   max-width: 300px;
}
.unterseite #box2 .boxen strong {
   display: inline-block;
   margin: 10px 0;
}
/* Sortierlisten auf QR-Code-Unterseiten */
.unterseite #box2 ul {
   text-align: left;
   margin: 5px 0 15px 10px;
   padding-left: 15px;
}
.unterseite #box2 ul li {
   padding-bottom: 5px;
}
.unterseite #box2 h3 {
   text-align: left;
   color: #84406f;
   margin-top: 30px;
   margin-bottom: 5px;
}
.unterseite #box3 {
   margin: -10px 0px 0px 0px;
   padding: 30px;
   background-color: #576749;
   /*width: calc(100% - 40px);*/
   color: white;
   text-align: center;
}
.unterseite #box3 a {
   color: white;
}
.unterseite #box4 {
   margin: 0;
   padding: 10px;
   background-color: #84406f;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.unterseite #box4 div.logo {
   text-align: right;
}
.unterseite #box4 img {
   height: 100px;
   text-align: right;
}
.unterseite #box4bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px -10px 0px -10px;
   width: 100%;
   height: 800px;
}
.unterseite #box5 {
   margin: -10px -10px 0px -10px;
   padding: 20px;
   background-color: #f07f3c;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.unterseite #box5 div.logo {
   text-align: right;
}
.unterseite #box5 img {
   height: 100px;
   text-align: right;
}
.unterseite #box5bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px -10px 0px -10px;
   width: calc(100% + 20px);
   height: 800px;
}
/* Unterkünfte */
.unterseite #box7 {
   margin: 0;
   padding: 10px;
   background-color: #215b7d;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.unterseite #box7 div.logo {
   text-align: right;
}
.unterseite #box7 img {
   height: 100px;
   text-align: right;
}
.unterseite #box7bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px -10px 0px -10px;
   width: 100%;
   height: 800px;
}
/* Gastronomie */
.unterseite #box8 {
   margin: 0;
   padding: 10px;
   background-color: #f07f3c;
   width: calc(100% - 20px);
   color: white;
   text-align: center;
}
.unterseite #box8 div.logo {
   text-align: right;
}
.unterseite #box8 img {
   height: 100px;
   text-align: right;
}
.unterseite #box8bild img {
   z-index: auto;
   object-fit: cover;
   margin: -200px -10px 0px -10px;
   width: 100%;
   height: 800px;
}
div.wellenbox {
   height: var(--held);
   max-width: 100%;
   width: auto;
}
#welleoben {
   padding: 0;
   margin: 0;
   height: var(--welle);
   position: relative;
}
#welleoben img {
   z-index: 99;
   width: 100%;
   margin: 0px;
   padding: 0;
   object-fit: cover;
   position: absolute;
   /* 2 px Überlappung verhindert feine Linien an der Wellenkante */
   top: -2px;
}
#welleunten {
   padding: 0;
   margin: 0;
   height: var(--welle);
   margin-top: calc(-1 * var(--welle));
   position: relative;
}
#welleunten img {
   z-index: 99;
   width: 100%;
   margin: 0px;
   padding: 0;
   position: absolute;
   bottom: -2px;
}
#inhalt.startseite a.button {
   display: inline-block;
   font-size: 0.8em;
   color: white;
   text-decoration: none;
   background-color: #A1B5A5;
   padding: 12px 15px;
   border-radius: 20px;
   line-height: 1.4;
}
#inhalt.startseite a.button:hover {
   cursor: pointer;
   text-decoration: underline;
}
#header_navi a, #footer a {
   color: black;
   display: inline-block;
   text-decoration: none;
}
#header_navi a:hover, #footer a:hover {
   text-decoration: underline;
}
#main_navi {
   margin: 0 0 0 30px;
   padding: 0;
   text-align: center;
   display: inline-block;
}
#navibilder {
   display: inline;
}
#navibilder img {
   height: 3em;
}
#navibilder #iconvorlesen, #navibilder #iconleichtesprache {
   margin: auto 5px;
}
#navibilder a {
   padding: 10px 5px;
}
#main_navi #hauptmenu {
   font: inherit;
   line-height: normal;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
   margin: 0;
   z-index: 1000;
   color: black;
   text-transform: uppercase;
   font-size: 1.2em;
   background-color: white;
   padding: 5px 7px 0px 25px;
   border: 1.5px solid black;
   border-radius: 3px;
   display: block;
   background-image: url("../inc/menu-pic.svg");
   background-repeat: no-repeat;
   background-position: 6px 6px;
   background-size: 15px;
}
#navibutton, #navimenu {
   display: none;
}
#main_navi ul {
   padding: 0;
   margin: 0 auto;
   text-align: center;
}
#main_navi ul ul {
   display: none;
}
#main_navi li {
   z-index: 1000;
   color: white;
   padding: 0px;
   margin: 0px;
   text-decoration: none;
}
#main_navi a {
   color: white;
   padding: 10px 20px;
   text-decoration: none;
}
#main_navi a:hover {
   text-decoration: underline;
   cursor: pointer;
}
/* Aufklappen per hover nur noch ohne JavaScript – sonst öffnet naturpark.js per Klick/Tippen und mit der Maus */
html:not(.js) #main_navi ul li:hover > ul {
   display: block;
}
#main_navi ul {
   border-radius: 0px;
   list-style: none;
   position: relative;
   display: inline-table;
}
#main_navi ul:after {
   content: "";
   clear: both;
   display: block;
}
#main_navi ul li {
   float: left;
   padding: 8px 9px;
}
@media (hover: hover) {
   #main_navi ul li:hover {
      color: #fff;
      background: #fedb67;
      cursor: pointer;
   }
}
#main_navi ul li a {
   display: block;
   color: #fff;
   text-decoration: none;
}
#main_navi li.stufe1 {
   font-weight: bold;
   text-transform: uppercase;
}
#main_navi ul ul {
   text-align: left;
   margin-left: -9px;
   background: none;
   border-radius: 0px;
   padding: 4px 0 0 0;
   position: absolute;
   top: 100%;
}
#main_navi ul ul li {
   float: none;
   position: relative;
   padding: 0px 0px 0px 0px;
}
#main_navi ul ul li a {
   padding: 9px 30px;
   color: #000;
   background: #fedb67;
}
#main_navi ul ul li a:hover {
   cursor: pointer;
   background: #fedb67;
   color: #000;
   text-decoration: underline;
}
#footer {
   width: 100%;
   margin: 0 auto;
   padding: 15px 0;
   background-color: white;
   text-align: center;
   color: black;
   font-size: 0.8em;
}
#footer #logos {
   margin: 25px 10px 0px;
}
#footer #logos img {
   height: 65px;
   margin: 0px 10px;
}
#footer a {
   color: black;
}
#footer #spalten {
   width: 100%;
   text-align: left;
   margin: 20px auto 0px;
   display: flex;
   justify-content: space-around;
}
#footer .footer_spalte1, #footer .footer_spalte2, #footer .footer_spalte3 {
   flex-direction: column;
   align-items: center;
   padding: 5px 15px;
   text-align: left;
}
#footer ul {
   padding: 0;
   margin: 5px 20px 0 0;
}
#footer li {
   border-bottom: 1px dotted #bcbcbc;
   padding: 6px 0 2px 5px;
   margin-left: 20px;
}
#footer li a {
   text-decoration: none;
}
#footer #footer-navi {
   text-align: center;
   padding: 0px;
   margin: 0px 10px 10px;
}
#footer #footer-navi a {
   display: inline-block;
   margin-right: 5px;
}
h1#ausgabe {
   align-content: center;
   text-align: center;
   color: #6a9998;
   padding: 10px;
   margin: 10px;
}
h1#ueberschrift {
   align-content: center;
   text-align: center;
   padding: 0 10px 5px;
   margin: 5px;
   color: #6a9998;
   font-weight: normal;
}
h3 {
   margin-top: 35px;
}
h3#ueberschrift2 {
   align-content: center;
   text-align: center;
   padding: 0 10px 5px;
   margin: 0px;
   color: #6a9998;
   font-weight: normal;
}
#startseite {
   margin: 10px auto;
}
#startseite p {
   text-align: center;
   background-color: #3f8238;
   color: white;
   padding: 10px;
   margin: 10px 20px;
   max-width: 280px;
   float: left;
   min-height: 400px;
}
#startseite img {
   width: 100%;
   display: inline-block;
   padding: 10px 0px;
   height: 150px;
}
#startseite a {
   color: white;
   text-decoration: none;
}
#startseite a:hover {
   text-decoration: underline;
}
.beitragsbild {
   align-content: center;
   text-align: center;
   padding: 6px 3px 6px;
   margin: 10px;
   max-width: 100%;
}
.beitragsbild img {
   max-width: 100%;
   width: 90%;
   -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
   -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
   box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
img.logos {
   display: inline-block;
   text-align: left;
   padding: 5px 5px 10px 0px;
   width: auto;
   height: auto;
   max-height: 120px;
   max-width: 300px;
}
img.klein {
   width: auto;
   height: auto;
   max-height: 150px;
   max-width: 150px;
}
img.mittel {
   width: auto;
   height: auto;
   max-height: 300px;
   max-width: 300px;
}
img.hoch {
   width: auto;
   height: auto;
   max-width: 300px;
}
img.floatleft {
   float: left;
   display: inline-block;
   padding: 0px 25px 15px 0px;
}
img.floatright {
   float: right;
   display: inline-block;
   padding: 0px 0px 15px 25px;
}

/* === Menü per Tastatur === */
#main_navi .main_navi_sub { display: none; }
/* Geöffnet wird über Klassen aus naturpark.js: „offen“ (Klick/Tippen), „schwebt“ (nur echte Maus).
   Kein Öffnen per CSS-hover, wenn JavaScript läuft: Das iPhone wertet ein Antippen, das per hover etwas
   sichtbar macht, nur als Überfahren – dann brauchte das Menü drei Tipper. Ohne JavaScript per hover: */
html:not(.js) #main_navi .main_navi_first > li:hover > .main_navi_sub { display: block; }

#main_navi:focus-within .main_navi_sub { display: block; }
/* Esc schließt das Menü, auch wenn es per Maus oder Fokus offen wäre */
#main_navi.geschlossen .main_navi_sub { display: none !important; }

#main_navi:focus-visible,
#main_navi a:focus-visible {
  outline: 3px solid #FFD24A;
  outline-offset: 2px;
}

#main_navi ul ul li a:focus-visible {
  background: #fff;
  color: #000;
  outline: 3px solid #2C3E50;
  outline-offset: -3px;
  text-decoration: underline;
}

#main_navi:not(.geschlossen) ul li:focus-within {
  background: #fedb67;
  color: #000;
}

@media only screen and (max-width: 468px) {
  #main_navi ul ul li a:focus-visible {
    background: #fff;
    color: #000;
    outline: 3px solid #2C3E50;
    outline-offset: -3px;
    text-decoration: underline;
  }
  #main_navi ul ul li:focus-within {
    background: #3f8238;
  }
}
/* === Menü per Tastatur ENDE === */




@media only screen and (max-width: 750px) {
   .startseite #box2 {
      padding: 2%;
   }
   #footer #spalten {
      /* width auto statt 95%: 95% + 40px Seitenrand ragte rechts aus der Seite */
      width: auto;
      text-align: left;
      margin: 20px;
      display: block;
      font-size: 1.1em;
   }
   #footer .footer_spalte1, #footer .footer_spalte2, #footer .footer_spalte3 {
      align-items: center;
      padding: 10px 20px 1px 0;
      text-align: center;
   }
   #footer ul {
      text-align: left;
      margin: -5px 0 20px;
   }
}
@media only screen and (max-width: 468px) {
   #header {
      text-align: center;
      height: auto;
   }
   #navimenu {
      display: none;
      font-size: 1.1em;
      /* border: 1px solid #3f8238; */
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      color: #3f8238;
      padding: 7px 10px;
      margin: 15px 7px;
      text-decoration: none;
      text-align: center;
   }
   #main_navi {
      width: 96%;
      margin: 5px 2%;
      padding: 0px;
      background-color: #3f8238;
   }
   #main_navi #hauptmenu {
      width: 100%;
      padding: 10px 7px 5px 25px;
      background-position: 6px 10px;
      background-size: 18px;
   }
   #main_navi ul {
      position: inherit;
      display: block;
      background-color: #3f8238;
      width: 100%;
      margin: 0px;
   }
   #main_navi ul:after {
      content: "";
      clear: both;
      display: block;
   }
   #main_navi ul li {
      float: none;
      padding: 5px 9px;
       padding: 0px;
    background-color: #3f8238;
    background-color: white;
   }
   #main_navi ul li a {
      display: inline-block;
      font-weight: bold;
   }
   #main_navi ul ul {
      display: inline;
      text-align: left;
      margin-left: 0px;
      position: inherit;
   }
   #main_navi ul ul li {
      float: none;
      position: inherit;
      padding: 0px 0px 0px 0px;
   }
   #main_navi ul ul li:hover {
      background: #3f8238;
   }
   #main_navi ul ul li a {
      padding: 9px 30px;
      color: #fff;
      background-color: #3f8238;
      font-weight: inherit;
   }
   #main_navi ul ul li a:hover {
      background: #3f8238;
      text-decoration: underline;
   }
   #header #logo {
      width: 100%;
      padding: 0px;
      margin: 0px;
      text-align: center;
      float: none;
      display: block;
   }
   #header #logo img {
      /*width: 100%;*/
      max-width: 95%;
      padding: 0px;
      margin: 0px;
   }
   #header #header_navi {
      float: none;
      display: block;
      height: auto;
      padding: 0px;
      margin: 10px;
   }
   #header_navi a {
      display: block;
      padding: 5px;
      margin: 0px;
      text-decoration: underline;
   }
   #navibilder {
      display: block;
      margin: 0 auto;
      text-align: center;
   }
#navibilder #iconvorlesen, #navibilder #iconleichtesprache {
   margin: auto 0px;
}	
   .startseite #box2 a.kachel {
      width: calc(100% - 20px);
      margin: 12px 10px;
   }
   .startseite #box2 a.kachel img {
      height: 240px;
   }
   #footer #spalten {
      /* width auto statt 95%: 95% + 40px Seitenrand ragte rechts aus der Seite */
      width: auto;
      text-align: left;
      margin: 20px;
      display: block;
      font-size: 1.1em;
   }
   #footer .footer_spalte1, #footer .footer_spalte2, #footer .footer_spalte3 {
      align-items: center;
      padding: 10px 20px 1px 0;
      text-align: center;
   }
   #footer ul {
      text-align: left;
      margin: -5px 0 20px;
   }
   #footer #footer-navi {
      text-align: center;
      padding: 10px 10px 20px;
   }
   #footer a {
      display: block;
      padding-top: 5px;
      text-decoration: underline;
   }
   #header_navi a:hover, #footer a:hover {
      text-decoration: none;
   }
   #main_navi ul.main_navi_sub {
      display: none;
   }
   /* Geöffnet wird per Tippen (naturpark.js, Klasse „offen“). Die früheren hover-Regeln gaben dem
      Knopf beim Antippen einen grünen Rahmen – der Knopf sprang dabei nach rechts unten. */
}

/* === Fokus-Rahmen (global) === */
:root {
  --focus-ring-color: #2C3E50;  
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --focus-ring-radius: 8px;
}

:where(a, button, summary, input, select, textarea, [role="button"], [tabindex="0"]):not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--focus-ring-radius);
}

#navibilder :is(a, button, img[tabindex="0"]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(var(--focus-ring-offset) + 1px);
  border-radius: calc(var(--focus-ring-radius) + 2px);
}

@media (prefers-contrast: more) {
  :where(a, button, summary, input, select, textarea, [role="button"], [tabindex="0"]):not([tabindex="-1"]):focus-visible {
    outline-width: calc(var(--focus-ring-width) + 1px);
    outline-offset: calc(var(--focus-ring-offset) + 1px);
  }
}
@media (forced-colors: active) {
  :where(a, button, summary, input, select, textarea, [role="button"], [tabindex="0"]):not([tabindex="-1"]):focus-visible {
    outline: 2px solid Highlight;   /* systemeigene Fokusfarbe */
  }
}

#navibilder a:focus-visible {
  outline: none !important;
  box-shadow: none !important; /* falls ein Browser statt outline Schatten nutzt */
}

#navibilder a:focus-visible img {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(var(--focus-ring-offset) + 1px);
  border-radius: calc(var(--focus-ring-radius) + 2px);
}

#navibilder a { display: inline-block; }

#navibilder a,
#navibilder button,
#navibilder img[tabindex="0"],
#navibilder [role="button"] {
  cursor: pointer;
}
/* === Fokus-Rahmen (global) ENDE === */

/* === Filmbox + Video-Facade (MDR-Film, Vimeo erst nach Klick) === */
#filmbox {
   background-color: #576749;
   color: white;
   text-align: center;
   margin: 0;
   padding: 30px 5% 26px;
}
#filmbox h2 {
   margin: 0 0 6px;
   font-weight: normal;
}
#filmbox p.filmunterzeile {
   margin: 0 auto 22px;
   opacity: 0.85;
}
.filmrahmen {
   max-width: 720px;
   margin: 0 auto;
}
.videofacade {
   /* padding-Prozent = 16:9, bezogen auf die Breite des .filmrahmen */
   position: relative;
   padding: 56.25% 0 0 0;
   border-radius: 3px;
   overflow: hidden;
   box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.videofacade button.filmstart {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: none;
   background: none;
   cursor: pointer;
}
.videofacade button.filmstart img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.videofacade .playbutton {
   position: absolute;
   top: 63%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 84px;
   height: 84px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.88);
   transition: background 0.2s, transform 0.2s;
}
/* Hover und Fokus getrennt: aeltere Browser ohne :focus-visible
   verwerfen sonst die komplette Selektorliste samt Hover-Effekt */
.videofacade button.filmstart:hover .playbutton {
   background: #fedb67;
   transform: translate(-50%, -50%) scale(1.08);
}
.videofacade button.filmstart:focus-visible .playbutton {
   background: #fedb67;
   transform: translate(-50%, -50%) scale(1.08);
}
.videofacade .playbutton::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-38%, -50%);
   border-style: solid;
   border-width: 17px 0 17px 28px;
   border-color: transparent transparent transparent #576749;
}
.videofacade .dauer {
   position: absolute;
   right: 10px;
   bottom: 10px;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
   font-size: 0.8em;
   padding: 3px 9px;
   border-radius: 12px;
}
.videofacade iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
}
p.filmquelle {
   font-size: 0.88em;
   margin: 14px auto 0;
   max-width: 720px;
}
p.filmdatenschutz {
   font-size: 0.78em;
   margin: 8px auto 0;
   max-width: 720px;
}
#box2 p.filmquelle, #box2 p.filmdatenschutz {
   color: #444;
}
#box2 p.filmdatenschutz {
   margin-bottom: 40px;
}
/* Hinweis direkt unter einer Video-Vorschau im Text: normaler Absatzabstand */
#box2 .filmrahmen + p.filmdatenschutz {
   margin-bottom: 1em;
}
@media only screen and (max-width: 468px) {
   .videofacade .playbutton {
      width: 60px;
      height: 60px;
   }
   .videofacade .playbutton::after {
      border-width: 12px 0 12px 20px;
   }
}
@media (prefers-reduced-motion: reduce) {
   .videofacade .playbutton {
      transition: none;
   }
   .videofacade button.filmstart:hover .playbutton {
      transform: translate(-50%, -50%);
   }
   .videofacade button.filmstart:focus-visible .playbutton {
      transform: translate(-50%, -50%);
   }
}
/* === Filmbox + Video-Facade ENDE === */

/* === Veranstaltungsübersicht (veranstaltungen.php) === */
.veranstaltungsliste {
   max-width: 640px;
   margin: 10px auto 30px;
   padding: 0;
   text-align: left;
}
.unterseite #box2 .veranstaltungsliste h3.vmonat {
   color: #215b7d;
   text-align: left;
   margin: 35px 0 5px;
}
.veranstaltungsliste ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
.veranstaltungsliste li {
   margin: 0;
   padding: 0;
   border-bottom: 1px dotted #bcbcbc;
}
.veranstaltungsliste li a.vzeile {
   display: flex;
   padding: 14px 5px;
   color: inherit;
   text-decoration: none;
}
.veranstaltungsliste li a.vzeile:hover .vtitel {
   text-decoration: underline;
}
.veranstaltungsliste li a.vzeile:focus-visible .vtitel {
   text-decoration: underline;
}
.vdatum {
   width: 150px;
   flex-shrink: 0;
   padding-right: 15px;
   color: #215b7d;
}
.vdatum .vtag {
   display: block;
   font-weight: bold;
}
.vdatum .vzeit, .vdatum .vbis {
   display: block;
   font-size: 0.9em;
}
.vtext {
   flex: 1;
}
.vtitel {
   display: block;
   color: #215b7d;
   font-weight: bold;
}
.vort {
   display: block;
   margin-top: 3px;
   font-size: 0.9em;
   color: #555;
}
@media only screen and (max-width: 468px) {
   .veranstaltungsliste li a.vzeile {
      display: block;
      padding: 12px 5px;
   }
   .vdatum {
      width: auto;
   }
   .vdatum .vtag, .vdatum .vzeit, .vdatum .vbis {
      display: inline;
   }
   .vdatum .vzeit, .vdatum .vbis {
      margin-left: 8px;
   }
   .vtitel {
      margin-top: 4px;
   }
}
/* === Veranstaltungsübersicht ENDE === */
/* === Paket 1 (2026-09-26): Barrierefreiheit, Lesbarkeit, Mobil === */

/* Sprunglink „Zum Inhalt springen“ – nur bei Tastaturfokus sichtbar */
.sprunglink {
   position: absolute;
   left: -9999px;
   top: 10px;
   z-index: 2000;
   background: #fff;
   color: #000;
   padding: 10px 15px;
   font-weight: bold;
}
.sprunglink:focus {
   left: 10px;
}

/* Kopfleiste: Vorlesen/Leichte Sprache sind echte Schalter, sehen aber aus wie bisher die Bilder */
#navibilder button {
   background: none;
   border: 0;
   padding: 0;
   font: inherit;
   color: inherit;
   cursor: pointer;
}

/* Vorlesen/Leichte Sprache im Inhalt: aufklappbar per Klick, Tastatur und Touch */
details.hilfevorlesen > summary,
details.hilfeleichtesprache > summary {
   display: block;
   margin: 1em 0;
   list-style: none;
   cursor: pointer;
}
details.hilfevorlesen > summary::-webkit-details-marker,
details.hilfeleichtesprache > summary::-webkit-details-marker {
   display: none;
}
details.hilfevorlesen[open],
details.hilfeleichtesprache[open] {
   width: 100%;
   height: auto;
}
details.hilfevorlesen[open] p.vorlesen,
details.hilfeleichtesprache[open] p.leichtesprache {
   display: block;
}

/* Video-Vorschau: Titel im Bild, Abspielknopf mittig */
.videofacade.standbild .playbutton {
   top: 50%;
}
.videofacade .filmtitel {
   position: absolute;
   left: 10px;
   bottom: 10px;
   max-width: calc(100% - 20px);
   background: rgba(0, 0, 0, 0.65);
   color: #fff;
   font-size: 0.85em;
   padding: 4px 10px;
   border-radius: 12px;
   text-align: left;
}
#filmbox p.filmdatenschutz a {
   color: #fff;
}

/* Bilder, eingebettete Inhalte und lange Wörter sprengen die Seite nicht mehr */
#inhalt img,
#inhalt iframe {
   max-width: 100%;
}
h1, h2, h3 {
   overflow-wrap: break-word;
}
/* h2, das optisch wie die bisherige h1 aussieht (je Seite nur eine h1) */
.wie-h1 {
   font-size: 2em;
   margin: 0.67em 0;
}

/* === Paket 1 ENDE === */

/* === Verschönerung (2026-09-26): Textabstände, Tonplayer, Leichte Sprache ===
   Im Rahmen des Corporate Designs der Nationalen Naturlandschaften:
   Schrift, Logo, Wellen, Titelbilder und Farbpalette bleiben unverändert.
   Neu sind nur helle Abstufungen des vorhandenen Grüns (#3f8238). */

/* ---------- Textabstände ---------- */
#box2,
#box3 {
   line-height: 1.6;
}
#box2 h1, #box2 h2, #box2 h3, #box2 h4,
#box3 h1, #box3 h2, #box3 h3, #box3 h4 {
   line-height: 1.25;
}
.startseite #veranstaltungen {
   line-height: 1.35;
}
/* Zwischenüberschriften stehen mittig wie der Text, mit kurzer Linie darunter */
.unterseite #box2 > h3 {
   text-align: center;
   margin: 1.8em 0 0.7em;
}
.unterseite #box2 > h3::after {
   content: "";
   display: block;
   width: 44px;
   height: 3px;
   margin: 0.45em auto 0;
   border-radius: 2px;
   background-color: currentColor;
}
/* Aufzählungen als mittig stehender Block, Einträge linksbündig */
.unterseite #box2 > ul:not([style]) {
   width: -moz-fit-content;
   width: fit-content;
   min-width: min(100%, 26em);
   max-width: 100%;
   box-sizing: border-box;
   margin: 0.5em auto 1.2em;
   padding-left: 1.3em;
}
/* Bildunterschriften (Bildtext und Urheber) */
#box2 img + br + small {
   display: inline-block;
   margin-top: 0.5em;
   color: #555;
   line-height: 1.45;
}

/* ---------- Schalter „Vorlesen“ und „Leichte Sprache“ im Inhalt ---------- */
.hilfebutton {
   margin: 1.4em auto;
}
.hilfeknoepfe {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
}
/* Mit JavaScript stehen die Schalter nebeneinander (.hilfeknoepfe), die
   ursprünglichen Aufklapp-Zeilen werden ausgeblendet */
.hilfebutton.mit-knoepfen > details {
   margin: 0;
}
.hilfebutton.mit-knoepfen > details > summary {
   display: none;
}
details.hilfevorlesen,
details.hilfeleichtesprache {
   width: auto;
   height: auto;
   margin: 0.5em auto;
}
.hilfeknopf,
details.hilfevorlesen > summary,
details.hilfeleichtesprache > summary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   box-sizing: border-box;
   min-height: 48px;
   margin: 0;
   padding: 2px 18px 2px 3px;
   border: 2px solid #3f8238;
   border-radius: 999px;
   background-color: #fff;
   color: #000;
   font: inherit;
   line-height: 1.2;
   cursor: pointer;
   transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.hilfeknopf img,
details.hilfevorlesen > summary img,
details.hilfeleichtesprache > summary img {
   width: 40px;
   height: 40px;
   margin: 0;
   padding: 3px;
   box-sizing: border-box;
   border-radius: 50%;
   background-color: #fff;
   object-fit: contain;
}
/* Pfeil: zeigt nach unten (zu) bzw. nach oben (offen) */
.hilfeknopf::after,
details.hilfevorlesen > summary::after,
details.hilfeleichtesprache > summary::after {
   content: "";
   width: 7px;
   height: 7px;
   margin: -4px 0 0 2px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.15s ease-out;
}
.hilfeknopf:hover,
details.hilfevorlesen > summary:hover,
details.hilfeleichtesprache > summary:hover {
   background-color: #f0f5ef;
}
.hilfeknopf[aria-expanded="true"],
details.hilfevorlesen[open] > summary,
details.hilfeleichtesprache[open] > summary {
   background-color: #3f8238;
   color: #fff;
}
.hilfeknopf[aria-expanded="true"]::after,
details.hilfevorlesen[open] > summary::after,
details.hilfeleichtesprache[open] > summary::after {
   margin-top: 4px;
   transform: rotate(-135deg);
}
.hilfeknopf:focus-visible,
details.hilfevorlesen > summary:focus-visible,
details.hilfeleichtesprache > summary:focus-visible {
   border-radius: 999px;
}
p.vorlesen {
   margin: 0.9em 0;
}

/* ---------- Tonplayer ---------- */
.tonspieler {
   display: flex;
   align-items: center;
   gap: 12px;
   box-sizing: border-box;
   width: 100%;
   max-width: 540px;
   margin: 0.3em auto;
   padding: 8px 14px 8px 8px;
   border: 1px solid #d5ddd2;
   border-radius: 999px;
   background-color: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
   text-align: left;
   line-height: 1.2;
}
.ton-start {
   position: relative;
   flex: none;
   width: 48px;
   height: 48px;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background-color: #3f8238;
   cursor: pointer;
   transition: box-shadow 0.15s ease-out;
}
.ton-start:hover {
   box-shadow: 0 0 0 5px rgba(63, 130, 56, 0.22);
}
.ton-start:focus-visible {
   border-radius: 50%;
}
/* Symbol „Abspielen“ (Dreieck) */
.ton-start::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -9px 0 0 -5px;
   border-style: solid;
   border-width: 9px 0 9px 15px;
   border-color: transparent transparent transparent #fff;
}
/* Symbol „Pause“ (zwei Balken) */
.tonspieler.laeuft .ton-start::before {
   width: 0;
   height: 18px;
   margin: -9px 0 0 -7px;
   border-style: double;
   border-width: 0 0 0 14px;
   border-color: #fff;
}
.ton-mitte {
   flex: 1;
   min-width: 0;
}
.ton-leiste {
   --anteil: 0%;
   display: block;
   width: 100%;
   height: 22px;
   margin: 0;
   padding: 0;
   background: transparent;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
}
.ton-leiste:disabled {
   cursor: default;
}
.ton-leiste::-webkit-slider-runnable-track {
   height: 6px;
   border-radius: 3px;
   background: linear-gradient(to right, #3f8238 var(--anteil), #cdd6ca var(--anteil));
}
.ton-leiste::-webkit-slider-thumb {
   width: 16px;
   height: 16px;
   margin-top: -5px;
   border: 2px solid #fff;
   border-radius: 50%;
   background: #3f8238;
   box-shadow: 0 0 0 1px #3f8238;
   -webkit-appearance: none;
   appearance: none;
}
.ton-leiste::-moz-range-track {
   height: 6px;
   border-radius: 3px;
   background: #cdd6ca;
}
.ton-leiste::-moz-range-progress {
   height: 6px;
   border-radius: 3px;
   background: #3f8238;
}
.ton-leiste::-moz-range-thumb {
   width: 12px;
   height: 12px;
   border: 2px solid #fff;
   border-radius: 50%;
   background: #3f8238;
   box-shadow: 0 0 0 1px #3f8238;
}
.ton-zeiten {
   display: flex;
   justify-content: space-between;
   margin-top: 1px;
   color: #555;
   font-size: 0.8em;
   font-variant-numeric: tabular-nums;
}
.ton-tempo {
   flex: none;
   min-width: 3.4em;
   height: 34px;
   margin: 0;
   padding: 0 0.7em;
   border: 2px solid #3f8238;
   border-radius: 999px;
   background-color: #fff;
   color: #3f8238;
   font: inherit;
   font-size: 0.85em;
   font-weight: bold;
   line-height: 1;
   cursor: pointer;
}
.ton-tempo:hover {
   background-color: #f0f5ef;
}
.ton-tempo:focus-visible {
   border-radius: 999px;
}
.tonspieler.fehler {
   opacity: 0.6;
}
.tonspieler.fehler .ton-start,
.tonspieler.fehler .ton-tempo {
   cursor: default;
}

/* ---------- Leichte Sprache ---------- */
/* Nach den Regeln für Leichte Sprache: linksbündig, größere Schrift, viel
   Zeilenabstand, dunkle Schrift auf hellem Grund */
p.leichtesprache {
   box-sizing: border-box;
   max-width: 40em;
   margin: 0.9em auto 1.3em;
   padding: 1.1em 1.4em;
   border-left: 6px solid #3f8238;
   border-radius: 12px;
   background-color: #f0f5ef;
   color: #000;
   text-align: left;
   font-size: 1.125em;
   line-height: 1.8;
}
/* Aufgeklappter Text über den Schalter in der Kopfleiste */
#headerleichtesprache {
   padding: 1.4em max(5%, calc(50% - 21em)) 1.6em;
   border-bottom: 4px solid #3f8238;
   background-color: #f0f5ef;
   color: #000;
   text-align: left;
}
#headerleichtesprache::after {
   content: "";
   display: block;
   clear: both;
}
#headerleichtesprache h3 {
   padding-bottom: 0.45em;
   color: #3f8238;
   font-size: 1.3em;
   line-height: 1.3;
}
#headerleichtesprache p {
   margin: 0;
   font-size: 1.125em;
   line-height: 1.8;
}
/* Mit JavaScript: jeder Satz ein eigener Block, Umbrüche innerhalb eines Satzes enger */
p.ls-zeilen,
#headerleichtesprache p.ls-zeilen {
   line-height: 1.5;
}
.ls-zeile {
   display: block;
   margin-bottom: 0.45em;
}
.ls-zeile:last-child {
   margin-bottom: 0;
}
.ls-zeile.ls-absatz {
   margin-top: 1.1em;
}
.ls-schliessen {
   float: right;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin: 0 0 0.6em 1em;
   padding: 6px 14px;
   border: 2px solid #3f8238;
   border-radius: 999px;
   background-color: #fff;
   color: #3f8238;
   font: inherit;
   font-size: 0.9em;
   font-weight: bold;
   line-height: 1.2;
   cursor: pointer;
}
.ls-schliessen span {
   font-size: 1.4em;
   line-height: 0.7;
}
.ls-schliessen:hover {
   background-color: #3f8238;
   color: #fff;
}
.ls-schliessen:focus-visible {
   border-radius: 999px;
}

@media only screen and (max-width: 468px) {
   .hilfeknoepfe {
      gap: 8px;
   }
   .hilfeknopf,
   details.hilfevorlesen > summary,
   details.hilfeleichtesprache > summary {
      gap: 6px;
      min-height: 44px;
      padding-right: 12px;
      font-size: 0.95em;
   }
   .hilfeknopf img,
   details.hilfevorlesen > summary img,
   details.hilfeleichtesprache > summary img {
      width: 34px;
      height: 34px;
   }
   .tonspieler {
      gap: 10px;
      padding: 6px 10px 6px 6px;
   }
   p.leichtesprache {
      padding: 1em 1.1em;
   }
}
@media (prefers-reduced-motion: reduce) {
   .hilfeknopf,
   .hilfeknopf::after,
   details.hilfevorlesen > summary,
   details.hilfevorlesen > summary::after,
   details.hilfeleichtesprache > summary,
   details.hilfeleichtesprache > summary::after,
   .ton-start {
      transition: none;
   }
}
/* === Verschönerung ENDE === */

/* === Symbole (Linien-Piktogramme, per CSS-Maske in beliebiger Farbe) === */
:root {
   --symbol-uhr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E");
   --symbol-ort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s6.8-6.6 6.8-11.8a6.8 6.8 0 0 0-13.6 0c0 5.2 6.8 11.8 6.8 11.8z'/%3E%3Ccircle cx='12' cy='9.6' r='2.4' fill='black'/%3E%3C/svg%3E");
   --symbol-kalender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
   --symbol-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1-4 4-6 7.5-6s6.5 2 7.5 6'/%3E%3C/svg%3E");
   --symbol-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.5 4.5-2.2 1.4a11.5 11.5 0 0 0 6.3 6.3l1.4-2.2 4.5 1.5V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
   --symbol-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
   --symbol-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E");
   --symbol-preis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6.8A6.5 6.5 0 1 0 17 17.2M4.5 10.5h9M4.5 13.5h8'/%3E%3C/svg%3E");
   --symbol-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.2L20.5 3.5l-7.7 17-2-7.3z'/%3E%3C/svg%3E");
   --symbol-suche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3C/svg%3E");
}

/* === Veranstaltungskarten (Startseite und „Weitere Veranstaltungen“) ===
   Kalenderblatt im Blau der Veranstaltungsseite, Hinweis und Button im Gelb der Kopfleiste.
   Olivgrüner Hintergrund, Wellen und Schrift der Startseite bleiben. */
.startseite #box3 {
   width: auto;
   padding: 28px 20px 34px;
}
.startseite #box3 > h2 {
   margin: 0.3em 0 0.15em;
}
.startseite #box3 .vk-unterzeile {
   margin: 0 0 1.4em;
   opacity: 0.9;
}
#inhalt ul.vkarten {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
   gap: 16px;
   max-width: 900px;
   margin: 0 auto;
   padding: 0;
   list-style: none;
   text-align: left;
}
#inhalt .vkarten > .vkarte {
   position: relative;
   display: flex;
   align-items: stretch;
   gap: 16px;
   margin: 0;
   padding: 12px 16px 12px 12px;
   border-radius: 15px;
   background-color: #fff;
   color: #000;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
   transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
#inhalt .vkarten > .vkarte:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
/* Kalenderblatt */
.vk-datum {
   flex: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 66px;
   min-height: 78px;
   border-radius: 10px;
   background-color: #215b7d;
   color: #fff;
   line-height: 1.15;
   text-align: center;
}
.vk-wt,
.vk-monat {
   font-size: 0.78em;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}
.vk-tag {
   font-size: 1.9em;
   font-weight: bold;
   line-height: 1.05;
}
.vk-text {
   flex: 1;
   min-width: 0;
   align-self: center;
}
#inhalt .vkarte .vk-titel {
   display: -webkit-box;
   margin: 0 0 5px;
   overflow: hidden;
   color: #215b7d;
   font-size: 1.05em;
   line-height: 1.3;
   text-align: left;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}
#inhalt .vkarte .vk-titel a {
   color: inherit;
   text-decoration: none;
}
/* Die ganze Karte ist anklickbar: Linkfläche über der gesamten Karte */
#inhalt .vkarte .vk-titel a::after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border-radius: 15px;
}
#inhalt .vkarte:hover .vk-titel a {
   text-decoration: underline;
}
#inhalt .vkarte .vk-info {
   margin: 0;
   color: #444;
   font-size: 0.88em;
   line-height: 1.45;
}
.vk-zeit,
.vk-ort {
   display: flex;
   align-items: flex-start;
   gap: 7px;
}
.vk-ort {
   margin-top: 2px;
}
.vk-zeit::before,
.vk-ort::before {
   content: "";
   flex: none;
   width: 14px;
   height: 14px;
   margin-top: 0.2em;
   background-color: #215b7d;
   -webkit-mask: var(--symbol) no-repeat center / contain;
   mask: var(--symbol) no-repeat center / contain;
}
.vk-zeit {
   --symbol: var(--symbol-uhr);
}
.vk-ort {
   --symbol: var(--symbol-ort);
}
.vk-ohnezeit::before {
   display: none;
}
.vk-hinweis {
   display: inline-block;
   margin-right: 4px;
   padding: 0 8px;
   border-radius: 999px;
   background-color: #fedb67;
   color: #000;
   font-size: 0.9em;
   font-weight: bold;
   line-height: 1.5;
}
/* Button zu allen Veranstaltungen (Startseite) */
.startseite #box3 .vk-alle {
   margin: 28px 0 6px;
}
.startseite #box3 .vk-button {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 24px;
   border-radius: 999px;
   background-color: #fedb67;
   color: #000;
   font-weight: bold;
   text-decoration: none;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.startseite #box3 .vk-button::after {
   content: "";
   width: 7px;
   height: 7px;
   border-top: 2px solid currentColor;
   border-right: 2px solid currentColor;
   transform: rotate(45deg);
}
.startseite #box3 .vk-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
   text-decoration: underline;
}
/* Fokus: Rahmen um die ganze Karte; auf dem Olivgrün der Startseite weiß */
.startseite #box3 .vk-button:focus-visible {
   outline-color: #fff;
   border-radius: 999px;
}
@supports selector(:has(a)) {
   #inhalt .vkarte .vk-titel a:focus-visible {
      outline: none;
   }
   #inhalt .vkarten > .vkarte:has(a:focus-visible) {
      outline: 3px solid #2C3E50;
      outline-offset: 3px;
   }
   .startseite #box3 .vkarten > .vkarte:has(a:focus-visible) {
      outline-color: #fff;
   }
}
/* Nur für Screenreader (z. B. das ausgeschriebene Datum) */
.nur-vorlesbar {
   position: absolute !important;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   border: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
}
@media only screen and (max-width: 468px) {
   .startseite #box3 {
      padding: 22px 12px 28px;
   }
   #inhalt .vkarten > .vkarte {
      gap: 12px;
      padding: 10px 12px 10px 10px;
   }
   .vk-datum {
      width: 58px;
      min-height: 70px;
   }
   /* Auf dem Handy reichen vier Termine, der Rest über den Button */
   .startseite #box3 .vkarten > .vkarte:nth-child(n+5) {
      display: none;
   }
}
@media (prefers-reduced-motion: reduce) {
   #inhalt .vkarten > .vkarte,
   .startseite #box3 .vk-button {
      transition: none;
   }
   #inhalt .vkarten > .vkarte:hover,
   .startseite #box3 .vk-button:hover {
      transform: none;
   }
}
/* === Veranstaltungskarten ENDE === */

/* === Detailseiten: Veranstaltung, Unterkunft, Gastronomie, Ausflugsziel (2026-09-26) ===
   Die Hauptfarbe jedes Bereichs bleibt: Blau (Veranstaltungen, Unterkünfte), Orange
   (Gastronomie), Lila (Ausflugsziele). Beim Orange steht Text dunkel, damit er lesbar ist. */
.thema-blau {
   --akzent: #215b7d;
   --akzent-text: #215b7d;
   --akzent-auf: #fff;
}
.thema-orange {
   --akzent: #f07f3c;
   --akzent-text: #1a1a1a;
   --akzent-auf: #000;
}
.thema-lila {
   --akzent: #84406f;
   --akzent-text: #84406f;
   --akzent-auf: #fff;
}
.detailseite #box2 a {
   color: var(--akzent-text);
}
.thema-orange #box2 a {
   text-decoration-color: #f07f3c;
   text-decoration-thickness: 2px;
   text-underline-offset: 2px;
}
/* Zurück-Link oben */
.detailseite #box2 .detail-zurueck {
   margin: 0 0 6px;
   font-size: 0.92em;
   text-align: left;
}
.detailseite #box2 .detail-zurueck a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: bold;
   text-decoration: none;
}
.detailseite #box2 .detail-zurueck a:hover {
   text-decoration: underline;
}
.detail-zurueck a::before,
.detail-button::before {
   content: "";
   width: 7px;
   height: 7px;
   border-bottom: 2px solid currentColor;
   border-left: 2px solid currentColor;
   transform: rotate(45deg);
}
/* Kopf: Kennzeichnung, Name, Ort */
.detail-kopf {
   margin: 6px 0 26px;
   text-align: center;
}
.detail-kategorie {
   margin: 0 0 8px;
}
.chip {
   display: inline-block;
   padding: 2px 12px;
   border-radius: 999px;
   background-color: var(--akzent, #215b7d);
   color: var(--akzent-auf, #fff);
   font-size: 0.85em;
   font-weight: bold;
   line-height: 1.6;
   letter-spacing: 0.02em;
}
.chip-hinweis {
   background-color: #fedb67;
   color: #000;
}
.detail-titel {
   margin: 0;
   color: var(--akzent-text);
   font-size: 2em;
   font-weight: bold;
   line-height: 1.2;
   overflow-wrap: break-word;
}
.detail-ort {
   margin: 6px 0 0;
   color: #555;
}
.detail-meldung {
   max-width: 40em;
   margin: 0 auto 24px;
   padding: 10px 16px;
   border-radius: 10px;
   background-color: rgba(254, 219, 103, 0.4);
   text-align: center;
}
.detail-einleitung {
   max-width: 46em;
   margin: 0 auto;
   font-size: 1.08em;
   text-align: center;
}
/* Zwei Spalten: Inhalt links, Steckbrief rechts (schmal: Steckbrief zuerst) */
.detail-raster {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 310px;
   grid-template-areas: "haupt seite";
   gap: 36px;
   align-items: start;
   max-width: 920px;
   margin: 0 auto;
   text-align: left;
}
.detail-raster.nur-steckbrief {
   grid-template-columns: minmax(0, 480px);
   grid-template-areas: "seite";
   justify-content: center;
}
.detail-haupt {
   grid-area: haupt;
   min-width: 0;
}
.detail-text > :first-child {
   margin-top: 0;
}
#inhalt .detail-haupt h3 {
   margin: 1.6em 0 0.5em;
   color: var(--akzent-text);
   text-align: left;
}
#inhalt .detail-haupt > h3:first-child {
   margin-top: 0;
}
.detail-haupt h3::after {
   content: "";
   display: block;
   width: 40px;
   height: 3px;
   margin-top: 0.35em;
   border-radius: 2px;
   background-color: var(--akzent);
}
/* Bilder */
.detail-bild {
   margin: 0;
}
.detail-bild img {
   display: block;
   width: 100%;
   height: 230px;
   border-radius: 12px;
   background-color: #eef0ee;
   object-fit: cover;
}
.detail-bild.gross img {
   height: auto;
   max-height: 460px;
}
.detail-bild figcaption {
   margin-top: 6px;
   color: #555;
   font-size: 0.82em;
   line-height: 1.4;
}
.detail-galerie {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 14px;
   margin-top: 24px;
}
/* Steckbrief „Auf einen Blick“ */
.steckbrief {
   grid-area: seite;
   box-sizing: border-box;
   padding: 18px 20px 20px;
   border: 1px solid #e2e2e2;
   border-top: 6px solid var(--akzent);
   border-radius: 15px;
   background-color: #fff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   line-height: 1.45;
}
#inhalt .steckbrief .sb-ueberschrift {
   margin: 0 0 4px;
   color: var(--akzent-text);
   font-size: 1.15em;
   text-align: left;
}
.sb-termin {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 10px 0 12px;
   border-bottom: 1px solid #ececec;
}
.sb-termin p {
   margin: 0;
}
.sb-termin .vk-datum {
   background-color: var(--akzent);
}
#inhalt ul.sb-liste {
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: left;
}
#inhalt .sb-liste > .sb-zeile {
   display: flex;
   gap: 12px;
   margin: 0;
   padding: 11px 0;
   border-bottom: 1px solid #ececec;
}
#inhalt .sb-liste > .sb-zeile:last-child {
   border-bottom: 0;
}
.sb-zeile::before {
   content: "";
   flex: none;
   width: 20px;
   height: 20px;
   margin-top: 1px;
   background-color: var(--akzent);
   -webkit-mask: var(--symbol) no-repeat center / contain;
   mask: var(--symbol) no-repeat center / contain;
}
.sb-ort { --symbol: var(--symbol-ort); }
.sb-person { --symbol: var(--symbol-person); }
.sb-telefon { --symbol: var(--symbol-telefon); }
.sb-mail { --symbol: var(--symbol-mail); }
.sb-web { --symbol: var(--symbol-web); }
.sb-uhr { --symbol: var(--symbol-uhr); }
.sb-preis { --symbol: var(--symbol-preis); }
.sb-inhalt {
   flex: 1;
   min-width: 0;
   overflow-wrap: anywhere;
}
.sb-inhalt p {
   margin: 0 0 0.4em;
}
.sb-titel {
   display: block;
   margin-bottom: 2px;
   color: #555;
   font-size: 0.78em;
   font-weight: bold;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}
.sb-knoepfe {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 16px;
}
.detailseite #box2 .sb-knopf {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   box-sizing: border-box;
   min-height: 46px;
   padding: 9px 16px;
   border: 2px solid var(--akzent);
   border-radius: 999px;
   background-color: var(--akzent);
   color: var(--akzent-auf);
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   transition: box-shadow 0.15s ease-out;
}
.detailseite #box2 .sb-knopf-hell {
   background-color: #fff;
   color: var(--akzent-text);
}
.detailseite #box2 .sb-knopf:hover {
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
   text-decoration: underline;
}
.detailseite #box2 .sb-knopf:focus-visible {
   border-radius: 999px;
}
.sb-knopf::before {
   content: "";
   flex: none;
   width: 18px;
   height: 18px;
   background-color: currentColor;
   -webkit-mask: var(--symbol) no-repeat center / contain;
   mask: var(--symbol) no-repeat center / contain;
}
.sb-knopf-kalender { --symbol: var(--symbol-kalender); }
.sb-knopf-route { --symbol: var(--symbol-route); }
.sb-knopf-web { --symbol: var(--symbol-web); }
/* Weitere Veranstaltungen / in der Nähe */
.detail-weitere,
.detail-naehe {
   max-width: 920px;
   margin: 48px auto 0;
   text-align: left;
}
#inhalt .detail-weitere > h2,
#inhalt .detail-naehe > h2 {
   margin: 0 0 4px;
   color: var(--akzent-text);
   font-size: 1.4em;
   text-align: center;
}
#inhalt .detail-weitere ul.vkarten {
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
   max-width: none;
   margin-top: 18px;
}
.naehe-hinweis {
   margin: 0 0 18px;
   color: #555;
   font-size: 0.9em;
   text-align: center;
}
/* Zurück-Button unten */
.detail-unten {
   margin: 44px 0 10px;
   text-align: center;
}
.detailseite #box2 .detail-button {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 24px;
   border-radius: 999px;
   background-color: var(--akzent);
   color: var(--akzent-auf);
   font-weight: bold;
   text-decoration: none;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.detailseite #box2 .detail-button:hover {
   box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
   text-decoration: underline;
}
.detailseite #box2 .detail-button:focus-visible {
   border-radius: 999px;
}
@media only screen and (max-width: 820px) {
   .detail-raster {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "seite" "haupt";
      gap: 26px;
   }
}
@media only screen and (max-width: 468px) {
   .detail-titel {
      font-size: 1.6em;
   }
   .steckbrief {
      padding: 16px;
   }
   .detail-bild img {
      height: 200px;
   }
}
@media (prefers-reduced-motion: reduce) {
   .detailseite #box2 .sb-knopf {
      transition: none;
   }
}
/* === Detailseiten ENDE === */

/* === Karten und Übersichtsseiten (2026-09-26) ===
   Einheitliche Karten für Unterkünfte, Gastronomie und Ausflugsziele (Übersichten
   und „In der Nähe“), Filterleiste, Suche und Gruppenüberschriften (Orte, Monate).
   Die Hauptfarbe des Bereichs bleibt; Filter und Suche erscheinen nur mit JavaScript. */
#inhalt [hidden] {
   display: none !important;
}
/* Veranstaltungskarten auf weißem Grund mit feinem Rahmen */
#inhalt .detail-weitere .vkarten > .vkarte,
#inhalt .vkarten.auf-weiss > .vkarte {
   border: 1px solid #e2e2e2;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
#inhalt .detail-weitere .vkarten > .vkarte:hover,
#inhalt .vkarten.auf-weiss > .vkarte:hover {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
/* Eintragskarten */
#inhalt ul.karten-liste {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
   gap: 18px;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: left;
}
#inhalt .karten-liste > .eintragskarte {
   margin: 0;
   padding: 0;
}
#inhalt .karten-liste .eintragskarte > a {
   display: flex;
   flex-direction: column;
   height: 100%;
   box-sizing: border-box;
   padding: 0;
   overflow: hidden;
   border: 1px solid #e2e2e2;
   border-radius: 15px;
   background-color: #fff;
   color: #000;
   text-decoration: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
   transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
#inhalt .karten-liste .eintragskarte > a:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
#inhalt .karten-liste .eintragskarte > a:hover .ek-titel {
   text-decoration: underline;
}
#inhalt .karten-liste .eintragskarte > a:focus-visible {
   border-radius: 15px;
}
.eintragskarte img {
   display: block;
   flex: none;
   width: 100%;
   height: 160px;
   background-color: #eef0ee;
   object-fit: cover;
}
.karten-gross .eintragskarte img {
   height: 190px;
}
.ek-text {
   display: block;
   padding: 12px 14px 15px;
   line-height: 1.35;
}
.ek-titel {
   display: block;
   margin: 8px 0 4px;
   font-size: 1.05em;
}
.ek-text > .ek-titel:first-child {
   margin-top: 0;
}
.art-unterkunft .ek-titel {
   color: #215b7d;
}
.art-ausflugsziel .ek-titel,
.art-fledermaus .ek-titel {
   color: #84406f;
}
.ek-meta {
   display: flex;
   gap: 6px;
   color: #555;
   font-size: 0.88em;
}
.ek-meta::before {
   content: "";
   flex: none;
   width: 13px;
   height: 13px;
   margin-top: 0.15em;
   background-color: #777;
   -webkit-mask: var(--symbol-ort) no-repeat center / contain;
   mask: var(--symbol-ort) no-repeat center / contain;
}
.ek-teaser {
   display: -webkit-box;
   margin-top: 8px;
   overflow: hidden;
   color: #333;
   font-size: 0.9em;
   line-height: 1.45;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}
/* Kennzeichnung in der Farbe des jeweiligen Bereichs */
.art-gastronomie .chip {
   background-color: #f07f3c;
   color: #000;
}
.art-unterkunft .chip {
   background-color: #215b7d;
   color: #fff;
}
.art-ausflugsziel .chip,
.art-fledermaus .chip {
   background-color: #84406f;
   color: #fff;
}
/* Filterleiste */
.filterleiste {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   max-width: 920px;
   margin: 8px auto 10px;
}
.uebersichtsseite #box2 .filter-chip {
   margin: 0;
   padding: 7px 15px;
   border: 2px solid var(--akzent);
   border-radius: 999px;
   background-color: #fff;
   color: var(--akzent-text);
   font: inherit;
   font-weight: bold;
   line-height: 1.2;
   cursor: pointer;
   transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.uebersichtsseite #box2 .filter-chip:hover {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.uebersichtsseite #box2 .filter-chip[aria-pressed="true"] {
   background-color: var(--akzent);
   color: var(--akzent-auf);
}
.uebersichtsseite #box2 .filter-chip:focus-visible {
   border-radius: 999px;
}
.filter-chip .anzahl {
   margin-left: 2px;
   font-weight: normal;
   opacity: 0.85;
}
.filter-ergebnis {
   margin: 0 0 22px;
   color: #555;
   font-size: 0.9em;
   text-align: center;
}
/* Suche */
.uebersicht-suche {
   position: relative;
   max-width: 440px;
   margin: 22px auto 8px;
}
.uebersicht-suche::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 16px;
   width: 18px;
   height: 18px;
   margin-top: -9px;
   background-color: var(--akzent);
   -webkit-mask: var(--symbol-suche) no-repeat center / contain;
   mask: var(--symbol-suche) no-repeat center / contain;
   pointer-events: none;
}
.uebersicht-suche input {
   box-sizing: border-box;
   width: 100%;
   margin: 0;
   padding: 11px 16px 11px 44px;
   border: 2px solid var(--akzent);
   border-radius: 999px;
   background-color: #fff;
   color: #000;
   font: inherit;
}
.uebersicht-suche input:focus-visible {
   border-radius: 999px;
}
/* Gruppen (Orte, Monate) */
.uebersicht {
   max-width: 920px;
   margin: 0 auto;
   text-align: left;
}
.uebersicht-gruppe + .uebersicht-gruppe {
   margin-top: 38px;
}
#inhalt .gruppen-titel {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 16px;
   color: var(--akzent-text);
   font-size: 1.3em;
   line-height: 1.25;
   text-align: left;
}
#inhalt .gruppen-titel::after {
   content: "";
   flex: 1;
   min-width: 20px;
   height: 2px;
   border-radius: 1px;
   background-color: #e6e6e6;
}
.gruppen-anzahl {
   flex: none;
   padding: 0 9px;
   border-radius: 999px;
   background-color: var(--akzent);
   color: var(--akzent-auf);
   font-size: 0.62em;
   line-height: 1.8;
}
.uebersicht-leer {
   color: #555;
   text-align: center;
}
@media only screen and (max-width: 468px) {
   .filterleiste {
      gap: 6px;
   }
   .uebersichtsseite #box2 .filter-chip {
      padding: 5px 11px;
      font-size: 0.88em;
   }
   #inhalt .gruppen-titel {
      font-size: 1.15em;
   }
}
@media (prefers-reduced-motion: reduce) {
   #inhalt .karten-liste .eintragskarte > a,
   .uebersichtsseite #box2 .filter-chip {
      transition: none;
   }
   #inhalt .karten-liste .eintragskarte > a:hover {
      transform: none;
   }
}
/* Fledermäuse: Abstand zum Film darüber, Link zum Projekt-Impressum unter den Karten */
.fledermaus-uebersicht {
   margin-top: 40px;
}
#inhalt .karten-fussnote {
   margin: 34px 0 0;
   font-size: 0.95em;
   text-align: center;
}
/* === Karten und Übersichtsseiten ENDE === */

/* === Fehlerseite (404 nicht gefunden / 410 entfernt) === */
.fehler-text {
   max-width: 40em;
   margin: 0 auto 22px;
   font-size: 1.1em;
   text-align: center;
}
.fehler-wege {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   max-width: 920px;
   margin: 26px auto 10px;
}
.detailseite #box2 .fehler-wege a {
   padding: 9px 18px;
   border: 2px solid var(--akzent);
   border-radius: 999px;
   background-color: #fff;
   color: var(--akzent-text);
   font-weight: bold;
   text-decoration: none;
}
.detailseite #box2 .fehler-wege a:hover {
   background-color: var(--akzent);
   color: var(--akzent-auf);
}
.detailseite #box2 .fehler-wege a:focus-visible {
   border-radius: 999px;
}
#inhalt ul.fehler-karten {
   margin: 10px auto 0;
}
/* === Fehlerseite ENDE === */

/* === Tondokumente: Kurzbeschreibung und Text zum Mitlesen === */
:root {
   --symbol-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 10.5h16M4 15h16M4 19.5h9'/%3E%3C/svg%3E");
}
/* Worum es in der Geschichte geht */
p.hoer-kurz {
   max-width: 40em;
   margin: 0.5em auto 1em;
}
/* Schalter im Stil von „Vorlesen“ und „Leichte Sprache“ */
details.mitlesen {
   max-width: 40em;
   margin: 0.3em auto 1.4em;
   text-align: center;
}
details.mitlesen > summary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   box-sizing: border-box;
   min-height: 44px;
   padding: 2px 18px 2px 14px;
   border: 2px solid #3f8238;
   border-radius: 999px;
   background-color: #fff;
   color: #000;
   line-height: 1.2;
   list-style: none;
   cursor: pointer;
   transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
details.mitlesen > summary::-webkit-details-marker {
   display: none;
}
details.mitlesen > summary::before {
   content: "";
   flex: none;
   width: 20px;
   height: 20px;
   background-color: currentColor;
   -webkit-mask: var(--symbol-text) no-repeat center / contain;
   mask: var(--symbol-text) no-repeat center / contain;
}
details.mitlesen > summary::after {
   content: "";
   width: 7px;
   height: 7px;
   margin: -4px 0 0 2px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.15s ease-out;
}
details.mitlesen > summary:hover {
   background-color: #f0f5ef;
}
details.mitlesen[open] > summary {
   background-color: #3f8238;
   color: #fff;
}
details.mitlesen[open] > summary::after {
   margin-top: 4px;
   transform: rotate(-135deg);
}
details.mitlesen > summary:focus-visible {
   border-radius: 999px;
}
/* Der Wortlaut: linksbündig auf hellem Grund wie die Leichte Sprache */
.mitlesen-text {
   box-sizing: border-box;
   margin-top: 0.9em;
   padding: 1.1em 1.4em;
   border-left: 6px solid #3f8238;
   border-radius: 12px;
   background-color: #f0f5ef;
   color: #000;
   text-align: left;
   line-height: 1.65;
}
#inhalt .mitlesen-text p {
   margin: 0 0 0.75em;
   text-align: left;
}
#inhalt .mitlesen-text p:last-child {
   margin-bottom: 0;
}

/* Egon Eiche: jede Geschichte eine Karte */
#inhalt ol.hoerliste {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
   gap: 20px;
   align-items: start;
   max-width: 900px;
   margin: 10px auto 20px;
   padding: 0;
   list-style: none;
   text-align: center;
}
#inhalt ol.hoerliste > li.hoerkarte {
   box-sizing: border-box;
   margin: 0;
   padding: 16px 16px 14px;
   border-radius: 12px;
   background-color: #3f8238;
   color: #fff;
}
.unterseite #box2 .hoerkarte h3 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin: 0 0 0.45em;
   color: #fff;
   font-size: 1.15em;
   text-align: center;
}
.hoer-nr {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
   min-width: 1.9em;
   height: 1.9em;
   border-radius: 999px;
   background-color: #fff;
   color: #3f8238;
   font-size: 0.85em;
}
#inhalt .hoerkarte p.hoer-kurz {
   margin: 0 0 0.85em;
   font-size: 0.95em;
   line-height: 1.5;
}
.hoerkarte .tonspieler {
   margin-right: auto;
   margin-left: auto;
}
.hoerkarte details.mitlesen {
   margin: 0.8em 0 0;
}
/* geöffnet auf der grünen Karte: weißer Rand, damit der Schalter sichtbar bleibt */
.hoerkarte details.mitlesen[open] > summary {
   border-color: #fff;
}
.hoerkarte .mitlesen-text {
   border-left: 0;
   border-radius: 10px;
   font-size: 0.95em;
}
/* === Tondokumente ENDE === */

/* === Bilder im Text: einheitliche Gestaltung und große Ansicht === */
:root {
   --symbol-lupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5M10.5 7.9v5.2M7.9 10.5h5.2'/%3E%3C/svg%3E");
   --symbol-kreuz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
   --symbol-pfeil-links: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
   --symbol-pfeil-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
/* Einzelbild: runde Ecken, weicher Schatten, Hochformate nicht höher als der Bildschirm */
figure.inhaltsbild {
   max-width: 760px;
   margin: 1.6em auto 1.9em;
   text-align: center;
}
figure.inhaltsbild img {
   display: block;
   width: auto;
   max-width: 100%;
   height: auto;
   max-height: 78vh;
   margin: 0 auto;
   border-radius: 12px;
   background-color: #eef0ee;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
   transition: box-shadow 0.2s ease-out;
}
figure.inhaltsbild figcaption {
   max-width: 60ch;
   margin: 0.75em auto 0;
   color: #505050;
   font-size: 0.9em;
   line-height: 1.45;
}
.bildnachweis {
   display: block;
   margin-top: 0.15em;
   color: #6b6b6b;
   font-size: 0.85em;
}
/* Vergrößern: Link um das Bild; Lupe und Zeiger nur, wenn es wirklich größer geht (naturpark.js) */
a.bild-gross {
   position: relative;
   display: inline-block;
   max-width: 100%;
   border-radius: 12px;
   line-height: 0;
   vertical-align: top;
}
a.bild-gross.zoombar {
   cursor: zoom-in;
}
a.bild-gross.zoombar::after {
   content: "";
   position: absolute;
   right: 10px;
   bottom: 10px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.92) var(--symbol-lupe) no-repeat center / 22px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   transition: transform 0.15s ease-out;
}
a.bild-gross.zoombar:hover img,
a.bild-gross.zoombar:focus-visible img {
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}
a.bild-gross.zoombar:hover::after,
a.bild-gross.zoombar:focus-visible::after {
   transform: scale(1.1);
}
a.bild-gross:focus-visible {
   outline: 3px solid #3f8238;
   outline-offset: 3px;
}
/* Detailseiten (Ausflugsziele): Bild füllt die Spalte */
.detail-bild a.bild-gross {
   display: block;
}

/* Bildkarten: mehrere Fotos nebeneinander, optional mit Text */
#inhalt .bildkarten {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
   gap: 22px;
   max-width: 900px;
   margin: 1.2em auto 2em;
   text-align: left;
}
#inhalt .bildkarten.mit-text {
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.bildkarte {
   margin: 0;
}
.bildkarte a.bild-gross {
   display: block;
}
.bildkarte img {
   display: block;
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: 12px;
   background-color: #eef0ee;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.2s ease-out;
}
.bildkarte figcaption {
   margin-top: 0.7em;
   color: #333;
   font-size: 0.95em;
   line-height: 1.5;
}
.bildkarten:not(.mit-text) .bildkarte figcaption {
   text-align: center;
}
.bildkarte figcaption strong {
   display: block;
   margin-bottom: 0.2em;
   color: #1a1a1a;
   font-size: 1.05em;
}

/* Orchideen: Steckbrief und Beschreibung links, Foto rechts */
.art-kopf {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
   gap: 32px;
   align-items: start;
   max-width: 900px;
   margin: 0.6em auto 1.6em;
   text-align: left;
}
.art-kopf.ohne-bild {
   grid-template-columns: minmax(0, 1fr);
   max-width: 640px;
}
.art-kopf figure.inhaltsbild {
   max-width: none;
   margin: 0;
}
.art-kopf figure.inhaltsbild img {
   max-height: 560px;
}
.art-steckbrief {
   margin: 0 0 1.1em;
   padding: 16px 20px;
   border: 1px solid #e2e2e2;
   border-top: 6px solid #7c749f;
   border-radius: 15px;
   background-color: #fff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.art-steckbrief > div + div {
   margin-top: 0.7em;
   padding-top: 0.7em;
   border-top: 1px solid #ececec;
}
.art-steckbrief dt {
   color: #595959;
   font-size: 0.8em;
   font-weight: bold;
   letter-spacing: 0.03em;
   text-transform: uppercase;
}
.art-steckbrief dd {
   margin: 0.15em 0 0;
   line-height: 1.45;
}
#inhalt .art-text p {
   margin: 0 0 0.9em;
   text-align: left;
}

/* Große Ansicht (Dialog) */
dialog.bildansicht {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   margin: 0;
   padding: 64px 76px 24px;
   border: 0;
   background-color: rgba(12, 14, 12, 0.97);
   color: #fff;
   overflow: hidden;
}
dialog.bildansicht[open] {
   display: flex;
   align-items: center;
   justify-content: center;
}
dialog.bildansicht::backdrop {
   background-color: rgba(0, 0, 0, 0.5);
}
.ba-figur {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 100%;
   margin: 0;
}
.ba-bild {
   display: block;
   width: auto;
   max-width: 100%;
   height: auto;
   max-height: calc(100vh - 190px);
   border-radius: 10px;
   background-color: #222;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.ba-text {
   max-width: 70ch;
   margin-top: 14px;
   color: #f0f0f0;
   font-size: 0.95em;
   line-height: 1.45;
   text-align: center;
}
.ba-text .bildnachweis {
   color: #c8c8c8;
}
.ba-zaehler {
   position: absolute;
   top: 22px;
   left: 24px;
   margin: 0;
   color: #d6d6d6;
   font-size: 0.9em;
}
.ba-knopf {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.16);
   color: #fff;
   cursor: pointer;
   transition: background-color 0.15s ease-out;
}
.ba-knopf[hidden] {
   display: none;
}
.ba-knopf:hover {
   background-color: rgba(255, 255, 255, 0.3);
}
.ba-knopf:focus-visible {
   outline: 3px solid #fff;
   outline-offset: 3px;
}
.ba-knopf::before {
   content: "";
   width: 22px;
   height: 22px;
   background-color: currentColor;
   -webkit-mask: var(--ba-symbol) no-repeat center / contain;
   mask: var(--ba-symbol) no-repeat center / contain;
}
.ba-schliessen {
   --ba-symbol: var(--symbol-kreuz);
   top: 12px;
   right: 16px;
}
.ba-zurueck {
   --ba-symbol: var(--symbol-pfeil-links);
   top: 50%;
   left: 14px;
   transform: translateY(-50%);
}
.ba-weiter {
   --ba-symbol: var(--symbol-pfeil-rechts);
   top: 50%;
   right: 14px;
   transform: translateY(-50%);
}
@media (max-width: 760px) {
   .art-kopf {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
   }
   .art-kopf figure.inhaltsbild {
      order: -1;
   }
   .art-kopf figure.inhaltsbild img {
      max-height: 60vh;
   }
   dialog.bildansicht {
      padding: 60px 12px 88px;
   }
   .ba-bild {
      max-height: calc(100vh - 240px);
   }
   .ba-zurueck,
   .ba-weiter {
      top: auto;
      bottom: 20px;
      transform: none;
   }
   .ba-zurueck {
      left: calc(50% - 64px);
   }
   .ba-weiter {
      right: calc(50% - 64px);
   }
}
@media (prefers-reduced-motion: reduce) {
   figure.inhaltsbild img,
   .bildkarte img,
   a.bild-gross.zoombar::after,
   .ba-knopf {
      transition: none;
   }
}
/* === Bilder im Text ENDE === */


/* === Feinschliff für Handys (Design-Test 27.09.2026) === */
@media only screen and (max-width: 600px) {
   /* Lange Wörter, Adressen und Links brechen um, statt aus dem Kasten zu ragen;
      Fließtext wird mit Trennstrich getrennt (lang="de") */
   #inhalt p, #inhalt li, #inhalt dd, #inhalt dt, #inhalt figcaption, #inhalt h1, #inhalt h2, #inhalt h3, #inhalt h4, #inhalt td, .detail-text, .detail-einleitung, #footer p, #footer li {
      overflow-wrap: anywhere;
   }
   #inhalt p, #inhalt li, #inhalt dd, #inhalt figcaption, .detail-text {
      -webkit-hyphens: auto;
      hyphens: auto;
   }
   /* Kleingedrucktes bleibt lesbar (mindestens etwa 13,5 px) */
   .sb-titel, .art-steckbrief dt, .ton-zeiten, p.filmdatenschutz, p.filmquelle {
      font-size: 0.85em;
   }
   .vk-wt, .vk-monat, .vk-hinweis {
      font-size: 0.85em;
   }
   .detail-bild figcaption {
      font-size: 0.9em;
   }
   .bildnachweis {
      font-size: 0.95em;
   }
   .videofacade .filmtitel, .videofacade .dauer {
      font-size: 1.05em;
   }
   .gruppen-anzahl {
      font-size: 0.76em;
   }
   #footer #footer-navi {
      font-size: 1.1em;
   }
   /* Tippziele: Links in Listen, Zurück-Links und Kontaktangaben bekommen Luft nach oben und unten */
   #box2 > ul > li > a, #box2 > div > ul > li > a, #box2 > p > strong > a, .sb-inhalt > a, #footer li a, #footer p a, #footer #footer-navi a {
      display: inline-block;
      padding: 4px 0;
   }
   #footer a {
      padding-top: 6px;
      padding-bottom: 6px;
   }
}

/* Tablet: erste Fußzeilen-Spalte (Anschrift) nicht unter 190 px zusammendrücken (Design-Test 27.09.2026) */
@media only screen and (min-width: 751px) and (max-width: 1024px) {
   #footer .footer_spalte1 {
      min-width: 190px;
   }
}


/* === Hauptmenü: zwei Spalten, Gruppen, aktuelle Seite, volle Zeilen am Handy (27.09.2026) === */
/* Per Klick oder Maus geöffnet (naturpark.js); „geschlossen“ (weiter oben) hat Vorrang */
#main_navi.offen .main_navi_sub,
#main_navi.schwebt .main_navi_sub {
   display: block;
}
/* Desktop: zwei Spalten à 340 px – lange Einträge brechen nicht mehr um, das Menü ist nur noch halb so hoch */
#main_navi .main_navi_sub {
   width: 680px;
   max-width: calc(100vw - 20px);
   columns: 2;
   column-gap: 0;
   text-align: left;
}
#main_navi .main_navi_sub > li {
   break-inside: avoid;
}
/* Untereinträge einer Gruppe stehen direkt unter ihrer Überschrift und sind leicht eingerückt */
#main_navi .main_navi_sub ul.unter {
   display: block;
   position: static;
   margin: 0;
   padding: 0;
   text-align: left;
}
#main_navi .main_navi_sub ul.unter li {
   font-weight: normal;
   text-transform: none;
}
#main_navi .main_navi_sub ul.unter li a {
   padding-left: 42px;
}
/* Aktuelle Seite bzw. ihr Bereich: Balken am linken Rand */
#main_navi .main_navi_sub a[aria-current],
#main_navi .main_navi_sub a.aktuell {
   box-shadow: inset 5px 0 0 #000;
}
@media only screen and (max-width: 640px) {
   #main_navi .main_navi_sub {
      width: 320px;
      columns: 1;
   }
}
/* Handy: eine Spalte, jeder Eintrag füllt die ganze Zeile (antippbar in voller Breite) */
@media only screen and (max-width: 468px) {
   #main_navi .main_navi_sub {
      width: 100%;
      max-width: none;
      columns: auto;
      padding: 0 0 6px;
      background-color: #3f8238;
   }
   #main_navi .main_navi_sub li {
      background-color: #3f8238;
   }
   #main_navi .main_navi_sub li a {
      display: block;
      padding: 10px 20px;
   }
   #main_navi .main_navi_sub ul.unter li a {
      padding-left: 40px;
   }
   #main_navi .main_navi_sub li + li > a,
   #main_navi .main_navi_sub ul.unter li a {
      border-top: 1px solid rgba(255, 255, 255, 0.22);
   }
   #main_navi .main_navi_sub a[aria-current],
   #main_navi .main_navi_sub a.aktuell {
      box-shadow: inset 5px 0 0 #fff;
   }
}

/* Anonyme Zugriffsstatistik: Zählbild im Fuß (unsichtbar, ohne Einfluss auf das Layout) */
img.zaehlbild {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

/* === Fließtext auf Handys linksbündig (Entscheidung 27.09.2026) ===
   Absätze und Listen im Inhalt; Überschriften, Bildunterschriften, kurze Hinweise, Knöpfe und
   Bilder in eigenen Absätzen bleiben zentriert. Desktop und Tablet unverändert. */
@media (max-width: 600px) {
  #inhalt p, #inhalt li, #inhalt dd, #inhalt blockquote { text-align: left; }
  #inhalt figcaption, #inhalt .filmunterzeile, #inhalt .filmdatenschutz, #inhalt .bildnachweis,
  #inhalt .filter-ergebnis, #inhalt .uebersicht-leer, #inhalt .naehe-hinweis, #inhalt .detail-meldung,
  #inhalt .vk-datum, #inhalt [style*="inline-block"] { text-align: center; } /* auch Bildkacheln */
  /* eigene Regel: Browser ohne :has() verwerfen nur diese */
  #inhalt p:has(> img:only-child), #inhalt p:has(> a:only-child > img:only-child) { text-align: center; }
}

/* === Handy-Menü: Gruppen einklappbar (Entscheidung 27.09.2026, abends: ganze Zeile tippbar) ===
   Bis 640 px: Die ganze Gruppenzeile („Naturpark Kyffhäuser“, „Service“) klappt die Unterpunkte auf
   und zu; der Pfeil rechts zeigt den Zustand. Die Seite der Gruppe steht dann als „Übersicht“ an erster
   Stelle (naturpark.js). Die Gruppe der aktuellen Seite ist offen. Der Knopf liegt durchsichtig über
   dem Gruppen-Link und übernimmt so dessen Hintergrund. Ohne JavaScript bleibt alles aufgeklappt. */
#main_navi .gruppe-knopf,
#main_navi .gruppe-uebersicht {
   display: none;
}
@media only screen and (max-width: 640px) {
   #main_navi .main_navi_sub li.gruppe {
      display: grid;
      grid-template-columns: 1fr 48px;
   }
   #main_navi .main_navi_sub li.gruppe > a {
      grid-column: 1 / 3;
      grid-row: 1;
      padding-right: 52px;
   }
   #main_navi .main_navi_sub li.gruppe > ul.unter {
      grid-column: 1 / 3;
      grid-row: 2;
   }
   #main_navi .main_navi_sub li.gruppe.zu > ul.unter {
      display: none;
   }
   #main_navi .main_navi_sub li.gruppe-uebersicht {
      display: block;
   }
   /* Der Knopf ist so hoch wie die Zeile des Gruppen-Links (keine eigene Mindesthöhe – sonst wird die
      Gruppenzeile höher als die übrigen und ihre Schrift sitzt nicht mehr mittig) */
   #main_navi .gruppe-knopf {
      display: block;
      grid-column: 1 / 3;
      grid-row: 1;
      align-self: stretch;
      position: relative;
      width: 100%;
      height: auto;
      min-height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #000;
      font: inherit;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0.25);
   }
   #main_navi .gruppe-knopf::before {
      content: "";
      position: absolute;
      left: auto;
      right: 20px;
      top: 50%;
      width: 9px;
      height: 9px;
      border-right: 2.5px solid currentColor;
      border-bottom: 2.5px solid currentColor;
      transform: translate(0, -75%) rotate(45deg);
   }
   #main_navi .gruppe-knopf[aria-expanded="true"]::before {
      transform: translate(0, -10%) rotate(-135deg); /* Pfeil nach oben optisch auf Höhe der Schrift */
   }
   #main_navi .gruppe-knopf:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: -5px;
   }
}
@media only screen and (max-width: 468px) {
   #main_navi .gruppe-knopf {
      color: #fff;
   }
   #main_navi .main_navi_sub li.gruppe > a:focus-visible ~ .gruppe-knopf {
      color: #000;
   }
}

/* === Hauptmenü ab Notebook-Breite: eine gelbe Tafel mit zwei ausgewogenen Spalten (27.09.2026) ===
   Links die erste Gruppe (Naturpark Kyffhäuser), rechts alle übrigen Einträge mit „Service“ (header.php).
   Farben wie bisher (Menügelb, Schwarz); ein Schatten hebt die Tafel vom Titelbild ab. */
@media only screen and (min-width: 641px) {
   #main_navi.offen .main_navi_sub,
   #main_navi.schwebt .main_navi_sub,
   #main_navi:focus-within .main_navi_sub,
   html:not(.js) #main_navi .main_navi_first > li:hover > .main_navi_sub {
      display: grid;
   }
   /* Gelber Reiter hinter „Menü“, solange das Menü offen ist (wie beim Überfahren mit der Maus) */
   #main_navi.offen .main_navi_first > li,
   #main_navi.schwebt .main_navi_first > li {
      background: #fedb67;
   }
   #main_navi .main_navi_sub {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(5, auto) 1fr;
      column-gap: 32px;
      columns: auto;
      box-sizing: border-box;
      width: 800px;
      max-width: calc(100vw - 24px);
      margin-left: -39px; /* bündig mit der Kopfleiste (#main_navi steht 30 px eingerückt, li 9 px) */
      padding: 14px 20px 18px;
      background-color: #fedb67;
      /* feine Linie zwischen den Spalten */
      background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
      background-size: 1px calc(100% - 74px);
      background-position: 50% 56px; /* unterhalb der Zeile „Startseite“ */
      background-repeat: no-repeat;
      border-radius: 0 0 14px 14px;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
      clip-path: inset(0 -40px -60px -40px); /* kein Schatten nach oben: nahtlos an der Kopfleiste */
      z-index: 1000; /* clip-path macht die Tafel zu einer eigenen Ebene: vor das Titelbild legen */
   }
   #main_navi .main_navi_sub > li {
      grid-column: 2;
   }
   /* Startseite oben über beide Spalten: Tab-Reihenfolge = Lesereihenfolge (oben, links, rechts) */
   #main_navi .main_navi_sub > li:first-child {
      grid-column: 1 / -1;
      margin-bottom: 6px;
   }
   #main_navi .main_navi_sub > li.spalte1 {
      grid-column: 1;
      grid-row: 2 / -1;
   }
   #main_navi .main_navi_sub > li.gruppe:not(.spalte1) {
      margin-top: 10px;
   }
   #main_navi .main_navi_sub li a {
      padding: 7px 12px;
      background: transparent;
      border-radius: 6px;
      line-height: 1.3;
   }
   #main_navi .main_navi_sub li a:hover {
      background: rgba(255, 255, 255, 0.55);
      text-decoration: none;
   }
   /* Gruppenüberschrift mit feiner Linie darunter */
   #main_navi .main_navi_sub li.gruppe > a {
      margin-bottom: 4px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.15);
      border-radius: 6px 6px 0 0;
   }
   #main_navi .main_navi_sub ul.unter li a {
      padding-left: 24px;
   }
   /* aktuelle Seite bzw. ihr Bereich: hell hinterlegt, Balken links */
   #main_navi .main_navi_sub a[aria-current],
   #main_navi .main_navi_sub a.aktuell {
      background: rgba(255, 255, 255, 0.55);
      box-shadow: inset 4px 0 0 #000;
   }
}

/* === Kacheln mit Bild und lila Beschriftung (Naturpark, Mediathek, Service): ganze Kachel antippbar ===
   Bisher reagierten nur Bild und Schrift, nicht die lila Fläche links und rechts neben der Schrift. */
#box2 p[style*="inline-block"] > a[href] {
   display: block;
}

/* === Publikationen: Hefte nach Themen, Karten mit Titelbild und Download-Knopf (27.09.2026) ===
   Farben aus dem Seitenthema (thema-blau wie der Seitenkopf); Karten wie die Eintragskarten der Übersichten. */
:root {
   --symbol-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.5M7 10l5 5 5-5M4.5 20h15'/%3E%3C/svg%3E");
   --symbol-dokument: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
.publikationsseite #box2 .pub-einleitung {
   max-width: 760px;
   margin: 0 auto 16px;
   text-align: center;
}
.pub-themen {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin: 0 auto 34px;
}
.publikationsseite #box2 .pub-themen a {
   display: inline-block;
   padding: 6px 14px;
   border: 2px solid var(--akzent);
   border-radius: 999px;
   background-color: #fff;
   color: var(--akzent-text);
   font-size: 0.92em;
   font-weight: bold;
   line-height: 1.3;
   text-decoration: none;
}
.publikationsseite #box2 .pub-themen a:hover {
   background-color: var(--akzent);
   color: var(--akzent-auf);
}
.pub-gruppe {
   max-width: 1000px;
   margin: 0 auto 40px;
   text-align: left;
   scroll-margin-top: 16px;
}
.publikationsseite #box2 ul.pub-liste {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr));
   gap: 18px;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: left;
}
.publikationsseite #box2 ul.pub-liste > li.pub {
   display: grid;
   grid-template-columns: 120px minmax(0, 1fr);
   grid-template-rows: auto 1fr;
   grid-template-areas: "bild kopf" "bild rest";
   gap: 0 18px;
   align-items: start;
   margin: 0;
   padding: 18px;
   border: 1px solid #e2e2e2;
   border-radius: 15px;
   background-color: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.pub-bild {
   grid-area: bild;
   display: flex;
   justify-content: center;
}
.pub-bild img {
   display: block;
   width: auto;
   height: auto;
   max-width: 120px;
   max-height: 190px;
   border-radius: 3px;
   background-color: #eef0ee;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
/* Heft ohne Titelbild: Umschlag in der Seitenfarbe mit Dokument-Zeichen */
.pub-ohne-bild {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   box-sizing: border-box;
   width: 100px;
   height: 142px;
   border-radius: 3px;
   background-color: var(--akzent);
   color: var(--akzent-auf);
   font-size: 0.85em;
   font-weight: bold;
   letter-spacing: 0.08em;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.pub-ohne-bild::before {
   content: "";
   width: 38px;
   height: 38px;
   background-color: currentColor;
   -webkit-mask: var(--symbol-dokument) no-repeat center / contain;
   mask: var(--symbol-dokument) no-repeat center / contain;
}
.pub-kopf {
   grid-area: kopf;
}
.pub-rest {
   grid-area: rest;
}
.publikationsseite #box2 .pub-titel {
   margin: 0 0 6px;
   color: var(--akzent-text);
   font-size: 1.15em;
   line-height: 1.3;
   text-align: left;
}
.publikationsseite #box2 .pub-unterzeile {
   margin: 0 0 8px;
   color: #555;
   font-size: 0.9em;
   line-height: 1.45;
}
.publikationsseite #box2 .pub-rest p {
   margin: 0 0 10px;
}
.publikationsseite #box2 .pub-rest ul {
   margin: 0 0 10px;
   padding-left: 20px;
   text-align: left;
}
.publikationsseite #box2 .pub-rest ul li {
   padding-bottom: 3px;
}
.pub-mehr {
   margin: 0 0 4px;
}
.pub-mehr > summary {
   display: inline-block;
   margin: 0 0 8px;
   color: var(--akzent-text);
   font-weight: bold;
   cursor: pointer;
}
.pub-mehr > summary::-webkit-details-marker {
   display: none;
}
.pub-mehr > summary::after {
   content: "";
   display: inline-block;
   width: 7px;
   height: 7px;
   margin: -3px 0 0 8px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   vertical-align: middle;
   transform: rotate(45deg);
}
.pub-mehr[open] > summary::after {
   margin-top: 3px;
   transform: rotate(-135deg);
}
.pub-mehr > summary:hover {
   text-decoration: underline;
}
.publikationsseite #box2 .pub-aktion {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 12px;
   margin: 12px 0 0;
}
.publikationsseite #box2 .pub-knopf {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   box-sizing: border-box;
   min-height: 44px;
   padding: 9px 18px;
   border-radius: 999px;
   background-color: var(--akzent);
   color: var(--akzent-auf);
   font-weight: bold;
   text-decoration: none;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.publikationsseite #box2 .pub-knopf::before {
   content: "";
   flex: none;
   width: 18px;
   height: 18px;
   background-color: currentColor;
   -webkit-mask: var(--symbol-download) no-repeat center / contain;
   mask: var(--symbol-download) no-repeat center / contain;
}
.publikationsseite #box2 .pub-knopf:hover {
   box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
   text-decoration: underline;
}
.publikationsseite #box2 .pub-knopf:focus-visible {
   border-radius: 999px;
}
.pub-groesse {
   color: #555;
   font-size: 0.9em;
   white-space: nowrap;
}
/* Fachbeiträge und Dokumente: kompakte Liste */
.publikationsseite #box2 ul.pub-dokumente {
   margin: 0;
   padding: 0;
   border-top: 1px solid #e2e2e2;
   list-style: none;
   text-align: left;
}
.publikationsseite #box2 ul.pub-dokumente > li.pub-dok {
   display: grid;
   grid-template-columns: 30px minmax(0, 1fr) auto;
   grid-template-areas: "zeichen titel groesse" ". rest rest";
   gap: 2px 14px;
   align-items: start;
   margin: 0;
   padding: 14px 6px 12px;
   border-bottom: 1px solid #e2e2e2;
}
.pub-dok::before {
   content: "";
   grid-area: zeichen;
   width: 26px;
   height: 26px;
   margin-top: 1px;
   background-color: var(--akzent);
   -webkit-mask: var(--symbol-dokument) no-repeat center / contain;
   mask: var(--symbol-dokument) no-repeat center / contain;
}
.pub-dok .pub-titel {
   grid-area: titel;
}
.publikationsseite #box2 .pub-dok .pub-titel {
   margin: 0;
   font-size: 1.05em;
}
.publikationsseite #box2 .pub-dok .pub-titel a {
   color: var(--akzent-text);
}
.pub-dok .pub-groesse {
   grid-area: groesse;
   padding-top: 2px;
}
.publikationsseite #box2 .pub-dok .pub-rest {
   margin-top: 2px;
}
.publikationsseite #box2 .pub-dok .pub-rest p:last-child {
   margin-bottom: 0;
}
@media only screen and (max-width: 560px) {
   .publikationsseite #box2 ul.pub-liste > li.pub {
      grid-template-columns: 84px minmax(0, 1fr);
      grid-template-rows: auto auto;
      grid-template-areas: "bild kopf" "rest rest";
      gap: 12px 14px;
      padding: 14px;
   }
   .pub-bild img {
      max-width: 84px;
      max-height: 140px;
   }
   .pub-ohne-bild {
      width: 76px;
      height: 108px;
      font-size: 0.75em;
   }
   .pub-ohne-bild::before {
      width: 28px;
      height: 28px;
   }
   .publikationsseite #box2 .pub-titel {
      font-size: 1.05em;
   }
   .publikationsseite #box2 ul.pub-dokumente > li.pub-dok {
      grid-template-columns: 26px minmax(0, 1fr);
      grid-template-areas: "zeichen titel" ". groesse" ". rest";
      gap: 2px 12px;
   }
   .pub-dok::before {
      width: 22px;
      height: 22px;
   }
}