/*
Theme Name: Di-Basis Child
Description: Ein schoenes Childtheme
Author: Designers Inn
Template: Divi
Version: 1.0
Tags:
#E75151
#a5d4aa
#f5f4f1
*/


/* =========================================================
   UEBERSCHRIFTEN
   ========================================================= */

/* H1/H2-Hierarchie */
body #page-container h2.di-h1-look {
    font-size: 40px !important;
    line-height: 52px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
}

@media (max-width: 980px) {
    body #page-container h2.di-h1-look {
        font-size: 36px !important;
        line-height: 46.8px !important;
    }
}

@media (max-width: 767px) {
    body #page-container h2.di-h1-look {
        font-size: 32px !important;
        line-height: 41.6px !important;
    }
}

body #page-container h2.di-h1-look-fix {
    font-size: 40px !important;
    line-height: 52px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
}

body #page-container h2.di-h1-look-chat {
    font-size: 50px !important;
    line-height: 75px !important;
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
}

@media (max-width: 980px) {
    body #page-container h2.di-h1-look-chat {
        font-size: 40px !important;
        line-height: 60px !important;
    }
}

@media (max-width: 767px) {
    body #page-container h2.di-h1-look-chat {
        font-size: 32px !important;
        line-height: 48px !important;
    }
}

body #page-container h1.di-h2-look {
    font-size: 34px !important;
    line-height: 44.2px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0 !important;
    padding-top: 34px !important;
    padding-bottom: 17px !important;
}

body #page-container h2.di-h1-look-fix.di-h1-pb30 {
    padding-bottom: 30px !important;
}

h2 {
    padding: 1em 0 0.5em 0 !important;
}


/* =========================================================
   ALLGEMEINE LAYOUT-EINSTELLUNGEN
   ========================================================= */

#page-container {
    padding-top: 94px !important;
}

.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container {
    padding-top: 111px !important;
}

#et-top-navigation {
    padding-left: 194px !important;
}

#et-main-area {
    margin-top: -17px !important;
}


/* =========================================================
   MENUE
   ========================================================= */

.et-menu li li a {
    padding: 6px 20px;
    width: 290px;
}

#top-menu li {
    padding-right: 20px !important;
}

/* Mobiler Breakpoint */
@media only screen and (max-width: 1150px) {
    #top-menu-nav,
    #top-menu {
        display: none;
    }

    #et_top_search {
        display: none;
    }

    #et_mobile_nav_menu {
        display: block;
    }
}

/* Menue-Link als Button */
.menulink a {
    border-radius: 50px;
    background: #E75151 !important;
    color: #ffffff !important;
    padding: 7px 20px !important;
    display: inline-block;
}

li.current-menu-item > a .menulink {
    color: #ffffff !important;
}

.et-fixed-header .menulink a {
    color: #ffffff !important;
}

/* Submenue vergroessert */
#top-menu li li a {
    min-width: 300px;
    padding: 0 10px 20px 0;
    line-height: 1.5em;
}

.et_mobile_menu li ul {
    display: none !important;
}

.nav li ul {
    width: 330px;
}

.nav li.et-reverse-direction-nav li ul {
    right: 330px;
}


/* =========================================================
   MEGA-MENUE: GRUNDSTIL
   ========================================================= */

#top-menu li.mega-menu>ul>li>a:first-child {
    border-bottom: 0px solid rgba(0, 0, 0, 0.03);
}

/* Erste Spalte: flache Menuepunkte */
#top-menu li.mega-menu > ul > li.di-mega-flat > a:first-child {
    font-weight: 400 !important;
    border-bottom: none !important;
    padding-top: 0 !important;
}

#top-menu li.mega-menu li.di-mega-flat > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 20px 0 26px !important;
}

/* Abstand vor dem Untermenue */
#top-menu li.mega-menu li.di-mega-flat > ul.sub-menu {
    margin-top: 20px !important;
}

/* Abstand zwischen den flachen Menuepunkten */
#top-menu li.mega-menu li.di-mega-flat + li.di-mega-flat {
    margin-top: 20px !important;
}

