/**
 * Theme Name:     GeneratePress Child
 * Author:         kurze-geschichten.de
 * Template:       generatepress
 * Text Domain:	   generatepress-child
 * Description:    GeneratePress Child
 */

/* life-savers-regular - latin */
@font-face {
  font-family: 'Life Savers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-regular.svg#LifeSavers') format('svg'); /* Legacy iOS */
}

/* life-savers-700 - latin */
@font-face {
  font-family: 'Life Savers';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-700.svg#LifeSavers') format('svg'); /* Legacy iOS */
}

/* life-savers-800 - latin */
@font-face {
  font-family: 'Life Savers';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-800.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/generatepress_child/fonts/life-savers-v18-latin-800.svg#LifeSavers') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/generatepress_child/fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}


html, body, p {font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;}
h1, h2, h3, h4, h5 {font-family: 'Life Savers', Arial, Helvetica, sans-serif !important;}

h1 {
	margin-top: 50px !important;
	margin-bottom: 0 !important;
}

@media (max-width: 781px) {
  h1 {
    font-size: 30px !important;
	margin-top: 30px !important;
	margin-bottom: 10px !important;
  }
}


h2 {
	font-size: 40px !important;
	margin-top: 60px !important;
	margin-bottom: 30px !important;
}

@media (max-width: 781px) {
  h2 {
    font-size: 26px !important;
	margin-top: 40px !important;
  }
}

h3 {
	margin-top: 60px !important;
	margin-bottom: 40px !important;
}


@media (max-width: 781px) {
  h3 {
    font-size: 25px;
	margin-top: 30px !important;
  }
}


h3.geschichten-box {
	margin-top: 20px !important;
	margin-bottom: 10px !important;
	font-weight: bold !important;
	padding-top: 3px !important;
}

@media (max-width: 781px) {
  h3.geschichten-box {
    font-size: 25px;
	margin-top: 17px !important;
	margin-bottom: 10px !important;
  }
}


h4 {
	line-height: 45px !important;
	margin-bottom: -30px !important;
}



/* Headerbild mobil weiter oben */

@media (max-width: 781px) {
  .single-post .site-content {
    padding-top: 0;
  }
}



/* VG Wort Abstand vermindern */

.vgwort {
	margin: 0px;
	font-size: 1px;
}

 .vgwort img{
border:none !important;
} 

.main-title a {
	font-size: 28px;
	font-weight: bold;
  font-family: "Life Savers", sans-serif;
}


/*Hintergrund hervorgehoben*/

.zum-ausdrucken {
	border-radius: 8px;
	background-color: #E8EDE4;
	font-size: 20px;
	line-height: 30px;
	padding: 20px 30px 25px 30px;
	margin-bottom: 40px;
	margin-top: 50px;
} 

@media (max-width: 781px){
.zum-ausdrucken {
	background-color: #E8EDE4;
	font-size: 20px;
	line-height: 30px;
	padding: 20px 20px 20px 20px;
	margin-bottom: 30px;
} 
}



.center img {
text-align: center;
} 

img{ 
border-radius: 8px; 
} 

.begruessung{ 
border-radius: 8px; 
}

/* Button im Text */
p.button {
  margin: 0 0 30px 0;
  padding: 0;
}

.button{
  border-radius: 8px;
}


/* DESKTOP-Basis: NICHT volle Breite */
p.button a {
  display: inline-block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;

  position: relative;
  z-index: 0;
  overflow: visible;          /* Desktop darf nach rechts "wachsen" */
  isolation: isolate;

  text-align: center;
  color: #fff;

	
  /* höherer Button + Abstand Text → Pfeil */
  padding: 15px 60px 15px 20px;

  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

/* Hintergrund-Layer */
p.button a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  border-radius: inherit;
  background-color: #ae1516;

  z-index: -1;
  pointer-events: none;

  transition: background-color 0.3s ease; /* width-transition schalten wir gezielt dazu */
}

/* Pfeil */
p.button a::after {
  content: "➜";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 20px;
  opacity: 0.8;
  pointer-events: none;

  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover-Effekte NUR auf Geräten mit echtem Hover + Maus */
@media (hover: hover) and (pointer: fine) {
  p.button a:hover::before {
    background-color: #2F5D62; /* Farbe wechselt immer auf Desktop */
  }

  p.button a:hover::after {
    transform: translate(6px, -50%); /* Pfeil weiter nach rechts */
    opacity: 1;
  }
}

/* Desktop: NUR hier darf der Hintergrund nach rechts breiter werden */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  p.button a::before {
    transition: width 0.3s ease, background-color 0.3s ease;
  }

  p.button a:hover::before {
    width: calc(100% + 8px); /* weniger Verbreiterung nach rechts */
  }
}

/* MOBIL bis 768px: volle verfügbare Breite, niemals breiter werden */
@media (max-width: 768px) {
  p.button,
  p.button a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    /* falls Parent-Flex/Grid zentriert: auf volle Breite ziehen */
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* mobil: kein "Wachsen" des Hintergrunds */
  p.button a {
    overflow: hidden; /* verhindert optisches Überstehen */
  }

  p.button a::before {
    width: 100% !important;
    transition: background-color 0.3s ease; /* keine width-animation mobil */
  }
}


/* Button mit Spaltenbreite */

p.buttonbreit {
  margin: -15px 0 15px 0;  /* 15px Abstand nach unten */
  padding: 0;
}

@media (max-width: 781px) {
p.buttonbreit {
  margin: 10px 0 15px 0;  /* 15px Abstand nach unten */
  padding: 0;
}}


p.buttonbreit a {
  display: inline-block;
  width: 100%;
  text-align: center;
  background-color: #2F5D62;
  color: #fff;

  /* Mehr Platz rechts für Abstand Text → Pfeil */
  padding: 10px 40px 10px 20px;
  border-radius: 5px;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

p.buttonbreit a:hover {
  background-color: #ae1516;
}

p.buttonbreit a::after {
  content: "➜";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.8;
}

/* Pfeil geht nur noch ein klein wenig nach rechts */
p.buttonbreit a:hover::after {
  transform: translate(2px, -50%); /* vorher 5px */
  opacity: 1;
}

/* Button der Geschichten-Übersicht */

p.geschichten-uebersicht {
  margin: 5px 0 15px 0; 
  padding: 0;
}

@media (max-width: 781px) {
p.geschichten-uebersicht {
  margin: 5px 0 20px 0 !important;  
  padding: 0;
}}


p.geschichten-uebersicht a {
  display: inline-block;
  width: 100%;
  text-align: center;
  background-color: #23527c;
  color: #fff;

  /* Mehr Platz rechts für Abstand Text → Pfeil */
  padding: 10px 40px 10px 20px;
  border-radius: 5px;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

p.geschichten-uebersicht a:hover {
  background-color: #2F5D62;
}

p.geschichten-uebersicht a::after {
  content: "➜";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.8;
}

/* Pfeil geht nur noch ein klein wenig nach rechts */
p.geschichten-uebersicht a:hover::after {
  transform: translate(2px, -50%); /* vorher 5px */
  opacity: 1;
}




@media (max-width: 781px) {
  /* falls der Parent ein Flex/Grid ist und zentriert -> strecken */
  p.button,
  p.button a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;


    /* hilft in Flex/Grid-Layouts gegen "zentriert & schmal" */
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Hintergrund darf mobil nie breiter werden */
  p.button a::before {
    width: 100% !important;
  }
}

/* =========================
   GeneratePress Header
   ========================= */

#masthead.site-header,
header.site-header{
  background: #2F5D62 !important;
}

/* Sicherheitsnetz: falls irgendwo noch ::before/::after für den Header existieren */
#masthead.site-header::before,
#masthead.site-header::after,
header.site-header::before,
header.site-header::after{
  content: none !important;
  display: none !important;
  background: none !important;
}



/* Abstand UNTER dem Beitragsbild (Single Posts) */

.single-post .inside-article .post-image,
.single-post .inside-article .featured-image,
.single-post .inside-article figure.wp-block-post-featured-image,
.single-post .inside-article .wp-block-post-featured-image {
  margin-bottom: 30px !important; /* Wert anpassen */
}

/* falls nur das IMG greift */
.single-post img.wp-post-image{
  display: block;
  margin-bottom: 30px !important; /* Wert anpassen */
}

/* Abstand zwischen Beitragsbild und Titel (Single Posts) */

#content.site-content{
  margin-top: 10px !important;
}

@media (max-width: 781px){
  #content.site-content {
  margin-top: 30px !important;
  }
}



/* auf Übersichtsseite bei Ausgabe der Artikelübersicht Abstand nach oben und hellgrauen Hintergrund abrunden*/
.abstand{ 
	overflow: auto; margin-top: 50px !important; 
}

@media (max-width: 781px) {
.keinabstand { 
margin-top: -35px !important; 
}}

.gb-loop-item-8def5545{
  border-radius: 8px;
  overflow: hidden; /* wichtig, damit der Hintergrund/Kind-Elemente sauber “mitrunden” */
}

.lesezeit{
  margin: 1.2em 0 0 0;
  font-size: .9em;
  opacity: .8;
}


/* Für bestimmte Seiten die h1 weiter nach oben setzen */

body.home h1 {
  margin-top: 0 !important;
}

body.page-id-2257 h1 {
  margin-top: 0 !important;
}



#site-navigation .main-nav ul ul.sub-menu {
  border-radius: 8px;
  overflow: hidden; /* damit der Inhalt die Rundung nicht "übermalt" */
}

