.elementor-kit-1042{--e-global-color-primary:#FE846D;--e-global-color-secondary:#54595F;--e-global-color-text:#222222;--e-global-color-accent:#61CE70;--e-global-color-b426d7b:#FFFFFF;--e-global-color-14d6d28:#FF6D99;--e-global-color-e991ba9:#FE846D;--e-global-color-e89db1a:#F7C94E;--e-global-color-8790612:#D264E2;--e-global-color-ffcb60c:#5ED3A0;--e-global-color-11f48ed:#419CF2;--e-global-color-f5277c9:#FE7586;--e-global-color-4502bcd:#FF6476;--e-global-color-d2ddbb0:#F8EFF0;--e-global-color-39b628d:#AAAAAA;--e-global-color-b724d7e:#FE4F65;--e-global-color-7a481b9:#FD7E14;--e-global-typography-primary-font-family:"Fira Sans";--e-global-typography-primary-font-size:36px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Fira Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Fira Sans";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6667em;--e-global-typography-accent-font-family:"Fira Sans";--e-global-typography-accent-font-weight:500;--e-global-typography-6799412-font-family:"Fira Sans";--e-global-typography-6799412-font-weight:400;--e-global-typography-6799412-font-style:italic;--e-global-typography-6799412-line-height:1.6667px;--e-global-typography-4fbdd0f-font-family:"Fira Sans";--e-global-typography-4fbdd0f-font-size:2rem;--e-global-typography-6a8ff10-font-family:"Icomoon";--e-global-typography-711e9c2-font-family:"Fira Sans";--e-global-typography-711e9c2-font-size:14px;--e-global-typography-711e9c2-font-weight:400;font-family:"Fira Sans", "Fira Sans";font-size:18px;font-weight:400;line-height:1.67em;}.elementor-kit-1042 button,.elementor-kit-1042 input[type="button"],.elementor-kit-1042 input[type="submit"],.elementor-kit-1042 .elementor-button{background-color:var( --e-global-color-f5277c9 );color:var( --e-global-color-b426d7b );border-style:none;}.elementor-kit-1042 button:hover,.elementor-kit-1042 button:focus,.elementor-kit-1042 input[type="button"]:hover,.elementor-kit-1042 input[type="button"]:focus,.elementor-kit-1042 input[type="submit"]:hover,.elementor-kit-1042 input[type="submit"]:focus,.elementor-kit-1042 .elementor-button:hover,.elementor-kit-1042 .elementor-button:focus{background-color:var( --e-global-color-b724d7e );border-style:none;}.elementor-kit-1042 e-page-transition{background-color:#FFFFFF;}.elementor-kit-1042 p{margin-block-end:20px;}.elementor-kit-1042 a{color:var( --e-global-color-f5277c9 );}.elementor-kit-1042 h1{font-family:"Fira Sans", "Fira Sans";font-size:48px;font-weight:700;line-height:1.2em;}.elementor-kit-1042 h2{color:#222222;font-family:"Fira Sans", "Fira Sans";font-size:36px;font-weight:700;line-height:1.2em;word-spacing:0px;}.elementor-kit-1042 h3{color:#222222;font-size:30px;font-weight:700;}.elementor-kit-1042 h5{font-size:22.5px;font-weight:700;}.elementor-kit-1042 h6{font-size:18px;font-weight:700;}.elementor-kit-1042 img:hover{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1080px;}.e-con{--container-max-width:1080px;--container-default-padding-top:0px;--container-default-padding-right:15px;--container-default-padding-bottom:0px;--container-default-padding-left:15px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-1042 h3{font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:15px;--container-default-padding-bottom:0px;--container-default-padding-left:15px;}}@media(max-width:767px){.elementor-kit-1042{--e-global-typography-711e9c2-font-size:10px;font-size:15px;}.elementor-kit-1042 p{margin-block-end:22px;}.elementor-kit-1042 h1{font-size:36px;}.elementor-kit-1042 h2{font-size:30px;line-height:1.2em;}.elementor-kit-1042 h3{font-size:24px;word-spacing:0em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:15px;--container-default-padding-bottom:0px;--container-default-padding-left:15px;}}/* Start custom CSS *//* --- Sibling-Based Sticky Footer Solution --- */

/* Step 1 (Same as before): Set the body wrapper */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    margin: 0; 
}