/* Font-Awesome-Icon aus dem Navigationslabel */
#top-menu .di-menu-icon {
    display: inline-block;
    flex: 0 0 20px;
    width: 20px;
    margin: 0;
    color: #E75151;
    font-family: "Font Awesome 6 Free",
                 "Font Awesome 5 Free",
                 FontAwesome,
                 sans-serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

/* Falls Divi-Eicons verwendet werden */
#top-menu .di-menu-icon.di-eicon {
    font-family: "ETmodules" !important;
    font-size: 20px;
    font-weight: normal;
}

/* Untermenuepunkte erhalten kein Icon */
#top-menu li.mega-menu li li > a .di-menu-icon {
    display: none;
}

/* Ausnahme: flache Kategorie-Punkte (di-mega-flat) behalten ihr Icon, auch wenn sie unter einem Spalten-Wrapper verschachtelt sind (30.09.2026, Marco + Claude) */
#top-menu li.mega-menu li.di-mega-flat > a .di-menu-icon {
    display: inline-block;
}

/* Ressourcen-Spalte: Unterpunkte linksbuendig + normale Schrift statt Versalien (Ebene 1 = Spaltenueberschrift bleibt fett/Versalien, 30.09.2026, Marco + Claude) */
#top-menu li.mega-menu li li > a {
    padding-left: 20px !important;
    text-transform: none;
    font-size: 15px;
    letter-spacing: 0px;
}

/* Font-Awesome-Icons fuer Mega-Menue-Kategorien ohne eigenes Icon-Markup im Label (30.09.2026, Marco + Claude) */
@media only screen and (min-width: 1151px) {

    #top-menu li.mega-menu li.di-mega-icon-gallery > a::before,
    #top-menu li.mega-menu li.di-mega-icon-tag > a::before,
    #top-menu li.mega-menu li.di-mega-icon-users > a::before,
    #top-menu li.mega-menu li.di-mega-icon-app > a::before,
    #top-menu li.mega-menu li.di-mega-icon-robot > a::before,
    #top-menu li.mega-menu li.di-mega-icon-book > a::before {
        display: inline-block;
        flex: 0 0 20px;
        width: 20px;
        color: #E75151;
        font-family: "Font Awesome 6 Free",
                     "Font Awesome 5 Free",
                     FontAwesome,
                     sans-serif;
        font-size: 17px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
    }

    /* Galerie: fa-images */
    #top-menu li.mega-menu li.di-mega-icon-gallery > a::before { content: "\f302"; }
    /* Preise: fa-tag */
    #top-menu li.mega-menu li.di-mega-icon-tag > a::before     { content: "\f02b"; }
    /* Club/Community: fa-users */
    #top-menu li.mega-menu li.di-mega-icon-users > a::before   { content: "\f0c0"; }
    /* App: fa-th-large */
    #top-menu li.mega-menu li.di-mega-icon-app > a::before     { content: "\f009"; }
    /* KI Mitarbeiter: fa-robot */
    #top-menu li.mega-menu li.di-mega-icon-robot > a::before   { content: "\f544"; }
    /* Alle Beitraege / Archiv: fa-book-open */
    #top-menu li.mega-menu li.di-mega-icon-book > a::before    { content: "\f518"; }

    /* "Alle Beitraege" ist kein di-mega-flat-Punkt, sondern ein normaler Ressourcen-Link -- braucht daher
       seine eigene Flex-Ausrichtung fuer das Icon (30.09.2026, Marco + Claude) */
    #top-menu li.mega-menu li.di-mega-icon-book > a {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
}

/* =========================================================
   MEGA-MENUE: SCHMALES DROPDOWN
   ========================================================= */

