@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;
}
#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;
}
#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; }
.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 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;
   }
   #main_navi:hover ul.main_navi_sub {
      display: block;
   }
   #main_navi:hover ul li {
      padding: 5px 9px;
    background-color: #3f8238;
   }
}

/* === 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;
   }
   #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) ===
   Bis 640 px: Pfeil-Knopf rechts in der Gruppenzeile (naturpark.js), die Gruppe der aktuellen Seite
   ist offen. Der Knopf liegt durchsichtig über dem Gruppen-Link und übernimmt so dessen Hintergrund. */
#main_navi .gruppe-knopf {
   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 .gruppe-knopf {
      display: block;
      grid-column: 2;
      grid-row: 1;
      position: relative;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #000;
      cursor: pointer;
   }
   #main_navi .gruppe-knopf::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translate(-50%, -75%) rotate(45deg);
   }
   #main_navi .gruppe-knopf[aria-expanded="true"]::before {
      transform: translate(-50%, -25%) rotate(-135deg);
   }
   #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,
   .main_navi_first > li:hover > .main_navi_sub {
      display: grid;
   }
   #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;
   }
}