/*
 Theme Name:     Divi Child Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Child Theme for Divi Theme by Elegant Themes
 Author:         RP
 Template:       Divi
 Version:        1.0.0
*/
/* CSS AB HIER
------------------------------------------------------- */

/* ### ANFANG TESTAREA ### */


/* 1. BEREICH: HANDY (325px bis 600px) 
   Skalierung: Kompakt für kleine Displays */
@media (max-width: 600px) {
    .ws_ueberschr_einheit h2 {
        font-size: clamp(22px, 19.64px + 0.73vw, 24px) !important;
        color: #000000 !important;
		font-weight: 600;
    }
    .ws_ueberschr_einheit h3 {
        font-size: clamp(19px, 17.82px + 0.36vw, 20px) !important;
        color: rgb(0 0 0 / 85%) !important;
		font-weight: 600;
    }
    .ws_ueberschr_einheit h4 {
        font-size: clamp(17px, 15.82px + 0.36vw, 18px) !important;
        color: rgb(0 0 0 / 80%) !important;
		font-weight: 600;
    }
}

/* 2. BEREICH: TABLET (601px bis 980px) 
   Skalierung: Progressiver Zuwachs für die mittlere Ansicht */
@media (min-width: 601px) and (max-width: 980px) {
    .ws_ueberschr_einheit h2 {
        /* Skaliert von 24px auf 30px */
        font-size: clamp(24px, 14.5px + 1.58vw, 30px) !important;
        color: #000000 !important;
		font-weight: 600;
    }
    .ws_ueberschr_einheit h3 {
        /* Skaliert von 20px auf 24px */
        font-size: clamp(20px, 13.67px + 1.05vw, 24px) !important;
        color: rgb(0 0 0 / 85%) !important;
		font-weight: 600;
    }
    .ws_ueberschr_einheit h4 {
        /* Skaliert von 18px auf 20px */
        font-size: clamp(18px, 14.83px + 0.53vw, 20px) !important;
        color: rgb(0 0 0 / 80%) !important;
		font-weight: 600;
    }
}

/* 3. BEREICH: DESKTOP (ab 981px) 
   Fokus: Statische Zielgrößen für maximale Autorität */
@media (min-width: 981px) {
    .ws_ueberschr_einheit h2 {
        font-size: 30px !important;
        color: #000000 !important;
		font-weight: 600;
    }
    .ws_ueberschr_einheit h3 {
        font-size: 24px !important;
        color: rgb(0 0 0 / 85%) !important;
		font-weight: 600;
    }
    .ws_ueberschr_einheit h4 {
        font-size: 20px !important;
        color: rgb(0 0 0 / 80%) !important;
		font-weight: 600;
    }
}






@media (max-width: 600px) {
    .ws_calc_math_wrapper mjx-container[display="true"] {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        
        /* ABSTAND: 30px Platz nach oben und unten */
        margin: 30px 0 !important;
        padding: 15px 0; 

        background-image: 
            /* 1. WEISSER VORHANG: Verdeckt den Pfeil am Ende (wandert mit) */
            linear-gradient(to left, white 40px, rgba(255, 255, 255, 0)),
            /* 2. DER PFEIL: 48px Brand-Blau (fixiert am Rand) */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(0, 86, 179, 0.65)'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");

        background-position: 
            100% 0, 
            /* 5px Optischer Randabstand durch Offset */
            calc(100% + 11px) 50%;

        background-repeat: no-repeat;
        background-color: transparent;
        
        /* GRÖSSEN: Vorhang: 100px | Pfeil: 48px */
        background-size: 100px 100%, 48px 48px;
        
        /* LOGIK: Vorhang bewegt sich (local), Pfeil bleibt stehen (scroll) */
        background-attachment: local, scroll;
    }
}



@media (max-width: 1200px) {
    table.responsive {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        width: 100%;
        border-collapse: collapse;
        margin: 35px 0;
        background-color: #f9f9f9;
        position: relative;

        /* SMART ARROW LOGIK FÜR TABELLEN */
        background-image: 
            /* 1. Vorhang Rechts (Weiß - wandert mit der Tabelle mit) */
            linear-gradient(to left, white 60px, rgba(255, 255, 255, 0)),
            /* 2. Großer Pfeil-Indikator (Fixiert bei 80px) */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(0, 86, 179, 0.65)'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");

        background-position: 
            100% 0, 
            /* 5px Abstand zum rechten Rand (bereinigt um SVG-Leerraum) */
            calc(100% + 18px) 50%;

        background-repeat: no-repeat;
        
        /* GRÖSSEN: Vorhang: 140px | Pfeil: 80px */
        background-size: 140px 100%, 80px 80px;
        
        /* LOGIK: Vorhang 'local' (scrollt), Pfeil 'scroll' (bleibt stehen) */
        background-attachment: local, scroll;
    }

    table.responsive th, table.responsive td {
        padding: 10px;
        border: 1px solid #888;
        text-align: left;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        min-width: 180px;
        font-size: 17px;
    }

    table.responsive th {
        background-color: #f2f2f2;
        font-weight: 600;
    }
}









@media (min-width: 1201px) {
  table.responsive {
    display: table;
    width: 100%;
    border-collapse: collapse;
    background-color: #f9f9f9;
    margin: 35px 0;
    table-layout: auto;
  }
  table.responsive th, table.responsive td {
    padding: 12px;
    border: 1px solid #888;
    text-align: left;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    min-width: 180px;
  }
  table.responsive th {
    background-color: #f2f2f2;
    font-weight: 600;
  }
}






















	
/* ### ENDE TESTAREA ### */




/* ###################################################################################################################################### */


/* ===== WS Mobil TOC – Final Styles ===== */

