/*
 Theme Name:   NOMEDIA Theme
 Template:     yootheme
 Author:       Narongrit Sembritzki
 Description:  Nomedia Yootheme Child
 Version:      1.0.0
 Text Domain:  yootheme-mytheme
*/

body {
    background: #fdfdfd;
}

:root {

    /* ── Colors ───────────────────────────────────────────────────────────── */
    --juju-dark: #15150d;
    --juju-white: #FDFDFD;
    --juju-pure-white: #ffffff;
    --juju-color: #F3F7F3;
    --juju-emphasis-color: #F3F7F3;
    --juju-inverse-color: #15150D;
    --juju-link-color: #F3F7F3;
    --juju-link-hover-color: #D0D0D0;
    --juju-muted-color: #15150D;
    --juju-background: #15150D;
    --juju-danger-background: #D41717;
    --juju-muted-background: #F3F7F3;
    --juju-primary-background: rgba(66, 65, 65, 0.2);
    --juju-secondary-background: rgba(202, 206, 210, 0.2);
    --juju-warning-background: #FFBF45;
    --juju-selection-background: #9A8366;

    /* ── Typography ───────────────────────────────────────────────────────── */
    --juju-font-family: "arboria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --juju-font-size: clamp(0.875rem, 1.5vw, 1rem);
    --juju-line-height: 1.2;
    --juju-body-font-weight: var(--fw-medium);
    --juju-primary-font-weight: var(--fw-medium);
    --juju-primary-letter-spacing: 0.2em;
    --juju-secondary-letter-spacing: 2px;

    /* ── Heading Sizes (Desktop-Max: H1=81, H2=63, H3=45, H4=36, H5=28, H6=20) */
    --juju-h1-font-size: clamp(2.5rem, 7vw, 5.0625rem);
    --juju-h1-font-weight: var(--fw-medium);
    --juju-h2-font-size: clamp(2rem, 5.5vw, 3.9375rem);
    --juju-h2-font-weight: var(--fw-bold);
    --juju-h3-font-size: clamp(1.5rem, 4vw, 2.8125rem);
    --juju-h3-font-weight: var(--fw-bold);
    --juju-h4-font-size: clamp(1.25rem, 3.2vw, 2.25rem);
    --juju-h4-font-weight: var(--fw-light);
    --juju-h5-font-size: clamp(1.125rem, 2.5vw, 1.75rem);
    --juju-h5-font-weight: var(--fw-book);
    --juju-h6-font-size: clamp(0.9375rem, 1.8vw, 1.25rem);

    /* ── Heading Display / Hero Sizes ────────────────────────────────────── */
    --juju-heading-small: clamp(1.5rem, 4vw, 2.8125rem);
    /* ~H3: 45px  */
    --juju-heading-medium: clamp(2.5rem, 7vw, 5.0625rem);
    /* ~H1: 81px  */
    --juju-heading-large: clamp(3rem, 8.5vw, 6.25rem);
    /* 100px      */
    --juju-heading-xlarge: clamp(3.5rem, 11vw, 8.125rem);
    /* 130px      */
    --juju-heading-2xlarge: clamp(4rem, 14vw, 10.625rem);
    /* 170px      */

    /* ── Text Sizes ───────────────────────────────────────────────────────── */
    --juju-text-lead-font-size: clamp(1rem, 1.8vw, 1.25rem);
    --juju-text-lead-letter-spacing: 0.1em;
    --juju-text-meta-font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    --juju-text-meta-font-weight: var(--fw-light);
    --juju-text-meta-letter-spacing: 0.2em;
    --juju-text-stroke: calc(0.7px + 0.002em);

    /* ── Border & Radii ───────────────────────────────────────────────────── */
    --juju-radius: 18px;
    --juju-radius-pill: 50px;
    --juju-border-color: #FFFFFF;
    --juju-border-radius: 18px;
    --juju-border-width: 0.5px;

    /* ── Layout & Spacing ─────────────────────────────────────────────────── */
    --juju-main-margin: 113px;
    --juju-faq-margin: 65px;
    --juju-gutter: 28px;
    --juju-gutter-small: 17px;
    --juju-gutter-medium: 45px;
    --juju-gutter-large: 73px;
    --juju-margin: 28px;
    --juju-margin-small: 17px;
    --juju-margin-medium: 45px;
    --juju-margin-large: 73px;
    --juju-margin-xlarge: 118px;

    /* ── Controls ──────────────────────────────────────────────────────────── */
    --juju-control-height: 45px;
    --juju-control-height-small: 28px;
    --juju-control-height-large: 73px;

    /* ── Buttons ───────────────────────────────────────────────────────────── */
    --juju-button-border-radius: 100px;
    --juju-button-border-width: 1.2px;
    --juju-button-font-family: Consolas, monaco, monospace;
    --juju-button-font-size: clamp(0.875rem, 1.5vw, 1rem);
    --juju-button-letter-spacing: 2px;
    --juju-button-padding-horizontal: 40px;
    --juju-button-transition-duration: 0.28s;
    --juju-button-default-background: rgba(245, 232, 232, 0.19);
    --juju-button-default-color: #FFFFFF;
    --juju-button-default-hover-border: #FFFFFF;
    --juju-button-primary-background: #F2F7EC;
    --juju-button-primary-color: #15150D;
    --juju-button-secondary-background: rgba(202, 206, 210, 0.2);
    --juju-button-secondary-color: #15150D;
    --juju-button-secondary-hover-color: #5A5756;

    /* ── Gradienten (Quelle: style.less @internal-button-*) ───────────────── */
    --juju-button-default-gradient: linear-gradient(-10deg, rgba(230, 207, 183, 1) 0%, rgba(154, 131, 102, 1) 100%);
    --juju-button-default-hover-gradient: linear-gradient(-10deg, rgba(230, 207, 183, 0.8) 0%, rgba(154, 131, 102, 0.8) 100%);
    --juju-button-primary-gradient: linear-gradient(180deg, rgba(0, 108, 51, 1) 0%, rgba(0, 52, 29, 1) 100%);
    --aro-button-primary-gradient: var(--juju-button-primary-gradient);

    /* ── Inverse Button Colors (für uk-light / uk-section-* Kontexte) ─────── */
    --juju-inverse-button-primary-bg: rgba(0, 108, 51, 1);
    --juju-inverse-button-primary-color: #ffffff;
    --juju-inverse-button-primary-hover-bg: rgba(0, 85, 40, 1);
    --juju-inverse-button-primary-active-bg: rgba(0, 52, 29, 1);
    --juju-inverse-button-secondary-bg: rgba(230, 207, 183, 1);
    --juju-inverse-button-secondary-color: #15150D;
    --juju-inverse-button-secondary-hover-bg: rgba(195, 168, 138, 1);
    --juju-inverse-button-secondary-active-bg: rgba(154, 131, 102, 1);

    /* ── Navbar ────────────────────────────────────────────────────────────── */
    --juju-navbar-background: rgba(21, 21, 13, 0.89);

    /* ── Dropdown ──────────────────────────────────────────────────────────── */
    --juju-dropdown-background: #F3F7F3;
    --juju-dropdown-border-radius: 18px;
    --juju-dropdown-nav-item-color: #15150D;
    --juju-dropdown-nav-item-hover-color: rgba(21, 21, 13, 0.53);

    /* ── Container ─────────────────────────────────────────────────────────── */
    --juju-container-max-width: 1040px;
    --juju-container-xsmall-max-width: 762px;
    --juju-container-small-max-width: 890px;
    --juju-container-large-max-width: 1214px;
    --juju-container-xlarge-max-width: 1418px;

    /* ── Article ───────────────────────────────────────────────────────────── */
    --juju-article-title-color: #F3F7F3;
    --juju-article-title-font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    --juju-article-meta-color: #DCD8D2;
    --juju-article-meta-font-size: clamp(0.65rem, 1.1vw, 0.75rem);
    --juju-article-meta-link-color: rgba(220, 216, 210, 0.47);
    --juju-article-meta-link-hover-color: #E6CFB7;

    /* ── Label ─────────────────────────────────────────────────────────────── */
    --juju-label-border-radius: 18px;
    --juju-label-font-size: clamp(0.65rem, 1.1vw, 0.75rem);
    --juju-label-padding-horizontal: 24px;
    --juju-label-padding-vertical: 17px;
    --juju-label-warning-background: #FFA707;
    --juju-label-warning-color: #544C2E;

    /* ── Heights ───────────────────────────────────────────────────────────── */
    --juju-height-small: 118px;
    --juju-height-medium: 236px;
    --juju-height-large: 354px;

    /* ── Widths ────────────────────────────────────────────────────────────── */
    --juju-width-small: 264px;
    --juju-width-medium: 427px;
    --juju-width-large: 691px;
    --juju-width-xlarge: 808px;
    --juju-width-2xlarge: 944px;
}

