:root{
    --navy:#0a3a5a;
    --navy-dark:#072b45;
    --petrol:#0db6b3;
    --yellow:#ffc107;
    --text:#1e293b;
    --text-soft:#64748b;
    --white:#ffffff;
    --background:#f4f6f8;
    --background-blue:#edf7fb;
    --tile-background:#f5f7f8;
    --strom:#ffb800;
    --strom-bg:#fff8df;
    --gas:#3b82f6;
    --gas-bg:#edf6ff;
    --internet:#1698e5;
    --internet-bg:#edf8ff;
    --handy:#d31362;
    --handy-bg:#fff0f5;
    --thg:#16a35b;
    --thg-bg:#eefbf3;
    --radius:26px;
    --radius-small:18px;
    --shadow:0 14px 40px rgba(10,58,90,0.08);
    --max-width:1180px;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:linear-gradient(
        180deg,
        #eff9fc 0%,
        #ffffff 20%,
        #ffffff 100%
    );
    color:var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height:1.55;
}

body.mobile-menu-open{
    overflow:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    color:inherit;
}

.svg-sprite{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

.page-shell{
    width:min(
        calc(100% - 48px),
        var(--max-width)
    );
    margin-inline:auto;
}

.content-narrow{
    width:min(
        calc(100% - 48px),
        820px
    );
    margin-inline:auto;
}


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

.hero{
    min-height:100svh;
    padding:26px 0 34px;
}

.hero-shell{
    min-height:calc(100svh - 60px);
    padding:24px 34px 34px;
    background:var(--white);
    border-radius:30px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
    min-height:74px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    transition:
        background .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        border-radius .22s ease,
        padding .22s ease,
        min-height .22s ease;
}

.brand{
    flex:0 0 auto;
}

.brand-logo{
    width:132px;
    height:64px;
    object-fit:contain;
    object-position:left center;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:44px;
}

.nav-link{
    position:relative;
    padding:16px 0;
    color:var(--navy-dark);
    font-size:.95rem;
    font-weight:600;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:5px;
    width:0;
    height:3px;
    background:var(--yellow);
    border-radius:10px;
    transform:translateX(-50%);
    transition:width .2s ease;
}

.nav-link:hover::after,
.nav-link.active::after{
    width:30px;
}

.nav-tariffs{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
}

.nav-caret{
    display:inline-block;
    font-size:.78rem;
    transition:transform .2s ease;
}

.nav-tariffs[aria-expanded="true"] .nav-caret{
    transform:rotate(180deg);
}


/* =========================================================
   TARIF-UNTERMENÜ
========================================================= */

.tariff-subnav{
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    display:flex;
    justify-content:center;

    transition:
        max-height .25s ease,
        opacity .2s ease,
        padding .25s ease,
        border-color .25s ease;
}

.tariff-subnav.is-open{
    max-height:80px;
    padding:12px 0 10px;
    border-top:1px solid #edf1f4;
    opacity:1;
    visibility:visible;
}

.tariff-subnav-inner{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(18px,3vw,42px);
}

.tariff-subnav-link{
    position:relative;
    padding:5px 2px;
    color:var(--text-soft);
    font-size:.88rem;
    font-weight:650;
    transition:color .2s ease;
}

.tariff-subnav-link:hover{
    color:var(--navy-dark);
}

.tariff-subnav-link.active{
    color:var(--navy-dark);
    font-weight:800;
}

.tariff-subnav-link.active::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-4px;
    width:22px;
    height:3px;
    background:var(--yellow);
    border-radius:999px;
    transform:translateX(-50%);
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.icon-button{
    width:44px;
    height:44px;
    padding:10px;
    border:0;
    background:transparent;
    color:var(--navy);
    cursor:pointer;
}

.icon-button svg{
    width:100%;
    height:100%;
}

.account-button{
    height:48px;
    padding:0 20px;
    border:1px solid #d5dee7;
    border-radius:24px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--navy-dark);
    font-size:.9rem;
    font-weight:650;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.account-button:hover{
    background:#f7fafc;
    border-color:#b9c7d4;
}

.account-button svg{
    width:21px;
    height:21px;
}


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

.mobile-menu-toggle{
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #d9e2e8;
    border-radius:50%;
    background:var(--white);
    display:none;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.mobile-menu-bars{
    position:relative;
    width:19px;
    height:14px;
    display:block;
}

.mobile-menu-bars::before,
.mobile-menu-bars::after,
.mobile-menu-bars span{
    content:"";
    position:absolute;
    left:0;
    width:19px;
    height:2px;
    background:var(--navy-dark);
    border-radius:999px;

    transition:
        transform .2s ease,
        top .2s ease,
        opacity .2s ease;
}

.mobile-menu-bars::before{
    top:0;
}

.mobile-menu-bars span{
    top:6px;
}

.mobile-menu-bars::after{
    top:12px;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bars::before{
    top:6px;
    transform:rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bars span{
    opacity:0;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bars::after{
    top:6px;
    transform:rotate(-45deg);
}

.mobile-nav-panel{
    display:none;
}

.mobile-nav-main{
    display:flex;
    flex-direction:column;
}

.mobile-nav-link,
.mobile-tariff-toggle{
    width:100%;
    min-height:54px;
    padding:12px 4px;
    border:0;
    border-bottom:1px solid #edf1f4;
    background:transparent;
    color:var(--navy-dark);
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    font-size:.97rem;
    font-weight:700;
}

.mobile-tariff-toggle{
    cursor:pointer;
}

.mobile-tariff-caret{
    transition:transform .2s ease;
}

.mobile-tariff-toggle[aria-expanded="true"] .mobile-tariff-caret{
    transform:rotate(180deg);
}

.mobile-tariff-links{
    max-height:0;
    overflow:hidden;
    opacity:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;

    transition:
        max-height .25s ease,
        opacity .2s ease,
        padding .25s ease;
}

.mobile-tariff-links.is-open{
    max-height:350px;
    padding:14px 0 16px;
    opacity:1;
}

.mobile-tariff-link{
    padding:11px 13px;
    background:var(--tile-background);
    border-radius:12px;
    color:var(--navy-dark);
    font-size:.88rem;
    font-weight:650;
    text-align:center;
}

.mobile-tariff-link.active{
    box-shadow:inset 0 -3px 0 var(--yellow);
    font-weight:800;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-intro{
    flex:1;
    display:grid;
    grid-template-columns:
        minmax(0,1.25fr)
        minmax(280px,.75fr);
    align-items:center;
    gap:40px;
    padding:clamp(45px,7vh,90px) 45px 30px;
}

.hero-copy h1{
    margin:0;
    color:var(--navy-dark);
    font-size:clamp(3.2rem,5.2vw,5.2rem);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:800;
}

.hero-copy h1 span{
    display:block;
    color:var(--petrol);
}

.headline-line{
    width:min(540px,92%);
    height:7px;
    margin:20px 0 22px;
    background:var(--yellow);
    border-radius:50%;
    transform:rotate(-1deg);
}

.hero-copy p{
    max-width:590px;
    margin:0;
    color:var(--text-soft);
    font-size:clamp(1.05rem,1.45vw,1.35rem);
}


/* =========================================================
   TIM – ECHTER POP-OUT AUS DEM OVAL

   UNTEN:
   Das echte Bild liegt IM Oval.
   overflow:hidden schneidet Körper/Beine exakt
   entlang der geschwungenen Ovalkante ab.

   OBEN:
   Eine deckungsgleiche zweite Darstellung zeigt nur
   Kopf/Oberkörper oberhalb des Ovals.

   Keine Banane.
   Keine horizontale Abdeckung.
========================================================= */

.hero-character{
    --tim-oval-width:340px;
    --tim-oval-height:290px;
    --tim-oval-half-height:145px;
    --tim-image-height:325px;

    position:relative;
    min-height:310px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}


/* DAS ECHTE OVAL */

.character-oval{
    position:relative;

    z-index:1;

    width:var(--tim-oval-width);
    height:var(--tim-oval-height);

    background:#e2f5fb;

    border-radius:
        55% 45% 48% 52% /
        45% 50% 50% 55%;

    /*
       ENTSCHEIDEND:
       Unten wird Tim jetzt direkt durch
       die Ovalkontur abgeschnitten.
    */
    overflow:hidden;
}


/* DAS ECHTE BILD IM OVAL */

.character-image{
    position:absolute;

    left:50%;
    bottom:0;

    z-index:2;

    width:auto;
    height:var(--tim-image-height);

    max-width:none;

    object-fit:contain;
    object-position:center bottom;

    transform:translateX(-50%);

    pointer-events:none;
}


/*
   ZWEITE DECKUNGSGLEICHE DARSTELLUNG

   Sie liegt exakt an derselben Position wie das
   Bild innerhalb des Ovals.

   Angezeigt wird nur der obere Teil.
   Deshalb können Kopf, Haare, Hand usw.
   über die obere Ovalkante hinausreichen.

   Der untere Teil stammt ausschließlich aus dem
   im Oval abgeschnittenen Originalbild.
*/

.hero-character::after{
    content:"";

    position:absolute;

    left:50%;

    /*
       Unterkante exakt auf der Unterkante des Ovals.
       So liegen Original und Pop-out pixelgenau übereinander.
    */
    bottom:
        calc(
            50% - var(--tim-oval-half-height)
        );

    z-index:3;

    width:var(--tim-oval-width);
    height:var(--tim-image-height);

    background-image:
        url("/assets/img/tim-tarif-showing.png");

    background-repeat:no-repeat;

    background-position:
        center bottom;

    background-size:
        auto var(--tim-image-height);

    transform:
        translateX(-50%);

    /*
       Nur oberer Teil des Bildes.
       Die Schnittkante liegt tief genug IM Oval,
       sodass man sie später nicht sehen kann.
    */
    clip-path:
        inset(
            0
            0
            38%
            0
        );

    pointer-events:none;
}


/* =========================================================
   TARIFAUSWAHL
========================================================= */

.tariff-selector{
    padding:42px 34px 28px;
    background:var(--white);
    border:1px solid #edf1f5;
    border-radius:var(--radius);
    box-shadow:0 10px 35px rgba(10,58,90,.10);
}

.tariff-selector h2{
    margin:0 0 34px;
    text-align:center;
    color:var(--navy-dark);
    font-size:clamp(1.4rem,2vw,2rem);
    line-height:1.2;
}

.tariff-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:15px;
}

.tariff-card{
    position:relative;
    min-height:190px;
    padding:25px 18px 20px;
    background:var(--tile-background);
    border:1px solid transparent;
    border-radius:17px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.tariff-card:hover{
    transform:translateY(-4px);
    border-color:#e3e8eb;
    box-shadow:0 12px 24px rgba(10,58,90,.08);
}

.tariff-card:focus-visible{
    outline:3px solid var(--yellow);
    outline-offset:3px;
}

.tariff-icon{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
}

.tariff-icon svg{
    width:56px;
    height:56px;
}

.tariff-name{
    color:var(--navy-dark);
    font-size:1.04rem;
    font-weight:800;
}

.tariff-action{
    margin-top:4px;
    color:var(--text-soft);
    font-size:.78rem;
    font-weight:500;
}

.tariff-arrow{
    width:35px;
    height:35px;
    margin-top:auto;
    border-radius:50%;
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy-dark);
    font-size:1.25rem;
    box-shadow:0 3px 12px rgba(10,58,90,.06);
}

.tariff-strom .tariff-icon{
    color:var(--strom);
}

.tariff-gas .tariff-icon{
    color:var(--gas);
}

.tariff-internet .tariff-icon{
    color:var(--internet);
}

.tariff-handy .tariff-icon{
    color:var(--handy);
}

.tariff-thg .tariff-icon{
    color:var(--thg);
}

.tariff-trust{
    margin-top:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--text-soft);
    font-size:.86rem;
    font-weight:550;
}

.trust-check{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#edf8f2;
    color:var(--thg);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
    font-weight:900;
}

.more-link{
    width:max-content;
    max-width:100%;
    margin:20px auto 0;
    padding:5px 2px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--navy);
    font-size:.88rem;
    font-weight:650;

    transition:
        color .2s ease,
        transform .2s ease;
}

.more-link:hover{
    color:var(--petrol);
    transform:translateY(2px);
}

.more-button{
    width:min(100%,500px);
    min-height:60px;
    margin:34px auto 0;
    padding:15px 26px;
    background:var(--yellow);
    color:var(--navy-dark);
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    font-size:1rem;
    font-weight:800;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.more-button:hover{
    transform:translateY(-2px);
    box-shadow:0 9px 22px rgba(255,193,7,.25);
}


/* =========================================================
   CONTENT
========================================================= */

.content-section{
    padding:100px 0;
}

.soft-section{
    background:#f5fafc;
}

.section-label{
    display:block;
    margin-bottom:10px;
    color:var(--petrol);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.content-section h2{
    margin:0 0 28px;
    color:var(--navy-dark);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.content-section p{
    color:var(--text-soft);
    font-size:1.05rem;
}

.content-section p a{
    color:var(--navy);
    font-weight:700;
    text-decoration:underline;
    text-decoration-color:var(--yellow);
    text-decoration-thickness:2px;
    text-underline-offset:3px;
}

.section-heading{
    margin-bottom:45px;
}

.steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.step{
    padding:32px;
    background:var(--white);
    border-radius:var(--radius-small);
}

.step-number{
    width:44px;
    height:44px;
    margin-bottom:22px;
    background:var(--petrol);
    color:var(--white);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}


/* =========================================================
   EINHEITLICHE TARIF-ICONS
========================================================= */

.step-number.tariff-topic-icon{
    background:var(--tile-background);
}

.step-number.tariff-topic-icon svg{
    width:27px;
    height:27px;
    display:block;
}

.step-number.tariff-topic-strom{
    color:var(--strom);
}

.step-number.tariff-topic-gas{
    color:var(--gas);
}

.step-number.tariff-topic-internet{
    color:var(--internet);
}

.step-number.tariff-topic-handy{
    color:var(--handy);
}

.step-number.tariff-topic-thg{
    color:var(--thg);
}

.step h3{
    margin:0 0 10px;
    color:var(--navy-dark);
}

.step p{
    margin:0;
    font-size:.98rem;
}


/* =========================================================
   FAQ
========================================================= */

.faq-section{
    background:var(--white);
}

.faq{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.faq-item{
    border:1px solid #e3eaf0;
    border-radius:18px;
    background:var(--white);
    overflow:hidden;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.faq-item.open{
    border-color:#c5dce3;
    box-shadow:0 8px 26px rgba(10,58,90,.06);
}

.faq-question{
    width:100%;
    border:0;
    padding:22px 24px;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:var(--navy-dark);
    text-align:left;
    font-size:1rem;
    font-weight:750;
    cursor:pointer;
}

.faq-plus{
    flex:0 0 auto;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#f2f7f9;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy);
    font-size:1.4rem;
    line-height:1;

    transition:
        transform .25s ease,
        background .25s ease;
}

.faq-item.open .faq-plus{
    background:var(--yellow);
    transform:rotate(45deg);
}

.faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
}

.faq-answer > div{
    overflow:hidden;
}

.faq-item.open .faq-answer{
    grid-template-rows:1fr;
}

.faq-answer p{
    margin:0;
    padding:0 24px 24px;
    font-size:.95rem;
    font-weight:400;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer{
    padding:34px 0;
    background:var(--navy-dark);
    color:#dce6ed;
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:25px;
}

.footer-inner nav{
    display:flex;
    gap:25px;
}

.footer-inner a:hover{
    color:var(--white);
}


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

@media (max-width:950px){

    .main-nav{
        gap:22px;
    }

    .hero-intro{
        grid-template-columns:
            minmax(0,1.2fr)
            minmax(220px,.8fr);

        padding-inline:10px;
    }

    .hero-character{
        --tim-oval-width:280px;
        --tim-oval-height:245px;
        --tim-oval-half-height:122.5px;
        --tim-image-height:275px;
    }

    .tariff-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .tariff-card:nth-child(4),
    .tariff-card:nth-child(5){
        min-height:175px;
    }

}


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

@media (max-width:720px){

    .page-shell,
    .content-narrow{
        width:min(calc(100% - 24px),var(--max-width));
    }

    .hero{
        padding:10px 0 20px;
    }

    .hero-shell{
        min-height:auto;
        padding:16px 14px 24px;
        border-radius:22px;
    }

    .site-header{
        min-height:58px;
    }

    .brand-logo{
        width:96px;
        height:48px;
    }

    .main-nav{
        display:none;
    }

    .tariff-subnav{
        display:none;
    }

    .mobile-menu-toggle{
        display:flex;
    }

    .mobile-nav-panel{
        width:100%;
        max-height:0;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        display:block;

        transition:
            max-height .3s ease,
            opacity .2s ease,
            padding .25s ease;
    }

    .mobile-nav-panel.is-open{
        max-height:700px;
        padding:8px 2px 10px;
        opacity:1;
        visibility:visible;
    }

    .account-button{
        width:42px;
        height:42px;
        padding:10px;
        justify-content:center;
    }

    .account-button span{
        display:none;
    }

    .header-actions{
        gap:7px;
    }

    .hero-intro{
        grid-template-columns:
            minmax(0,1fr)
            115px;

        gap:4px;
        padding:45px 4px 25px;
    }

    .hero-copy h1{
        font-size:clamp(2.25rem,11vw,3.45rem);
    }

    .headline-line{
        height:5px;
        margin:13px 0 16px;
    }

    .hero-copy p{
        font-size:.95rem;
    }

    .hero-character{
        --tim-oval-width:150px;
        --tim-oval-height:165px;
        --tim-oval-half-height:82.5px;
        --tim-image-height:185px;

        min-height:180px;
        align-self:end;
    }

    .hero-character::after{
        clip-path:
            inset(
                0
                0
                39%
                0
            );
    }

    .tariff-selector{
        padding:28px 15px 22px;
        border-radius:20px;
        overflow:hidden;
    }

    .tariff-selector h2{
        margin-bottom:25px;
        font-size:1.35rem;
    }

    .tariff-grid{
        display:flex;
        gap:12px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:3px 42px 10px 2px;
        scroll-snap-type:x mandatory;
        scroll-padding-left:2px;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .tariff-grid::-webkit-scrollbar{
        display:none;
    }

    .tariff-card,
    .tariff-card:last-child{
        flex:0 0 min(78vw,270px);
        min-height:150px;
        padding:18px 10px 14px;
        grid-column:auto;
        scroll-snap-align:start;
    }

    .tariff-icon{
        height:48px;
    }

    .tariff-icon svg{
        width:44px;
        height:44px;
    }

    .tariff-action{
        font-size:.73rem;
    }

    .tariff-arrow{
        width:31px;
        height:31px;
        margin-top:10px;
    }

    .tariff-trust{
        margin-top:20px;
        font-size:.8rem;
    }

    .more-link{
        margin-top:16px;
        font-size:.82rem;
    }

    .content-section{
        padding:70px 0;
    }

    .steps{
        grid-template-columns:1fr;
    }

    .footer-inner{
        flex-direction:column;
    }

    .footer-inner nav{
        flex-wrap:wrap;
    }

}


/* =========================================================
   SEHR KLEINE HANDYS
========================================================= */

@media (max-width:420px){

    .hero-intro{
        grid-template-columns:
            minmax(0,1fr)
            95px;
    }

    .hero-copy h1{
        font-size:2.2rem;
    }

    .hero-copy p{
        font-size:.88rem;
    }

    .hero-character{
        --tim-oval-width:120px;
        --tim-oval-height:135px;
        --tim-oval-half-height:67.5px;
        --tim-image-height:155px;

        min-height:145px;
    }

    .mobile-tariff-links{
        grid-template-columns:1fr 1fr;
    }

}


/* =========================================================
   FLOATING HEADER
========================================================= */

.site-header.is-floating{
    position:fixed;
    top:10px;
    left:50%;
    z-index:1200;
    width:min(calc(100% - 32px),var(--max-width));
    min-height:62px;
    padding:0 24px;
    background:rgba(255,255,255,.84);
    border:1px solid rgba(255,255,255,.78);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(10,58,90,.11);
    backdrop-filter:blur(16px) saturate(125%);
    -webkit-backdrop-filter:blur(16px) saturate(125%);
    transform:translateX(-50%);
}

.site-header.is-floating .brand-logo{
    width:112px;
    height:50px;
}

.site-header.is-floating .nav-link{
    padding:12px 0;
}

.site-header.is-floating .account-button{
    height:44px;
}


/* =========================================================
   TARIF-UNTERMENÜ BEIM SCROLLEN
========================================================= */

body.header-is-floating .tariff-subnav.is-open{
    position:fixed;
    top:80px;
    left:50%;
    z-index:1190;
    width:min(calc(100% - 48px),1080px);
    max-height:82px;
    padding:10px 18px;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(255,255,255,.82);
    border-radius:16px;
    box-shadow:0 8px 24px rgba(10,58,90,.09);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    transform:translateX(-50%);
}


/* =========================================================
   FLOATING HEADER MOBILE
========================================================= */

@media (max-width:720px){

    .site-header.is-floating{
        top:8px;
        width:calc(100% - 20px);
        min-height:54px;
        padding:3px 8px;
        border-radius:16px;
    }

    .site-header.is-floating .brand-logo{
        width:88px;
        height:44px;
    }

    .site-header.is-floating .account-button,
    .site-header.is-floating .mobile-menu-toggle{
        width:40px;
        height:40px;
    }

    body.header-is-floating .mobile-nav-panel.is-open{
        position:fixed;
        top:70px;
        left:10px;
        right:10px;
        z-index:1180;
        width:auto;
        max-height:calc(100svh - 82px);
        overflow-y:auto;
        padding:10px 14px 14px;
        background:rgba(255,255,255,.96);
        border:1px solid rgba(255,255,255,.86);
        border-radius:16px;
        box-shadow:0 10px 30px rgba(10,58,90,.13);
        backdrop-filter:blur(18px) saturate(125%);
        -webkit-backdrop-filter:blur(18px) saturate(125%);
    }

}


/* =========================================================
   REDUZIERTE ANIMATIONEN
========================================================= */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }

    .site-header{
        transition:none !important;
    }

}