@media (max-width:980px){
.ws_mobil_toc {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 17500!important; background: #fff;
    transform: translateY(110%); 
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
    box-shadow: 0 100px 0 0 #fff; 
    max-height: 80vh; overflow: hidden; margin: 0!important;
    display: flex; flex-direction: column;
    will-change: transform;
}

  .ws_mobil_toc__header{
    position:sticky; top:0; z-index:17500;
    display:flex; align-items:center; justify-content:space-between;
    padding:5px 10px;
    border-top:2px solid rgba(169,180,236,.66);
    background:#fff;
    font-size:18px;
    line-height:1;
  }
  .ws_mobil_toc__title{ margin:0; padding:0; font-weight:600; }

  .ws_mobil_toc__close{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px;
    color:#000;
    border: none;
    background-color: #fff;
    cursor:pointer; line-height:1; font-size:32px;
  }

  .ws_mobil_toc__content{
    flex:1 1 auto;
    overflow:auto; -webkit-overflow-scrolling:touch;
    padding: 0 14px 14px 14px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
  }

  .ws_mobil_toc__content ol, .ws_mobil_toc__content ul{ list-style:none; padding-left:0; margin:0; }
  .ws_mobil_toc__content li::marker{ content:''; }
  .ws_mobil_toc__content *::before, .ws_mobil_toc__content *::after{ content:none !important; }

  .ws_mobil_toc__content a{
    display:block; padding:10px 0;
    font-size:16px;
    line-height:1.3;
  }

  h2[id]{ scroll-margin-top:75px; }

  .ws_mobil_toc__fab{
    position:fixed; bottom:25px; right:10px; 
    width:50px; height:50px; border-radius:50%; border:0;
    background:#1032cf; color:#fff;
    display:flex; align-items:center; justify-content:center;
    z-index: 16000!important; cursor:pointer;
  }
  .ws_mobil_toc__fab svg{ width:20px; height:20px; display:block; } 

  .ws_mobil_toc__overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transition:opacity .2s; z-index: 17000!important; 
  }
  body.ws_mobil_toc--open .ws_mobil_toc__overlay{ opacity:1; pointer-events:auto; }
  body.ws_mobil_toc--open .ws_mobil_toc { transform: translateY(0); visibility: visible; }
}

@media (max-width:500px){
  .ws_mobil_toc__content a{ font-size:16px; padding-bottom: 0.7em; }
  .ws_mobil_toc__header{ font-size:17px; }
  .ws_mobil_toc__close{ width:34px; height:34px; font-size:32px; }
}

@media (max-width:374px){
  .ws_mobil_toc__content a{ font-size:15px; padding-top:0; padding-bottom: 0.9em; }
  .ws_mobil_toc__header{ font-size:16px; }
  .ws_mobil_toc__close{ width:34px; height:34px; font-size:32px; }
}

@media (min-width:768px) and (max-width:980px){
  .ws_mobil_toc__content a{ font-size:18px; font-weight: bold; padding-top:10px; padding-bottom:10px; }
  .ws_mobil_toc__header{ font-size:20px; padding-top:10px; padding-bottom:10px; }
  .ws_mobil_toc__close{ width:34px; height:34px; font-size:32px; }
}

@media (min-width:501px) and (max-width:767px){
  .ws_mobil_toc__content a{ font-size:18px; padding-top:10px; padding-bottom:10px; }
  .ws_mobil_toc__header{ font-size:18px; padding-top:10px; padding-bottom:5px; }
  .ws_mobil_toc__close{ width:34px; height:34px; font-size:32px; }
}

@media (min-width:981px){
  .ws_mobil_toc, .ws_mobil_toc__overlay, .ws_mobil_toc__fab{ display:none!important; }
}

html.ws_mobil_toc--lock, body.ws_mobil_toc--lock{ overflow:hidden; touch-action:none; }






/* ###################################################################################################################################### */




/* =========================================================
   LCP Startseiten‑Kategorie‑Cards – vollständiges Stylesheet
   (responsive Typo, kein Scroll‑Scale Effekt)
   ========================================================= */

/* ---------- Layout -------------------------------------- */
.lcp_start_cat_wrapper{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin:0;
}

/* Zwei Cards ab Tablet‑Breite */
@media (min-width:768px){
  .lcp_start_cat_wrapper{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ---------- Card‑Grundlayout ----------------------------- */
.lcp_start_cat_card{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
  /* keine transform‑Skalierung mehr */
}

/* Hover‑Schatten nur auf Geräten mit Maus */
@media (min-width:981px){
  .lcp_start_cat_card:hover{
    box-shadow:0 2px 6px rgba(0,0,0,.1);
	transition: all 0.3s ease;
  }
}

/* ---------- Thumb --------------------------------------- */
.lcp_start_cat_thumb{
  flex:0 0 40%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:4px;
}
.lcp_start_cat_thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Meta‑Block ---------------------------------- */
.lcp_start_cat_meta{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Smartphone (≤ 767 px) */
.lcp_start_cat_meta h3{
  margin:0 0 .5rem;
  font-size:1.1rem;      /* Titel */
  font-weight:700;
  line-height:1.3;
}
.lcp_start_cat_count{
  color:#666;
  font-weight:600;
  font-size:.95rem;      /* Count */
}

/* Tablet (768 – 980 px) */
@media (min-width:768px) and (max-width:980px){
  .lcp_start_cat_meta h3{ font-size:1.2rem; }
  .lcp_start_cat_count{  font-size:1rem;  }
}

/* Desktop (≥ 981 px) */
@media (min-width:981px){
  .lcp_start_cat_meta h3{ font-size: clamp(1.2rem, 2.5vw, 1.3rem); }
  .lcp_start_cat_count{  font-size:1.15rem; }
  .lcp_start_cat_meta h3:hover{ color: #1032cf; transition: all 0.3s ease;}	
}

/* ========================================================= */



/* ### ENDE TESTAREA ### */


.under-construction-farbe {
   color: #cccccc;
 
  }


/* Back to top button */

.et_pb_scroll_top.et-pb-icon {
  z-index: 9999;
  text-align: center;
  background: rgba(0,0,0,.3);
  text-decoration: none;
  position: fixed;
  bottom: 90px;
  right: 10px;
  -webkit-border-top-left-radius: 50px;
  -webkit-border-bottom-left-radius: 50px;
  -moz-border-radius-topleft: 50px;
  -moz-border-radius-bottomleft: 50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  display: none;
  cursor: pointer;
  font-size: 30px;
  padding: 10px;
  color: #fff;
  
}


/*
.et_pb_scroll_top:before {
  content: "6";
  }*/

/*Header weg beim rumterscrollen*/ 



    .hide-header {
    opacity: 0;
    transform: translateY(-50%);
    }
     
    .show-header {
    opacity: 1;
    margin-top: 0px !important;
    z-index: 10000 !important;
    }
     
      
    #ws-global-header {
      -webkit-transition: all 0.25s ease-out!important;
      -moz-transition: all 0.25s ease-out!important;
      -o-transition: all 0.25s ease-out!important;
      -ms-transition: all 0.25s ease-out!important;
      transition: all 0.25s ease-out!important;
    }


/* ## MOBILE MENU */


.et_mobile_menu li a:hover, .nav ul li a:hover {
   	
	background-color: white;
	opacity: 1.0;
		
   }

.ws_fullscreen_menu1 #mobile_menu1, .ws_fullscreen_menu1 .opened #mobile_menu1 {
	position: fixed!important;
    display: flex!important;
	top: 60px !important;
	flex-direction: column!important;
	min-height: 100%!important;
	max-height: 100%!important;
	z-index: 60000!important;
	border: none!important;
	overflow-y: auto!important;
	max-width: 100%!important;
	float: center!important;
	transition: all cubic-bezier(0.5, 0, 0, 1) 600ms;
	touch-action: none!important;
	background-image: linear-gradient(185deg, #ffffff 20%, #f2f2f2 100%) !important;

}

.ws_fullscreen_menu1 .opened #mobile_menu1 {
	transform: none;
}
.ws_fullscreen_menu1 .opened #mobile_menu1 a {
	transform: none;
	opacity: 1;
	text-align: center;
	border: none !important;
}


@media all and (max-width: 370px){

	.ws_fullscreen_menu1 .opened #mobile_menu1 a {
	
	font-size: 21px;
	line-height: 2em;
	}
	
	.ws_fullscreen_menu1 #mobile_menu1, .ws_fullscreen_menu1 .opened #mobile_menu1 {
	padding-top: 10%;
	}
	
	
	
}

 @media (min-width: 371px) and (max-width: 767px) {
	.ws_fullscreen_menu1 .opened #mobile_menu1 a {
	
	font-size: 25px;
	line-height: 2.5em;
	}
	 
	.ws_fullscreen_menu1 #mobile_menu1, .ws_fullscreen_menu1 .opened #mobile_menu1 {
	padding-top: 15%;
	}
}

 @media (min-width: 768px) and (max-width: 980px) {
	.ws_fullscreen_menu1 .opened #mobile_menu1 a {
	
	font-size: 30px;
	line-height: 3em;
	}
	 
	.ws_fullscreen_menu1 #mobile_menu1, .ws_fullscreen_menu1 .opened #mobile_menu1 {
	padding-top: 20%;
	}
}