/* ── Lauftext Laufweite ───────────────────────────────────────────────────────
   letter-spacing: 0.2rem für alle Fließtext-Elemente.
   Headings sind explizit ausgenommen (haben eigene Einstellungen in style.less).
   ─────────────────────────────────────────────────────────────────────────── */
p,
li,
td,
th,
blockquote,
figcaption,
.uk-text-lead,
.uk-text-meta,
.uk-text-small,
.el-content {
    letter-spacing: 0.2rem;
}

/* Map */
.min-map .wpsl-search:has(*),
.min-map #wpsl-search-wrap {
    display: none;
}

.min-map #wpsl-gmap {
    width: 100%;
    height: 60vh;
}

.min-map #wpsl-result-list {
    display: none;
}

div:has(.min-map) {
    padding: 0 !important;
}

/* Overlays */

/* Gemeinsame Basis für Container und Pseudoelemente */
.gradient-ov-large,
.gradient-ov-small,
.gradient-ov-white-large,
.gradient-ov-white-small {
    position: relative;
    overflow: hidden;
}

.gradient-ov-large:before,
.gradient-ov-small:before,
.gradient-ov-white-large:before,
.gradient-ov-white-small:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Spezifische Gradienten-Werte (Dunkel) */
.gradient-ov-large:before {
    background: linear-gradient(0deg, var(--juju-dark) 30%, transparent 70%);
}

