/* TYPO3 8 reference design adapted to semantic HTML – Versbach 1.2.7 */
:root {font-family:Verdana,Arial,Helvetica,sans-serif;color:#111;background:#e6f6fb;}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:transparent url('../Images/Legacy/page-background.jpg') repeat;color:#000;font:16px/1.8 Verdana,Arial,sans-serif}
a{color:#62281a} a:hover{color:#8c3a25}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:white;padding:10px}.skip-link:focus{left:10px}
#tablePageWrapper{max-width:970px;min-height:100vh;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,770px);grid-template-rows:1fr auto;background:#fff}
#tdNavi{grid-column:1;grid-row:1;background:#fff url('../Images/Legacy/nav-background.jpg') no-repeat left top;min-width:0;padding:5px 10px}
#tdContent{grid-column:2;grid-row:1;min-width:0;background:#fff url('../Images/Legacy/content-background.jpg') no-repeat 0 228px}

#tableHeader{height:228px;background:url('../Images/Legacy/header-schiff-und-schulname-und-meer261103.webp') no-repeat left top;position:relative}
@media(max-width:970px){
  #tableHeader{height:228px;background:url('../Images/Legacy/header-schiff-und-schulname-und-meer261103-780-970.webp') no-repeat left top;position:relative}
}
@media(max-width:780px){
  #tableHeader{height:clamp(120px,30vw,228px);background:url('../Images/Legacy/header-schiff-und-schulname-und-meer261103.webp') no-repeat left top;background-size:100% auto}
}

#divH1page{position:absolute;bottom:0;right:10px;max-width:calc(100% - 20px);min-height:32px;display:flex;align-items:center;justify-content:flex-end;text-align:right;z-index:3}
#divH1page h1{color:#fff;font-family:Verdana,Arial,sans-serif;font-weight:700;font-size:18px;line-height:1.25;margin:0;padding:0;text-shadow:1px 1px 2px #173a66}
#divContentWrapper{padding:10px 15px 20px 10px}
#divContent{font-size:16px;overflow-wrap:anywhere}
#divContent img{max-width:100%;height:auto}
#divContent figure.table{max-width:100%;overflow-x:auto}
#divContent h1,#divContent h2,#divContent h3,#divContent h4,#divContent h5,#divContent h6{color:#6550b6;margin:0 0 8px;font-weight:bold}
#divContent h1{font-size:22px}
#divContent h2{font-size:20px}
#divContent h3{font-size:18px}
#divContent h4{font-size:16px}
#divContent h5{font-size:15px}
#divContent h6{font-size:14px}
#tdFooter{grid-column:1/-1;grid-row:2;min-height:25px;background:url('../Images/Legacy/footer-background.png') repeat-x left bottom}
#divFooter{text-align:center;font-size:11px;min-height:25px;line-height:1.5}
#divFooter p{margin:0}
#divMenuLeft{width:180px;max-width:100%}
.wpr-menu,.wpr-submenu{padding:0;margin:0;list-style:none}
/* Originale Bildnavigation: gleicher Dateisatz wie unter TYPO3 8.7. */
.wpr-menu>li{margin:0;}
.wpr-menu>li>a{display:block;width:180px;max-width:100%;height:var(--wpr-nav-height,60px);background:var(--wpr-nav-image) no-repeat left top;background-size:180px auto;color:transparent;text-decoration:none;border:0;border-radius:0;position:relative;overflow:hidden;}
.wpr-menu>li>a span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.wpr-menu>li>a:hover,.wpr-menu>li>a:focus-visible,.wpr-menu>li.is-active>a,.wpr-menu>li.is-current>a{background-image:var(--wpr-nav-active,var(--wpr-nav-image));outline:none;}
.wpr-menu>li>a:focus-visible{outline:2px solid #111;outline-offset:-2px;}
.wpr-menu>li:nth-child(1){--wpr-nav-height:46px;--wpr-nav-image:url('../Images/Legacy/nav-startseite.png');--wpr-nav-active:url('../Images/Legacy/nav-startseite-aktiv.png');}
.wpr-menu>li:nth-child(2){--wpr-nav-height:61px;--wpr-nav-image:url('../Images/Legacy/nav-unsere-schule.png');--wpr-nav-active:url('../Images/Legacy/nav-unsere-schule-aktiv.png');}
.wpr-menu>li:nth-child(3){--wpr-nav-height:72px;--wpr-nav-image:url('../Images/Legacy/nav-aktuelles.png');--wpr-nav-active:url('../Images/Legacy/nav-aktuelles-aktiv.png');}
.wpr-menu>li:nth-child(4){--wpr-nav-height:64px;--wpr-nav-image:url('../Images/Legacy/nav-termine.png');--wpr-nav-active:url('../Images/Legacy/nav-termine-aktiv.png');}
.wpr-menu>li:nth-child(5){--wpr-nav-height:65px;--wpr-nav-image:url('../Images/Legacy/nav-schulleben.png');--wpr-nav-active:url('../Images/Legacy/nav-schulleben-aktiv.png');}
.wpr-menu>li:nth-child(6){--wpr-nav-height:60px;--wpr-nav-image:url('../Images/Legacy/nav-freunde.png');--wpr-nav-active:url('../Images/Legacy/nav-freunde-aktiv.png');}
.wpr-menu>li:nth-child(7){--wpr-nav-height:79px;--wpr-nav-image:url('../Images/Legacy/nav-kontakt.png');--wpr-nav-active:url('../Images/Legacy/nav-kontakt-aktiv.png');}
.wpr-menu>li:nth-child(n+8)>a{background:none;color:#111;height:auto;padding:6px;font-weight:bold;}
.wpr-menu>li:nth-child(n+8)>a span{position:static;clip:auto;width:auto;height:auto;margin:0;overflow:visible;white-space:normal;}
.wpr-submenu{padding-left:10px}.wpr-submenu .wpr-submenu{padding-left:12px}.wpr-submenu a{display:block;color:#333;text-decoration:none;padding:3px 5px;font-size:11px}.wpr-submenu a:hover,.wpr-submenu a[aria-current="page"]{background:var(--wpr-submenu-bg,#86dede);border-radius:4px}

/* Untermenues uebernehmen die Farbe des zugehoerigen Hauptmenuepunkts. */
.wpr-menu > li:nth-child(1) { --wpr-submenu-bg: #86dede; } /* Startseite */
.wpr-menu > li:nth-child(2) { --wpr-submenu-bg: #66c2ff; } /* Unsere Schule */
.wpr-menu > li:nth-child(3) { --wpr-submenu-bg: #b266ff; } /* Aktuelles */
.wpr-menu > li:nth-child(4) { --wpr-submenu-bg: #ffff66; } /* Termine */
.wpr-menu > li:nth-child(5) { --wpr-submenu-bg: #ff66b2; } /* Schulleben */
.wpr-menu > li:nth-child(6) { --wpr-submenu-bg: #66ffb2; } /* Freunde */
.wpr-menu > li:nth-child(7) { --wpr-submenu-bg: #ffa366; } /* Kontakt */

.frame-custom-22,.frame.frame-custom-22{background:#ffff99;padding:6px}
.frame-custom-23,.frame.frame-custom-23{background:#ccffcc;padding:6px}
.frame{margin-bottom:12px}
@media(max-width:780px){
  #tablePageWrapper{
    display:flex;
    flex-direction:column;
  }
  #tdNavi{
    order:2;
    background:#effafa;
    padding:10px;
  }
  #tdContent{
    order:1;
    background:#fff;
  }
  #tdFooter{order:3}
  /*#tableHeader{height:clamp(120px,30vw,228px);background-size:100% auto}*/
  #divH1page{max-width:80%;right:12px;bottom:5px}
  #divH1page h1{font-size:clamp(13px,2.5vw,18px)}
  #divMenuLeft{width:auto}
  .wpr-menu{display:block}
  .wpr-menu>li{display:block}
  
}

/* Flaschenpost wie im historischen Header, ohne veraltetes <marquee>. */
#divFlaschenpost {
  position: absolute;
  top: 185px;
  right: 0;
  width: min(490px, 100%);
  height: 19px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
#divFlaschenpost img {
  display: block;
  width: 15px;
  height: 14px;
  position: absolute;
  left: 0;
  animation: wpr-flaschenpost 55s linear infinite;
}
@keyframes wpr-flaschenpost {
  from { left: 0; }
  to { left: calc(100% - 15px); }
}
@media (max-width: 780px) {
  #divFlaschenpost { top: 81%; }
}
@media (prefers-reduced-motion: reduce) {
  #divFlaschenpost img { animation: none; }
}
@media(max-width:375px){
  #divH1page{bottom:9px}
  #divFlaschenpost { top: 75%; }
}
@media(max-width:350px){
  #divH1page{bottom:13px}
  #divFlaschenpost { top: 70%; }
}
@media(max-width:335px){
  #divH1page{bottom:17px}
  #divFlaschenpost { top: 65%; }
}


/* RTE-Tabellen aus TYPO3 8 mit festen Breiten auch mobil nutzbar. */
#divContent figure.table {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
}
#divContent figure.table > table {
  /* Die Tabellenbreite folgt der im RTE eingestellten Figure-Breite. */
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
#divContent figure.table :is(td, th) {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* WPR Tabellenrahmen: Klassen auf <table> oder <figure class="table">.
   !important ueberschreibt alte CKEditor-Angaben wie border-style:none
   sowie Inline-Rahmen einzelner Zellen. Andere Tabellen bleiben unveraendert. */
:where(#divContent, .ck-content) :is(table, figure.table).wpr-table-border-black { --wpr-table-border-color: #000000; }
:where(#divContent, .ck-content) :is(table, figure.table).wpr-table-border-gray { --wpr-table-border-color: #777777; }
:where(#divContent, .ck-content) :is(table, figure.table).wpr-table-border-blue { --wpr-table-border-color: #0080c9; }
:where(#divContent, .ck-content) :is(table, figure.table).wpr-table-border-green { --wpr-table-border-color: #209d44; }

:where(#divContent, .ck-content) :is(
  table.wpr-table-border-black, table.wpr-table-border-gray,
  table.wpr-table-border-blue, table.wpr-table-border-green,
  figure.table.wpr-table-border-black > table,
  figure.table.wpr-table-border-gray > table,
  figure.table.wpr-table-border-blue > table,
  figure.table.wpr-table-border-green > table
) {
  border: 1px solid var(--wpr-table-border-color, #000) !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
:where(#divContent, .ck-content) :is(
  table.wpr-table-border-black, table.wpr-table-border-gray,
  table.wpr-table-border-blue, table.wpr-table-border-green,
  figure.table.wpr-table-border-black > table,
  figure.table.wpr-table-border-gray > table,
  figure.table.wpr-table-border-blue > table,
  figure.table.wpr-table-border-green > table
) :is(td, th) {
  border: 1px solid var(--wpr-table-border-color, #000) !important;
}


/* Untermenues: Plus = weitere Unterseiten vorhanden, Minus = aktueller Zweig offen.
   Der Hauptmenue-Bildnavigation wird kein Symbol hinzugefuegt.
   Ein Klick fuehrt weiterhin zur verlinkten Seite (kein JS-Aufklappen). */
.wpr-menu .wpr-submenu li.has-children > a {
  position: relative;
  padding-left: 23px;
}
.wpr-menu .wpr-submenu li.has-children > a::before {
  content: "+";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  line-height: 11px;
  text-align: center;
  border: 1px solid #336899;
  border-radius: 2px;
  background: #e8f4ff;
  color: #20527d;
  font: bold 12px/11px Arial, sans-serif;
  box-sizing: border-box;
}
.wpr-menu .wpr-submenu li.has-children:is(.is-active, .is-current) > a::before {
  content: "−";
  background: #c0e6ff;
}


/* Dateilinks: Darstellung wie bei gs-schwarzacher-becken.de.
   Die Kennzeichnung gilt nur fuer Textlinks im Inhalt, nie fuer Bildlinks.
   Externe Dateilinks bekommen ein Dateikuerzel statt des Extern-Pfeils. */
#divContent a[href]:not(:has(img, svg))::after {
  display: none;
}
/* Externe Websites – eigene Domain und DDEV ausnehmen. */
#divContent a:is([href^="http://" i], [href^="https://" i]):not([href*="grundschule-versbach.de" i]):not([href*=".ddev.site" i]):not(:has(img, svg))::after {
  content: "\00a0\2197";
  white-space: nowrap;
  display: inline;
  margin-left: 0;
  color: currentColor;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  vertical-align: baseline;
}
/* Dateityp-Badges: urspruengliche 18px-Optik aus Schwarzacher Becken. */
#divContent a:is(
  [href$=".pdf" i], [href*=".pdf?" i], [href*=".pdf#" i],
  [href$=".doc" i], [href*=".doc?" i], [href*=".doc#" i],
  [href$=".docx" i], [href*=".docx?" i], [href*=".docx#" i],
  [href$=".odt" i], [href*=".odt?" i], [href*=".odt#" i],
  [href$=".rtf" i], [href*=".rtf?" i], [href*=".rtf#" i],
  [href$=".xls" i], [href*=".xls?" i], [href*=".xls#" i],
  [href$=".xlsx" i], [href*=".xlsx?" i], [href*=".xlsx#" i],
  [href$=".ods" i], [href*=".ods?" i], [href*=".ods#" i],
  [href$=".csv" i], [href*=".csv?" i], [href*=".csv#" i],
  [href$=".ppt" i], [href*=".ppt?" i], [href*=".ppt#" i],
  [href$=".pptx" i], [href*=".pptx?" i], [href*=".pptx#" i],
  [href$=".odp" i], [href*=".odp?" i], [href*=".odp#" i],
  [href$=".zip" i], [href*=".zip?" i], [href*=".zip#" i]
):not(:has(img, svg))::after {
  content: "DATEI";
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 18px;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 3px;
  vertical-align: 3px;
  font: 700 10px/18px Arial, sans-serif;
  letter-spacing: 0.2px;
  color: #fff;
  background-color: #d93025;
  text-decoration: none;
  white-space: nowrap;
}
/* PDF: rot wie im Referenzprojekt. */
#divContent a:is([href$=".pdf" i], [href*=".pdf?" i], [href*=".pdf#" i]):not(:has(img, svg))::after { content: "PDF"; min-width: 25px; background-color: #d93025; }
/* Word: blau wie im Referenzprojekt (auch fuer .doc). */
#divContent a:is([href$=".doc" i], [href*=".doc?" i], [href*=".doc#" i]):not(:has(img, svg))::after { content: "DOC"; background-color: #2b579a; }
#divContent a:is([href$=".docx" i], [href*=".docx?" i], [href*=".docx#" i]):not(:has(img, svg))::after { content: "DOCX"; min-width: 32px; background-color: #2b579a; }
#divContent a:is([href$=".odt" i], [href*=".odt?" i], [href*=".odt#" i]):not(:has(img, svg))::after { content: "ODT"; background-color: #2b579a; }
#divContent a:is([href$=".rtf" i], [href*=".rtf?" i], [href*=".rtf#" i]):not(:has(img, svg))::after { content: "RTF"; background-color: #2b579a; }
/* Weitere Dateitypen ebenfalls mit weisser Schrift auf farbiger Flaeche. */
#divContent a:is([href$=".xls" i], [href*=".xls?" i], [href*=".xls#" i], [href$=".xlsx" i], [href*=".xlsx?" i], [href*=".xlsx#" i], [href$=".ods" i], [href*=".ods?" i], [href*=".ods#" i], [href$=".csv" i], [href*=".csv?" i], [href*=".csv#" i]):not(:has(img, svg))::after { content: "XLS"; background-color: #217346; }
#divContent a:is([href$=".ppt" i], [href*=".ppt?" i], [href*=".ppt#" i], [href$=".pptx" i], [href*=".pptx?" i], [href*=".pptx#" i], [href$=".odp" i], [href*=".odp?" i], [href*=".odp#" i]):not(:has(img, svg))::after { content: "PPT"; background-color: #b7472a; }
#divContent a:is([href$=".zip" i], [href*=".zip?" i], [href*=".zip#" i]):not(:has(img, svg))::after { content: "ZIP"; background-color: #666; }


/* Lightbox aus EXT:wpr der GS Schwarzacher Becken */
/* jQuery-Lightbox für vergrößerbare Bilder */
.ce-gallery figure.image > a[data-wpr-lightbox-active="true"],
.ce-gallery figure.image > a[data-wpr-lightbox-active="true"] img,
figure.image > a[data-window-target="thePicture"],
figure.image > a[data-window-target="thePicture"] img,
a[href*="eID=tx_cms_showpic"],
a[href*="eID=tx_cms_showpic"] img,
a[data-window-url*="eID=tx_cms_showpic"],
a[data-window-url*="eID=tx_cms_showpic"] img {
  cursor: pointer !important;
}

body.wpr-lightbox-open {
  overflow: hidden;
}

.wpr-lightbox[hidden] {
  display: none !important;
}

.wpr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .86);
}

.wpr-lightbox__dialog {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  width: min(1400px, 100%);
  height: min(920px, 100%);
}

.wpr-lightbox__figure {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.wpr-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 120px;
  max-width: 100%;
  max-height: calc(100% - 80px);
}

.wpr-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 130px);
  width: auto;
  height: auto;
  opacity: 0;
  object-fit: contain;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  transition: opacity .15s ease;
}

.wpr-lightbox__image.is-loaded {
  opacity: 1;
}

.wpr-lightbox__loading,
.wpr-lightbox__error {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.wpr-lightbox__caption {
  max-width: 900px;
  margin-top: 12px;
  padding: 7px 12px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.wpr-lightbox__close,
.wpr-lightbox__previous,
.wpr-lightbox__next {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: rgba(0, 0, 0, .48);
  cursor: pointer;
}

.wpr-lightbox__close:hover,
.wpr-lightbox__close:focus-visible,
.wpr-lightbox__previous:hover,
.wpr-lightbox__previous:focus-visible,
.wpr-lightbox__next:hover,
.wpr-lightbox__next:focus-visible {
  color: #0000ff;
  background: #fff;
  outline: 3px solid #ababf3;
  outline-offset: 2px;
}

.wpr-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 46px;
  height: 46px;
  font-size: 38px;
  line-height: 1;
}

.wpr-lightbox__previous,
.wpr-lightbox__next {
  width: 44px;
  height: 64px;
  font-size: 34px;
  line-height: 1;
}

.wpr-lightbox__previous {
  grid-column: 1;
  justify-self: start;
}

.wpr-lightbox__next {
  grid-column: 3;
  justify-self: end;
}

.wpr-lightbox__counter {
  margin-top: 5px;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 700px) {
  .wpr-lightbox {
    padding: 12px;
  }

  .wpr-lightbox__dialog {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    height: 100%;
  }

  .wpr-lightbox__previous,
  .wpr-lightbox__next {
    width: 38px;
    height: 56px;
    font-size: 28px;
  }

  .wpr-lightbox__close {
    top: 2px;
    right: 2px;
    width: 42px;
    height: 42px;
  }

  .wpr-lightbox__image {
    max-height: calc(100vh - 110px);
  }

  .wpr-lightbox__caption {
    font-size: 13px;
  }
}


/* TYPO3-RTE: Textausrichtung auch ohne .ce-bodytext sicherstellen. */
#divContent p.text-center {
    text-align: center !important;
}
#divContent p.text-start {
    text-align: left !important;
}
#divContent p.text-end {
    text-align: right !important;
}
#divContent p.text-justify {
    text-align: justify !important;
}


/* TYPO3-RTE: Ausrichtungsklassen auch bei Ueberschriften (inklusive Links). */
#divContent :is(h1, h2, h3, h4, h5, h6).text-center {
    text-align: center !important;
}
#divContent :is(h1, h2, h3, h4, h5, h6).text-start {
    text-align: left !important;
}
#divContent :is(h1, h2, h3, h4, h5, h6).text-end {
    text-align: right !important;
}
#divContent :is(h1, h2, h3, h4, h5, h6).text-justify {
    text-align: justify !important;
}

/* Schulferien: Tabellenbeschriftung fuer Screenreader erhalten, visuell ausblenden.
   Funktioniert auch ohne Bootstrap-CSS. */
#divContent .wpr-schoolholidays caption.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Responsive Navigation, uebernommenes Bedienkonzept GS Schwarzacher Becken.
   Ab 780 px wird die bestehende Bildnavigation links verwendet. */
.mobile-menu-toggle, .mobile-navigation { display: none; }
.wpr-visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}
@media (max-width: 780px) {
  #tablePageWrapper { display: flex; flex-direction: column; }
  #tdNavi { display: none !important; }
  #tdContent { order: 1; width: 100%; }
  #tdFooter { order: 2; }
  #tableHeader { overflow: visible; }
  #wprMobileMenuButton.mobile-menu-toggle {
    position: absolute; right: 12px; bottom: 42px; z-index: 111;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 40px; padding: 8px;
    border: 1px solid #2b658b; border-radius: 4px;
    color: #fff; background: #246a9b; cursor: pointer;
  }
  #wprMobileMenuButton:is(:hover, :focus-visible, .is-open) {
    color: #173a66; background: #c0e6ff; outline: 2px solid currentColor; outline-offset: 2px;
  }
  .mobile-menu-toggle__icon { display: grid; gap: 5px; width: 24px; }
  .mobile-menu-toggle__icon > span { display: block; width: 100%; height: 3px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .mobile-menu-toggle.is-open .mobile-menu-toggle__icon > span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .mobile-menu-toggle.is-open .mobile-menu-toggle__icon > span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle.is-open .mobile-menu-toggle__icon > span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  #wprMobileNavigation.mobile-navigation {
    position: absolute; top: 100%; right: 0; z-index: 999;
    display: block; width: min(92vw, 420px); max-height: min(75vh, 580px); overflow-y: auto;
    color: #123d62; background: #e6f5ff; border: 1px solid #65a8d0;
    box-shadow: 0 8px 22px rgb(0 0 0 / 26%);
  }
  #wprMobileNavigation[hidden], #wprMobileNavigation .mobile-nav__submenu[hidden] { display: none !important; }
  #wprMobileNavigation .mobile-nav, #wprMobileNavigation .mobile-nav__submenu { list-style: none; margin: 0; padding: 0; }
  #wprMobileNavigation .mobile-nav__item { margin: 0; padding: 0; border-bottom: 1px solid #9cc9e3; }
  #wprMobileNavigation .mobile-nav__row { display: flex; align-items: stretch; min-height: 46px; }
  #wprMobileNavigation .mobile-nav__link, #wprMobileNavigation .mobile-nav__link:visited {
    display: flex; flex: 1 1 auto; align-items: center; min-width: 0; padding: 11px 14px;
    color: #123d62; font: 700 14px/1.3 Verdana, Arial, sans-serif; text-decoration: none;
  }
  #wprMobileNavigation .mobile-nav__link:is(:hover,:focus-visible) { color: #003e70; background: #c0e6ff; }
  #wprMobileNavigation .mobile-nav__item.is-active > .mobile-nav__row > .mobile-nav__link { background: #d7ecfa; }
  #wprMobileNavigation .mobile-nav__item.is-current > .mobile-nav__row > .mobile-nav__link {
    color: #003e70; background: #b9e2ff; box-shadow: inset 5px 0 0 #287ab3;
  }
  #wprMobileNavigation .mobile-submenu-toggle {
    position: relative; flex: 0 0 48px; width: 48px; min-height: 46px; padding: 0;
    border: 0; border-left: 1px solid #9cc9e3; color: #125781; background: transparent; cursor: pointer;
  }
  #wprMobileNavigation .mobile-submenu-toggle::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0;
    border-top: 7px solid transparent; border-bottom: 7px solid transparent;
    border-left: 10px solid currentColor; transform: translate(-40%, -50%); transition: transform .18s ease;
  }
  #wprMobileNavigation .mobile-submenu-toggle.is-open::before { transform: translate(-50%, -35%) rotate(90deg); }
  #wprMobileNavigation .mobile-submenu-toggle:is(:hover, :focus-visible, .is-open) { color: #003e70; background: #c0e6ff; }
  #wprMobileNavigation .mobile-nav__submenu { background: #f4fbff; }
  #wprMobileNavigation .mobile-nav__submenu .mobile-nav__link { padding-left: 28px; }
  #wprMobileNavigation .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__link { padding-left: 46px; }
  #wprMobileNavigation .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__link { padding-left: 64px; }
  #wprMobileNavigation .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__link { padding-left: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle__icon > span, #wprMobileNavigation .mobile-submenu-toggle::before { transition: none; }
}

