/* TYPO3-v13-Anpassungen zum historischen Layout */
:root {
  /* Responsive Menü: Position des Hamburger-Buttons */
  --wpr-mobile-toggle-left: 12px;
  --wpr-mobile-toggle-bottom: 8px;
  --wpr-mobile-toggle-width: 44px;
  --wpr-mobile-toggle-height: 40px;

  /* Responsive Menü: Farben */
  --wpr-mobile-toggle-background: #6666ff;
  --wpr-mobile-toggle-color: #ffffff;
  --wpr-mobile-menu-background: #6666ff;
  --wpr-mobile-menu-link-color: #ffffff;
  --wpr-mobile-menu-link-hover-background: #ababf3;
  --wpr-mobile-menu-link-hover-color: #0000ff;
  --wpr-mobile-menu-active-background: rgba(171, 171, 243, 0.45);
  --wpr-mobile-menu-current-background: #ababf3;
  --wpr-mobile-menu-current-color: #0000ff;
  --wpr-mobile-menu-current-marker-color: #ffff66;
  --wpr-mobile-menu-current-label-background: #ffffff;
  --wpr-mobile-menu-current-label-color: #0000ff;
  --wpr-mobile-menu-border-color: rgba(255, 255, 255, 0.55);
  --wpr-mobile-menu-triangle-color: #ffffff;

  /* Responsive Menü: Breite des aufgeklappten Menüs */
  --wpr-mobile-menu-width: min(92vw, 420px);

  /* Nach-oben-Schaltfläche */
  --wpr-back-to-top-right: 24px;
  --wpr-back-to-top-bottom: 24px;
  --wpr-back-to-top-size: 48px;
  --wpr-back-to-top-background: #6666ff;
  --wpr-back-to-top-color: #ffffff;
  --wpr-back-to-top-hover-background: #ababf3;
  --wpr-back-to-top-hover-color: #0000ff;

  /* Abstand zwischen Sprungziel und oberem Fensterrand */
  --wpr-anchor-scroll-offset: 20px;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--wpr-anchor-scroll-offset);
}

/* Sprungziele bleiben nach dem Scrollen mit etwas Luft zum Fensterrand sichtbar. */
[id] {
  scroll-margin-top: var(--wpr-anchor-scroll-offset);
}