.ws_fullscreen_menu1 .opened #mobile_menu1 .menu-item:nth-child(1) a, .closed #mobile_menu1 .menu-item:nth-last-child(1) a {
	transition-delay: 50ms;
}

.ws_fullscreen_menu1 .opened #mobile_menu1 .menu-item:nth-child(2) a, .closed #mobile_menu1 .menu-item:nth-last-child(2) a {
	transition-delay: 100ms;
}

.ws_fullscreen_menu1 .opened #mobile_menu1 .menu-item:nth-child(3) a, .closed #mobile_menu1 .menu-item:nth-last-child(3) a {
	transition-delay: 150ms;
}

.ws_fullscreen_menu1 .opened #mobile_menu1 .menu-item:nth-child(4) a, .closed #mobile_menu1 .menu-item:nth-last-child(4) a {
	transition-delay: 200ms;
}

.ws_fullscreen_menu .opened #mobile_menu1 .menu-item:nth-child(5) a, .closed #mobile_menu1 .menu-item:nth-last-child(5) a {
	transition-delay: 250ms;
}

.ws_fullscreen_menu1 .opened #mobile_menu1 .menu-item:nth-child(6) a, .closed #mobile_menu1 .menu-item:nth-last-child(6) a {
	transition-delay: 300ms;
}


.ws_fullscreen_menu1 .mobile_nav.opened .mobile_menu_bar:before {
 content: '\4d';
	color: #1032cf;
	transition: all ease-in-out 300ms;
      	z-index: 60000!important;
}

.et_pb_module .mobile_menu_bar:before {
    top: 0px;
}


.ws_fullscreen_menu1 .mobile_nav.closed .mobile_menu_bar:before {
	transition: all ease-in-out 300ms;
}


.ws_fullscreen_menu1 #mobile_menu1 a {
	text-align: center;
	transform: none;
	opacity: 0;
	border: none !important;
	transition: all cubic-bezier(0.5, 0, 0, 1) 500ms;
	}

@media all and (max-width: 370px){

	.ws_fullscreen_menu1 #mobile_menu1 a {
	
	font-size: 21px;
	line-height: 2em;
	}
}

 @media (min-width: 371px) and (max-width: 767px) {
	.ws_fullscreen_menu1 #mobile_menu1 a {
	
	font-size: 25px;
	line-height: 2.5em;
	}
}

 @media (min-width: 768px) and (max-width: 980px) {
	.ws_fullscreen_menu1 #mobile_menu1 a {
	
	font-size: 30px;
	line-height: 3em;
	}
}



.ws_fullscreen_menu1 .closed #mobile_menu1 {
	opacity: 0;
	pointer-events: none;
	transform: none;
	transition-delay: 500ms;
}





@media all and (max-width: 980px){

	li.ws-menu-mobil-ausblenden{
		display: none !important;
	}
}

@media all and (min-width: 981px){
	
	
.ws-menu-desktop-ausblenden {
		display: none !important;
	}
}


@media all and (min-width: 1px){
	
	
.ws-menu-komplett-ausblenden {
		display: none !important;
	}
}




/*

@media (min-width: 526px) and (max-width: 980px) {
             
  span.support-button-head {
    display: block;
    width: 60%;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
   
  }
}
*/

@media all and (max-width: 525px){
  span.nl-button-head {
    display: block;
    width: 95%;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
  }
}


@media (min-width: 526px) and (max-width: 980px) {
             
  span.nl-button-head {
    display: block;
    width: 60%;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    
  }
}