/* Step 2 (The Sibling Selector): Target the element that immediately follows the header */
/* Replace #site-header with the ID or Class of your actual Elementor Header template container. */
header + * { /* The + * .elementor-kit-1042 targets ANY element immediately following #site-header */
    flex-grow: 1;
}

:root {
    --padding-left: 51px;
    --padding-right: 51px;
    --padding-top: 31px;
    --padding-bottom: 31px;
    --padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

.lyte-wrapper {
    margin: 0px !important;
}

.elementor-widget-text-editor p {
    /*margin-bottom: 0px;*/
}

.elementor-widget-text-editor ul {
    margin-bottom: 20px;
}


h6 a:hover {
    text-decoration: underline;
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--padding);
    z-index: 2;
    
    .caption-subtitle {
        font-size: 14px;
    }
}

.banner .caption {
    padding: 51px;
    width: 66%;
}

/* remove default padding from wp-post content and wp-page content */
.no-padding-content {
    padding-left: 0px;
    padding-right: 0px;
}


.caption h3 {
    font-size: 30px;
}

/* Mediathek Post Magazine Grid right two items smaller text size*/
.post_magazine_grid .ue-grid-item:nth-child(2) .ue-grid-item-title a,
/* Target the 3rd Item */
.post_magazine_grid .ue-grid-item:nth-child(3) .ue-grid-item-title a {
    font-size: 20px !important;  /* Adjust this value to make it smaller */
}



html {
  /* Replace 80px with your actual header height */
  scroll-padding-top: 90px; 
}

/* 3. RESPONSIVE UPDATES */
/* Tablet: Increase spacing and text */
@media (max-width: 1023px) {
    :root {
        --padding-left: 19px;
        --padding-right: 19px;
        --padding-top: 30px;
        --padding-bottom: 30px;
        --padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
    }
  
  
    .caption {
        padding: var(--padding);
    }
    
    .banner .caption {
        padding: 30px 19px;
        width: 100%;
        
        .caption-subtitle {
            font-size: 14px;
        }
        
        h2 {
            font-size: 36px;
        }
    }
    
    .full-wide-content-mobile {
        margin-left: -15px;
        margin-right: -15px;
        
        width: calc(100% + 30px);
        max-width: unset !important;
        overflow: hidden;
    }
  
  html {
      /* Replace 80px with your actual header height */
      scroll-padding-top: 55px; 
    }
  
  .caption h3 {
        font-size: 36px;
        line-height: 1.1111;
    }
}

@media (max-width: 767px) {
    .post h2 {
        font-size: 24px;
    }
}