/* Bewegungsanimationen werden bei entsprechender Betriebssystem-Einstellung deaktiviert. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  min-height: 100vh;
  height: auto;
  overflow-x: auto;
}

.page-wrapper {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  width: 990px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: visible;
}

.navigation-column {
  flex: 0 0 190px;
  width: 190px;
  position: relative;
  z-index: 200;
  overflow: visible;
}

.content-column {
  flex: 0 0 800px;
  width: 800px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.site-header {
  position: relative;
  width: 800px;
  height: 156px;
  overflow: hidden;
  background: #6666ff;
  z-index: 60;
}

#tdHeader {
  position: absolute;
  inset: 0;
  width: 800px;
  height: 156px;
  border-right: 3px solid #6666ff;
  background: #6666ff;
}

.section-header__image {
  position: absolute;
  left: 0;
  top: 72px;
  display: block;
  width: 800px;
  height: 84px;
}

.section-header__image--default { z-index: 0; }
#tdHeader .section-header__image:not(.section-header__image--default) { z-index: 1; }

#divLogoSchrift {
  position: absolute;
  inset: 0 auto auto 0;
  width: 800px;
  height: 133px;
  margin: 0;
  z-index: 2;
}

#divLogoSchrift img { display: block; width: 800px; height: 133px; }

#divHeadline {
  position: absolute;
  left: 160px;
  top: 106px;
  width: 395px;
  height: 50px;
  margin: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  text-align: center;
}

#divHeadline h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 8px;
  color: #fff;
  font-family: "WprKids", "Comic Sans MS", "Trebuchet MS", cursive;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 400;
}

#divHeadline h1 span {
  display: block;
}

#divLupe {
  position: absolute;
  top: 114px;
  right: 20px;
  width: 50px;
  height: 40px;
  margin: 0;
  z-index: 4;
}

#divContentWrapper { min-height: calc(100vh - 191px); }

.main-nav,
.flyout-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

#divMenuLeft {
  position: relative;
  z-index: 210;
  overflow: visible;
}

.main-nav__item { position: relative; margin: 0; padding: 0; font-size: 0; overflow: visible; }
.main-nav__link { display: block; width: 190px; background-repeat: no-repeat; background-position: 0 0; }
.main-nav__link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.main-nav__item:nth-child(1) > .main-nav__link { height:72px; background-image:url('../Images/Layout/nav-start.png'); }
.main-nav__item:nth-child(1).is-active > .main-nav__link,
.main-nav__item:nth-child(1).is-current > .main-nav__link,
.main-nav__item:nth-child(1) > .main-nav__link:hover { background-image:url('../Images/Layout/nav-start-aktiv.png'); }
.main-nav__item:nth-child(2) > .main-nav__link { height:84px; background-image:url('../Images/Layout/nav-unsere-schule.png'); }
.main-nav__item:nth-child(2).is-active > .main-nav__link,
.main-nav__item:nth-child(2).is-current > .main-nav__link,
.main-nav__item:nth-child(2) > .main-nav__link:hover { background-image:url('../Images/Layout/nav-unsere-schule-aktiv.png'); }
.main-nav__item:nth-child(3) > .main-nav__link { height:80px; background-image:url('../Images/Layout/nav-aktuelles.png'); }
.main-nav__item:nth-child(3).is-active > .main-nav__link,
.main-nav__item:nth-child(3).is-current > .main-nav__link,
.main-nav__item:nth-child(3) > .main-nav__link:hover { background-image:url('../Images/Layout/nav-aktuelles-aktiv.png'); }
.main-nav__item:nth-child(4) > .main-nav__link { height:65px; background-image:url('../Images/Layout/nav-termine.png'); }
.main-nav__item:nth-child(4).is-active > .main-nav__link,
.main-nav__item:nth-child(4).is-current > .main-nav__link,
.main-nav__item:nth-child(4) > .main-nav__link:hover { background-image:url('../Images/Layout/nav-termine-aktiv.png'); }
.main-nav__item:nth-child(5) > .main-nav__link { height:87px; background-image:url('../Images/Layout/nav-unsere-klassen.png'); }
.main-nav__item:nth-child(5).is-active > .main-nav__link,
.main-nav__item:nth-child(5).is-current > .main-nav__link,
.main-nav__item:nth-child(5) > .main-nav__link:hover { background-image:url('../Images/Layout/nav-unsere-klassen-aktiv.png'); }
.main-nav__item:nth-child(6) > .main-nav__link { height:78px; background-image:url('../Images/Layout/nav-schulleben.png'); }
.main-nav__item:nth-child(6).is-active > .main-nav__link,
.main-nav__item:nth-child(6).is-current > .main-nav__link,
.main-nav__item:nth-child(6) > .main-nav__link:hover { background-image:url('../Images/Layout/nav-schulleben-aktiv.png'); }
.main-nav__item:nth-child(7) > .main-nav__link { height:87px; background-image:url('../Images/Layout/nav-freunde.png'); }
.main-nav__item:nth-child(7).is-active > .main-nav__link,
.main-nav__item:nth-child(7).is-current > .main-nav__link,
.main-nav__item:nth-child(7) > .main-nav__link:hover { background-image:url('../Images/Layout/nav-freunde-aktiv.png'); }
.main-nav__item:nth-child(8) > .main-nav__link { height:65px; background-image:url('../Images/Layout/nav-kontakt.png'); }
.main-nav__item:nth-child(8).is-active > .main-nav__link,
.main-nav__item:nth-child(8).is-current > .main-nav__link,
.main-nav__item:nth-child(8) > .main-nav__link:hover { background-image:url('../Images/Layout/nav-kontakt-aktiv.png'); }

.flyout-nav {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  width: 212px;
  padding: 7px 10px 3px;
  border: 1px solid #fff;
  background: rgba(171,171,243,.97);
  z-index: 500;
  font-size: 12px;
  overflow: visible;
  box-shadow: 3px 4px 10px rgba(0, 0, 0, .18);
}

/* Kleine unsichtbare Überlappung verhindert eine Hover-Lücke am Übergang. */
.flyout-nav::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 4px;
  height: 100%;
}
.main-nav__item:hover > .flyout-nav,
.main-nav__item:focus-within > .flyout-nav { display: block; }
.flyout-nav .flyout-nav {
  left: calc(100% - 1px);
  top: -8px;
  width: 172px;
  z-index: 510;
}
.flyout-nav__item { position: relative; margin:0; padding:0; font-size:12px; }

/*
 * Auch bereits besuchte Flyout-Links bleiben weiß. Ohne die explizite
 * :visited-Regel kann eine allgemeine Linkfarbe (z. B. #666) einzelne,
 * zuvor aufgerufene Menüpunkte überschreiben.
 */