/* VG Wort Abstand vermindern */

.vgwort {
	margin: 0px;
	font-size: 1px;
}

.vgwort img{
border:none !important;
}

.abstand img{
	margin-bottom: 5px !important;
}

.ostern {
      height: 165px;
      background: url(/wp-content/uploads/2025/12/ostern.png) no-repeat center;
      border: none;
	  margin-top: 5px;
      }

.osterhaeschen {
      height: 165px;
      background: url(/wp-content/uploads/2026/01/osterhaeschen.png) no-repeat center;
      border: none;
	  margin-top: 5px;
	  margin-bottom: 10px;
      }

.maerchen {
      height: 190px;
      background: url(/wp-content/uploads/2026/01/maerchen.png) no-repeat left;
      border: none;
	  margin-top: 5px;
      }

.maerchen-zauber {
      height: 150px;
      background: url(/wp-content/uploads/2026/01/maerchen-zauber.png) no-repeat center;
      border: none;

      }

.geschichten {
      height: 165px;
      background: url(/wp-content/uploads/2026/01/geschichten.png) no-repeat center;
      border: none;
	  margin-top: 5px !important;
	margin-bottom: 5px !important;
      }

.abstand {
	  margin-top: 25px;
      }

/* =========================
   KLANG – Basis
   ========================= */