@media all and (min-width: 981px){
a.support-button-head {
 
  padding-top: 0px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

a.nl-button {
 
  padding-top: 30px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}
	
	
	
.et_pb_menu .et_pb_menu__menu>nav>ul>li {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  
}

}



@media all and (max-width: 525px){


  a.support-button {
 
    width: 90%;
    text-align: center;
    color: #ffffff;
    background: #84cf83;
    padding: 5px 13px 5px 15px;
    border-radius: 5px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
  }
  
  a.nl-button {
   
    text-align: center;
    color: #000;
    background: #fff;
    -webkit-box-shadow:inset 0px 0px 0px 2px #84cf83;
    -moz-box-shadow:inset 0px 0px 0px 2px #84cf83;
    box-shadow:inset 0px 0px 0px 2px #84cf83;
    padding: 0px 13px 0px 15px;
    border-radius: 5px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
  }

}
/*
.ws-home > a:before {
  font-family: 'ETMODULES';
  content: '\e009';
  text-align: center;

  margin-right: 10px;
  margin-left: 10px;
    color: #000000;
  font-size: 0.9em;
  transition: all .3s ease;
  z-index: 9999 !important;
}


.ws-lifestyle > a:before {
  font-family: 'ETMODULES';
  content: '\e030';
  text-align: center;

  margin-right: 10px;
  margin-left: 40px;
  color: #BF0A30;
  font-size: 0.9em;
  transition: all .3s ease;
  z-index: 9999 !important;
}

.ws-finanzen > a:before {
  font-family: 'ETMODULES';
  content: '\e0e9';
  text-align: center;

  margin-right: 10px;
  margin-left: 40px;
  color: #1032cf;
  font-size: 0.8em;
  transition: all .3s ease;
  z-index: 9999 !important;
}

.ws-tools > a:before {
  font-family: 'ETMODULES';
  content: '\e038';
  text-align: center;

  margin-right: 10px;
  margin-left: 40px;
  color: #708090;
  font-size: 0.8em;
  transition: all .3s ease;
  z-index: 9999 !important;
}

*/



/* ## Calcululator Rechner */


@media (min-width: 1px) {

.formbox-wrapper {
  background: #f4f4f4;
  border-radius: 5px; 
  /*font-size: 18px; */
  padding: 0px 12px 0px 12px;
}

.formbox__btn button:not(:hover):not(:active).formbox__btn-calc {
  background-color: #84cf83;
  color: #fff;

}

.formbox__btn button.formbox__btn-calc:hover {
  background-color: rgba(132,207,131,0.75);
  color: #fff;
}


.formbox__btn button:not(:hover):not(:active).formbox__btn-reset {
  background-color: rgba(169,180,236,0.66);
  color: #fff;
}

.formbox__btn button.formbox__btn-reset:hover {
  background-color: rgba(169,180,236,0.33);
  color: #fff;
}



.formbox__field.has-addon.is-right .formbox__field-addon {

  background-color: #ffffff;
  border-left: solid 1px #fff;
  padding-left: 0.35em;
}

.formbox__container input.formbox__field-input, .formbox__container input.formbox__field-result, .formbox__container select, .formbox__container select.formbox__field-select, .formbox__container textarea, .formbox__container textarea.formbox__field-result, .formbox__container textarea.formbox__field-textarea {
  background-color: #ffffff;
  border-right: 1px solid #fff;
 }


 .formbox__container input.formbox__field-input:focus,.formbox__container input.formbox__field-range:focus,.formbox__container input.formbox__field-result:focus,.formbox__container input.formbox__field-text:focus,.formbox__container select.formbox__field-select:focus,.formbox__container select:focus,.formbox__container textarea.formbox__field-result:focus,.formbox__container textarea.formbox__field-textarea:focus,.formbox__container textarea:focus {
  background-color: #ffffff;
  box-shadow: none;
  border-color: #1032cf;
  outline: 0
}

.formbox__field.has-addon.is-right:focus .formbox__field-addon:focus {

  background-color: #ffffff;
  border-left: solid 1px #1032cf;
}



.formbox__htmlBlock-result{
  line-height: 1.7em; 
  font-size: 18px;
  padding: 10px 0px 0px 0px; 
  }

}

/* Abstände Menüpunkte Desktop */

 @media (min-width: 980px) {
.et_pb_menu .et-menu.nav > li { 
  padding-left: 15px !important;
  padding-right: 15px !important;  
  }

.et_pb_menu .et_pb_menu__icon{
  padding-left: 30px !important;
  padding-right: 0px !important;
 
  }
}


/* ## Einheitliche Abstände gesamt */
/* Removes default bottom padding */
.ws_abstand h1,
.ws_abstand h2,
.ws_abstand h3,
.ws_abstand h4,
.ws_abstand h5,
.ws_abstand h6 {
  padding: 0;
}



/* Überschriften auf Zeilen aufteilen */
.ws_abstand h2
{
  /*text-wrap: balance;*/
  margin-top: 0.5em;
  margin-bottom: 1em;
  line-height: 1.3em;
}

/* Überschriften auf Zeilen aufteilen */

.ws_abstand h3
{
  margin-top: 0.5em;
  margin-bottom: 1em;
  line-height: 1.3em;
  }

.ws_abstand h4
{
  margin-top: 0.5em;
	line-height: 1.3em;
  }


.ws_abstand p {
  
    word-break: unset;
    word-wrap: unset;
    overflow-wrap: unset;
    -webkit-hyphens: unset;
    -moz-hyphens: unset;
    -ms-hyphens: unset;
    hyphens: unset;
  }


  /* Sets top paragraph margin where para follows a heading */
.ws_abstand h1 + p,
.ws_abstand h2 + p,
.ws_abstand h3 + p,
.ws_abstand h4 + p,
.ws_abstand h5 + p,
.ws_abstand h6 + p {
  margin-top: 1em;
}

/* Sets top heading margin where heading follows a paragraph */
.ws_abstand p + h1,
.ws_abstand p + h2,
.ws_abstand p + h3,
.ws_abstand p + h4,
.ws_abstand p + h5,
.ws_abstand p + h6 {
  margin-top: 1em;
}

/* Sets top  margin for unordered lists */
.ws_abstand * + ul {
  margin-top: 0.75em;
  margin-left: 0.75em;
}

/* Sets top and left margins for list items in UL */
.ws_abstand ul li {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.75em;
  margin-top: 0.75em;
}

/* Sets top and left margins for ordered lists */
.ws_abstand * + ol {
  margin-top: 0.75em;
  padding-left: 0.75em;
}

/* Sets top and left margins for list items in OL */
.ws_abstand ol li {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0.75em;
}

/* Sets spacing between marker (number) and text in OL */
.ws_abstand ol li::before {
  content: "";
  padding-left: 1em;
}

.ws_abstand blockquote {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border:none;
  display: flex;
  align-items: center;
  background-color: rgba(169,180,236,0.1); /* Hellblauer Hintergrund für den Text */
  position: relative;
  padding: 10px; /* Padding gleichmäßig auf allen Seiten */
  padding-left: calc(10% + 15px); /* Erhöht das linke Padding, um Platz für das Bild zu schaffen */
  margin-top: 30px;
  margin-bottom: 50px;
}

.ws_abstand blockquote::before {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  content: "";
  position: absolute;
  left: 0;
  top: 0px; /* Anpassung für Padding oben */
  bottom: 0px; /* Anpassung für Padding unten */
  width: 10%; /* Breite des Bildbereichs */
  background-image: url('/wp-content/uploads/2024/03/blockquote-icon.svg');
  background-color: rgba(132,207,131,0.3); /* Grüner Hintergrund für das Bild */
  background-repeat: no-repeat;
  background-position: center center; /* Bild zentrieren */
  background-size: 50% auto; /* Skaliert das Bild auf 75% seiner ursprünglichen Größe, behält dabei das Seitenverhältnis bei */
}

@media all and (max-width: 767px){
 
  .ws_abstand blockquote {
    padding-left: calc(15% + 15px); /* Erhöht das linke Padding, um Platz für das Bild zu schaffen */
    margin-top: 30px;
  margin-bottom: 50px;
  }
 
 
  .ws_abstand blockquote::before {
    width: 15%; /* Breite des Bildbereichs */
    background-size: 60% auto; /* Skaliert das Bild auf 75% seiner ursprünglichen Größe, behält dabei das Seitenverhältnis bei */


}
}


@media only screen and (min-width: 768px) {
  .gleichehoehe.et_pb_row .et_pb_column {
    display: flex;
    flex-flow: column nowrap;
  }
  .gleichehoehe.et_pb_row .et_pb_column .et_pb_module:last-child {
    margin-top: auto;
    }
}




/* ## RATE MY POST ANPASSUNGEN */


@media (max-width: 767px){
  .rmp-widgets-container.rmp-wp-plugin.rmp-main-container {
    text-align: center;
    }
  
  }@media (min-width: 768px){
    .rmp-widgets-container.rmp-wp-plugin.rmp-main-container {
      text-align: left;
        }
    
    }


.rmp-btn {
    background-color: #84cf83;
    border: none;
    color: #fff;
    padding: 0.5rem;
    text-decoration: none;
    font-size: 1rem;
    margin-bottom: 1.4rem;
}

.rmp-btn:hover {
    background-color: rgba(132,207,131,0.75);
	margin-bottom: 1.4rem;
}
	
	.rmp-social-widget .rmp-icon--social {
    font-size: 24px;
    padding: 10px;
    width: 46px;
}

.rmp-social-widget .rmp-icon--social {
    padding: 20px;
    font-size: 30px;
    width: 70px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    transition-property: none;
    box-shadow: none;
    font-family: ratemypost;
    display: inline-block;
}

	
/* ## BLOG ANPASSUNGEN */ 


.fluid-width-video-wrapper {
  width: 100%;
  position: relative;
  padding: 0;
}
.fluid-width-video-wrapper iframe, 
.fluid-width-video-wrapper object, 
.fluid-width-video-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




@media (min-width: 981px) {
		
/*add a smooth transition for the zoom effect*/
	.et_pb_blog_grid .et_pb_image_container img {
        transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
	} 
/*make the featured image zoom in on hover*/
	.et_pb_blog_grid .et_pb_post:hover img {
        transform: scale(1.025) rotate(-0.5deg);
        -moz-transform: scale(1.025) rotate(-0.5deg);
        -webkit-transform: scale(1.025) rotate(-0.5deg);
	}
}




/*blog image aspect ratio landscape 16:9*/
.blog-image-16-9 .entry-featured-image-url {
  padding-top: 56.25%;
  display: block;
}
.blog-image-16-9 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

/*make the parts of the blog post flexible*/
.et_pb_post {
	display: flex;
	flex-direction: column;
}
/*blog post featured image*/
.et_pb_post .et_pb_image_container, .et_pb_post .entry-featured-image-url {
	order: 1;
}


@media (max-width: 980px) {
/*blog post title*/
.et_pb_post .entry-title {
	order: 3;
	height: 50px;
	
}
}

@media (min-width: 981px) {
/*blog post title*/
.et_pb_post .entry-title {
	order: 3;
	height: 75px;
	
}
}

/*blog post meta*/
.et_pb_post .post-meta {
	order: 2;
	margin-top:-40px;
	margin-bottom: 15px;
	z-index: 999;
	
}


/* Blog Meta Hintergrund */
.et_pb_post .more, .et_pb_post .post-meta a {
	
	background: rgba(169,180,236,0.33);
	padding: 0.25em 0.5em;
	border-radius: 5px;
	color: #1032cf;
	font-size: 0.9em;
	transition: .3s ease all;

}



/* ## Artikel volle Breite */
.et-l .et-l--post .et_builder_inner_content .et_pb_row {
width: 100%;
padding-top: 0px;
}

/* ## Beitrag Inhaltsverzeichnis Aktiver Link Hintergund */

.pac_divi_table_of_contents_0_tb_body li.active {
  background-image: linear-gradient(to right, #f0f0f0, #f4f4f4, #fbfbfb, #ffffff, #ffffff);
  
}
/* ## Kategorien und Tags über Beitträgen */
/*style the tags on single blog posts*/
.post-tag-links {
	font-weight: bold!important;
}
/*style the tags on single blog posts*/
.post-tag-links a {
	background: #CCCCCC;
	padding: 0.25em 0.5em;
	border-radius: 3px;
	color: #000000;
	font-size: 1em;
	transition: .3s ease all;
}
@media (max-width: 525px) {
.post-tag-links a {
	font-size: 1em;
	}
}

/*style the tags on hover on single blog posts*/
.post-tag-links a:hover {
	background: #CCCCCC;
	color: #000000;
	transition: .3s ease all;
}

/*style the categories on single blog posts*/
.post-cat-links {
	font-weight: bold!important;
}
/*style the categories on single blog posts*/
.post-cat-links a {
	background: #1032cf;
	padding: 0.25em 0.5em;
	border-radius: 3px;
	margin-right: 10px;
	color: #ffffff;
	font-size: 0.9em;
	transition: .3s ease all;
}

@media (max-width: 525px) {
.post-cat-links a {
	font-size: 0.75em;
	}
}

/*style the categories on hover on single blog posts*/
.post-cat-links a:hover {
	background: #6c2eb9;
	color: #ffffff;
	transition: .3s ease all;
}


/* ### IM BEITRAG: Weitere und beliebte Beiträge ### */

/* Container für die Beiträge */
.lcp_cust_beitraege_container {
  display: grid;
  grid-gap: 20px;
}

/* Smartphone: 1 Spalte */
@media (max-width: 767px) {
  .lcp_cust_beitraege_container {
    grid-template-columns: 1fr;
  }
}

/* Desktop/Tablet: 2 Spalten */
@media (min-width: 768px) {
  .lcp_cust_beitraege_container {
    grid-template-columns: 1fr 1fr;
  }
}

/* Wrapper um das Bild im 16:9-Verhältnis */
.lcp_cust_image_wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* entspricht 16:9 (9/16 = 0,5625) */
  overflow: hidden;
  border-radius: 10px;

}

.lcp_cust_image_wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
	  
}