.flyout-nav__link,
.flyout-nav__link:visited {
  display: block;
  padding: 3px 0 6px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.flyout-nav__link:hover,
.flyout-nav__link:focus-visible,
.flyout-nav__item.is-active > .flyout-nav__link,
.flyout-nav__item.is-current > .flyout-nav__link {
  color: #0000ff;
}

/* Unterseiten-Navigation oberhalb des Inhalts – optisch wie in der alten Website */
.sub-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 10px;
}

.sub-navigation__item {
  display: flex;
  align-items: center;
  width: 246px;
  min-height: 23px;
  overflow: hidden;
  margin: 0 3px 0 0;
  padding: 2px 3px;
  border: 1px solid #ababf3;
  color: #0000ff;
  background: #eeeeee;
  font-size: 12px;
  line-height: 17px;
  white-space: nowrap;
}

.sub-navigation__marker {
  flex: 0 0 auto;
  margin-right: 4px;
  color: #0000ff;
  font-weight: bold;
}

.sub-navigation__link,
.sub-navigation__link:visited {
  min-width: 0;
  overflow: hidden;
  color: #666666;
  text-decoration: none;
  text-overflow: ellipsis;
}

.sub-navigation__link:hover,
.sub-navigation__link:focus-visible {
  color: #0000ff;
  text-decoration: none;
}

.sub-navigation__item.is-current .sub-navigation__link {
  color: #0000ff;
  font-weight: bold;
}

.breadcrumb-separator { font-size:8px; }

/* Mobile Navigation – auf dem Desktop unsichtbar */
.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;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Fluid Styled Content im Stil der alten CSS-Styled-Content-Ausgabe */
.frame { margin:0 0 12px; }

/*
 * TYPO3 gibt die im Backend gewählten Abstände als Klassen am äußeren
 * .frame-Element aus. Die allgemeine .frame-Regel oben setzt jedoch ein
 * eigenes margin-Shorthand und würde dadurch das optionale Styling von
 * fluid_styled_content überschreiben. Die Abstandsklassen stehen deshalb
 * bewusst direkt danach und bilden die TYPO3-Standardstaffelung ab.
 */
.frame-space-before-extra-small { margin-top: 1em; }
.frame-space-before-small { margin-top: 2em; }
.frame-space-before-medium { margin-top: 3em; }
.frame-space-before-large { margin-top: 4em; }
.frame-space-before-extra-large { margin-top: 5em; }

.frame-space-after-extra-small { margin-bottom: 1em; }
.frame-space-after-small { margin-bottom: 2em; }
.frame-space-after-medium { margin-bottom: 3em; }
.frame-space-after-large { margin-bottom: 4em; }
.frame-space-after-extra-large { margin-bottom: 5em; }