.klang,
a.klang {
  position: relative;
  cursor: pointer;
  color: inherit;
  text-decoration: none !important;

  background: #ffcf5d !important;     /* hellblau cfeefff */
  padding: 0.1em 0.35em;
  border-radius: 0.35em;
  display: inline-block;
  line-height: 1.4;
  vertical-align: baseline;

  transition: background-color 0.15s ease;
}

/* 🔊 Icon vor dem Wort */
.klang::before {
  content: "🔊";
  margin-right: 0.25em;
  font-size: 0.95em;
  text-decoration: none !important;
}

/* Hover: hellgrün sofort */
.klang:hover,
.klang:focus-visible {
  background: #d8ffd8 !important;
}

/* is-playing selbst verändert NICHT die Hover-Farbe sofort:
   Rot kommt erst mit .stop-hint */
.klang.is-playing:hover,
.klang.is-playing:focus-visible {
  background: #d8ffd8 !important; /* bleibt grün, bis stop-hint aktiv */
}

/* =========================
   STOP-HINWEIS (delayed via JS: .stop-hint)
   ========================= */
.klang.is-playing.stop-hint:hover,
.klang.is-playing.stop-hint:focus-visible {
  background: #ffd1d1 !important; /* hellrot */
}

/* beim Stop-Hinweis Icon auf 🔇 */
.klang.is-playing.stop-hint:hover::before,
.klang.is-playing.stop-hint:focus-visible::before {
  content: "🔇";
}

