/* ==========================================================
   EMA KRACHT V2.2
   HERO – SiteOrigin-kompatible Fassung
   ========================================================== */


/* HERO GESAMT */

.ema-kracht-hero {
    position: relative;
    overflow: hidden;
    background-color: #086176;
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 18px 18px;
}


/* ==========================================================
   OBERER BEREICH
   ========================================================== */

.ema-kracht-top {
    position: relative;
    z-index: 5;
    min-height: 150px;
}

.ema-brand-row {
    position: relative;
    z-index: 6;
}

.ema-brand-row .wp-block-image {
    margin-bottom: 0;
}

.ema-brand-row img {
    width: 105px !important;
    height: auto !important;
}

.ema-menu-label {
    display: block !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
}


/* ==========================================================
   ORANGE KREIS
   ========================================================== */

.ema-orange-orbit {
    position: absolute !important;
    z-index: 2;
    top: -250px;
    right: -150px;
    width: 650px !important;
    height: 650px !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background-color: #F36A32 !important;
}

.ema-orange-orbit .wp-block-buttons {
    position: absolute;
    top: 330px;
    left: 155px;
    margin: 0 !important;
}

.ema-orange-orbit .wp-block-button__link {
    display: block;
    background-color: #D9F634 !important;
    color: #10271D !important;
    text-align: center;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}


/* ==========================================================
   TRENNLINIE
   ========================================================== */

.ema-hero-rule {
    position: relative;
    z-index: 4;
    margin-top: 0 !important;
    margin-bottom: 45px !important;
    opacity: 0.45;
}


/* ==========================================================
   HERO INHALT
   ========================================================== */

.ema-hero-body {
    position: relative;
    z-index: 4;
}

.ema-hero-copy {
    width: 68%;
}

.ema-hero-kicker {
    margin-bottom: 28px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
}

.ema-hero-kicker a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.ema-hero-kicker a:hover {
    text-decoration: underline !important;
}


/* ==========================================================
   GROSSE ÜBERSCHRIFT
   ========================================================== */

.ema-hero-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-family: Arial Black, Arial, Helvetica, sans-serif !important;
    font-size: 92px !important;
    line-height: 0.86 !important;
    font-weight: 900 !important;
    letter-spacing: -4px !important;
}

.ema-hero-title-green {
    color: #D9F634 !important;
}

.ema-hero-title-white {
    color: #ffffff !important;
}

.ema-hero-title-last {
    white-space: nowrap;
    margin-bottom: 34px !important;
}


/* ==========================================================
   HERO TEXT
   ========================================================== */

.ema-hero-lead {
    max-width: 650px;
    margin-bottom: 32px !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.48 !important;
    font-weight: 700 !important;
}


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

.ema-hero-actions .wp-block-button__link {
    font-weight: 900 !important;
}

.ema-hero-primary .wp-block-button__link {
    background-color: #D9F634 !important;
    color: #10271D !important;
}

.ema-hero-why .wp-block-button__link {
    background-color: transparent !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255,255,255,0.55) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
}

.ema-hero-micro {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
}


/* ==========================================================
   EMA BADGE – ÄUSSERER RING
   Keine Padding-/Border-Box-Modell-Konflikte
   ========================================================== */

.ema-badge-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 355px !important;
    height: 355px !important;
    min-height: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    border-radius: 50% !important;
    outline-color: rgba(151,194,91,0.50);
    outline-style: solid;
    outline-width: 1px;
}


/* MITTLERER RING */

.ema-badge-wrap > .wp-block-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 323px !important;
    height: 323px !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    outline-color: rgba(151,194,91,0.75);
    outline-style: solid;
    outline-width: 1px;
}


/* INNERER GELBER KREIS */

.ema-badge-wrap > .wp-block-group > .wp-block-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 295px !important;
    height: 295px !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background-color: #D9F634 !important;
    outline-color: #10271D;
    outline-style: solid;
    outline-width: 2px;
    box-shadow: 13px 15px 0 rgba(16,39,29,0.30);
}

