/*
 * Zielaro Shop v4.2.7
 * Einheitlicher, kompakter App-Hero für alle Website- und WooCommerce-Unterseiten.
 */

/* Alle Unterseiten verwenden direkt unter dem Header dieselbe App-Karte. */
.zielaro-page-hero,
.zielaro-page-hero--commerce,
.zielaro-page-hero--woocommerce,
.zielaro-page-hero--legal,
.zielaro-page-hero--faq,
.zielaro-page-hero--pricing{
    position:relative;
    isolation:isolate;
    display:flex;
    align-items:center;
    width:min(calc(100% - 32px),var(--za-content-width));
    min-height:0;
    margin:16px auto 0;
    padding:clamp(23px,3.2vw,38px) clamp(22px,4vw,42px);
    overflow:hidden;
    border:1px solid rgba(132,222,205,.15);
    border-radius:21px;
    background:
        radial-gradient(circle at 88% 50%,transparent 0 32px,rgba(109,222,201,.10) 33px 34px,transparent 35px 58px,rgba(109,222,201,.08) 59px 60px,transparent 61px 86px,rgba(109,222,201,.06) 87px 88px,transparent 89px),
        linear-gradient(135deg,#0d252b 0%,#103c3a 58%,#0d5149 100%)!important;
    color:#fff;
    box-shadow:0 14px 42px rgba(13,41,39,.16);
}
.zielaro-page-hero::after{
    content:"";
    position:absolute;
    z-index:-1;
    right:8.2%;
    top:50%;
    width:118px;
    height:118px;
    transform:translate(50%,-50%);
    opacity:.34;
    background:
        linear-gradient(90deg,transparent calc(50% - .5px),rgba(116,225,205,.20) calc(50% - .5px),rgba(116,225,205,.20) calc(50% + .5px),transparent calc(50% + .5px)),
        linear-gradient(transparent calc(50% - .5px),rgba(116,225,205,.20) calc(50% - .5px),rgba(116,225,205,.20) calc(50% + .5px),transparent calc(50% + .5px));
}
.zielaro-page-hero .zielaro-container{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}
.zielaro-page-hero .zielaro-kicker{
    display:block;
    margin:0 0 8px;
    color:#82e1d1!important;
    font-size:clamp(.72rem,1.2vw,.84rem);
    font-weight:850;
    letter-spacing:.13em;
    line-height:1.25;
    text-transform:uppercase;
}
.zielaro-page-hero h1{
    max-width:min(900px,86%);
    margin:0;
    color:#fff!important;
    font-size:clamp(1.85rem,4.4vw,3.35rem);
    line-height:1.06;
    letter-spacing:-.035em;
    text-wrap:balance;
}
.zielaro-page-hero p{
    max-width:min(780px,84%);
    margin:10px 0 0;
    color:rgba(255,255,255,.88)!important;
    font-size:clamp(.94rem,1.6vw,1.08rem);
    line-height:1.52;
}

/* Der Inhalt beginnt ohne den früheren übergroßen Leerraum. */
.zielaro-subpage-shell,
.zielaro-subpage-shell--commerce,
.zielaro-subpage-shell--legal{
    padding-top:clamp(26px,4.5vw,50px)!important;
}
.zielaro-subpage-shell--legal{
    padding-bottom:clamp(58px,8vw,94px);
}
.zielaro-legal-layout{
    width:min(100%,1160px);
}
.zielaro-legal-content{
    padding:clamp(25px,4.2vw,48px);
    border:1px solid var(--za-border);
    border-radius:var(--za-card-radius);
    background:var(--za-surface);
    box-shadow:0 18px 52px rgba(16,40,45,.09);
}
.zielaro-legal-content>:first-child{
    margin-top:0;
}
.zielaro-legal-content>:last-child{
    margin-bottom:0;
}

/* Rechtstext-Metadaten werden nicht mehr als zweite Titelkarte wiederholt. */
.zielaro-legal-document-meta{
    display:none!important;
}

/* WooCommerce- und Kontoseiten folgen demselben kompakten Seitenrhythmus. */
.zielaro-commerce-main .zielaro-subpage-shell--commerce{
    padding-bottom:clamp(58px,8vw,96px);
}
.woocommerce-account .zielaro-page-hero h1,
.woocommerce-cart .zielaro-page-hero h1,
.woocommerce-checkout .zielaro-page-hero h1{
    max-width:78%;
}

@media(max-width:760px){
    .zielaro-page-hero,
    .zielaro-page-hero--commerce,
    .zielaro-page-hero--woocommerce,
    .zielaro-page-hero--legal,
    .zielaro-page-hero--faq,
    .zielaro-page-hero--pricing{
        width:calc(100% - 22px);
        margin-top:11px;
        padding:21px 19px 23px;
        border-radius:17px;
    }
    .zielaro-page-hero::after{
        right:2%;
        width:96px;
        height:96px;
        opacity:.24;
    }
    .zielaro-page-hero h1,
    .zielaro-page-hero p,
    .woocommerce-account .zielaro-page-hero h1,
    .woocommerce-cart .zielaro-page-hero h1,
    .woocommerce-checkout .zielaro-page-hero h1{
        max-width:92%;
    }
    .zielaro-subpage-shell,
    .zielaro-subpage-shell--commerce,
    .zielaro-subpage-shell--legal{
        padding-top:24px!important;
    }
    .zielaro-legal-content{
        padding:22px 18px;
        border-radius:18px;
    }
}