/* =========================
   TOOLTIP (Custom) – NUR ::after
   ========================= */
.klang[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);           /* 2px tiefer */
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;

  padding: 0.4em 0.65em;
  border-radius: 0.55em;
  white-space: nowrap;
  font-size: 0.85em;
  line-height: 1.1;

  background: #19589f;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.20);

 /* Pfeil ohne zweites Pseudo-Element */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 85%,
    56% 85%,
    50% 100%,
    44% 85%,
    0% 85%
  );

  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  transition-delay: 0.15s;            /* Tooltip poppt nicht sofort */
  z-index: 9999;
  pointer-events: none;
}

/* Tooltip anzeigen */
.klang:hover[data-tooltip]::after,
.klang:focus-visible[data-tooltip]::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Link bekommt Platz rechts, damit der Pfeil nicht umbricht */
.main-navigation .main-nav ul li.menu-item-has-children > a {
  display: block;
  padding-right: 45px;
  position: relative;
  white-space: nowrap;
}

/* Pfeil immer rechts ausrichten */
.main-navigation .main-nav ul li.menu-item-has-children .dropdown-menu-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* Off-Canvas / Slideout Menü: 90% breit, rechts 10% frei */
.slideout-navigation.main-navigation,
.slideout-navigation {
  width: 80vw !important;
  max-width: 80vw !important;
}


/* Mobile: Link + Pfeil in einer Zeile halten */
@media (max-width: 781px) {

  .main-navigation .main-nav ul li.menu-item-has-children {
    position: relative;
  }

  /* Menü-Link bekommt Platz rechts, damit Pfeil nicht umbricht */
  .main-navigation .main-nav ul li.menu-item-has-children > a {
    display: block;
    padding-right: 52px !important;
    white-space: nowrap;
  }

	
  /* Pfeil fest rechts positionieren */
  .main-navigation .main-nav ul li.menu-item-has-children > .dropdown-menu-toggle {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}


/* Off-Canvas / Slideout: Hover/Tap-Farbe */
.slideout-navigation .main-nav ul li a:hover,
.slideout-navigation .main-nav ul li a:focus {
  color: #E3F1F8 !important;
}

/* Off-Canvas / Slideout: Aktiver Menüpunkt + aktive Oberpunkte (Eltern/Ancestor) = weiß */
.slideout-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: #ffffff !important;
}
/* Off-Canvas: Oberpunkt bleibt weiß, wenn Submenü geöffnet ist */
.slideout-navigation .main-nav ul li.menu-item-has-children:focus-within > a,
.slideout-navigation .main-nav ul li.menu-item-has-children.sfHover > a {
  color: #ffffff !important;
}

/* ================================
   Off-Canvas / Slideout (Mobile)
   - Submenu hover + current background
   - Active top-level stays white (not red)
   ================================ */