@media only screen and (min-width: 1151px) {

    /* Dropdown wird standardmaessig unter dem Trigger zentriert (left:50% + negativer margin-left).
       js/mega-menu-position.js berechnet bei Bedarf eine minimale Korrektur nach links (per inline
       "left"-Wert in px, ersetzt die 50%-Zentrierung), falls das Dropdown sonst rechts ueber den
       Bildschirmrand ragen wuerde. Dadurch bleibt die Position immer so zentriert wie moeglich, ohne
       je abrupt von links nach rechts zu springen, und haengt dabei stets ueberlappend am Trigger,
       damit keine Maus-Luecke entsteht (30.09.2026, Marco + Claude) */
    #top-menu li.mega-menu.mega-menu-narrow {
        position: relative !important;
    }

    #top-menu li.mega-menu.mega-menu-narrow > ul {
        width: 600px !important;
        max-width: calc(100vw - 40px) !important;
        left: 50% !important;
        margin-left: -300px !important;
        transition: opacity 0.25s ease !important;
    }

    /* Erste Spalte: 40 Prozent */
    #top-menu li.mega-menu.mega-menu-narrow > ul > li:nth-child(1) {
        width: 40% !important;
    }

    /* Zweite Spalte: 60 Prozent */
    #top-menu li.mega-menu.mega-menu-narrow > ul > li:nth-child(2) {
        width: 60% !important;
    }

    #top-menu li.mega-menu.mega-menu-narrow li li a {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-right: 16px !important;
    }
}


/* =========================================================
   BLOG-MEGA-MENUE: DREI SPALTEN
   ========================================================= */

@media only screen and (min-width: 1151px) {

    /* Positionierung wie beim schmalen Dropdown: zentriert mit dynamischer Linkskorrektur bei Platzmangel (30.09.2026, Marco + Claude) */
    #top-menu li.mega-menu.mega-menu-3col {
        position: relative !important;
    }

    #top-menu li.mega-menu.mega-menu-3col > ul {
        width: 850px !important;
        max-width: calc(100vw - 40px) !important;
        left: 50% !important;
        margin-left: -425px !important;
        transition: opacity 0.25s ease !important;
    }

    #top-menu li.mega-menu.mega-menu-3col > ul > li {
        width: 33.333% !important;
    }

    #top-menu li.mega-menu.mega-menu-3col li li a {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-right: 16px !important;
    }
}


/* =========================================================
   MENUEPUNKT-BESCHREIBUNG
   ========================================================= */

.menu-item-description {
    display: block;
    padding-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    font-weight: normal;
    text-transform: none;
    opacity: 0.8;
}


/* =========================================================
   BLOG-INFOBOX
   ========================================================= */

.infobox {
    background-color: #f5f4f1;
    padding: 50px;
    margin: 30px 0;
}

.wp-caption {
    max-width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    padding-top: 5px !important;
    border: 1px solid #f4f4f4 !important;
    background-color: #f4f4f4 !important;
}


/* =========================================================
   STORYCHIEF EMBED CONTAINER
   ========================================================= */

article.post .embed-container > div {
    position: initial !important;
    padding: 10px 10px 30px 10px !important;
}

figure .embed-container > div {
    padding-top: 0 !important;
}


/* =========================================================
   KOMMENTARE
   ========================================================= */

.nodate .comment_date {
    display: none;
}


/* =========================================================
   DIVI-MODULE
   ========================================================= */

.et_pb_team_member_description {
    display: block;
    text-align: center;
}

.et_pb_social_media_follow li {
    display: inline-block !important;
    float: none !important;
}

ul.et_pb_social_media_follow {
    text-align: center !important;
}

ul.et_pb_tabs_controls:after {
    border-top: 0 solid #d9d9d9 !important;
}


/* =========================================================
   PRE- UND CODE-BEREICHE
   ========================================================= */

pre {
    display: block !important;
    overflow: auto;
    margin: 30px 0;
    padding: 20px;
    border-left: solid #E75151;
    background-color: #f9f9f9;
    color: #000;
    font-family: "Courier New", monospace;
    font-size: 15px;
    line-height: 1.3em;
}

