/*
 Theme Name:   Hello TYPORY
 Description:  TYPORY Main Theme
 Author:       MOLOTOW™ Web Development
 Author URI:   https://www.molotow-web.com
 Template:     hello-elementor
 Version:      1.2.140
 Text Domain:  mwd-child
*/

body b,
body strong {
    font-weight: 600;
}

@media only screen and (min-width: 1025px) {
    #mwd-header .mwd-contact {
        border: 1px solid #918470;
    }
    #mwd-header .mwd-contact:hover {
        background-color: #EBE6D8;
    }
}

/* Forms */

.nf-before-form-content {
    display: none;
}
body .nf-form-content  {
    margin-left: -5px;
    margin-right: -5px;
}
body input[type=date],
body input[type=email],
body input[type=number],
body input[type=password],
body input[type=search],
body input[type=tel],
body input[type=text],
body input[type=url],
body select,
body textarea {
    border-radius: 0;
}

/* Elementor-Buttons */
/* Effekt nur innerhalb .bg-ani Wrapper anwenden */
/* Stacking-Setup: Die Fläche wird als Geschwister des <a> eingefügt */
.bg-ani .elementor-button-wrapper {
    position: relative;
    display: inline-block;
}
.bg-ani a.elementor-button {
    position: relative;
    z-index: 1; /* Button liegt über der Fläche */
    transition: none;
}
/* Optional: falls Elementor-Wrapper anders ist, Inhalt bleibt normal */
.bg-ani .elementor-button-content-wrapper {
    position: relative;
}
/* Hintergrund-Span (Geschwister von <a>), wird per JS erzeugt */
.bg-ani .elementor-button-wrapper > .mwd-btn-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--e-global-color-primary);
    border: 1px solid var(--e-global-color-primary);
    /* Border-Radius wird per JS vom Button übernommen; falls nicht, kann man hier einen Fallback setzen */
    transform-origin: left center;
    transform: translate(2px, 2px) scaleX(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 0; /* unter dem Button, aber über dem Wrapper-Hintergrund */
    pointer-events: none;
    opacity: 0;
}
.bg-ani.bg-ani-light .elementor-button-wrapper > .mwd-btn-bg {
    background-color: white;
    border: 1px solid white;
}
/* Hover/Fokus über Adjacent-Sibling-Selector steuern */
.bg-ani .elementor-button-wrapper > a.elementor-button:hover + .mwd-btn-bg,
.bg-ani .elementor-button-wrapper > a.elementor-button:focus + .mwd-btn-bg {
    transform: translate(3px, 3px) scaleX(1);
    opacity: 1;
}
.btn-small .elementor-button-text {
    position: relative;
}
.btn-small .elementor-button-text:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: white;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
    opacity: 0;
}
.btn-small a:hover .elementor-button-text:after {
    transform: scaleX(1);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .bg-ani .elementor-button-wrapper > .mwd-btn-bg { transition: none; }
}

/* Entfernt: Sticky-Header-Kompatibilität mit mmenu (.mm-slideout Transform-Overrides) */

/* Einfacher, sofort aktiver Sticky-Header */
.elementor-location-header,
#mwd-header {
    position: sticky;
    top: 0;
    z-index: 10001;
}

/* Platzhalter direkt NACH dem Header, um Scrollposition bei Kollaps stabil zu halten */
.mwd-header-spacer {
    height: 0; /* wird per JS auf Summe der eingeklappten Bereiche gesetzt */
    transition: height 0.35s ease;
    width: 100%;
    display: block;
}