.gradient-title {
    color: #ff6c99;
    background: -webkit-linear-gradient(left, #ff6c99 0%, #fe836e 100%);
    background: linear-gradient(to right, #ff6c99 0%, #fe836e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

strong {
  font-weight: 700 !important;
}

.icon {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  background: -webkit-linear-gradient(left, #ff699e 0%, #fe846d 100%);
  background: linear-gradient(to right, #ff699e 0%, #fe846d 100%);
  margin-bottom: 12px;
  font-size: 32px;
  line-height: 1;
  z-index: 1;
}

.icon span {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
}

.icon-tablet:before {
  content: "\e90b";
}

.icon-alert:before {
  content: "\e90c";
}

.icon-alert-circle:before {
  content: "\e90d";
}

.icon-bulb-61:before {
  content: "\e90e";
}

.icon-chart-bars:before {
  content: "\e90f";
}

.icon-youtube-circle:before {
  content: "\e900";
}

.icon-dice:before {
  content: "\e901";
}

.icon-icon01:before {
  content: "\e902";
}

.icon-icon02:before {
  content: "\e903";
}

.icon-instagram-circle:before {
  content: "\e904";
}

.icon-link:before {
  content: "\e905";
}

.icon-menu:before {
  content: "\e906";
}

.icon-picture:before {
  content: "\e907";
}

.icon-play:before {
  content: "\e908";
}

.icon-play-circle:before {
  content: "\e909";
}

.icon-search:before {
  content: "\e90a";
}

.icon-play3:before {
  content: "\ea1c";
}

.icon-facebook:before {
  content: "\ea90";
}

.icon-instagram:before {
  content: "\ea92";
}

.icon-twitter:before {
  content: "\ea96";
}

.icon-rss:before {
  content: "\ea9b";
}

.icon-youtube:before {
  content: "\ea9d";
}

.icon-newspaper:before {
  content: "\e910";
}

.icon-map:before {
  content: "\e94c";
}

.icon-lexikon:before {
  content: "\e910";
}

.icon-pasta:before{
  content: url(/wp-content/uploads/2026/01/pasta.svg);
  display: inline-block;
  zoom: 9%;
}

.icon-apple:before{
  content: url(/wp-content/uploads/2026/01/apple.svg);
  display: inline-block;
  height: 60px;
  zoom: 40%;
}

.icon-cupcake:before{
  content: url(/wp-content/uploads/2026/01/cupcake.svg);
  display: inline-block;
  height: 60px;
  width: 60px;
  zoom: 80%;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	clip-path: inset(50%);
	border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
	clip-path: none;
}

.alert {
  color: #fff;
  padding: 30px;
  border-radius: 0;
  border: none;
}

.alert a {
  color: #fff;
  text-decoration: underline;
}

.alert a:hover {
  color: #fff;
}

.alert.alert-success {
  background-image: -webkit-linear-gradient(left, #65c482 0%, #71e4a4 100%);
  background-image: linear-gradient(to right, #65c482 0%, #71e4a4 100%);
  background-repeat: repeat-x;
}

.alert.alert-info {
  background-image: -webkit-linear-gradient(left, #4e9aee 0%, #75b5fc 100%);
  background-image: linear-gradient(to right, #4e9aee 0%, #75b5fc 100%);
  background-repeat: repeat-x;
}

.alert.alert-warning {
  background-image: -webkit-linear-gradient(left, #ff9351 0%, #ffa772 100%);
  background-image: linear-gradient(to right, #ff9351 0%, #ffa772 100%);
  background-repeat: repeat-x;
}

.alert strong.title:before {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  margin-right: 8px;
  vertical-align: middle;
  font-size: 33px;
}

.alert.alert-warning strong.title:before {
  content: "\e90c";
}

.alert.alert-success strong.title:before {
  content: "\e90e";
}

.alert.alert-info strong.title:before {
  content: "\e90d";
}

.alert .title {
  font-size: 24px;
  /* text-transform: capitalize; */
  display: block;
  margin-bottom: 15px;
}

.alert .title span {
  font-size: 33px;
  line-height: 1;
  margin-right: 8px;
  vertical-align: middle;
}

.alert p {
  margin-bottom: 15px;
}

@media (max-width: 767px) {
    .alert .title span {
        font-size: 24px;
    }
}


.colorize-overlay:before {
    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background-repeat: repeat-x;
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    pointer-events: none;
}

.colorize-overlay:after {
    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    background-repeat: repeat-x;
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    pointer-events: none;
    background-color: #001367;
    mix-blend-mode: lighten;
}

/* 1. Define the Master Animation */
/* This tells the background to start transparent and fade into the variable color */
@keyframes fadeInTint {
    0%   { background-color: transparent }
    100% { background-color: var(--overlay-color); }
}

/* 2. Configure the Container to use the Animation */
#homepage .colorize-overlay {
    background-color: transparent; /* Start invisible to prevent flash */
    
    /* Apply the animation: 
       - Lasts 0.4 seconds
       - Waits 0.3 seconds before starting (gives image time to load)
       - 'forwards' keeps the color visible at the end 
    */
    /*animation: fadeInTint 0.1s ease-in-out 0.3s forwards;*/
    animation: fadeInTint 0.3s ease-in-out 0.1s forwards;
}

/* 3. Define the Colors using Variables (Instead of setting background-color directly) */

/* 1st Item (Targets 1, 7, 13, etc.) */
.ue-grid .ue-grid-item:nth-child(6n + 1) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-e89db1a);
}

/* 2nd Item (Targets 2, 8, 14, etc.) */
.ue-grid .ue-grid-item:nth-child(6n + 2) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-8790612);
}

/* 3rd Item (Targets 3, 9, 15, etc.) */
.ue-grid .ue-grid-item:nth-child(6n + 3) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-ffcb60c);
}

/* 4th Item (Targets 4, 10, 16, etc.) */
.ue-grid .ue-grid-item:nth-child(6n + 4) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-11f48ed);
}

/* 5th Item (Targets 5, 11, 17, etc.) */
.ue-grid .ue-grid-item:nth-child(6n + 5) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-4502bcd);
}