.frame header { margin:0; }
.frame-ruler-before::before,
.frame-ruler-after::after { content:""; display:block; border-top:1px solid #6666ff; margin:8px 0; }
.frame-custom-22 { background:#ffff99; padding:6px; }
.frame-custom-23 { background:#ccffff; padding:6px; }
.frame-custom-24 { background:#ccffcc; padding:6px; }
.frame-custom-25 { background:#ffcc99; padding:6px; }

/* WPR-Hintergrundfarben aus dem CKEditor-Highlight-Menü. */
.marker-wpr-yellow { background-color:#ffff99; }
.marker-wpr-blue { background-color:#ccffff; }
.marker-wpr-green { background-color:#ccffcc; }
.marker-wpr-orange { background-color:#ffcc99; }

.text-start { text-align:left; }
.text-center { text-align:center; }
.text-end { text-align:right; }
.text-justify { text-align:justify; }

.ce-gallery { margin:0; }
.ce-row { display:flex; flex-wrap:nowrap; gap:10px; margin-bottom:10px; }
.ce-column { margin:0; }
.ce-gallery figure { margin:0; }
.ce-gallery img { max-width:100%; height:auto; }
.ce-gallery figcaption { font-size:11px; color:#000; padding-top:3px; }
.ce-above .ce-gallery, .ce-below .ce-gallery { width:100%; }
.ce-intext::after { content:""; display:block; clear:both; }
.ce-intext.ce-left .ce-gallery { float:left; margin:0 12px 8px 0; }
.ce-intext.ce-right .ce-gallery { float:right; margin:0 0 8px 12px; }
.ce-center .ce-gallery { margin-left:auto; margin-right:auto; }
.ce-right .ce-gallery { margin-left:auto; }
.ce-border img { border:1px solid #ccc; }

/* Tabellen aus dem alten rtehtmlarea-Editor.
 * Die historische Rahmen-/Hintergrundgestaltung gilt bewusst nur,
 * wenn die entsprechende alte Tabellenklasse vorhanden ist. */
#divContent table {
  max-width: 100%;
  border-collapse: collapse;
}

/* CKEditor wraps tables in <figure class="table">.
 * Browser default styles add 40px horizontal margins to figure elements. */
#divContent figure.table {
  display: table;
  margin: 0;
  max-width: 100%;
}

/* Bei linksbündiger Standardausrichtung speichert CKEditor keinen Style.
 * Eine ausdrücklich gewählte Zentrierung wird als float:none ausgegeben.
 * Der Tabellen-Wrapper benötigt dann automatische Seitenränder. */
#divContent figure.table[style*="float:none"],
#divContent figure.table[style*="float: none"] {
  float: none !important;
  margin-left: auto;
  margin-right: auto;
}

#divContent table.csc-frame-frame2 {
  background-color: #f5ffaa;
  padding: 2px 4px;
  border: 1px solid #333;
  border-collapse: separate;
  border-spacing: 2px;
}

#divContent table.csc-frame-frame1 {
  background-color: #edebf1;
  padding: 2px 4px;
  border: 1px solid #333;
  border-collapse: separate;
  border-spacing: 2px;
}

#divContent table.csc-frame-frame1 td,
#divContent table.csc-frame-frame1 th,
#divContent table.csc-frame-frame2 td,
#divContent table.csc-frame-frame2 th {
  padding: 6px;
  vertical-align: top;
}


#divContent img { max-width:100%; height:auto; }

/* Responsive RTE-Tabellen.
 * Unter 768 px bleiben Spalten, colspan/rowspan und mögliche Tabellenköpfe
 * vollständig erhalten. Bei Bedarf kann die Tabelle horizontal gescrollt
 * werden, statt Zellen inhaltlich unsicher untereinander zu stapeln. */
@media (max-width: 767px) {
  #divContent .wpr-table-scroll {
    display: block;
    float: none !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1em;
    padding: 0 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Die Desktop-Ausrichtung links/zentriert/rechts wird mobil bewusst
   * aufgehoben, damit keine Tabelle seitlich außerhalb des Viewports liegt. */
  #divContent figure.table.wpr-table-scroll,
  #divContent figure.table.wpr-table-scroll[style*="float"] {
    float: none !important;
    margin-left: 0;
    margin-right: 0;
  }

  #divContent .wpr-table-scroll:focus-visible {
    outline: 2px solid #0000ff;
    outline-offset: 2px;
  }

  #divContent .wpr-table-scroll > table {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* Drei oder mehr Spalten werden nicht bis zur Unlesbarkeit
   * zusammengedrückt. Auf schmaleren Geräten erscheint der Scrollbalken. */
  #divContent .wpr-table-scroll > table.wpr-table--wide {
    min-width: 640px;
  }

  #divContent .wpr-table-scroll th,
  #divContent .wpr-table-scroll td {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
  }
}

@media (max-width: 990px) {
  body {
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    background: #ffff66 url('../Images/Layout/background-page.gif') center top / cover fixed;
  }

  /*
   * Die alten ID-Regeln (#tablePageWrapper und #tdContent) haben eine höhere
   * CSS-Spezifität als die Klassen. Deshalb werden sie mobil ausdrücklich
   * überschrieben, damit Header und Inhalt wirklich die volle Breite nutzen.
   */
  #tablePageWrapper.page-wrapper {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
  }

  /* Die historische linke Bildnavigation verschwindet mobil vollständig. */
  #tdColumnNavi {
    display: none !important;
  }

  #tdContent.content-column {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
  }

  .site-header {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 156;
    overflow: visible;
  }

  #tdHeader {
    width: 100%;
    height: 100%;
    border-right: 0;
    overflow: hidden;
  }

  .section-header__image {
    left: 0;
    top: 46.1538%;
    width: 100%;
    height: auto;
  }

  #divLogoSchrift {
    inset: 0 auto auto 0;
    width: 100%;
    height: auto;
  }

  #divLogoSchrift img {
    width: 100%;
    height: auto;
  }

  #divHeadline {
    left: 20%;
    top: 67.95%;
    width: 49.375%;
    height: 32.05%;
  }

  #divHeadline h1 {
    font-size: clamp(12px, 2.125vw, 17px);
  }

  #divLupe {
    top: auto;
    right: 2.5%;
    bottom: 1.25%;
    width: 6.25%;
    height: auto;
  }

  #divLupe img {
    display: block;
    width: 100%;
    height: auto;
  }

  /*
   * Position des Hamburger-Menüs:
   * --wpr-mobile-toggle-left und --wpr-mobile-toggle-bottom stehen oben in :root.
   */
  .mobile-menu-toggle {
    position: absolute;
    left: var(--wpr-mobile-toggle-left);
    bottom: var(--wpr-mobile-toggle-bottom);
    z-index: 110;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wpr-mobile-toggle-width);
    height: var(--wpr-mobile-toggle-height);
    padding: 8px;
    border: 1px solid var(--wpr-mobile-menu-border-color);
    border-radius: 4px;
    color: var(--wpr-mobile-toggle-color);
    background: var(--wpr-mobile-toggle-background);
    cursor: pointer;
  }

  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible,
  .mobile-menu-toggle.is-open {
    background: var(--wpr-mobile-menu-link-hover-background);
    color: var(--wpr-mobile-menu-link-hover-color);
    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);
  }

  .mobile-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    display: block;
    width: var(--wpr-mobile-menu-width);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    color: var(--wpr-mobile-menu-link-color);
    background: var(--wpr-mobile-menu-background);
    border: 1px solid var(--wpr-mobile-menu-border-color);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  }

  .mobile-navigation[hidden],
  .mobile-nav__submenu[hidden] {
    display: none !important;
  }

  .mobile-nav,
  .mobile-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-nav__item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--wpr-mobile-menu-border-color);
  }

  .mobile-nav__row {
    display: flex;
    align-items: stretch;
    min-height: 46px;
  }

  .mobile-nav__link,
  .mobile-nav__link:visited {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    padding: 11px 14px;
    color: var(--wpr-mobile-menu-link-color);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-nav__link:hover,
  .mobile-nav__link:focus-visible {
    color: var(--wpr-mobile-menu-link-hover-color);
    background: var(--wpr-mobile-menu-link-hover-background);
  }

  /* Ein übergeordneter Punkt im Pfad zur aktuellen Seite. */
  .mobile-nav__item.is-active > .mobile-nav__row > .mobile-nav__link {
    color: var(--wpr-mobile-menu-link-color);
    background: var(--wpr-mobile-menu-active-background);
  }

  /* Die tatsächlich aufgerufene Seite wird deutlich markiert. */
  .mobile-nav__item.is-current > .mobile-nav__row > .mobile-nav__link {
    position: relative;
    color: var(--wpr-mobile-menu-current-color);
    background: var(--wpr-mobile-menu-current-background);
    box-shadow: inset 6px 0 0 var(--wpr-mobile-menu-current-marker-color);
  }

  .mobile-nav__item.is-current > .mobile-nav__row > .mobile-nav__link::after {
    content: "Aktuell";
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 10px;
    color: var(--wpr-mobile-menu-current-label-color);
    background: var(--wpr-mobile-menu-current-label-background);
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
  }

  .mobile-submenu-toggle {
    position: relative;
    flex: 0 0 48px;
    width: 48px;
    min-height: 46px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--wpr-mobile-menu-border-color);
    color: var(--wpr-mobile-menu-triangle-color);
    background: transparent;
    cursor: pointer;
  }

  .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;
  }

  .mobile-submenu-toggle:hover,
  .mobile-submenu-toggle:focus-visible,
  .mobile-submenu-toggle.is-open {
    color: var(--wpr-mobile-menu-link-hover-color);
    background: var(--wpr-mobile-menu-link-hover-background);
  }

  .mobile-submenu-toggle.is-open::before {
    transform: translate(-50%, -35%) rotate(90deg);
  }

  .mobile-nav__submenu {
    background: color-mix(in srgb, var(--wpr-mobile-menu-background) 82%, #ffffff 18%);
  }

  .mobile-nav__submenu .mobile-nav__link { padding-left: 28px; }
  .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__link { padding-left: 46px; }
  .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__link { padding-left: 64px; }
  .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__submenu .mobile-nav__link { padding-left: 82px; }

  #divContentWrapper {
    min-height: calc(100vh - 156px);
    padding: 5px 16px 20px;
  }

  #divExtendedLinks { padding: 8px 0 12px; }
}