@media (max-width: 781px) {

  /* 1) Oberpunkte: aktive Seite + Elternpunkte immer weiß */
  .slideout-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: #ffffff !important;
  }

  /* 2) Oberpunkte: wenn ein Untermenü aufgeklappt ist, soll der Oberpunkt nicht rot werden */
  .slideout-navigation .main-nav ul li.menu-item-has-children:focus-within > a,
  .slideout-navigation .main-nav ul li.menu-item-has-children.sfHover > a {
    color: #ffffff !important;
  }

  /* 3) Unterpunkte (Submenu): Hover + Tap (focus) => Hintergrund #19589F + Text weiß */
  .slideout-navigation .main-nav ul ul li a:hover,
  .slideout-navigation .main-nav ul ul li a:focus {
    background-color: #19589F !important;
    color: #ffffff !important;
  }

  /* 4) Unterpunkte: AKTIV / CURRENT => Hintergrund #23527c + Text weiß */
  .slideout-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    background-color: #23527c !important;
    color: #ffffff !important;
  }

  /* 5) Unterpunkte: CURRENT soll beim Hover auch weiterhin wie Hover aussehen */
  .slideout-navigation .main-nav ul ul li[class*="current-menu-"] > a:hover,
  .slideout-navigation .main-nav ul ul li[class*="current-menu-"] > a:focus {
    background-color: #23527c !important;
    color: #ffffff !important;
  }

  /* 6) Unterpunkte: BESUCHT (visited) => Text weiß (Background kann browserbedingt ignoriert werden) */
  .slideout-navigation .main-nav ul ul li a:visited {
    color: #ffffff !important;
  }

  /* 7) Damit der Hintergrund wirklich die ganze Zeile einfärbt */
  .slideout-navigation .main-nav ul ul li a {
    display: block;
  }
}

@media (max-width: 1134px) {
  .is-logo-image img {
    margin-left: 30px !important;
  }
}

@media (max-width: 781px) {
  .is-logo-image img {
    margin-left: 15px !important;
  }
}

@media (max-width: 781px) {
  .menu-toggle .gp-icon {
    margin-right: 9px !important;
  }
}

@media (max-width: 781px) {
  body.home .loop-startseite .alignwide,
  body.home .loop-startseite .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 781px) {
  /* Startseiten-Loop: verhindert horizontales Scrollen */
  body.home .loop-startseite {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Wenn der Query-Loop als Grid läuft: mobil 1 Spalte erzwingen */
  body.home .loop-startseite .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr !important;
  }

  /* typische Overflow-Verursacher innerhalb des Loops entschärfen */
  body.home .loop-startseite * {
    min-width: 0;
    box-sizing: border-box;
  }

  body.home .loop-startseite img,
  body.home .loop-startseite svg,
  body.home .loop-startseite iframe {
    max-width: 100%;
    height: auto;
  }

  /* Falls im Loop irgendwo Wide/Full gesetzt ist */
  body.home .loop-startseite .alignwide,
  body.home .loop-startseite .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}



@media (max-width: 781px) {
  body.page .entry-title {
    margin-top: -50px !important;

  }
}

.main-title a,
.main-title a:visited {
  color: #FDF8EA !important;
}

.main-title a:hover,
.main-title a:focus {
  color: #FDF8EA !important;
}

.geschichte {
  margin-bottom: 35px;
}

.wenigabstand {
  margin-bottom: -14px !important;
}

@media (max-width: 781px){
.wenigabstand {
  margin-top: -30px !important;
}}

.copyright-bar {
  margin-left: 20px !important;
}

@media (max-width: 781px){
	.copyright-bar {
  margin-left: 0px !important;
}}

.szene {
  margin-top: 50px !important;
  margin-bottom: -15px !important;
}

.szene img {
  display: block;
}


.bildabstand img {
  display: block;
	margin-bottom: 30px !important;
}



/* Listenpunkte stylen */

.ideen li::marker {
  color: #21547A;

}

.ideen {
  line-height: 2;
  margin-bottom: 50px !important;
}

/* Kurzbeschreibungstexte in der Übersicht */

.uebersicht {
	font-size: 18px !important;
	line-height: 29px !important;
	margin-bottom: 35px !important;
} 



/* heller Hintergrund hervorgehoben*/

.hinweis {
border-radius: 8px;
	background-color: #F9F4D6 !important;
	font-size: 18px !important;
	line-height: 30px !important;
	padding: 30px 30px 1px 30px;
	margin-bottom: 45px;
	margin-top: 45px;
} 

@media (max-width: 781px){
.hinweis {
	background-color: #F9F4D6 !important;
	font-size: 16px;
	line-height: 25px;
	padding: 30px 20px 1px 20px !important;
	margin-bottom: 30px;
} 
}