.EnlighterJSRAW {
    display: block !important;
    overflow: auto;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.buttonlink,
.buttonlinkweiss,
.button_grey {
    display: inline-block;
    min-width: 150px;
    margin: 10px 10px 10px 0;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 16px;
    text-align: center;
    text-shadow: none;
    transition: all 0.2s ease 0s;
}

.buttonlink {
    border: 1px solid #ffffff;
    background-color: #e75151;
    color: #ffffff !important;
}

.buttonlink:hover {
    border: 1px solid #e75151;
    background-color: #ffffff;
    color: #e75151 !important;
}

.buttonlinkweiss {
    border: 1px solid #e75151 !important;
    background-color: #ffffff;
    color: #e75151 !important;
}

.buttonlinkweiss:hover {
    border: 1px solid #ffffff !important;
    background-color: #e75151;
    color: #ffffff !important;
}

.buttonlinkfull {
    display: block;
    width: 100%;
    margin: 10px 10px 10px 0;
    padding: 10px 20px;
    border: 1px solid #ffffff;
    border-radius: 50px;
    background-color: #e75151;
    color: #ffffff !important;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none;
    transition: all 0.2s ease 0s;
}

.buttonlinkfull:hover {
    border: 1px solid #e75151;
    background-color: #ffffff;
    color: #e75151;
}

.buttontrans {
    display: inline-block;
    min-width: 150px;
    margin: 10px 10px 10px 0;
    padding: 10px 20px;
    border: 1px solid #ffffff;
    border-radius: 50px;
    background-color: transparent;
    color: #ffffff !important;
    font-size: 16px;
    text-align: center;
    text-shadow: none;
    transition: all 0.2s ease 0s;
}

.buttontrans:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.button_grey {
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    color: #000000 !important;
}

.button_grey:hover {
    border: 1px solid #ffffff;
    background-color: #e75151;
    color: #ffffff !important;
}


/* =========================================================
   ALTE ICON-BUTTONS
   ========================================================= */

a#demo {
    display: block;
    width: 100px;
    height: 100px;
    float: left;
    margin-left: -7px;
    background: transparent url("https://designersinnde718cf.zapwp.com/wp-content/uploads/IconDemo.webp") 0 0 no-repeat;
    text-indent: -9000%;
    transition: all 0.3s ease 0s;
}

a:hover#demo {
    background: transparent url("https://designersinnde718cf.zapwp.com/wp-content/uploads/IconDemo.webp") 0 -100px no-repeat;
}

a#kaufen {
    display: block;
    width: 100px;
    height: 100px;
    float: left;
    margin-left: -7px;
    background: transparent url("https://designersinnde718cf.zapwp.com/wp-content/uploads/IconKaufen.webp") 0 0 no-repeat;
    text-indent: -9000%;
    transition: all 0.3s ease 0s;
}

a:hover#kaufen {
    background: transparent url("https://designersinnde718cf.zapwp.com/wp-content/uploads/IconKaufen.webp") 0 -100px no-repeat;
}


/* =========================================================
   SWARMIFY
   ========================================================= */

.vjs-swarmify-play-button .swarmify-play-button #hex {
    fill: #ffffff !important;
    stroke: #E75151 !important;
}

.vjs-swarmify-play-button .swarmify-play-button #tri {
    fill: #E75151 !important;
    stroke: #E75151 !important;
}

.vjs-menu-content {
    display: none !important;
}


/* =========================================================
   YOUTUBE
   ========================================================= */

.g-ytsubscribe {
    margin: 0 auto;
    padding: 0;
}

._brlbs-fluid-width-video-wrapper {
    margin: 10px 0 30px 0;
}


/* =========================================================
   BEITRAGSINHALT
   ========================================================= */

.et_pb_post_content_0_tb_body ol li {
    padding-bottom: 0.8em;
}

.et_pb_post_content_0_tb_body ul li {
    padding-bottom: 0.8em;
}

.strchf-type-image {
    padding: 20px 0;
}


/* =========================================================
   TOP-HEADER
   ========================================================= */

#top-header a {
    color: #5f5f5f;
}


/* =========================================================
   PRODUCTSTASH
   ========================================================= */

#productstash .public-subscribe {
    width: fit-content !important;
}


/* =========================================================
   TOOLTIP
   ========================================================= */

.et-tooltip {
    cursor: help;
}

.et-tooltip:after {
    padding-left: 5px;
    color: #ffffff;
    content: "?";
    font-family: "Open Sans","Open Sans Fallback";
    font-size: 80%;
}

.et-tooltip-box {
    left: 0;
    bottom: calc(100% + 25px);
    padding: 15px;
    border: #ffffff solid 1px;
    border-radius: 5px;
    background: #ffffff !important;
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    line-height: 1.8;
}

.et-tooltip-arrow {
    display: block;
    bottom: -12px;
    left: 25px;
    width: 20px;
    height: 13px;
    border-top: 13px solid #ffffff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    background: none;
}