@media (min-width: 981px) {
		
	.lcp_cust_image_wrapper:hover img {
        transform: scale(1.025) rotate(-0.5deg);
        -moz-transform: scale(1.025) rotate(-0.5deg);
        -webkit-transform: scale(1.025) rotate(-0.5deg);
	}
	
	.lcp_cust_image_wrapper img {

        transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;

	}	
	
}


/* ### CONTENT HUB ANPASSUNGEN ### */

/* ## BELIEBTE BEITRÄGE CONTAINER ## */


*, *::before, *::after {
  box-sizing: border-box;
}

/* Oberer Bereich */
.ch_upper_area {
  display: flex;
  gap: 10px; /* Globaler Gap: 10px */
  align-items: stretch;
}
.ch_top_featured {
  flex: 2;
  overflow: hidden;
  border-radius: 5px;
  padding: 0;
}
.ch_top_featured a,
.ch_featured_image {
  width: 100%;
  height: 100%;
}
.ch_featured_image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  margin: 0;
}
.ch_featured_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.ch_top_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Globaler Gap: 10px */
}
.ch_top_right_item {
  flex: 1;
  overflow: hidden;
  border-radius: 5px;
  transition: 0.3s;
  padding: 0;
}
.ch_top_right_item:hover {
  background-color: #ffffff;
}
.ch_top_right_item a,
.ch_top_right_image {
  width: 100%;
  height: 100%;
  display: block;
}
.ch_top_right_image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  margin: 0;
}
.ch_top_right_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