/* Liste fürs manuelle Inhaltsverzeichnis */

/* Für den Fall: Klasse sitzt auf UL/OL ODER auf einem Wrapper */
ul.inhaltsverzeichnis,
ol.inhaltsverzeichnis,
.inhaltsverzeichnis ul,
.inhaltsverzeichnis ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sicherheit: auch LI selbst ohne List-Style */
.inhaltsverzeichnis li {
  list-style: none !important;
  margin: 0.4em 0;          /* optional */
  padding-left: 0 !important;
  background: none !important; /* falls das Theme „Bullets“ als Background setzt */
}

/* Moderne Browser: Marker explizit entfernen */
.inhaltsverzeichnis li::marker {
  content: "" !important;
}

/* Häufige Theme-Variante: Bullet als ::before */
.inhaltsverzeichnis li::before {
  content: none !important;
}

/* Komplett ohne Einzug – auch bei Unterlisten */
.inhaltsverzeichnis,
.inhaltsverzeichnis ul,
.inhaltsverzeichnis ol {
  margin: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important; /* wichtiger Standard-Reset */
}

/* Sicherheit: LI ebenfalls ohne Einzug */
.inhaltsverzeichnis li {
  margin: 0 !important;
  padding: 0 !important;
}

.inhaltsverzeichnis li {
  margin: 0 0 0.7rem 0 !important; /* Abstand nach unten */
}

.inhaltsverzeichnis {
  font-size: 1.4rem; 
		font-weight: bold !important;
}

@media (max-width: 781px){
.inhaltsverzeichnis {
font-size: 20px !important;
	font-weight: bold !important;
} 
}}

.thema {
  color: #2F5D62;
  font-weight: bold;

}

.inhalt {
  color: #2F5D62;
  font-weight: bold;
	font-size: 30px !important;
	line-height: 0px;
	  font-family: 'Life Savers' !important;
	padding-top: 30px;

}

a.button{
  background-color: #ae1516 !important;
}


a.button:hover{
  background-color: #2F5D62 !important;
}

.petrol {
	font-family: 'Life Savers' !important;
	font-size: 24px !important;
	font-weight: bold !important;
	color: #2F5D62 !important;
	padding-top: 20px;
	padding-bottom: 10px;

}

.ergaenzung {
	font-size: 22px !important;
	padding-top: 20px;
	padding-bottom: 10px;

}

@media (max-width: 781px) {
.ergaenzung {
	font-size: 19px !important;
	padding-top: 20px;
	padding-bottom: 5px;

}}

.mehr {
	font-family: 'Life Savers' !important;
	font-size: 36px !important;
	font-weight: 700 !important;
	color: #ae1516 !important;
	padding-top: 10px !important;
	margin-bottom: -5px !important;
	line-height: 50px;
}

/* Button rot mit Spaltenbreite */

p.buttonrot {
  margin: -15px 0 15px 0;  /* 15px Abstand nach unten */
  padding: 0;

}

@media (max-width: 781px) {
p.buttonrot {
  margin: -5px 0 -5px 0;
  padding: 0;
	  background-color: #ae1516 !important;
	border-radius: 8px;
}}

@media (max-width: 781px) {
  /* falls der Parent ein Flex/Grid ist und zentriert -> strecken */
  p.buttonrot,
  p.buttonrot a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;


    /* hilft in Flex/Grid-Layouts gegen "zentriert & schmal" */
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Hintergrund darf mobil nie breiter werden */
  p.buttonrot a::before {
    width: 100% !important;
  }
}