/* Barrierefreiheit: Layout und Navigation (ab Version 1.7.0).
   Redaktionelle Inhaltselemente werden nicht umgestaltet. */
.skip-link {
  left: 12px; top: 10px; transform: translateY(-200%);
  padding: 10px 14px; z-index: 10000; border: 2px solid #112a42;
  border-radius: 4px; color: #112a42; background: #fff;
  font-size: 15px; line-height: 1.35; font-weight: bold; text-decoration: underline;
}
.skip-link:focus-visible, .skip-link:focus { transform: none; left: 12px; outline: 3px solid #ffbf00; outline-offset: 2px; }
#divContentWrapper:focus { outline: none; }
/* Navigation bleibt auch ohne Erkennung der Hover-Farbe per Tastatur sichtbar. */
#divMenuLeft a:focus-visible,
#wprMobileNavigation a:focus-visible,
#wprMobileNavigation button:focus-visible,
#wprMobileMenuButton:focus-visible,
#divFooter a:focus-visible {
  outline: 3px solid #092d59 !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff;
}
#divMenuLeft .wpr-submenu a { font-size: 13px; line-height: 1.5; padding: 5px; }
/* Untermenuepunkte mit Plus/Minus: Text beginnt rechts neben dem Symbol. */
#divMenuLeft .wpr-submenu li.has-children > a { padding-left: 25px; }
#divMenuLeft .wpr-submenu a:focus-visible { background: #d8f3ff; text-decoration: underline; }
#divFooter { font-size: 13px; }
#divFooter a { text-decoration: underline; text-underline-offset: 2px; }
#divFooter a:hover { text-decoration-thickness: 2px; }
@media (max-width: 780px) {
  #wprMobileMenuButton.mobile-menu-toggle { min-width: 44px; min-height: 44px; }
  #wprMobileNavigation .mobile-nav__link { font-size: 16px; line-height: 1.4; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
  #wprMobileNavigation .mobile-nav__link:is(:focus-visible,:hover) { text-decoration-color: currentColor; }
  #wprMobileNavigation .mobile-submenu-toggle { min-width: 48px; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Piratenschiff-Nach-oben-Button: nur beim Scrollen sichtbar. */
#wprBackToTop.wpr-back-to-top {
  position: fixed; right: 16px; bottom: 18px; z-index: 1000;
  display: block; width: 80px; height: 89px; margin: 0; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  opacity: .88; transition: opacity .18s ease;
}
#wprBackToTop.wpr-back-to-top[hidden] { display: none !important; }
#wprBackToTop.wpr-back-to-top img { display: block; width: 80px; height: 89px; }
#wprBackToTop.wpr-back-to-top:hover { opacity: 1; }
#wprBackToTop.wpr-back-to-top:focus-visible {
  opacity: 1; outline: 3px solid #092d59; outline-offset: 3px; border-radius: 5px;
}
@media (max-width: 480px) {
  #wprBackToTop.wpr-back-to-top { right: 8px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #wprBackToTop.wpr-back-to-top { transition: none; }
}