/* Header-Sektionen: Höhe animieren, damit top/logo/bottom bei Scroll ausblenden */
.elementor-location-header .header-top,
.elementor-location-header .header-logo-wrap,
.elementor-location-header .header-menu-wrap,
.elementor-location-header .header-bottom,
#mwd-header .header-top,
#mwd-header .header-logo-wrap,
#mwd-header .header-menu-wrap,
#mwd-header .header-bottom {
    transition: height 0.35s ease;
}
/* Submenü darf nicht abgeschnitten werden: overflow für header-menu-wrap sichtbar lassen */
.elementor-location-header .header-menu-wrap,
#mwd-header .header-menu-wrap {
    overflow: visible;
}
/* Scroll-Modus: Box-Shadow am Menübereich und Flex-Layout für eingeschobenes Logo */
.elementor-location-header.header-scroll .header-menu-wrap,
#mwd-header.header-scroll .header-menu-wrap {
    /* Box-Shadow laut Anforderung */
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.13);
    transition: box-shadow 0.2s ease;
}
/* Flex-Layout innerhalb des inneren Containers, damit Logo und Menü sauber nebeneinander stehen
   und Positionierungs-Kontext für absolut positionierten Shop-Button bieten */
.elementor-location-header .header-menu-wrap .e-con-inner {
    position: relative;
}
.elementor-location-header.header-scroll .header-menu-wrap .e-con-inner,
#mwd-header.header-scroll .header-menu-wrap .e-con-inner {
    display: flex;
    align-items: center;
    position: relative; /* für .mwd-scroll-shop (absolute) */
}
/* Menü soll den restlichen Platz einnehmen, damit es nach rechts geschoben wird */
.elementor-location-header.header-scroll .header-menu-wrap .e-con-inner .wego-vti-menu,
#mwd-header.header-scroll .header-menu-wrap .e-con-inner .wego-vti-menu {
    flex: 1 1 auto;
}
/* Scroll-Logo: Breite animieren, damit das Menü sanft nach rechts schiebt */
.mwd-scroll-logo {
    display: inline-block;
    flex: 0 0 auto;
    width: 0;               /* Start ohne Breite → kein sofortiger Push */
    margin-right: 0;        /* Margin erst im sichtbaren Zustand */
    opacity: 0;             /* sanft einblenden */
    overflow: hidden;       /* Inhalt während Breiten-Animation clippen */
    transition: width 0.35s ease, margin-right 0.35s ease, opacity 0.35s ease;
    will-change: width, margin-right, opacity;
}
.header-menu-wrap .mwd-scroll-logo img,
.header-menu-wrap .mwd-scroll-logo svg {
    display: block;
    max-height: 100%;
}
.elementor-location-header.header-scroll .mwd-scroll-logo.mwd-in,
#mwd-header.header-scroll .mwd-scroll-logo.mwd-in {
    width: var(--mwd-scroll-logo-w, 0px); /* Zielbreite per JS gemessen */
    margin-right: 16px;                    /* Abstand zum Menü */
    opacity: 1;
}
@media (prefers-reduced-motion: reduce){
    .mwd-scroll-logo { transition: none; }
}
/* Online-Shop Button, der im Scroll-Zustand in die e-con-inner kopiert wird */
.mwd-scroll-shop {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10; /* über regulärem Inhalt des inneren Containers */
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.header-scroll .mwd-scroll-shop.mwd-in {
    opacity: 1;
    transform: translateX(0);
}
@media (prefers-reduced-motion: reduce){
    .mwd-scroll-shop { transition: none; transform: none; }
}
/* Die übrigen Sektionen dürfen ihre Inhalte beim Ein-/Ausklappen abschneiden */
.elementor-location-header .header-top,
.elementor-location-header .header-logo-wrap,
.elementor-location-header .header-bottom,
#mwd-header .header-top,
#mwd-header .header-logo-wrap,
#mwd-header .header-bottom {
    overflow: hidden;
}
/* Falls einzelne Sektionen über CSS ein min-height besitzen, im kollabierten Zustand neutralisieren */
.elementor-location-header.header-scroll .header-top,
.elementor-location-header.header-scroll .header-logo-wrap,
.elementor-location-header.header-scroll .header-bottom,
#mwd-header.header-scroll .header-top,
#mwd-header.header-scroll .header-logo-wrap,
#mwd-header.header-scroll .header-bottom {
    min-height: 0 !important;
}
@media (prefers-reduced-motion: reduce){
    .elementor-location-header .header-top,
    .elementor-location-header .header-logo-wrap,
    .elementor-location-header .header-menu-wrap,
    .elementor-location-header .header-bottom,
    #mwd-header .header-top,
    #mwd-header .header-logo-wrap,
    #mwd-header .header-menu-wrap,
    #mwd-header .header-bottom {
        transition: none;
    }
}

