.elementor-103 .elementor-element.elementor-element-3621a39{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 10px;--row-gap:0px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-103 .elementor-element.elementor-element-c37de71{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-widget-theme-site-logo .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-103 .elementor-element.elementor-element-458a80d{width:var( --container-widget-width, 14.745% );max-width:14.745%;--container-widget-width:14.745%;--container-widget-flex-grow:0;text-align:center;}.elementor-103 .elementor-element.elementor-element-458a80d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-103 .elementor-element.elementor-element-458a80d img{width:61%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-103 .elementor-element.elementor-element-f4ee718 .elementor-menu-toggle{margin:0 auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for container, class: .elementor-element-3621a39 *//* ==========================================================
   FIXED TOOLTIP
   ========================================================== */

/* Make absolutely sure Elementor doesn't crop it */
header,
header > *,
header .e-con,
header .e-con-inner,
header .elementor,
header .elementor-element,
header .elementor-widget,
header .elementor-widget-container,
.media-tools-nav,
.media-tools-nav nav,
.media-tools-nav .elementor-nav-menu--main,
.media-tools-nav .elementor-nav-menu {
    overflow: visible !important;
}


/* Each menu item anchors its tooltip */
.media-tools-nav .menu-item {
    position: relative !important;
    overflow: visible !important;
}


/* TOOLTIP */
.media-tools-nav .menu-item::after {
    position: absolute !important;

    /* Put it clearly BELOW the navigation */
    top: calc(100% + 20px) !important;
    bottom: auto !important;

    left: 50% !important;

    transform:
        translateX(-50%)
        translateY(5px);

    /* IMPORTANT */
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;

    height: auto !important;
    min-height: unset !important;

    box-sizing: border-box !important;

    padding: 14px 17px !important;

    background:
        var(--header-text, #161616) !important;

    color:
        var(--header-bg, #ffffff) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--tool-color) 55%,
            transparent
        );

    border-top:
        4px solid
        var(--tool-color) !important;

    border-radius: 12px !important;

    /* TEXT FIX */
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;

    text-align: left !important;

    white-space: normal !important;

    overflow: visible !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;

    text-overflow: unset !important;

    /* Tooltip state */
    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 999999 !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.16);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}


/* ARROW */
.media-tools-nav .menu-item::before {
    content: "";

    position: absolute !important;

    top: calc(100% + 13px) !important;
    left: 50% !important;

    width: 14px !important;
    height: 14px !important;

    background:
        var(--tool-color) !important;

    transform:
        translateX(-50%)
        rotate(45deg);

    border-radius: 2px;

    opacity: 0;
    visibility: hidden;

    z-index: 999998 !important;

    pointer-events: none;
}


/* SHOW */

.media-tools-nav .menu-item:hover::after,
.media-tools-nav .menu-item:hover::before,
.media-tools-nav .menu-item:focus-within::after,
.media-tools-nav .menu-item:focus-within::before {
    opacity: 1;
    visibility: visible;
}


.media-tools-nav .menu-item:hover::after,
.media-tools-nav .menu-item:focus-within::after {
    transform:
        translateX(-50%)
        translateY(0);
}


/* ==========================================================
   TOOL DESCRIPTIONS
   ========================================================== */

.media-tools-nav
.menu-item:has(a[href*="contrast-checker"])::after {
    content:
        "Prüfe, ob deine Farben gut lesbar und barrierearm sind.";
}


.media-tools-nav
.menu-item:has(a[href*="image-compressor"])::after {
    content:
        "Verkleinere Bilddateien für Website, E-Mail und Social Media.";
}


.media-tools-nav
.menu-item:has(a[href*="image-resizer"])::after {
    content:
        "Passe Bilder an die richtige Größe für Website und Social Media an.";
}


.media-tools-nav
.menu-item:has(a[href*="media-tools"])::after {
    content:
        "Entdecke alle kostenlosen In-Haus Media Tools.";
}


.media-tools-nav
.menu-item:has(a[href*="qr-generator"])::after {
    content:
        "Erstelle QR-Codes für Links, WLAN, Kontaktdaten und mehr.";
}


.media-tools-nav
.menu-item:has(a[href*="subtitle-converter"])::after {
    content:
        "Konvertiere Untertitel einfach zwischen SRT und WebVTT.";
}


.media-tools-nav
.menu-item:has(a[href*="utm-builder"])::after {
    content:
        "Erstelle Tracking-Links für Social Media, Newsletter und Kampagnen.";
}


/* ==========================================================
   EDGE FIX
   First/last items don't escape the screen
   ========================================================== */

.media-tools-nav
.menu-item:first-child::after {
    left: 0 !important;
    transform: translateY(5px);
}

.media-tools-nav
.menu-item:first-child:hover::after {
    transform: translateY(0);
}


.media-tools-nav
.menu-item:last-child::after {
    left: auto !important;
    right: 0 !important;

    transform: translateY(5px);
}

.media-tools-nav
.menu-item:last-child:hover::after {
    transform: translateY(0);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .media-tools-nav .menu-item::before,
    .media-tools-nav .menu-item::after {
        display: none !important;
    }

}/* End custom CSS */