.ema-badge-wrap h3 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: #10271D !important;
    font-size: 55px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.ema-badge-wrap p {
    color: #10271D !important;
    font-weight: 900 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media only screen and (max-width: 1000px) {

    .ema-orange-orbit {
        top: -190px;
        right: -160px;
        width: 520px !important;
        height: 520px !important;
    }

    .ema-orange-orbit .wp-block-buttons {
        top: 275px;
        left: 105px;
    }

    .ema-hero-title {
        font-size: 72px !important;
    }

    .ema-badge-wrap {
        width: 300px !important;
        height: 300px !important;
    }

    .ema-badge-wrap > .wp-block-group {
        width: 270px !important;
        height: 270px !important;
    }

    .ema-badge-wrap > .wp-block-group > .wp-block-group {
        width: 244px !important;
        height: 244px !important;
    }

    .ema-badge-wrap h3 {
        font-size: 45px !important;
    }

}


/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media only screen and (max-width: 781px) {

    .ema-kracht-hero {
        padding-right: 18px !important;
        padding-left: 18px !important;
        padding-bottom: 55px !important;
    }

    .ema-kracht-top {
        min-height: 118px;
    }

    .ema-brand-row {
        width: 55%;
    }

    .ema-brand-row img {
        width: 82px !important;
    }

    .ema-menu-label {
        display: none !important;
    }

    .ema-orange-orbit {
        top: -105px;
        right: -100px;
        width: 265px !important;
        height: 265px !important;
    }

    .ema-orange-orbit .wp-block-buttons {
        top: 145px;
        left: 47px;
    }

    .ema-orange-orbit .wp-block-button__link {
        font-size: 11px !important;
    }

    .ema-hero-rule {
        margin-bottom: 38px !important;
    }

    .ema-hero-body {
        display: block !important;
    }

    .ema-hero-body > .wp-block-column {
        width: 100% !important;
    }

    .ema-hero-copy {
        width: 100% !important;
    }

    .ema-hero-kicker {
        max-width: 310px;
        margin-bottom: 27px !important;
        font-size: 10px !important;
        line-height: 1.55 !important;
    }

    .ema-hero-title {
        font-size: 48px !important;
        line-height: 0.88 !important;
        letter-spacing: -2px !important;
    }

    .ema-hero-title-last {
        white-space: nowrap;
        margin-bottom: 28px !important;
    }

    .ema-hero-lead {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .ema-badge-wrap {
        width: 245px !important;
        height: 245px !important;
        margin-top: 55px !important;
    }

    .ema-badge-wrap > .wp-block-group {
        width: 223px !important;
        height: 223px !important;
    }

    .ema-badge-wrap > .wp-block-group > .wp-block-group {
        width: 202px !important;
        height: 202px !important;
    }

    .ema-badge-wrap h3 {
        font-size: 39px !important;
    }

    .ema-badge-wrap p {
        font-size: 11px !important;
    }

}


/* ==========================================================
   KLEINE SMARTPHONES
   ========================================================== */

@media only screen and (max-width: 420px) {

    .ema-hero-title {
        font-size: 43px !important;
    }

    .ema-orange-orbit {
        right: -115px;
    }

}

/* ==========================================================
   EMA KRACHT V2.2 – DESKTOP KORREKTUR
   ========================================================== */

/* Alten Vantage-Kopf ausblenden */

#masthead {
    display: none !important;
}


/* Hero-Inhalt endlich breit genug */

.ema-kracht-hero > .ema-kracht-top,
.ema-kracht-hero > .ema-hero-rule,
.ema-kracht-hero > .ema-hero-body {
    width: 100% !important;
    max-width: 1200px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}


/* Logo + MENU sicher nebeneinander */

.ema-brand-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.ema-brand-row > .wp-block-column:first-child {
    flex-basis: 125px !important;
    flex-grow: 0 !important;
}

.ema-brand-row > .wp-block-column:last-child {
    display: block !important;
    flex-basis: auto !important;
}

.ema-menu-label {
    display: block !important;
}


/* Desktop */

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

    /* Großer orangefarbener Kreis wie bei Jovan */

    .ema-orange-orbit {
        top: -270px !important;
        right: -180px !important;
        width: 700px !important;
        height: 700px !important;
    }

    .ema-orange-orbit .wp-block-buttons {
        top: 355px !important;
        left: 175px !important;
    }


    /* Mehr Raum für die Schlagzeile */

    .ema-hero-copy {
        width: auto !important;
        flex-basis: 72% !important;
    }

    .ema-hero-body > .wp-block-column:last-child {
        flex-basis: 28% !important;
    }

    .ema-hero-title-last {
        white-space: nowrap !important;
    }


    /* EMA-Badge wirklich rund */

    .ema-badge-wrap {
        width: 320px !important;
        height: 320px !important;
        max-width: none !important;
    }

    .ema-badge-wrap > .wp-block-group {
        width: 292px !important;
        height: 292px !important;
        max-width: none !important;
    }

    .ema-badge-wrap > .wp-block-group > .wp-block-group {
        width: 266px !important;
        height: 266px !important;
        max-width: none !important;
    }

    .ema-badge-wrap h3 {
        font-size: 50px !important;
    }

}