/* Unterer Bereich */
.ch_lower_area {
  display: flex;
  gap: 10px; /* Globaler Gap: 10px */
  align-items: stretch;
  margin-top: 10px; /* Abstand zwischen Ober- und Unterbereich: 10px */
}
.ch_bottom_left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Globaler Gap: 10px */
}
.ch_bottom_left_item {
  flex: 1;
  overflow: hidden;
  border-radius: 5px;
  transition: 0.3s;
  padding: 0;
}
.ch_bottom_left_item:hover {
  background-color: #ffffff;
}
.ch_bottom_left_item a,
.ch_bottom_left_image {
  width: 100%;
  height: 100%;
  display: block;
}
.ch_bottom_left_image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  margin: 0;
}
.ch_bottom_left_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.ch_bottom_featured {
  flex: 2;
  overflow: hidden;
  border-radius: 5px;
  padding: 0;
}
.ch_bottom_featured a,
.ch_bottom_featured_image {
  width: 100%;
  height: 100%;
  display: block;
}
.ch_bottom_featured_image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  margin: 0;
}
.ch_bottom_featured_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

/* Hover-Effekte (Desktop) */
@media (min-width: 981px) {
  .ch_featured_image:hover img,
  .ch_top_right_image:hover img,
  .ch_bottom_left_image:hover img,
  .ch_bottom_featured_image:hover img {
    transform: scale(1.02) rotate(-0.5deg);
    transition: all 0.5s ease;
  }
}

/* Responsive: Bei max-width:767px -> Flex-Direction column */
@media (max-width: 767px) {
  .ch_upper_area, .ch_lower_area {
    flex-direction: column;
  }
}

/* Größeres margin zwischen oben und unzten (Desktop) */
@media (min-width: 981px) {

	.ch_upper_area {
    margin-bottom: 20px;
	}

}


/* ## HUB BEITRÄGE AUS DEN EINZELNEN BEREICHEN ## */


/***** Styles für List Category Posts - Template "content_hub_cluster" *****/

/* Sicherstellen, dass Links in .chc_ws_bottom_area als Block-Elemente dargestellt werden */
.chc_ws_bottom_area a {
  text-decoration: none;
  color: inherit;
  /* Desktop-Transition wird später gesetzt */
}

/* UNTERER BEREICH: Alle Beiträge werden im gleichen Layout dargestellt */
.chc_ws_bottom_area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Basis (Desktop) */
}

.chc_ws_bottom_post {
  display: flex;
  flex-direction: row; /* Bild links, Text rechts */
  gap: 10px;
  margin-top: 10px;   /* Basis (Desktop) */
  margin-bottom: 10px;/* Basis (Desktop) */
  width: calc(50% - 10px); /* Zwei Spalten, berücksichtigt den Gap */
  align-items: stretch; /* Beide Elemente erhalten gleiche Höhe */
}

/* Basis (Desktop): Fester Bild-Container */
.chc_ws_bottom_image {
  flex-shrink: 0;
  width: 180px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}

.chc_ws_bottom_image_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.chc_ws_bottom_image_inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: all 0.5s ease;
}

/* Untere Info-Box: nimmt den restlichen Platz ein und erhält einen unteren Rahmen */
.chc_ws_bottom_info {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  border-bottom: solid 2px;
  border-color: #dedede;
}

/* Angepasster Titel im unteren Bereich – Basis (Desktop) */
.chc_ws_bottom_title {
  font-size: clamp(1.05rem, 2.5vw, 1.1rem);
  font-weight: bold;
  line-height: 1.3;
  margin: 0;
  padding-bottom: 0;
  vertical-align: top;
  align-self: flex-start;
  transition: color 500ms ease;
}

/* Hover-Effekt für den Titel (nur Desktop) */
.chc_ws_bottom_title a:hover {
  color: #1032cf;
}

/* Meta-Informationen im unteren Bereich – Basis (Desktop) */
.chc_ws_meta {
  display: flex;
  justify-content: space-between;
  font-size: clamp(1.05rem, 2.5vw, 1.1rem);
  color: #666;
  margin-top: auto; /* schiebt die Meta-Infos an den unteren Rand */
}

/* RESPONSIVE DESIGN */

/* Smartphone (max-width: 980px) */
@media (max-width: 980px) {
  .chc_ws_bottom_area {
    gap: 10px; /* Gap auf 10px */
  }
  .chc_ws_bottom_post {
    width: 100%;
    flex-direction: row; /* Layout bleibt row: Bild links, Text rechts */
    align-items: stretch;
    margin-top: 0;    /* margin-top 0px */
    margin-bottom: 10; /* margin-bottom 0px */
  }
  .chc_ws_bottom_image {
    /* Für Smartphones relative Breite (30% der Gesamtbreite) */
    flex: 0 0 30%;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
  }
  .chc_ws_bottom_info {
    flex: 1; /* nimmt ca. 70% der Breite ein */
  }
  /* Override: Smartphone – Bild-Inhalt */
  .chc_ws_bottom_image_inner img {
    height: auto;
    border-radius: 5px;
  }
  .chc_ws_meta {
    font-size: clamp(1rem, 2.5vw, 1.05rem);
  }
  .chc_ws_bottom_title {
    font-size: clamp(0.85rem, 2.5vw, 1rem);
  }
}



