.elementor-kit-7{--e-global-color-primary:#193F70;--e-global-color-secondary:#35BBBC;--e-global-color-text:#2F3646;--e-global-color-accent:#EE6658;--e-global-color-dca4e6a:#EC5746;--e-global-color-272c5a4:#FFFFFF;--e-global-color-7de7597:#F4F5F7;--e-global-color-17d649d:#34BABB33;--e-global-color-7eea9b0:#2F3646;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-1e3f4d7-font-family:"Roboto";--e-global-typography-1e3f4d7-font-size:1rem;--e-global-typography-1e3f4d7-font-weight:400;color:#000000;font-family:"Roboto", "Helvetica Neue", Arial, sans-serif;font-size:1.125rem;font-weight:300;line-height:28px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:transparent;font-weight:500;color:#FFFFFF;background-image:linear-gradient(180deg, var( --e-global-color-accent ) 0%, var( --e-global-color-dca4e6a ) 100%);box-shadow:2px 2px 22px 0px rgba(74, 86.00000000000001, 110, 0.23);}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:transparent;color:#FFFFFF;background-image:linear-gradient(180deg, var( --e-global-color-dca4e6a ) 0%, var( --e-global-color-accent ) 100%);box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-accent );}.elementor-kit-7 a:hover{color:var( --e-global-color-dca4e6a );}.elementor-kit-7 h1{color:var( --e-global-color-7eea9b0 );font-size:2.5rem;font-weight:700;line-height:48px;}.elementor-kit-7 h2{color:var( --e-global-color-7eea9b0 );font-size:1.875rem;font-weight:700;}.elementor-kit-7 h3{color:#2F3646;font-size:1.375rem;font-weight:500;}.elementor-kit-7 h4{color:var( --e-global-color-7eea9b0 );}.elementor-kit-7 h5{color:var( --e-global-color-7eea9b0 );}.elementor-kit-7 h6{color:var( --e-global-color-7eea9b0 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:960px;}.e-con{--container-max-width:960px;}{}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:991px){.elementor-kit-7 h1{font-size:1.875rem;}.elementor-kit-7 h2{font-size:1.375rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:720px;}.e-con{--container-max-width:720px;}}@media(max-width:767px){.elementor-kit-7 h1{font-size:1.875rem;}.elementor-kit-7 h2{font-size:1.5rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:98%;}.e-con{--container-max-width:98%;}}
/* Start custom CSS */.elementor-widget-accordion,
.elementor-widget-n-accordion {
    --n-accordion-title-normal-color: var(--e-global-color-dca4e6a) !important;
    --n-accordion-title-hover-color: var(--e-global-color-dca4e6a) !important;
    --n-accordion-title-active-color: var(--e-global-color-dca4e6a) !important;
    --n-accordion-item-title-space-between: 1rem !important;

    .e-n-accordion-item {
        box-shadow: 1px 1px 8px rgba(66, 121, 121, 0.2);
        --n-accordion-border-radius: 5px 5px 5px 5px;
    }

    details[open].e-n-accordion-item {
        --n-accordion-border-radius: 5px 5px 0px 0px;
    }

    .e-n-accordion-item-title {
        background-color: rgba(0, 0, 0, 0.03) !important;
        --n-accordion-padding: 25px;
        --n-accordion-border-radius: 5px 5px 5px 5px;
    }

    .e-n-accordion-item-title + div {
        padding: 25px;
    }
}



.kapitel-container.e-con-inner {
    gap: 0px !important;
}

h1,h2,h3,h4,h5,h6 {
    hyphens: auto;
    word-break: break-word;
}

.nav-opener {
    svg {
        padding-top: 5px;
    }
}

ul {
    margin-bottom: .9rem;
}

/** Footer */
/* 1. The Container (.logo) */
.logo {
    position: relative; /* Creates a context for the overlay */
    overflow: hidden;   /* Keeps the gradient inside the rounded corners */

    /* Structural & Shape styles stay here */
    border-radius: 1.75rem;
    padding: 0.625rem 1.75rem;
    height: 6.125rem;
    outline: none;

    /* Box Shadow stays on the parent */
    box-shadow: 2px 2px 16px rgba(74, 86, 110, 0.17);
    transition: box-shadow 0.15s linear;
}

/* 2. The Overlay (The Gradient) */
.logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Move the gradient logic here so it sits ON TOP of the image */
    background-image: linear-gradient(to right, #e6e8ec 0%, #f4f6f9 51%, white 61%);
    background-size: 100% 100%;
    transition: background-size 0.15s linear;

    /* Places this layer above the image */
    z-index: 1;

    /* IMPORTANT: Allows clicks to pass through to the link/image underneath */
    pointer-events: none;

    /* OPTIONAL: Since your gradient uses solid colors, it will hide the image completely.
       You likely need a blend mode or opacity to see the logo underneath.
       Uncomment one of these lines to fix visibility: */
    mix-blend-mode: multiply;
}

/* 3. Hover Effects */
.logo:hover {
    /* Shadow effect on parent */
    box-shadow: 0 0 8px rgba(74, 86, 110, 0.17);
}

.logo:hover::after {
    /* Gradient movement on overlay */
    background-size: 150% 100%;
}

.logo:focus {
    border: 2px solid #ee6658;
}

/** Global Style **/
.lg-shadow {
    box-shadow: 2px 2px 22px rgba(74, 86, 110, 0.23)
}

.md-shadow {
    box-shadow: 2px 2px 16px rgba(74, 86, 110, 0.17)
}

.sm-shadow {
    box-shadow: 1px 1px 6px rgba(74, 86, 110, 0.17)
}


/** global stuff**/
/* 1. Force the body to be a flex container that spans the full viewport height */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 2. Tell the footer to automatically push itself to the bottom */
/* Note: '.elementor-location-footer' targets Elementor Pro footers.
   If you use a different theme footer, you might need to use the 'footer' tag .elementor-kit-7 instead. */
footer, .elementor-location-footer {
    margin-top: auto;
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 1. The Container (Target the <ol> INSIDE the widget) */
ol {
    counter-reset: my-counter;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

/* 2. The List Item */
ol li {
    position: relative;
    counter-increment: my-counter;
    padding-left: 3rem;
    margin-bottom: 1.5rem;
}

/* 3. The Circle */
ol li::before {
    content: counter(my-counter);

    /* Position */
    position: absolute;
    left: 0;
    top: 2px;

    /* Styling */
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 2px solid #2e3546;
    color: #2e3546;
    font-weight: 700;
    line-height: 1.54;
    font-size: 0.875rem;

    /* Centering */
    display: flex;
    justify-content: center;
    align-items: center;
}

.no-select {
  /* Standard syntax */
  user-select: none;

  /* Safari */
  -webkit-user-select: none;

  /* Firefox (older versions) */
  -moz-user-select: none;

  /* Internet Explorer/Edge (older versions) */
  -ms-user-select: none;
}

/* HEADER END */

/* TJMS ELEMENT STYLING */
/* tjms_youtube */
.tjms_youtube {
    border: 10px solid white;
    box-shadow: 1px 1px 6px black;
    border-radius: 15px;
}


/* image */
.border-image {
    box-shadow: 1px 1px 6px;
    border-radius: 10px;
    border: 4px solid white;

    img {
        border-radius: 10px;
    }
}

.sm-shadow {
    box-shadow: 1px 1px 6px rgba(74, 86, 110, 0.17) !important;
}

.type-page a[target="_blank"]:not(.elementor-button-link):after, .type-instruction a[target="_blank"]:not(.elementor-button-link):after {
    content: " \2197";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.step-container, .elementor-widget-ucaddon_assistant_kapitel {
    padding: 0px;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important
}

.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important
}

.shadow-none {
    box-shadow: none !important
}


/* youtube lyte styling */
.pL:hover:after {
    content: 'Klicken, um Video zu aktivieren. 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. 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 */
    }
}


strong {
    font-weight: 600;
    color: rgb(46, 53, 70);
}

a strong {
    color: var(--e-global-color-dca4e6a);
}


/* --- Elementor All-in-One Print Styles --- */
@media print {
    /* 1. HIDE NON-ESSENTIAL ELEMENTS */
    header,
    footer,
    .elementor-location-header,
    .elementor-location-footer,
    .elementor-widget-button,
    .elementor-widget-share-buttons,
    .no-print {
        display: none !important;
    }

    /* 2. RESET PAGE DIMENSIONS & MARGINS */
    @page {
        margin: 1cm;
    }

    body {
        background-color: white !important;
        color: black !important;
        font-size: 12pt;
    }

    /* 3. FIX COLUMN SQUASHING */
    /* Forces columns to take up full width instead of horizontal side-by-side */
    .elementor-section,
    .elementor-container,
    .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        position: relative !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. HANDLE IMAGES & WIDGETS */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }

    .elementor-widget {
        margin-bottom: 20px !important;
        page-break-inside: avoid; /* Prevents widgets from splitting across pages */
    }

    /* 5. FORCE VISIBLE LINKS (Optional) */
    /* Appends the URL in brackets next to the link text */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
    }

    /* 6. REMOVE SHADOWS & BOX EFFECTS */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

:is(p,li) a[href^="http"]:not([href*="www.medien-kindersicher.de"]):not([href*="www.medien-kindersicher.de"])::after {
    content: "\2197";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-left: 6px;
}


.excerpt_part {
    color: black !important;
}

.excerpt_part a strong {
    color: black !important;
}

.elementor-widget-theme-post-excerpt {
    color: black !important;
}/* End custom CSS */