.gradient-ov-small:before {
    background: linear-gradient(0deg, var(--juju-dark) 15%, transparent 48%);
}

/* Spezifische Gradienten-Werte (Weiß) */
.gradient-ov-white-large:before {
    background: linear-gradient(0deg, var(--juju-white) 30%, transparent 70%);
}

.gradient-ov-white-small:before {
    background: linear-gradient(0deg, var(--juju-white) 15%, transparent 48%);
}

/* Border radius Einstellungen */

.uk-card {
    padding: 28px;
    border-radius: var(--juju-radius);
}

.aro-mc-full-item {
    padding: var(--juju-margin-small);
}

.juju-radius>div>div>div,
.juju-radius img,
.juju-radius {
    border-radius: var(--juju-radius);
}

.juju-radius-inner>div>div>div,
.juju-radius-inner img,
.juju-radius-inner {
    border-radius: var(--juju-radius);
}

.juju-radius-r>div>div>div,
.juju-radius-r img,
.juju-radius-r {
    border-radius: 0px var(--juju-radius) var(--juju-radius) 0px;
}

.juju-radius-l>div>div>div,
.juju-radius-l img,
.juju-radius-l {
    border-radius: var(--juju-radius) 0px 0px var(--juju-radius);
}

.juju-radius-top>div>div>div,
.juju-radius-top img,
.juju-radius-top {
    border-radius: var(--juju-radius) var(--juju-radius) 0px 0px;
}