p.buttonrot a {
  display: inline-block;
  width: 100%;
  text-align: center;
  background-color: #ae1516;
  color: #fff;

  /* Mehr Platz rechts für Abstand Text → Pfeil */
  padding: 10px 40px 10px 20px;
  border-radius: 5px;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

p.buttonrot a:hover {
  background-color: #2F5D62;
}

p.buttonrot a::after {
  content: "➜";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.8;
}

/* Pfeil geht nur noch ein klein wenig nach rechts */
p.buttonrot a:hover::after {
  transform: translate(2px, -50%); /* vorher 5px */
  opacity: 1;
}


/* Petrolbutton für PDFs */

/* Button im Text */
p.buttonpetrol {
  margin: 0 0 20px 0;
  padding: 0;
}

.buttonpetrol{
  border-radius: 8px;
}


/* DESKTOP-Basis: NICHT volle Breite */
p.buttonpetrol a {
  display: inline-block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;

  position: relative;
  z-index: 0;
  overflow: visible;          /* Desktop darf nach rechts "wachsen" */
  isolation: isolate;

  text-align: center;
  color: #fff;

	
  /* höherer Button + Abstand Text → Pfeil */
  padding: 15px 60px 15px 20px;

  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

/* Hintergrund-Layer */
p.buttonpetrol a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  border-radius: inherit;
  background-color: #2F5D62;

  z-index: -1;
  pointer-events: none;

  transition: background-color 0.3s ease; /* width-transition schalten wir gezielt dazu */
}

/* Pfeil */
p.buttonpetrol a::after {
  content: "➜";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 20px;
  opacity: 0.8;
  pointer-events: none;

  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover-Effekte NUR auf Geräten mit echtem Hover + Maus */
@media (hover: hover) and (pointer: fine) {
  p.buttonpetrol a:hover::before {
    background-color: #ae1516; /* Farbe wechselt immer auf Desktop */
  }

  p.buttonpetrol a:hover::after {
    transform: translate(6px, -50%); /* Pfeil weiter nach rechts */
    opacity: 1;
  }
}

/* Desktop: NUR hier darf der Hintergrund nach rechts breiter werden */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  p.buttonpetrol a::before {
    transition: width 0.3s ease, background-color 0.3s ease;
  }

  p.button a:hover::before {
    width: calc(100% + 8px); /* weniger Verbreiterung nach rechts */
  }
}

/* MOBIL bis 768px: volle verfügbare Breite, niemals breiter werden */
@media (max-width: 768px) {
  p.buttonpetrol,
  p.buttonpetrol a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    /* falls Parent-Flex/Grid zentriert: auf volle Breite ziehen */
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* mobil: kein "Wachsen" des Hintergrunds */
  p.buttonpetrol a {
    overflow: hidden; /* verhindert optisches Überstehen */
  }

  p.buttonpetrol a::before {
    width: 100% !important;
    transition: background-color 0.3s ease; /* keine width-animation mobil */
  }
}

/* Icon neben Button-Link Abstand nach rechts */

.gb-shape{
  margin-right: 10px;
}

.gb-text{
  font-size: 16px;
	padding-top: 10px;
	vertical-align: 1px !important;
}



/*Hintergrund hervorgehoben 2*/

.geschichten-sammlung {
  border-radius: 8px;
  background-color: #fcefd1 !important;
  font-size: 20px;
  line-height: 30px;
  padding: 20px 30px 1px 30px;
  margin-bottom: 42px;
  margin-top: 72px !important;
}

@media (max-width: 781px){
  .geschichten-sammlung {
    background-color: #fcefd1 !important;
    font-size: 20px;
    line-height: 30px;
    padding: 20px 20px 20px 20px;
  }
}


.inside-navigation {
    background-color: #2F5D62 !important;
}

.mobile-menu a{
  display: inline-block;
  transform: translateY(-1px) !important;
}

.zahl {
  	color: #ae1516 !important;
	font-size: 22px !important;
	  text-align: center;
		  font-family: 'Life Savers' !important;
	font-weight: bold;
	margin-top: 20px !important;
	margin-bottom: 10px !important;
	}

.zentriert {

	font-size: 18px !important;
	  text-align: center;
	  	color: #2F5D62 !important;
	}

.lesezeituebersicht {
  	color: #ae1516 !important;
	margin: 1.2em 0 35px 0;
  font-size: .8em;
  opacity: .8;
}

.spaltenabstand {
margin-bottom: -30px !important;
}