/* 6th Item (Targets 6, 12, 18, etc.) */
.ue-grid .ue-grid-item:nth-child(6n + 6) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-7a481b9);
}

.banner.colorize-overlay {
    background-color: var(--e-global-color-4502bcd) !important;
}

.banner-page.colorize-overlay {
    --overlay-color: var(--e-global-color-4502bcd) !important;
}

#homepage .banner.colorize-overlay {
    --overlay-color: var(--e-global-color-ffcb60c) !important;
}

/* 1st item (your original color) */
#homepage .ue-grid .ue-grid-item:nth-child(1) .e-loop-item .colorize-overlay {
    --overlay-color: var(--e-global-color-e89db1a);
}

/* 2nd item (example: Blue) */
#homepage .ue-grid .ue-grid-item:nth-child(2) .e-loop-item .colorize-overlay {
    --overlay-color: var(--e-global-color-8790612);
}

/* 3rd item (example: Green) */
#homepage .ue-grid .ue-grid-item:nth-child(3) .e-loop-item .colorize-overlay {
    --overlay-color: var(--e-global-color-4502bcd);
}

/* 4th item (example: Purple) */
#homepage .ue-grid .ue-grid-item:nth-child(4) .e-loop-item .colorize-overlay {
    --overlay-color: var(--e-global-color-11f48ed);
}

/* 1st item (your original color) */
/*
.ue-grid .ue-grid-item:nth-child(1) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-e89db1a);
}
*/

/* 2nd item (example: Blue) */
/*
.ue-grid .ue-grid-item:nth-child(2) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-8790612);
}
*/

/* 3rd item (example: Green) */
/*
.ue-grid .ue-grid-item:nth-child(3) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-ffcb60c);
}
*/

/* 4th item (example: Purple) */
/*
.ue-grid .ue-grid-item:nth-child(4) .e-loop-item .colorize-overlay {
    background-color: var(--e-global-color-11f48ed);
}
*/

.colorize-overlay {
    overflow: hidden;
}


/* social-networks-squre icons */

@media (max-width: 991px) {
    .social-networks-squre li {
        font-size: 17px;
    }
    .social-networks-squre a {
        width: 35px;
        height: 35px;
        padding: 9px 8px;
    }
}