@media (max-width: 520px) {
  #divHeadline {
    left: 18%;
    width: 58%;
  }

  #divHeadline h1 { font-size: 13px; }
  #divLupe { right: 1.5%; }
  .sub-navigation__item { width: 100%; margin-right: 0; }
  .ce-row { flex-wrap: wrap; }
}

/* Die originale Schrift Kids.ttf darf bei Bedarf manuell nach
   Resources/Public/Fonts/Kids.ttf kopiert und hier per @font-face eingebunden werden. */

/* 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;
  }
}

/* Text-mit-Bild: "Im Text links/rechts" ohne tatsächlichen Text.
 * TYPO3 berechnet solche Galerien normalerweise mit der halben Breite.
 * Ohne .ce-bodytext verhält sich das Element wie ein vollbreites Bild. */
.ce-textpic.ce-intext.ce-intext--without-text .ce-gallery {
  float: none;
  width: 100%;
  margin: 0 0 8px;
}

/* Nach-oben-Schaltfläche – wird per jQuery nach etwas Scrollen eingeblendet. */
.wpr-back-to-top {
  position: fixed;
  right: var(--wpr-back-to-top-right);
  bottom: var(--wpr-back-to-top-bottom);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--wpr-back-to-top-size);
  height: var(--wpr-back-to-top-size);
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: var(--wpr-back-to-top-color);
  background: var(--wpr-back-to-top-background);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.wpr-back-to-top:hover,