/* ==========================================================
   EMA KRACHT V2.3 – DESKTOP LAYOUT FIX
   ========================================================== */


/* Gesamten Hero aus dem Vantage-Inhaltskasten befreien */

.ema-kracht-hero {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
}


/* Inhalt innen wieder sauber begrenzen */

.ema-kracht-hero > .ema-kracht-top,
.ema-kracht-hero > .ema-hero-rule,
.ema-kracht-hero > .ema-hero-body {
    width: 100% !important;
    max-width: 1200px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

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

    /* Kopf deutlich flacher */

    .ema-kracht-top {
        position: relative !important;
        height: 165px !important;
        min-height: 165px !important;
    }


    /* Logo */

    .ema-brand-row {
        position: relative !important;
        display: block !important;
        width: 310px !important;
        height: 130px !important;
    }

    .ema-brand-row .wp-block-image {
        position: absolute !important;
        top: 22px !important;
        left: 0 !important;
    }

    .ema-brand-row img {
        width: 105px !important;
        height: auto !important;
    }


    /* MENU neben dem Logo erzwingen */

    .ema-menu-label {
        position: absolute !important;
        top: 65px !important;
        left: 140px !important;
        display: block !important;
        width: 100px !important;
        color: #ffffff !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: 2px !important;
    }


    /* Riesiger Kreis oben rechts */

    .ema-orange-orbit {
        position: absolute !important;
        top: -335px !important;
        right: -215px !important;
        width: 740px !important;
        height: 740px !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 50% !important;
    }


    /* EMA WERDEN im Kreis */

    .ema-orange-orbit .wp-block-buttons {
        position: absolute !important;
        top: 405px !important;
        left: 190px !important;
        width: 225px !important;
        margin: 0 !important;
    }

    .ema-orange-orbit .wp-block-button {
        width: 225px !important;
    }

    .ema-orange-orbit .wp-block-button__link {
        width: 225px !important;
        font-size: 15px !important;
    }


    /* Linie näher an den Inhalt */

    .ema-hero-rule {
        position: relative !important;
        z-index: 5 !important;
        margin-top: 0 !important;
        margin-bottom: 32px !important;
    }


    /* Hauptbereich */

    .ema-hero-body {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
    }

    .ema-hero-copy {
        width: auto !important;
        max-width: 72% !important;
        flex-basis: 72% !important;
    }

    .ema-hero-body > .wp-block-column:last-child {
        width: auto !important;
        max-width: 28% !important;
        flex-basis: 28% !important;
    }


    /* Kicker */

    .ema-hero-kicker {
        margin-top: 0 !important;
        margin-bottom: 28px !important;
    }


    /* Schlagzeile */

    .ema-hero-title {
        font-size: 96px !important;
        line-height: 0.86 !important;
        letter-spacing: -4px !important;
    }

    .ema-hero-title-last {
        white-space: nowrap !important;
        margin-bottom: 34px !important;
    }


    /* Badge */

    .ema-badge-wrap {
        width: 310px !important;
        height: 310px !important;
        min-height: 0 !important;
        max-width: none !important;
    }

    .ema-badge-wrap > .wp-block-group {
        width: 282px !important;
        height: 282px !important;
        min-height: 0 !important;
        max-width: none !important;
    }

    .ema-badge-wrap > .wp-block-group > .wp-block-group {
        width: 256px !important;
        height: 256px !important;
        min-height: 0 !important;
        max-width: none !important;
    }

    .ema-badge-wrap h3 {
        font-size: 49px !important;
    }

}