/* 1.7.6: Text-Bild-Elemente ohne Umfluss auf schmalen Bildschirmen.
   Nur ce-nowrap anfassen; normale Textumfluss-Elemente bleiben unveraendert. */
@media (max-width: 780px) {
  #divContent .ce-textpic.ce-nowrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }
  #divContent .ce-textpic.ce-nowrap > .ce-gallery,
  #divContent .ce-textpic.ce-nowrap > .ce-bodytext {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  #divContent .ce-textpic.ce-nowrap > .ce-gallery {
    margin-bottom: 1rem;
  }
  #divContent .ce-textpic.ce-nowrap > .ce-gallery .ce-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
  }
  #divContent .ce-textpic.ce-nowrap > .ce-gallery .ce-column {
    float: none;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }
  #divContent .ce-textpic.ce-nowrap > .ce-gallery figure {
    margin: 0;
  }
  #divContent .ce-textpic.ce-nowrap > .ce-gallery img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 480px) {
  #divContent .ce-textpic.ce-nowrap > .ce-gallery .ce-row {
    justify-content: center;
  }
  #divContent .ce-textpic.ce-nowrap > .ce-gallery .ce-column {
    flex: 0 1 100%;
    text-align: center;
  }
  #divContent .ce-textpic.ce-nowrap > .ce-gallery figure {
    display: inline-block;
    max-width: 100%;
  }
}

/* Footer: redaktioneller Inhalt von Seite UID 12; transparent und responsiv. */
#tdFooter {
  background: rgba(222, 241, 248, .88);
  border-top: 1px solid rgba(38, 100, 137, .25);
  min-width: 0;
}
#divFooter {
  padding: 7px 14px;
  color: #173a55;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#divFooter .frame { margin: 0; }
#divFooter p { margin: 0; }
#divFooter a { color: #123c60; }
@media (max-width: 480px) {
  #divFooter { padding: 10px 12px; text-align: center; }
}

/* 1.7.8: Telefonlinks auf Mausgeraeten wie normalen Text darstellen.
   Auf primaeren Touch-Eingabegeraeten als Links erkennbar lassen. */
a[href^="tel:" i],
a[href^="tel:" i]:hover,
a[href^="tel:" i]:visited {
  color: inherit !important;
  text-decoration: none !important;
  cursor: text;
}
@media (hover: none) and (pointer: coarse) {
  a[href^="tel:" i],
  a[href^="tel:" i]:hover,
  a[href^="tel:" i]:visited {
    color: #62281a !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    cursor: pointer;
  }
}