.wpr-back-to-top:focus-visible {
  color: var(--wpr-back-to-top-hover-color);
  background: var(--wpr-back-to-top-hover-background);
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.wpr-back-to-top__icon {
  display: block;
  transform: translateY(-1px);
}

#tablePageWrapper[tabindex="-1"]:focus {
  outline: none;
}

@media (max-width: 700px) {
  .wpr-back-to-top {
    right: 12px;
    bottom: 12px;
    width: 42px;
    height: 42px;
    font-size: 26px;
  }
}

@media print {
  .wpr-back-to-top {
    display: none !important;
  }
}


/* Kontaktformular auf Basis von TYPO3 EXT:form 13.4 */
#divContent .wpr-contact-form {
  --wpr-form-accent: #6666ff;
  --wpr-form-accent-light: #eeeeff;
  --wpr-form-border: #b8b8d8;
  --wpr-form-error: #a40000;
  width: 100%;
  max-width: 760px;
  margin: 0 0 24px;
  padding: 24px;
  border: 1px solid var(--wpr-form-border);
  border-radius: 10px;
  background: #fafaff;
  box-shadow: 0 4px 18px rgba(40, 40, 100, .08);
}

#divContent .wpr-contact-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#divContent .wpr-contact-form legend,
#divContent .wpr-contact-form h2,
#divContent .wpr-contact-form h3 {
  margin: 0 0 18px;
  color: #333366;
}

#divContent .wpr-contact-form .wpr-form-field,
#divContent .wpr-contact-form .form-group,
#divContent .wpr-contact-form .input {
  min-width: 0;
  margin: 0 0 18px;
}

#divContent .wpr-contact-form .wpr-form-row-container {
  margin: 0;
}

#divContent .wpr-contact-form .wpr-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  width: 100%;
  margin: 0;
}

#divContent .wpr-contact-form .wpr-form-grid > * {
  width: auto !important;
  max-width: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#divContent .wpr-contact-form label,
#divContent .wpr-contact-form .control-label {
  display: inline-block;
  margin: 0 0 6px;
  color: #222244;
  font-weight: 700;
  line-height: 1.35;
}

#divContent .wpr-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
#divContent .wpr-contact-form select,
#divContent .wpr-contact-form textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--wpr-form-border);
  border-radius: 6px;
  color: #222;
  background: #fff;
  font: inherit;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#divContent .wpr-contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

#divContent .wpr-contact-form input:focus,
#divContent .wpr-contact-form select:focus,
#divContent .wpr-contact-form textarea:focus {
  border-color: var(--wpr-form-accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(102, 102, 255, .20);
}

#divContent .wpr-contact-form [required] + *,
#divContent .wpr-contact-form .required {
  font-weight: inherit;
}

#divContent .wpr-contact-form .help-block,
#divContent .wpr-contact-form .form-text,
#divContent .wpr-contact-form .form-description {
  display: block;
  margin-top: 5px;
  color: #555;
  font-size: 13px;
  line-height: 1.4;
}