/* Testimonial Widget */
.mwd-testimonial { display: flex; align-items: flex-start; gap: 1rem; --mwd-dir: row; flex-direction: var(--mwd-dir, row); --mwd-align: flex-start; --mwd-img-sx: 0px; --mwd-img-sy: 0px; --mwd-img-blur: 0px; --mwd-img-spread: 0px; --mwd-img-color: transparent; }
.mwd-testimonial .mwd-t-media { flex: 0 0 auto; }
.mwd-testimonial .mwd-t-img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; aspect-ratio: 1 / 1; box-shadow: var(--mwd-img-sx) var(--mwd-img-sy) var(--mwd-img-blur) var(--mwd-img-spread) var(--mwd-img-color); }
.mwd-testimonial .mwd-testimonial-texts { flex: 1 1 auto; }
.mwd-testimonial .mwd-t-head { font-weight: 600; margin-bottom: .25rem; }
.mwd-testimonial .mwd-t-text { margin-bottom: .5rem; }
.mwd-testimonial .mwd-t-meta { opacity: .85; }
@media (max-width: 767px) {
  .mwd-testimonial { flex-direction: column; align-items: var(--mwd-align, flex-start); }
}

/* Ninja Forms */
/* Pflichtfeld-Stern am umschließenden Feld-Wrapper ausgeben (nur input/textarea) */
.nf-field-element:has(> :is(input[required], textarea[required], input[aria-required="true"], textarea[aria-required="true"])) {
  position: relative; /* für das ::after absolut positioniert */
}
.nf-field-element:has(> :is(input[required], textarea[required], input[aria-required="true"], textarea[aria-required="true"]))::after {
  content: "*";
  position: absolute;
  top: 0;
  right: 0;
  color: #fff; /* laut Anforderung weiß */
  pointer-events: none;
  line-height: 1;
}
.checkbox-wrap .nf-field-element:after {
    display: none;
}
.nf-form-cont .field-wrap>div input,
.nf-form-cont .field-wrap textarea,
.nf-form-cont .field-wrap select {
    width: calc(100% - 16px);
}
#nf-form-2-cont {
    color: white;
}
#nf-form-2-cont .checkbox-wrap .nf-field-label label {
    color: white;
    font-weight: normal;
}
#nf-form-2-cont .checkbox-wrap .nf-field-label label .ninja-forms-req-symbol {
    color: white;
}
#nf-form-2-cont .checkbox-wrap .nf-field-label label a {
    color: white;
    text-decoration: underline;
}
#nf-form-2-cont .submit-wrap input[type=submit] {
    background-color: #CAD9E0;
    border-color: #CAD9E0;
    color: #003B5B;
    width: auto;
}
#nf-form-2-cont .submit-wrap input[type=submit]:hover {
    background-color: white;
    border-color: white;
}
#nf-form-2-cont #nf-field-14-wrap .nf-field-element {
    text-align: right;
    padding-right: 16px;
}


@media (min-width: 1024px) {
    #nf-form-2-cont .nf-form-content .nf-row:nth-of-type(1) .nf-cell:nth-of-type(1) {
        width: 16% !important;
    }
    #nf-form-2-cont .nf-form-content .nf-row:nth-of-type(1) .nf-cell:nth-of-type(2),
    #nf-form-2-cont .nf-form-content .nf-row:nth-of-type(1) .nf-cell:nth-of-type(3) {
        width: 42% !important;
    }
    #nf-form-2-cont .nf-form-content .nf-row:nth-of-type(2) .nf-cell:nth-of-type(1) {
        width: 45% !important;
    }
    #nf-form-2-cont .nf-form-content .nf-row:nth-of-type(2) .nf-cell:nth-of-type(2) {
        width: 30% !important;
    }
    #nf-form-2-cont .nf-form-content .nf-row:nth-of-type(2) .nf-cell:nth-of-type(3) {
        width: 25% !important;
    }
    #nf-form-2-cont .nf-form-content .nf-row:nth-of-type(3) {
        margin-top: 40px;
    }
}