/* Desktop (min-width: 981px) */
@media (min-width: 981px) {
  .chc_ws_bottom_post {
    width: calc(50% - 10px);
    align-items: stretch;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  /* Desktop: .chc_ws_bottom_image bleibt mit fester Breite von 180px */
  /* Hover-Effekte nur auf Desktop */
  .chc_ws_bottom_image:hover .chc_ws_bottom_image_inner img {
    transform: scale(1.05) rotate(-1deg);
    transition: all 0.5s ease;
  }
/*  .chc_ws_bottom_post:hover {
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
  } */
  .chc_ws_bottom_area a {
    transition: color 300ms ease;
  }
}


/* ## STARTSEITE BELIEBTE POSTS ## */


/***** Styles für List Category Posts - Template "startseite_posts_featured" *****/

/* Grid-Container für die Featured-Posts */
.spf_posts_area {
  display: grid;
  gap: 20px;
  /* Desktop: 3 Spalten */
  grid-template-columns: repeat(3, 1fr);
}

/* Einzelner Post im Grid – vertikale Anordnung */
.spf_post {
  display: flex;
  flex-direction: column;
  /* Padding wurde entfernt */
}

/* Bildbereich (oben) */
.spf_image {
  display: block;
  width: 100%;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.spf_image_inner {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 Verhältnis */
  position: relative;
}

.spf_image_inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: all 0.5s ease;
}

/* Info-Bereich: Meta und Titel */
.spf_info {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

/* Meta-Bereich: Lesezeit links, Kategorie rechts */
.spf_meta {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  color: #666;
  margin-top: 5px;
  margin-bottom: 10px;
}

/* Kategorie-Link in der Meta */
.spf_category a {
  background: rgba(169, 180, 236, 0.33);
  padding: 0.25em 0.5em;
  border-radius: 5px;
  color: #1032cf;
  font-weight: bold;
  transition: 0.3s ease all;
}

/* Hover-Effekt für den Kategorie-Link im Desktop */
@media (min-width: 981px) {
  .spf_category a:hover {
    color: #6c2eb9;
    transition: 300ms;
  }
}

/* Titel (als h3) */
.spf_title {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.3rem;
  transition: color 0.3s ease;
}

/* Hover-Effekt für den Titel-Link im Desktop */
@media (min-width: 981px) {
  .spf_title a:hover {
    color: #1032cf;
    transition: 300ms;
  }
}

/* Hover-Effekt für das Titelbild (nur Desktop) */
@media (min-width: 981px) {
  .spf_image:hover .spf_image_inner img {
    transform: scale(1.02) rotate(-0.5deg);
    transition: all 0.5s ease;
  }
}

/* RESPONSIVE DESIGN */

/* Tablet: 2 Spalten */
@media (min-width: 768px) and (max-width: 980px) {
  .spf_posts_area {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Smartphone: 1 Spalte */
@media (max-width: 767px) {
  .spf_posts_area {
    grid-template-columns: 1fr;
  }
  /* In Smartphone werden Hover-Effekte deaktiviert */
  .spf_title a:hover,
  .spf_category a:hover,
  .spf_image:hover .spf_image_inner img {
    color: inherit !important;
    transform: none !important;
    transition: none !important;
  }
}





/* ## STARTSEITE NEUESTE POSTS ## */

/***** Styles für List Category Posts - Template "startseite_posts_newest" *****/

/* Sicherstellen, dass Links in .sppn_bottom_area als Block-Elemente dargestellt werden */
.sppn_bottom_area a {
  text-decoration: none;
  color: inherit;
  /* Desktop-Transition wird später gesetzt */
}

/* UNTERER BEREICH: Alle Beiträge werden im gleichen Layout dargestellt */
.sppn_bottom_area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Basis (Desktop) */
}

.sppn_bottom_post {
  display: flex;
  flex-direction: row; /* Bild links, Text rechts */
  gap: 10px;
  margin-top: 10px;   /* Basis (Desktop) */
  margin-bottom: 10px;/* Basis (Desktop) */
  width: calc(50% - 10px); /* Zwei Spalten, berücksichtigt den Gap */
  align-items: stretch; /* Beide Elemente erhalten gleiche Höhe */
}

/* Basis (Desktop): Fester Bild-Container */
.sppn_bottom_image {
  flex-shrink: 0;
  width: 180px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}

.sppn_bottom_image_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.sppn_bottom_image_inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: all 0.5s ease;
}

/* Untere Info-Box: nimmt den restlichen Platz ein und erhält einen unteren Rahmen */
.sppn_bottom_info {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  border-bottom: solid 2px;
  border-color: #dedede;
}

/* Angepasster Titel im unteren Bereich – Basis (Desktop) */
.sppn_bottom_title {
  font-size: clamp(1.05rem, 2.5vw, 1.1rem);
  font-weight: bold;
  line-height: 1.3;
  margin: 0;
  padding-bottom: 0;
  vertical-align: top;
  align-self: flex-start;
  transition: color 500ms ease;
}

/* Hover-Effekt für den Titel (nur Desktop) */
@media (min-width: 981px) {
  .sppn_bottom_title a:hover {
    color: #1032cf;
    transition: 300ms;
  }
}

/* Meta-Informationen im unteren Bereich – Basis (Desktop) */
.sppn_meta {
  display: flex;
  justify-content: space-between;
  font-size: clamp(1.05rem, 2.5vw, 1.1rem);
  color: #666;
  margin-top: auto;
}

/* Desktop: zusätzlich margin-bottom: 3px bei .sppn_meta */
@media (min-width: 981px) {
  .sppn_meta {
    margin-bottom: 3px;
  }
}

/* Kategorie-Link in der Meta */
.sppn_category a {
  background: rgba(169, 180, 236, 0.33);
  padding: 0.2em 0.4em;
  border-radius: 5px;
  color: #1032cf;
  font-weight: bold;
  transition: 0.3s ease all;
}

/* Hover-Effekt für den Kategorie-Link (nur Desktop) */
@media (min-width: 981px) {
  .sppn_category a:hover {
    color: #6c2eb9;
    transition: 300ms;
  }
}

/* RESPONSIVE DESIGN */

/* Smartphone (max-width: 767px) */
@media (max-width: 980px) {
  .sppn_bottom_area {
    gap: 10px; /* Gap auf 10px */
  }
  .sppn_bottom_post {
    width: 100%;
    flex-direction: row; /* Layout bleibt row: Bild links, Text rechts */
    align-items: stretch;
    margin-top: 0;    /* margin-top 0px */
    margin-bottom: 10; /* margin-bottom 0px */
  }
  .sppn_bottom_image {
    /* Für Smartphones relative Breite (30% der Gesamtbreite) */
    flex: 0 0 30%;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
  }
  .sppn_bottom_info {
    flex: 1; /* nimmt ca. 70% der Breite ein */
  }
  /* Override: Smartphone – Bild-Inhalt */
  .sppn_bottom_image_inner img {
    height: auto;
    border-radius: 5px;
  }
  .sppn_meta {
    font-size: clamp(0.85rem, 2.5vw, 1.0rem);
  }
  .sppn_bottom_title {
    font-size: clamp(0.85rem, 2.5vw, 1rem);
  }
  /* Hover-Effekte in Smartphone deaktivieren */
  .sppn_bottom_title a:hover,
  .sppn_category a:hover {
    color: inherit;
    transition: none;
  }
}



/* Desktop (min-width: 981px) */
@media (min-width: 981px) {
  .sppn_bottom_post {
    width: calc(50% - 10px);
    align-items: stretch;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  /* Desktop: .sppn_bottom_image bleibt mit fester Breite von 180px */
  .sppn_bottom_post:hover .sppn_bottom_image_inner img {
    transform: scale(1.05) rotate(-1deg);
    transition: all 0.5s ease;
  }
  .sppn_bottom_post:hover {
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
  }
  .sppn_bottom_area a {
    transition: color 300ms ease;
  }
}

/* ## IM BEITRAG: WEITERE UND BELIEBTE BEITRÄGE ## */


/***** Styles für List Category Posts - Template "lcp_beitraege" *****/

/* Sicherstellen, dass Links in .rel_post_bottom_area als Block-Elemente dargestellt werden */
.rel_post_bottom_area a {
  text-decoration: none;
  color: inherit;
  transition: color 300ms ease;
}

/* UNTERER BEREICH: Alle Beiträge werden im gleichen Layout dargestellt */
.rel_post_bottom_area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Basis (Desktop) */
}

.rel_post_bottom_post {
  display: flex;
  flex-direction: row; /* Bild links, Text rechts */
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%; /* Einspaltiges Layout */
  align-items: stretch;
}

/* Basis: Bild-Container (Standardwert für Smartphone, etc.) */
.rel_post_bottom_image {
  flex-shrink: 0;
  width: 25%; /* Basiswert; wird in Tablet und Desktop überschrieben */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}

.rel_post_bottom_image_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; entfernt, um das 16:9-Verhältnis korrekt einzuhalten */
  border-radius: 5px;
}

.rel_post_bottom_image_inner img {
  width: 100%;
  /* height: 100%; entfernt */
  object-fit: cover;
  border-radius: 5px;
  transition: all 0.5s ease;
}

/* Untere Info-Box: nimmt den restlichen Platz ein und erhält einen unteren Rahmen */
.rel_post_bottom_info {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  border-bottom: solid 2px;
  border-color: #dedede;
}

/* Titel-Link: Global (Smartphone-Wert) */
.rel_post_bottom_title {
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  font-weight: bold;
  line-height: 1.3;
  margin: 0;
  padding-bottom: 0;
  vertical-align: top;
  align-self: flex-start;
  transition: color 500ms ease;
}

/* Meta Description: standardmäßig versteckt, wird in Tablet und Desktop eingeblendet */
.rel_post_meta_desc {
  display: none;
}

/* Meta-Informationen: Global (Smartphone) */
.rel_post_meta {
  display: flex;
  justify-content: space-between;
  font-size: clamp(1rem, 2.5vw, 1.05rem);
  color: #666;
  margin-top: auto;
}

/* Kategorie-Link in der Meta */
.rel_post_category a {
  background: rgba(169, 180, 236, 0.33);
  padding: 0.2em 0.4em;
  border-radius: 5px;
  color: #1032cf;
  font-weight: bold;
  transition: 0.3s ease all;
}

/* --- RESPONSIVE DESIGN --- */

/* Smartphone (max-width: 767px) */
@media (max-width: 767px) {
  .rel_post_bottom_area {
    gap: 10px;
  }
  .rel_post_bottom_post {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    margin-top: 0;
    margin-bottom: 10px;
  }
  .rel_post_bottom_image {
    flex: 0 0 30%;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
  }
  .rel_post_bottom_info {
    flex: 1;
  }
  .rel_post_bottom_image_inner img {
    border-radius: 5px;
  }
  .rel_post_bottom_title {
    font-size: clamp(0.85rem, 2.5vw, 1rem);
  }
  .rel_post_meta {
    font-size: clamp(0.85rem, 2.5vw, 1.0rem);
  }
  /* Hover-Effekte auf Smartphone deaktiviert */
  .rel_post_bottom_area a:hover {
    color: inherit;
    transition: none;
  }
}

/* Tablet (min-width: 768px and max-width: 980px) */
@media (min-width: 768px) and (max-width: 980px) {
  .rel_post_bottom_area {
    gap: 10px;
  }
  .rel_post_bottom_post {
    width: 100%;
    align-items: stretch;
    margin-top: 0;
    margin-bottom: 10px;
  }
  .rel_post_bottom_image {
    flex: 0 0 200px;
    width: 200px; /* Fixe Breite für Tablet */
    aspect-ratio: 16 / 9;
    border-radius: 5px;
  }
  /* Titel und Meta für Tablet anpassen */
  .rel_post_bottom_title {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  }
  .rel_post_meta {
    font-size: clamp(1.05rem, 2.5vw, 1.1rem);
  }
  /* Meta Description anzeigen */
  .rel_post_meta_desc {
    display: block;
    font-size: clamp(0.9rem, 2.5vw, 1.0rem);
    margin: 5px 0;
  }
  /* Hover-Effekte auf Tablet deaktiviert */
  .rel_post_bottom_area a:hover {
    color: inherit;
    transition: none;
  }
}

/* Desktop (min-width: 981px) */
@media (min-width: 981px) {
  .rel_post_bottom_post {
    width: 100%;
    align-items: stretch;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  /* Desktop: Bild-Container fix auf 200px Breite und 16:9-Verhältnis */
  .rel_post_bottom_image {
    flex: 0 0 200px;
    width: 200px;
    aspect-ratio: 16 / 9;
  }
  /* Hover-Effekt für das Bild */
  .rel_post_bottom_post:hover .rel_post_bottom_image_inner img {
    transform: scale(1.05) rotate(-1deg);
    transition: all 0.5s ease;
  }
  /* Hover: Alle Links in .rel_post_bottom_area ändern die Schriftfarbe */
  .rel_post_bottom_area a:hover {
    color: #1032cf;
  }
  .rel_post_bottom_title {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  }
  .rel_post_meta {
    font-size: clamp(1.05rem, 2.5vw, 1.1rem);
  }
  .rel_post_meta_desc {
    display: block;
    font-size: clamp(0.9rem, 2.5vw, 1.0rem);
    margin: 5px 0;
  }
}