#divContent .wpr-contact-form .error,
#divContent .wpr-contact-form .has-error,
#divContent .wpr-contact-form .invalid-feedback,
#divContent .wpr-contact-form .form-error-message {
  color: var(--wpr-form-error);
}

#divContent .wpr-contact-form .has-error input,
#divContent .wpr-contact-form .has-error select,
#divContent .wpr-contact-form .has-error textarea,
#divContent .wpr-contact-form input[aria-invalid="true"],
#divContent .wpr-contact-form select[aria-invalid="true"],
#divContent .wpr-contact-form textarea[aria-invalid="true"] {
  border-color: var(--wpr-form-error);
  background: #fff8f8;
}

#divContent .wpr-contact-form .form-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 18px;
}

#divContent .wpr-contact-form button,
#divContent .wpr-contact-form input[type="submit"],
#divContent .wpr-contact-form input[type="button"],
#divContent .wpr-contact-form .btn {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--wpr-form-accent);
  border-radius: 6px;
  color: #fff;
  background: var(--wpr-form-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

#divContent .wpr-contact-form button:hover,
#divContent .wpr-contact-form button:focus-visible,
#divContent .wpr-contact-form input[type="submit"]:hover,
#divContent .wpr-contact-form input[type="submit"]:focus-visible,
#divContent .wpr-contact-form input[type="button"]:hover,
#divContent .wpr-contact-form input[type="button"]:focus-visible,
#divContent .wpr-contact-form .btn:hover,
#divContent .wpr-contact-form .btn:focus-visible {
  color: #0000ff;
  background: #ababf3;
  outline: 3px solid rgba(102, 102, 255, .25);
  outline-offset: 2px;
}

#divContent .wpr-contact-form .btn-secondary,
#divContent .wpr-contact-form button[name*="previous"] {
  color: #333366;
  border-color: #aaaacc;
  background: #fff;
}

#divContent .wpr-contact-form .summary,
#divContent .wpr-contact-form .form-summary {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #d7d7ee;
  border-radius: 7px;
  background: #fff;
}

#divContent .wpr-contact-form .summary table,
#divContent .wpr-contact-form .form-summary table {
  width: 100%;
  border-collapse: collapse;
}

#divContent .wpr-contact-form .summary th,
#divContent .wpr-contact-form .summary td,
#divContent .wpr-contact-form .form-summary th,
#divContent .wpr-contact-form .form-summary td {
  padding: 8px;
  border-bottom: 1px solid #e5e5f2;
  vertical-align: top;
  text-align: left;
}

@media (max-width: 767px) {
  #divContent .wpr-contact-form {
    padding: 16px;
    border-radius: 7px;
  }

  #divContent .wpr-contact-form .wpr-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #divContent .wpr-contact-form .form-navigation {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  #divContent .wpr-contact-form .form-navigation button,
  #divContent .wpr-contact-form .form-navigation input,
  #divContent .wpr-contact-form .form-navigation .btn {
    width: 100%;
  }

  #divContent .wpr-contact-form .summary,
  #divContent .wpr-contact-form .form-summary {
    padding: 10px;
    overflow-x: auto;
  }
}

/* Die TYPO3-SummaryPage verwendet in Version 13 eine responsive Tabelle. */
#divContent .wpr-contact-form .table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid #d7d7ee;
  border-radius: 7px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

#divContent .wpr-contact-form .table-responsive table.table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}

#divContent .wpr-contact-form .table-responsive th,
#divContent .wpr-contact-form .table-responsive td {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #e5e5f2;
  vertical-align: top;
  text-align: left;
}

#divContent .wpr-contact-form .table-responsive tr:last-child th,
#divContent .wpr-contact-form .table-responsive tr:last-child td {
  border-bottom: 0;
}

#divContent .wpr-contact-form .summary-table-first-col {
  width: 32%;
  color: #333366;
  font-weight: 700;
}

/* EXT:form gibt die Seitennavigation innerhalb von .actions aus. */
#divContent .wpr-contact-form .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 18px;
}

@media (max-width: 767px) {
  #divContent .wpr-contact-form .actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  #divContent .wpr-contact-form .actions button,
  #divContent .wpr-contact-form .actions input,
  #divContent .wpr-contact-form .actions .btn {
    width: 100%;
  }

  #divContent .wpr-contact-form .summary-table-first-col {
    width: 40%;
  }
}