.juju-radius-bottom>div>div>div,
.juju-radius-bottom img,
.juju-radius-bottom {
    border-radius: 0px 0px var(--juju-radius) var(--juju-radius);
}

/* accordion einstellungen */

.uk-accordion.juju-faq .el-item .uk-accordion-title {
    position: relative;
    border: none;
    border-radius: var(--juju-radius-pill) 0px 0px var(--juju-radius-pill);
    padding: 12px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    transition: all 0.5s ease;
    font-size: var(--juju-text-lead-font-size) !important;
    z-index: 0;
}

.uk-accordion.juju-faq .el-item .uk-accordion-title::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 0.5px;
    border-radius: var(--juju-radius-pill) 0px 0px var(--juju-radius-pill);
    background: linear-gradient(-2deg, rgba(47, 47, 47, 1) 0%, rgba(130, 130, 130, 1) 100%);
    -webkit-mask: linear-gradient(#2F2F2F 0 0) content-box, linear-gradient(#828282 0 0);
    mask: linear-gradient(#2F2F2F 0 0) content-box, linear-gradient(#828282 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.uk-accordion.juju-faq .el-item .uk-accordion-title .uk-accordion-icon {
    margin-left: 0;
    margin-right: 0;
    padding: 12px;
    border-radius: 100%;
    background: linear-gradient(0deg, rgba(154, 131, 102, 1) 0%, rgba(230, 207, 183, 1) 100%);
    opacity: 1;
    transition: all 0.5s ease 0s;
}

.uk-accordion.juju-faq .uk-accordion-content .el-content {
    margin-left: var(--juju-faq-margin);
}

/* accordion states */
.uk-accordion.juju-faq .uk-accordion-title[aria-expanded="true"] .uk-accordion-icon,
.uk-accordion.juju-faq .uk-accordion-title[aria-expanded="true"] {
    opacity: 0.5;
}

/*Produkt Accordion mit Tab-Effekt*/
.juju-products-accordion .el-item {
    margin-bottom: 20px;
}

.juju-products-accordion .uk-accordion-title {
    display: inline-flex;
    align-items: center;
    padding-left: var(--juju-main-margin);
    background: var(--juju-dark);
    color: var(--juju-pure-white) !important;
    border-radius: 0 var(--juju-radius) var(--juju-radius) 0;
    /* Geschlossen: Pill-Form */
    /* Transition für das SCHLIESSEN (Out): Sofort */
    transition: all 0.25s linear 0.55s;
    position: relative;
    z-index: 2;
    margin-left: 0;
    margin-bottom: 0;
    ;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Icon-Farbe korrigieren */
.juju-products-accordion .uk-accordion-title::before {
    background-image: none !important;
}

/* Zustand: Offen */
.juju-products-accordion .el-item.uk-open .uk-accordion-title {
    border-radius: 0 var(--juju-radius) 0 0;
    /* Transition für das ÖFFNEN (In): 0.5s Verzögerung */
    transition: all 0.15s linear 0s;
}

/* Die invertierte Kurve (Hohlkehle) rechts unten */
.juju-products-accordion .uk-accordion-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 100%;
    width: var(--juju-radius);
    height: var(--juju-radius);
    background: var(--juju-dark);
    transform: scaleX(0);
    transform-origin: left;
    /* Transition für das SCHLIESSEN (Out): Sofort ohne Delay */
    transition: transform 0.25s linear 0.3s;

    /* SVG Maske für die Hohlkehle (Umgekehrte Füllung) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

.juju-products-accordion .el-item.uk-open .uk-accordion-title::after {
    transform: scaleX(1);
    /* Transition für das ÖFFNEN (In): Nach dem Titel (0.5s + 0.25s) */
    transition: transform 0.15s linear 0.15s;
}

.juju-products-accordion .uk-accordion-content {
    background: var(--juju-dark);
    padding: var(--juju-main-margin) !important;
    margin-top: 0 !important;
    border-radius: 0 0 0 0;
    color: var(--juju-pure-white);
    position: relative;
    z-index: 1;
    border-radius: 0 0 var(--juju-radius) var(--juju-radius);
}

.juju-products-accordion .uk-accordion-content> :first-child {
    margin-top: 0;
}

/* Newsslider Einstellungen */
.uk-slider-container {
    min-height: 500px;
}

/* 
   JUJU Concave Corner Utilities 
   Ermöglicht den "Hohlkehlen-Abschluss" für Divs
*/

.fullscreen-tabs-80>.uk-width-1-1 {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fullscreen-tabs-50>.uk-width-1-1 {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Abschluss nach UNTEN */
.juju-concave-bottom {
    position: relative;
    border-radius: 0 !important;
}

.juju-concave-bottom::before,
.juju-concave-bottom::after {
    content: "";
    position: absolute;
    top: 100%;
    width: var(--juju-radius);
    height: var(--juju-radius);
    pointer-events: none;
}

/* Links unten */
.juju-concave-bottom::before {
    left: 0;
    transform: scaleY(-1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Rechts unten */
.juju-concave-bottom::after {
    right: 0;
    transform: scale(-1, -1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Abschluss nach OBEN */
.juju-concave-top {
    position: relative;
    border-radius: 0 !important;
}

.juju-concave-top::before,
.juju-concave-top::after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: var(--juju-radius);
    height: var(--juju-radius);
    pointer-events: none;
}

/* FARB-VARIANTEN FÜR HOHLKEHLEN & TABS */
.juju-dark {
    background-color: var(--juju-dark) !important;
    color: var(--juju-pure-white);
}

.juju-dark::before,
.juju-dark::after {
    background-color: var(--juju-dark) !important;
}

.juju-white {
    background-color: var(--juju-white) !important;
    color: var(--juju-dark);
}

.juju-white::before,
.juju-white::after {
    background-color: var(--juju-white) !important;
}

/* Links oben */
.juju-concave-top::before {
    left: 0;
    /* Jetzt so gedreht, dass es oben links ansetzt */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Rechts oben */
.juju-concave-top::after {
    right: 0;
    transform: scaleX(-1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 
   JUJU Tab Utilities 
   Ribbon-Form mit runder Unterkante und Hohlkehle oben
*/

.juju-tab-left,
.juju-tab-right {
    position: relative;
    display: flex;
    /* Flex statt inline-flex für Kompatibilität mit Block-Ausrichtung */
    width: fit-content;
    /* Sorgt dafür, dass der Balken nicht 100% breit wird */
    align-items: center;
    padding: 10px 30px;
    min-height: 40px;
}

/* Farben */
.juju-tab-dark {
    background: var(--juju-dark);
    color: var(--juju-pure-white);
}

.juju-tab-white {
    background: var(--juju-white);
    color: var(--juju-dark);
}

/* Linker Tab */
.juju-tab-left {
    border-radius: 0 0 0 var(--juju-radius) !important;
}

.juju-tab-left::before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    width: var(--juju-radius);
    height: var(--juju-radius);
    transform: scale(-1, -1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Rechter Tab */
.juju-tab-right {
    border-radius: 0 var(--juju-radius) 0 0 !important;
}

.juju-tab-right::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 100%;
    width: var(--juju-radius);
    height: var(--juju-radius);
    /* Keine Transformation nötig, da das SVG oben-links gefüllt ist und so perfekt unten an den Tab anschließt */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C0 9.94113 8.05887 18 18 18H0V0Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Reicht die Höhe durch die YOOtheme-Struktur (Container > Grid) */
/* height: stretch → cross-browser Safe Stack (Safari iOS ignoriert stretch → kollabiert auf 0) */

.juju-registration-tabs>div {
    display: flex;
    gap: 28px;
}

.aro-mc-full-item-image {
    border-radius: var(--juju-radius)
}

.aro-mc-full-item .aro-mc-item .uk-card {
    padding: var(--juju-margin-small) !important;
}

.aro-coupon-label {
    margin-bottom: var(--juju-margin-small);
}

.aro-product-card__name {
    margin-bottom: 0 !important;
}

.uk-modal-dialog {
    border-radius: var(--juju-radius) !important;
    background: #fff !important;
    color: var(--juju-dark) !important;
}

.uk-modal-dialog h4 {
    color: var(--juju-dark) !important;
}

/* ── WooCommerce My Account: Adress-Karten ────────────────────────────────── */

/* Titel auf H5-Größe reduzieren */
.woocommerce-Address-title h2 {
    font-size: var(--juju-h5-font-size) !important;
    font-weight: var(--juju-h5-font-weight);
    margin-bottom: 0;
    order: 1;
}

.woocommerce-Addresses address {
    margin-bottom: var(--juju-margin-medium) !important;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding: var(--juju-margin-small) 0 !important;
    background: transparent !important;
    color: var(--juju-dark) !important;
    border: unset !important;
}

/* Adress-Spalte als Flex-Column */
.woocommerce-Addresses .woocommerce-Address {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* Header auflösen: Kinder werden direkte Flex-Items des .woocommerce-Address */
.woocommerce-Address-title.title {
    display: contents;
}

/* Adresse in die Mitte */
.woocommerce-Address address {
    order: 2;
    margin-top: var(--juju-margin-small, 17px);
    margin-bottom: var(--juju-margin-small, 17px);
    font-style: normal;
}

/* Edit-Link: ans Ende, unter die Adresse */
.woocommerce-Address-title .edit {
    order: 3;
    align-self: flex-start;
}


/* Form styling */

label,
label.uk-form-label {
    padding-left: 18px !important;
    font-size: 12px !important;
}

input:not(.uk-checkbox),
.uk-input,
.uk-select:not([multiple]):not([size]),
{
vertical-align: middle;
display: inline-block;
border: 0.3px solid rgb(182, 182, 182) !important;
border-radius: 50px !important;
padding: 0 18px !important;
}

.uk-checkbox {
    border-radius: 18px !important;
    height: 20px !important;
    width: 20px !important;
}

.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked Specificity: (0, 2, 0) {
    background-color: #fff;
    border-color: transparent;
}

.uk-section-muted input:not(.uk-checkbox) {
    border: 0.3px solid rgb(0, 0, 0) !important;
}

.uk-form-controls {
    margin-top: 8px;
}

.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked {
    background-color: rgb(255 255 255);
    border-color: green;
}

/* Storelocator styles */

#wpsl-gmap {
    border-radius: var(--juju-radius);
}

.wpsl-search {
    margin-bottom: var(--juju-margin-medium) !important;
    padding: var(--juju-margin-small) !important;
    background: transparent !important;
    border: 0.5px solid var(--juju-white) !important;
    border-radius: var(--juju-radius) !important;
}

.wpsl-input {
    margin-bottom: 0 !important;
    height: 41px;

}

#wpsl-search-wrap .wpsl-input,
#wpsl-search-wrap {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
}

.wpsl-select-wrap div {
    display: flex !important;
    flex-direction: column;
}

#wpsl-search-input {
    height: 39px;
    width: 83% !important;
    color: white !important;
    background: transparent;
}

#wpsl-search-btn {
    margin: unset !important;
    margin-top: auto !important;
}

#wpsl-search-btn-wrap {
    margin-left: var(--juju-margin-medium) !important;
}

.wpsl-search-btn-wrap {
    height: 73px !important;
    display: flex !important;
}

.wpsl-dropdown {
    position: relative;
    width: 118px !important;
    border: 0.3px solid #ffffff !important;
    cursor: pointer;
    background: transparent !important;
    border-radius: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin-right: 0 !important;
    z-index: 2;
}

.wpsl-dropdown .wpsl-selected-item {
    color: var(--juju-white) !important;
}

.wpsl-selected-item:after {
    position: absolute;
    content: "";
    right: 12px;
    top: 50%;
    margin-top: -4px;
    border: 6px solid transparent !important;
    border-top: 8px solid var(--juju-white) !important;
    border-radius: 18px !important;
}

#wpsl-search-btn {
    padding: 7px 10px;
    line-height: 1.428571429;
    font-weight: 300;
    letter-spacing: 0.2em !important;
    color: var(--juju-white);
    background-image: linear-gradient(-10deg, rgba(230, 207, 183, 0.8) 0%, rgba(154, 131, 102, 0.8) 100%) !important;
    text-transform: uppercase !important;
    width: 163px !important;
}

.aro-b2b-login-wrap h2,
.aro-b2b-login-wrap label {
    color: var(--juju-dark) !important;
}

.aro-b2b-login-wrap .woocommerce-LostPassword a {
    color: #FFA707 !important;
}

.aro-b2b-login-wrap .woocommerce-LostPassword a:hover {
    color: #FFA707 !important;
}

.juju-panel-content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.uk-button.circle {
    aspect-ratio: 1 / 1;
    height: 45px;
    padding: 0;
}

.j-card-muted {
    background-color: var(--juju-muted-background) !important;
}

.uk-section-default .uk-button-secondary {
    color: var(--juju-white) !important;
}

.uk-button-primary:hover,
.woocommerce form.login .woocommerce-form-login__submit:hover,
.woocommerce form.register .woocommerce-form-register__submit:hover,
.woocommerce form.lost_reset_password button.button:hover {
    color: var(--juju-white) !important;
}

.juju-inner-concave.con-1 {
    border-radius: var(--juju-radius) 0 var(--juju-radius) 0;
}

.juju-inner-concave.con-2 {
    border-radius: 0 var(--juju-radius) 0 var(--juju-radius);
}

.juju-inner-concave.con-3 {
    border-radius: 0 0 0 var(--juju-radius);
}

.juju-inner-concave.con-4 {
    border-radius: 0 0 var(--juju-radius) 0;
}

.juju-inner-concave::before,
.juju-inner-concave::after {
    content: '';
    width: 18px;
    height: auto;
    aspect-ratio: 1 / 1;
    corner-shape: scoop;
    display: block;
    position: absolute;
    background: var(--juju-dark);
}


.juju-inner-concave.con-1::before,
.juju-inner-concave.con-1::after {
    border-radius: var(--juju-margin-small) 0 0 0;
}

.juju-inner-concave.con-1::before {
    top: -17.5px;
    right: 0;
}

.juju-inner-concave.con-1::after {
    bottom: 0;
    left: -17.5px;
}


.juju-inner-concave.con-2::before,
.juju-inner-concave.con-2::after {
    border-radius: 0 var(--juju-margin-small) 0 0;
}

.juju-inner-concave.con-2::before {
    top: -17.5px;
    left: 0;
}

.juju-inner-concave.con-2::after {
    bottom: 0;
    right: -17.5px;
}


/* Reverse concave */

.juju-elab-tab:has(.con-3, .con-4) div .uk-panel.uk-width-1-1 {
    margin-top: 0 !important;
    margin-bottom: auto !important;
}

.juju-inner-concave.con-3::before,
.juju-inner-concave.con-3::after {
    border-radius: 0 0 0 var(--juju-margin-small);
}

.juju-inner-concave.con-3::before {
    bottom: -17.5px;
    right: 0;
}

.juju-inner-concave.con-3::after {
    top: 0;
    left: -17.5px;
}


.juju-inner-concave.con-4::before,
.juju-inner-concave.con-4::after {
    border-radius: 0 0 var(--juju-margin-small) 0;
}

.juju-inner-concave.con-4::before {
    bottom: -17.5px;
    left: 0;
}

.juju-inner-concave.con-4::after {
    top: 0;
    right: -17.5px;
}