.social-networks { margin: 0px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap; max-width: 30%; }
.social-networks img { width: 100%; }
.social-networks li { padding-left: 10px; width: 50px; }
.social-networks a { color: rgb(255, 255, 255); text-decoration: none; }
.social-networks a:hover, .social-networks a:focus { opacity: 0.8; }
.social-networks-squre { margin: 0px 0px 23px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap; }
.social-networks-squre li { padding: 0px 10px 10px 0px; font-size: 27px; }
.social-networks-squre img { width: 100%; }
.social-networks-squre a { display: block; width: 50px; height: 50px; background: rgb(42, 70, 128); position: relative; color: rgb(255, 255, 255); padding: 12px 11px; }
.social-networks-squre a span[class^="icon-"] { position: absolute; }
.social-networks-squre a:hover, .social-networks-squre a:focus { background: rgb(29, 49, 90); color: rgb(255, 255, 255); text-decoration: none; }
.social-networks-squre .twitter { background: rgb(85, 172, 238); }
.social-networks-squre .twitter:hover, .social-networks-squre .twitter:focus { background: rgb(39, 149, 233); }
.social-networks-squre .instagram { background: rgb(228, 64, 110); }
.social-networks-squre .instagram:hover, .social-networks-squre .instagram:focus { background: rgb(211, 30, 81); }
.social-networks-squre .youtube { background: rgb(205, 32, 31); }
.social-networks-squre .youtube:hover, .social-networks-squre .youtube:focus { background: rgb(161, 25, 24); }
.social-networks-squre .rss { background: rgb(255, 158, 71); }
.social-networks-squre .rss:hover, .social-networks-squre .rss:focus { background: rgb(255, 131, 20); }
.social-networks-rectangle { margin: 0px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap; }
.social-networks-rectangle li { padding: 0px 10px 10px 0px; font-size: 18px; }
.social-networks-rectangle img { width: 100%; }
.social-networks-rectangle a { display: flex; width: 146px; height: 40px; background: rgb(59, 89, 153); position: relative; color: rgb(255, 255, 255); -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; padding-left: 40px; text-decoration: none; }
.social-networks-rectangle a:hover { color: rgb(255, 255, 255); }
.social-networks-rectangle a span { position: absolute; top: 0px; left: 0px; background: rgb(42, 70, 128); height: 40px; width: 40px; bottom: 0px; text-align: center; padding: 11px 9px; }
.social-networks-rectangle a:hover span, .social-networks-rectangle a:focus span { background: rgb(29, 49, 90); }
.social-networks-rectangle .twitter { background: rgb(85, 172, 238); }
.social-networks-rectangle .twitter span { background: rgb(60, 147, 214); }
.social-networks-rectangle .twitter:hover span, .social-networks-rectangle .twitter:focus span { background: rgb(39, 121, 184); }
.social-networks-rectangle .instagram { background: rgb(228, 64, 110); }
.social-networks-rectangle .instagram span { background: rgb(214, 52, 97); }
.social-networks-rectangle .instagram:hover span, .social-networks-rectangle .instagram:focus span { background: rgb(179, 36, 76); }
.social-networks-rectangle .youtube { background: rgb(205, 32, 31); }
.social-networks-rectangle .youtube span { background: rgb(180, 13, 12); }
.social-networks-rectangle .youtube:hover span, .social-networks-rectangle .youtube:focus span { background: rgb(132, 10, 9); }
.social-networks-rectangle .rss { background: rgb(255, 158, 71); }
.social-networks-rectangle .rss span { background: rgb(238, 142, 55); }
.social-networks-rectangle .rss:hover span, .social-networks-rectangle .rss:focus span { background: rgb(223, 116, 19); }
.social-networks-rectangle i { font-size: 14px; text-transform: capitalize; font-style: normal; }


/* 1. The Base Icon State  :is(p, li)  */
:is(p) a[href^="http"]:not([href*="handysektor.de"])::after {
    content: "\2197"; /* North East Arrow */
    /* OR use 274F for a boxed version */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    //width: 12px;
    //height: 12px;
    margin-left: 6px;

    /* 2. The Animation Setup */
    
}

/* 3. The Hover State (Triggers when the link is hovered) */
p a[href^="http"]:not([href*="handysektor.de"]):hover {
    transform: translateY(-1px); /* Moves up by 3 pixels */
}

p a[href^="http"]:not([href*="handysektor.de"]) {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    transform: translateY(0); /* Starting position */
}

.two-column-wordpress-menu {
    ul {
    /* Split into 2 columns */
    columns: 2;
    /* Add gap between columns */
    column-gap: 20px;
    }
    
    /* Prevent items from splitting across columns */
    li {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 10px; /* Space between items */
    }
}

.more-news-link a:after {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #222;
    content: "";
    margin-left: 9px;
}

/* youtube lyte styling */
.pL:hover:after {
    content: 'Klicken, um Video zu aktivieren. A Lädt externe Inhalte von YouTube.';
    white-space: pre-wrap;
    text-align: center;
    /* Absolute positioning to move it freely */
    position: absolute;
    top: 65%;
    left: 50%;
    background-color: rgba(0.5, 0.5, 0.5, 0.75);
    padding: 10px;
    border-radius: 5px;
    
    /* This perfectly centers it based on its own width/height */
    transform: translate(-50%, -50%);
    
    /* Optional Styling */
    color: red;
    font-weight: bold;
    pointer-events: none; /* Ensures clicks pass through the text to the div behind it */
}