/* Gemeinsame Darstellung */
a[href*=".pdf" i]:not(:has(img))::after,
a[href*=".docx" i]:not(:has(img))::after {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	margin-left: 2px;
	padding: 0 4px;
	border-radius: 3px;
	vertical-align: 1px;

	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.2px;
	color: #fff;
	text-decoration: none;
}

/* PDF */
a[href*=".pdf" i]:not(:has(img))::after {
	content: "PDF";
	min-width: 25px;
	background-color: #d93025;
}

/* Word */
a[href*=".docx" i]:not(:has(img))::after {
	content: "DOCX";
	min-width: 32px;
	background-color: #2b579a;
}

/* start - WPR Bildergalerie (nach sc-schwarzach.de) */
/*
 * Aktivierung über die Bildeinstellung „Als Bildergalerie darstellen“ (.wpr-bildergalerie).
 * .frame-wpr-bildergalerie bleibt nur als Abwärtskompatibilität für bereits gespeicherte CEs erhalten.
 * Die eigentliche Galerie ist IMMER .ce-gallery. TYPO3 kann je nach CE und
 * Bildposition entweder direkt .ce-row ausgeben oder zusätzlich
 * .ce-outer/.ce-inner dazwischenschalten. Diese Wrapper werden deshalb für
 * das Layout transparent gemacht. So gilt dieselbe Galerie für textpic/image
 * und für alle imageorient-Varianten.
 */
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image {
  display: block !important;
  float: none !important;
  clear: both !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-bodytext {
  display: block !important;
  float: none !important;
  clear: both !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Eine einzige Grid-Regel für textpic UND image. */
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery {
  --wpr-gallery-columns: 1;
  display: grid !important;
  grid-template-columns: repeat(var(--wpr-gallery-columns), minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start;
  float: none !important;
  clear: both !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* TYPO3-Zwischenwrapper dürfen das Grid nicht mehr auf eine Bildbreite
 * begrenzen. display:contents lässt die .ce-column direkt am Grid teilnehmen. */
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery > .ce-outer,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery > .ce-outer,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery > .ce-outer > .ce-inner,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery > .ce-outer > .ce-inner,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery .ce-row,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery .ce-row {
  display: contents !important;
  float: none !important;
  position: static !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery .ce-column,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery .ce-column {
  display: block !important;
  float: none !important;
  clear: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Das figure selbst bleibt höhenflexibel, damit Bildunterschriften UNTER dem
 * quadratischen Vorschaubild sichtbar bleiben. */
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image {
  display: flex !important;
  flex-direction: column;
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Das Quadrat liegt auf dem Bild-Link, nicht auf figure. */
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a {
  display: block !important;
  position: relative;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
  background: #eee;
  line-height: 0;
  cursor: pointer;
}

:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a > img.image-embed-item,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a > img.image-embed-item {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  transition: transform 180ms ease, filter 180ms ease;
}

/* Auch Bilder ohne Vergrößerungslink werden quadratisch dargestellt. */
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > img.image-embed-item,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > img.image-embed-item {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}

:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a:hover > img.image-embed-item,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a:focus-visible > img.image-embed-item,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a:hover > img.image-embed-item,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a:focus-visible > img.image-embed-item {
  transform: scale(1.04);
  filter: brightness(0.88);
}

/* Halbtransparente Lupe mittig auf jedem vergrößerbaren Vorschaubild. */
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a::after,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='13.5' cy='13.5' r='8.5' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cpath d='M20 20l8 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.75)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  opacity: 0.68;
  pointer-events: none;
  transition: opacity 180ms ease;
}

:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a:hover::after,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a:focus-visible::after,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a:hover::after,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a:focus-visible::after {
  opacity: 0;
}

:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a:focus-visible,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a:focus-visible {
  outline: 3px solid #007a91;
  outline-offset: 2px;
}

:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figcaption,
:is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figcaption {
  display: block;
  padding: 5px 2px 0;
  font-size: 12px;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  :is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a > img.image-embed-item,
  :is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a > img.image-embed-item {
    transition: none;
  }

  :is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a:hover > img.image-embed-item,
  :is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-textpic .ce-gallery figure.image > a:focus-visible > img.image-embed-item,
  :is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a:hover > img.image-embed-item,
  :is(.wpr-bildergalerie, .frame-wpr-bildergalerie) .ce-image .ce-gallery figure.image > a:focus-visible > img.image-embed-item {
    transform: none;
  }
}
/* ende - WPR Bildergalerie */