@media (hover: none) {
    .pL:after {
        content: 'Klicken, um Video zu aktivieren. A Lädt externe Inhalte von YouTube.';
        white-space: pre-wrap;
        text-align: center;

        /* Absolute positioning to move it freely */
        position: absolute;
        width: 90%;
        top: 75%;
        left: 50%;
        background-color: rgba(0.5, 0.5, 0.5, 0.75);
        padding: 10px;
        border-radius: 5px;
        
        /* This perfectly centers it based on its own width/height */
        transform: translate(-50%, -50%);
        
        /* Optional Styling */
        color: red;
        font-weight: bold;
        pointer-events: none; /* Ensures clicks pass through the text to the div behind it */
    }    
}


figure figcaption, figcaption {
    text-align: right;
    font-style: italic;
    color: #aaa;
    font-family: "Fira Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 0px 10px;
}

/* Loop Grid with pagination */
.elementor-loop-grid-infinite {
    .e-loop-nothing-found-message {
        padding: 0px;
    }
    /* Container styling */
    .elementor-pagination {
        display: flex;
        align-items: center;
        gap: 0; /* Remove gaps to ensure borders touch or align perfectly */
        justify-content: right;
    }
    
    /* Top Pagination (The Clone) */
    .elementor-pagination.is-cloned-top {
        margin-bottom: 15px !important;
        margin-top: 0 !important;
    }

    /* Bottom Pagination (The Original) */
    .elementor-pagination:not(.is-cloned-top) {
        margin-top: 15px !important;
        margin-bottom: 0 !important;
    }
    
    /* Base style for all pagination items */
    .elementor-pagination .page-numbers {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        
        /* Box size */
        min-width: 45px;
        height: 45px;
        
        /* Font and Color */
        color: #f0828a; /* Pink text */
        border: 1px solid #e1e1e1; /* Light grey border */
        background-color: #ffffff;
        
    }
    
    /* Rounding only the outside border of the PREVIOUS arrow (First Child) */
    .elementor-pagination .page-numbers:first-child {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
        margin-left: 0 !important;
    }
    
    /* Rounding only the outside border of the NEXT arrow (Last Child) */
    .elementor-pagination .page-numbers:last-child {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        margin-right: 0!important;
    }
    
    /* Style for the Active/Current page */
    .elementor-pagination .page-numbers.current {
        background-color: #f0828a;
        color: #ffffff; /* White text */
        border-color: #f0828a;
        z-index: 1; /* Ensures the active border sits on top of others */
    }
    
    /* Style for the dots (...) */
    .elementor-pagination .page-numbers.dots {
        border: none;
        background: transparent;
        min-width: 30px;
        color: #999;
    }
    
    /* Hover effect */
    .elementor-pagination a.page-numbers:hover {
        background-color: #fcebed;
    }
    /* Mobile Optimizations (Portrait & Landscape) */
    @media (max-width: 767px) {
        /* Shrink the boxes and font size */
        .elementor-pagination .page-numbers {
            min-width: 35px; /* Reduced from 45px */
            height: 35px;    /* Reduced from 45px */
            font-size: 14px;
        }
    
        /* Shrink the dots even further */
        .elementor-pagination .page-numbers.dots {
            min-width: 20px;
        }
        
       
        /* Target the dots specifically to save space */
        .elementor-pagination .page-numbers.dots {
            min-width: 15px !important; /* Significantly narrower than numbers */
            margin: 0 1px !important;   /* Tighten horizontal spacing */
            font-size: 12px;            /* Slightly smaller font for the dots */
            background: transparent;
            border: none;
            flex-grow: 1;
        }
    
        /* Ensure the pagination container doesn't have extra side padding */
        .elementor-pagination {
            justify-content: space-between;
        }
        
        /* Top Pagination */
        .elementor-pagination.is-cloned-top {
            margin-bottom: 10px !important;
        }

        /* Bottom Pagination */
        .elementor-pagination:not(.is-cloned-top) {
            margin-top: 10px !important;
        }
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Icomoon';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://handysektor.de/wp-content/uploads/2025/11/icomoon-1.woff2') format('woff2');
}
/* End Custom Fonts CSS */