/* /Components/Layout/MobilniLista.razor.rz.scp.css */
/* === Spodní lišta pro mobil ===
   Matné sklo jako hlavička (rodinný standard): plocha 80 % + blur 16 px
   a saturace 1,3. Ukazuje se do 768 px; nad tím je jak lišta, tak rozpěrka
   schovaná, takže na desktopu neexistuje a nic neposouvá (CLS 0).
   z-index 90 = pod lepivou hlavičkou (100) i pod souhlasem s cookies (150). */
.mobilni-lista[b-bfz4ncigce] {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    gap: .6rem;
    /* PEVNÁ výška z tokenu --vyska-mobilni-listy (app.css) – ne min-height.
       Rozpěrka pod patičkou počítá ze stejného tokenu, takže se výšky nemají
       jak rozejít. Dřív měla lišta min-height a rostla podle obsahu (zalomený
       popisek „Nezávazná poptávka" ji na 390 px natáhl na 77 px), zatímco
       rozpěrka měla natvrdo 64 px – posledních 13 px patičky zůstalo schované.
       box-sizing: border-box je globální, takže výška zahrnuje výplň i linku. */
    height: calc(var(--vyska-mobilni-listy) + env(safe-area-inset-bottom, 0px));
    padding: .6rem .8rem;
    /* Gesta a zaoblení displejů: obsah nesmí končit pod domovským proužkem. */
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--podklad) 80%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-top: 1px solid color-mix(in srgb, var(--linka) 60%, transparent);
    box-shadow: 0 -2px 4px rgba(26, 37, 64, .05), 0 -10px 22px rgba(26, 37, 64, .09);
}

/* Bez podpory backdrop-filter spadneme na plnou plochu (stejně jako hlavička). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobilni-lista[b-bfz4ncigce] {
        background: var(--podklad);
    }
}

/* Rozpěrka pod patičkou: lišta je fixed, takže by jinak překryla poslední řádek
   patičky. Výška jde ze STEJNÉHO tokenu jako lišta, včetně bezpečné zóny.
   Schválně se NEskrývá, když je vidět lišta souhlasu – jinak by obsah poskočil. */
.mobilni-lista-rozpera[b-bfz4ncigce] {
    display: none;
    height: calc(var(--vyska-mobilni-listy) + env(safe-area-inset-bottom, 0px));
}

/* Tlačítka vyplní lištu na výšku (flex stretch), takže dotykový cíl je celá
   vnitřní výška lišty (76 − 1 linka − 2 × .6rem ≈ 56 px) a přitom se z nich
   výška lišty NEODVOZUJE – i zalomený popisek se do nich vejde. */
.mobilni-lista-akce[b-bfz4ncigce] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 1;
    padding: .4rem .7rem;
    border-radius: var(--radius-s);
    font-size: .98rem;
    font-weight: var(--vaha-nadpis);
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
}

/* Obě akce mají stejnou váhu tvarem i velikostí, liší se jen barevností:
   „Zavolat" je světlé s navy popiskem, poptávka je plná navy. */
.mobilni-lista-telefon[b-bfz4ncigce] {
    color: var(--barva-primarni);
    background: #fff;
    border: 1.5px solid var(--linka-vyrazna);
}

.mobilni-lista-poptavka[b-bfz4ncigce] {
    color: #fff;
    background: var(--barva-primarni);
    border: 1.5px solid var(--barva-primarni);
    box-shadow: var(--stin-tlacitko);
}

/* Ikony vykresluje komponenta Ikona – vlastní scope, proto ::deep. */
.mobilni-lista-akce[b-bfz4ncigce]  svg {
    flex: none;
}

@media (max-width: 768px) {
    .mobilni-lista[b-bfz4ncigce] {
        display: flex;
    }

    .mobilni-lista-rozpera[b-bfz4ncigce] {
        display: block;
    }
}

/* Na hodně nízkých displejích na šířku by lišta ukusovala příliš obsahu. */
@media (max-height: 420px) {
    .mobilni-lista[b-bfz4ncigce],
    .mobilni-lista-rozpera[b-bfz4ncigce] {
        display: none;
    }
}
/* /Components/Layout/Navigace.razor.rz.scp.css */
/* === Lepivá hlavička ===
   Matné sklo podle rodinného standardu: plocha na 80 % + blur 16 px a saturace
   1,3 – obsah pod lištou při scrollu decentně prosvítá rozmazaný. Okraj je
   průsvitný (60 %), aby lišta nekončila tvrdou čárou.
   z-index 100 drží lištu nad veškerým obsahem stránky (souhlas s cookies má 150). */
.hlavicka[b-jp5fsmsgt9] {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Aktuální výška lišty. Rozbalené mobilní menu z ní počítá svoji výšku,
       aby dosáhlo přesně ke spodnímu okraji okna – a to i po zmenšení lišty
       při scrollu (jinak by pod menu zůstal 18px pruh stránky). */
    --vyska-listy-ted: var(--vyska-hlavicky);
    background: color-mix(in srgb, var(--podklad) 80%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid color-mix(in srgb, var(--linka) 60%, transparent);
    transition: box-shadow var(--prechod), background var(--prechod), border-color var(--prechod);
}

/* Bez podpory backdrop-filter (starší prohlížeče) spadneme na plnou plochu. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hlavicka[b-jp5fsmsgt9] {
        background: var(--podklad);
    }
}

.hlavicka-vnitrek[b-jp5fsmsgt9] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--vyska-hlavicky);
    transition: min-height .25s ease;
}

/* Zúžení po odscrollování – třídu nasazuje js/web.js (viz hlídky scrollu,
   NIKDY ne číselný práh na scrollY). Nahoře je sklo průsvitnější, po
   odscrollování o něco krycí + stín (elevace M), ať je lišta zřetelně nad obsahem. */
.hlavicka.je-zmensena[b-jp5fsmsgt9] {
    background: color-mix(in srgb, var(--podklad) 90%, transparent);
    border-bottom-color: var(--linka);
    box-shadow: var(--stin-m);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hlavicka.je-zmensena[b-jp5fsmsgt9] {
        background: var(--podklad);
    }
}

.hlavicka.je-zmensena[b-jp5fsmsgt9] {
    --vyska-listy-ted: var(--vyska-hlavicky-zmensena);
}

.hlavicka.je-zmensena .hlavicka-vnitrek[b-jp5fsmsgt9] {
    min-height: var(--vyska-hlavicky-zmensena);
}

/* === Značka ===
   Výšku drží obal, obrázek se do ní vejde ať má jakýkoliv poměr stran –
   výška je tak rezervovaná i před stažením loga (CLS 0). */
.znacka[b-jp5fsmsgt9] {
    flex: none;
    display: flex;
    align-items: center;
    height: 52px;
    transition: height .25s ease;
}

/* Výšku dědí <picture> i <img>, aby procenta měla o co se opřít. */
.znacka picture[b-jp5fsmsgt9] {
    display: block;
    height: 100%;
}

.znacka img[b-jp5fsmsgt9] {
    height: 100%;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
}

.hlavicka.je-zmensena .znacka[b-jp5fsmsgt9] {
    height: 42px;
}

/* === Menu === */
.menu[b-jp5fsmsgt9] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.menu-seznam[b-jp5fsmsgt9] {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ::deep zůstává kvůli obsahu vykreslenému podřízenými komponentami (ikony ap.) */
.menu-seznam[b-jp5fsmsgt9]  .menu-odkaz {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: var(--cil-dotyk);
    padding: .55rem .8rem;
    border-radius: 10px;
    font-size: .97rem;
    font-weight: 500;
    color: var(--barva-menu);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color var(--prechod-rychly), background var(--prechod-rychly);
}

@media (hover: hover) and (pointer: fine) {
    .menu-seznam[b-jp5fsmsgt9]  .menu-odkaz:hover {
        background: var(--podklad-tint);
    }
}

.menu-seznam[b-jp5fsmsgt9]  .menu-odkaz:focus-visible {
    background: var(--podklad-tint);
}

/* Aktivní položka = tonální navy pilulka a ztmavená zlatá linka pod popiskem.
   Plná zlatá by na světlé liště měla 1,9:1 a nebyla by vidět. */
.menu-seznam[b-jp5fsmsgt9]  .menu-odkaz.je-aktivni {
    color: var(--barva-primarni);
    font-weight: var(--vaha-silna);
    background: var(--podklad-tint);
}

.menu-seznam[b-jp5fsmsgt9]  .menu-odkaz.je-aktivni::after {
    content: '';
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .32rem;
    height: 2px;
    border-radius: 2px;
    background: var(--akcent-tmavy);
}

/* === Podmenu „Co nabízíme" ===
   Otevírá ho hover i :focus-within, takže funguje bez JS i z klávesnice.
   Třídu .je-otevrene nasazuje js/web.js po klepnutí (dotyk na širokém displeji). */
.menu-rozbal[b-jp5fsmsgt9] {
    position: relative;
}

.podmenu[b-jp5fsmsgt9] {
    position: absolute;
    top: calc(100% - .1rem);
    left: 0;
    min-width: 270px;
    list-style: none;
    margin: 0;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--linka);
    border-radius: var(--radius-s);
    box-shadow: var(--stin-l);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Hover jen tam, kde je opravdový kurzor – na dotyku by podmenu „zamrzlo" otevřené. */
@media (hover: hover) and (pointer: fine) {
    .menu-rozbal:hover .podmenu[b-jp5fsmsgt9] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.menu-rozbal:focus-within .podmenu[b-jp5fsmsgt9],
.menu-rozbal.je-otevrene .podmenu[b-jp5fsmsgt9] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-rozbal-tlacitko .menu-sipka[b-jp5fsmsgt9] {
    transition: transform .2s ease;
}

.menu-rozbal.je-otevrene .menu-rozbal-tlacitko .menu-sipka[b-jp5fsmsgt9],
.menu-rozbal:focus-within .menu-rozbal-tlacitko .menu-sipka[b-jp5fsmsgt9] {
    transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
    .menu-rozbal:hover .menu-rozbal-tlacitko .menu-sipka[b-jp5fsmsgt9] {
        transform: rotate(180deg);
    }
}

.podmenu-odkaz[b-jp5fsmsgt9] {
    display: flex;
    align-items: center;
    min-height: var(--cil-dotyk);
    padding: .6rem .75rem;
    border-radius: 8px;
    font-size: .94rem;
    color: var(--barva-menu);
    text-decoration: none;
    transition: background var(--prechod-rychly), color var(--prechod-rychly);
}

.podmenu-odkaz:hover[b-jp5fsmsgt9],
.podmenu-odkaz:focus-visible[b-jp5fsmsgt9] {
    background: var(--podklad-tint);
    color: var(--barva-primarni);
}

.podmenu-odkaz.je-aktivni[b-jp5fsmsgt9] {
    background: var(--podklad-tint);
    color: var(--barva-primarni);
    font-weight: var(--vaha-silna);
}

/* === Pravá část: telefon + CTA === */
.menu-akce[b-jp5fsmsgt9] {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex: none;
}

.telefon-odkaz[b-jp5fsmsgt9] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--cil-dotyk);
    font-weight: var(--vaha-nadpis);
    font-size: .95rem;
    color: var(--barva-primarni);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--prechod-rychly);
}

.telefon-odkaz:hover[b-jp5fsmsgt9] {
    color: var(--barva-menu);
    text-decoration: underline;
}

/* === Telefon přímo v liště (jen mobil) ===
   Zavolat je nejsilnější akce, takže na úzkých displejích nesmí být schovaná
   až v rozbaleném menu. Plocha 44 × 44 px = pohodlný cíl pro palec.
   Sklo lišty zůstává nedotčené – tlačítko má jen obrys, žádné vlastní pozadí. */
.telefon-lista[b-jp5fsmsgt9] {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--cil-dotyk);
    height: var(--cil-dotyk);
    margin-left: auto;
    color: var(--barva-primarni);
    border: 1px solid var(--linka);
    border-radius: 10px;
    text-decoration: none;
    transition: background var(--prechod-rychly), border-color var(--prechod-rychly), color var(--prechod-rychly);
}

@media (hover: hover) and (pointer: fine) {
    .telefon-lista:hover[b-jp5fsmsgt9] {
        background: var(--podklad-tint);
        border-color: var(--linka-vyrazna);
    }
}

/* === Hamburger === */
.hamburger[b-jp5fsmsgt9] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: var(--cil-dotyk);
    height: var(--cil-dotyk);
    margin-left: auto;
    padding: 0 10px;
    background: none;
    border: 1px solid var(--linka);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--prechod-rychly), border-color var(--prechod-rychly);
}

@media (hover: hover) and (pointer: fine) {
    .hamburger:hover[b-jp5fsmsgt9] {
        background: var(--podklad-tint);
        border-color: var(--linka-vyrazna);
    }
}

.hamburger span[b-jp5fsmsgt9] {
    display: block;
    height: 2px;
    background: var(--barva-primarni);
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1)[b-jp5fsmsgt9] {
    transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2)[b-jp5fsmsgt9] {
    opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3)[b-jp5fsmsgt9] {
    transform: translateY(-7px) rotate(-45deg);
}

/* === Mobil === */
@media (max-width: 1080px) {
    .telefon-lista[b-jp5fsmsgt9] {
        display: inline-flex;
    }

    .hamburger[b-jp5fsmsgt9] {
        display: flex;
        /* Telefon vedle hamburgeru – odsazení místo dalšího `margin-left: auto`. */
        margin-left: .5rem;
    }

    .menu[b-jp5fsmsgt9] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem 1.25rem 1.5rem;
        /* POZOR: rozbalený panel schválně NENÍ sklo.
           .menu je potomek .hlavicka a ta má backdrop-filter – tím se stává
           „backdrop rootem", takže vnořený backdrop-filter nemá co rozmazávat
           (filtr se sice spočítá, ale vidí prázdno). Zůstala by jen průsvitnost
           a přes menu by ostře prosvítal obsah stránky – nečitelné.
           Sklo tu tedy nechceme, panel je plný; skleněná zůstává lišta nad ním. */
        background: var(--podklad);
        box-shadow: var(--stin-l);
        /* Panel sahá až ke spodnímu okraji okna.
           Dřív měl jen max-height a končil tam, kde došly položky – mezi jeho
           spodní hranou a spodní mobilní lištou pak prosvítal ~60px pruh hero
           fotky, což vypadalo jako nedodělek. Výška se počítá z aktuální výšky
           lišty (--vyska-listy-ted), takže sedí i po jejím zmenšení.
           Spodní mobilní lištu panel překrývá (je v .hlavicka, tedy z-index 100
           proti 90), takže se pro ni místo nerezervuje – stačí odstup od hrany
           a bezpečná zóna. Když se položky nevejdou, panel se scrolluje
           (overflow-y: auto) a overscroll-behavior nepustí scroll do stránky. */
        height: calc(100dvh - var(--vyska-listy-ted));
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        display: none;
    }

    .menu.je-otevrene[b-jp5fsmsgt9] {
        display: flex;
        animation: rozbal-menu-b-jp5fsmsgt9 .22s ease;
    }

    @keyframes rozbal-menu-b-jp5fsmsgt9 {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
    }

    .menu-seznam[b-jp5fsmsgt9] {
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
    }

    .menu-seznam[b-jp5fsmsgt9]  .menu-odkaz {
        width: 100%;
        justify-content: space-between;
        padding: .85rem .6rem;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--linka);
        border-radius: 0;
    }

    .menu-seznam[b-jp5fsmsgt9]  .menu-odkaz.je-aktivni::after {
        left: .6rem;
        right: auto;
        width: 26px;
        bottom: .5rem;
    }

    /* V rozbaleném menu je podmenu obyčejný odsazený seznam se zlatou linkou. */
    .podmenu[b-jp5fsmsgt9] {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--akcent-tmavy);
        border-radius: 0;
        margin: .2rem 0 .5rem .6rem;
        padding: 0 0 0 .3rem;
        display: none;
    }

    .menu-rozbal.je-otevrene .podmenu[b-jp5fsmsgt9] {
        display: block;
    }

    /* Bez JavaScriptu se podmenu nemá jak rozbalit (tlačítko nic neudělá),
       proto je tam vidět natrvalo. Třídu ma-js nasazuje inline skript v App.razor. */
    html:not(.ma-js) .podmenu[b-jp5fsmsgt9] {
        display: block;
    }

    html:not(.ma-js) .menu-rozbal-tlacitko .menu-sipka[b-jp5fsmsgt9] {
        display: none;
    }

    /* Telefon + CTA sedí u spodní hrany panelu – prázdné místo pod položkami
       tak vypadá jako záměr (a palec je má na dosah), ne jako díra.
       margin-top: auto funguje i při přetečení: pak se blok jen posune nahoru. */
    .menu-akce[b-jp5fsmsgt9] {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        margin-top: auto;
        padding-top: 1.2rem;
    }

    .telefon-odkaz[b-jp5fsmsgt9] {
        justify-content: center;
        padding: .6rem;
        font-size: 1.1rem;
    }

    .menu-akce .tlacitko[b-jp5fsmsgt9] {
        justify-content: center;
    }
}

/* Pohyb v hlavičce (rozjezd menu, výjezd podmenu, zmenšení lišty) vypnout. */
@media (prefers-reduced-motion: reduce) {
    .hlavicka[b-jp5fsmsgt9],
    .hlavicka-vnitrek[b-jp5fsmsgt9],
    .znacka[b-jp5fsmsgt9],
    .podmenu[b-jp5fsmsgt9],
    .menu-rozbal-tlacitko .menu-sipka[b-jp5fsmsgt9] {
        transition: none;
    }

    .menu.je-otevrene[b-jp5fsmsgt9] {
        animation: none;
    }
}
/* /Components/Layout/Paticka.razor.rz.scp.css */
/* === Patička ===
   Tmavá navy plocha (stejná rodina jako .sekce-tmava), zlatá jen jako akcent –
   na navy má 7,7:1, takže je čitelná i pro ikony a drobný text. */
.paticka[b-rebnmhgk2k] {
    margin-top: auto;
    padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
    /* Tenká zlatá linka po horní hraně (první vrstva) na navy ploše (druhá). */
    background:
        linear-gradient(90deg, var(--akcent), transparent 62%) top left / 100% 3px no-repeat,
        linear-gradient(165deg, var(--barva-primarni) 0%, var(--barva-tmava) 65%);
    color: var(--text-na-tmavem);
    font-size: .95rem;
}

.paticka-mrizka[b-rebnmhgk2k] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.1fr;
    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.paticka-znacka picture[b-rebnmhgk2k] {
    display: block;
    height: 56px;
    margin-bottom: 1.2rem;
}

.paticka-znacka img[b-rebnmhgk2k] {
    height: 100%;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    object-position: left center;
}

.paticka-znacka p[b-rebnmhgk2k] {
    margin: 0;
    max-width: 42ch;
    line-height: 1.7;
    color: var(--text-na-tmavem-tlumeny);
}

.paticka-nadpis[b-rebnmhgk2k] {
    margin: 0 0 .9rem;
    font-size: 1rem;
    font-weight: var(--vaha-silna);
    letter-spacing: .02em;
    color: #fff;
}

.paticka-seznam[b-rebnmhgk2k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Mezera je menší, protože samotné odkazy mají dotykovou plochu 44 px –
       jinak by patička zbytečně narostla. */
    gap: .25rem;
}

.paticka-seznam li[b-rebnmhgk2k] {
    display: flex;
    align-items: center;
    gap: .6rem;
    line-height: 1.5;
}

/* Dotykové cíle: odkazy v patičce měly na výšku jen ~23 px, což se na mobilu
   trefuje mizerně. Zvětšujeme PLOCHU (výplň + min-height), ne písmo. */
.paticka-seznam a[b-rebnmhgk2k] {
    display: inline-flex;
    align-items: center;
    min-height: var(--cil-dotyk);
    padding-block: .35rem;
}

/* ::deep – ikona je vykreslená v podřízené komponentě Ikona.razor */
.paticka-seznam[b-rebnmhgk2k]  .ikona {
    flex: none;
    color: var(--akcent);
}

.paticka a[b-rebnmhgk2k] {
    color: var(--text-na-tmavem);
    text-decoration: none;
    transition: color var(--prechod-rychly);
}

.paticka a:hover[b-rebnmhgk2k],
.paticka a:focus-visible[b-rebnmhgk2k] {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--akcent);
    text-decoration-thickness: 2px;
    text-underline-offset: .25em;
}

.paticka-odkazy[b-rebnmhgk2k] {
    gap: 0;
}

.paticka-cta[b-rebnmhgk2k] {
    margin-top: 1.5rem;
}

/* Pravidlo `.paticka a` výš přebíjí barvu popisku ve zlatém tlačítku
   (specificita 0,1,1 vs 0,1,0) – text by zůstal skoro bílý na zlaté a spadl
   pod 2:1. Vracíme navy popisek (7,7:1). */
.paticka a.tlacitko-akcent[b-rebnmhgk2k],
.paticka a.tlacitko-akcent:hover[b-rebnmhgk2k],
.paticka a.tlacitko-akcent:focus-visible[b-rebnmhgk2k] {
    color: var(--barva-menu);
    text-decoration: none;
}

.paticka-spodek[b-rebnmhgk2k] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .85rem;
    color: var(--text-na-tmavem-tlumeny);
}

.paticka-spodek p[b-rebnmhgk2k] {
    margin: 0;
}

/* I právní odkazy jsou dotykové cíle – text má jen 16 px, plochu doděláme výplní. */
.paticka-spodek a[b-rebnmhgk2k] {
    display: inline-flex;
    align-items: center;
    min-height: var(--cil-dotyk);
}

/* Právní odkazy vedle sebe, na mobilu pod sebou. Mezera je velkorysá schválně:
   dva dotykové cíle vedle sebe se jinak pletou. */
.paticka-pravni[b-rebnmhgk2k] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.6rem;
}

@media (max-width: 900px) {
    .paticka-mrizka[b-rebnmhgk2k] {
        grid-template-columns: 1fr 1fr;
    }

    .paticka-znacka[b-rebnmhgk2k] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .paticka-mrizka[b-rebnmhgk2k] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Chyba.razor.rz.scp.css */
/* Chybová stránka – vystředěný text a tlačítka, nic navíc. */
.chyba[b-m36ngolby8] {
    text-align: center;
}

.chyba .tlacitka[b-m36ngolby8] {
    justify-content: center;
}
/* /Components/Pages/Domu.razor.rz.scp.css */
/* =====================================================================
   Úvodní stránka – jen to, co je specifické pro ni.
   Vše ostatní (sekce, karty, mřížky, tlačítka) je v globálním app.css.
   Barvy VÝHRADNĚ přes tokeny – zlatá jen na tmavém podkladu a v ozdobných linkách.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Hero s fotkou
   .hero už je position: relative + overflow: hidden, takže fotka i překryv
   drží uvnitř. Fotka je LCP prvek: v HTML má width/height, tady dostane
   rozměr plochy a object-fit, aby se nedeformovala a nic neposunula.
   --------------------------------------------------------------------- */
.hero-uvod[b-t5ycphqm4i] {
    padding: clamp(4rem, 9vw, 7.5rem) 0;
}

.hero-foto[b-t5ycphqm4i] {
    position: absolute;
    inset: 0;
    /* Přebíjí globální img { max-width: 100%; height: auto } – tady chceme
       vyplnit plochu, ne zachovat vlastní výšku. */
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /* Rodina je v dolní třetině fotky – posun nahoru ji nechá v záběru
       i na širokých displejích, kde se hero ořízne shora i zdola. */
    object-position: center 38%;
}

/* Překryv nese kontrast. Na úzkém displeji text přetéká přes celou šířku,
   proto je překryv hustý svisle; na širokém stačí hustý zleva a vpravo
   se fotka odkryje. Nejsvětlejší pixel pod textem dá bílému písmu >6:1. */
.hero-uvod[b-t5ycphqm4i]::before {
    content: '';
    position: absolute;
    inset: 0;
    /* MUSÍ mít vlastní z-index. Fotka i tenhle pseudoelement jsou absolutní
       ve stejném kontextu, takže bez něj rozhoduje pořadí v DOM – a fotka,
       která jde v markupu až za ním, překryv přemalovala. Text pak ležel
       na holé fotce (naměřeno 1,4:1 místo slíbených 6:1). */
    z-index: 1;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--barva-tmava) 90%, transparent) 0%,
        color-mix(in srgb, var(--barva-tmava) 84%, transparent) 55%,
        color-mix(in srgb, var(--barva-tmava) 90%, transparent) 100%);
}

@media (min-width: 861px) {
    .hero-uvod[b-t5ycphqm4i]::before {
        background: linear-gradient(
            95deg,
            color-mix(in srgb, var(--barva-tmava) 94%, transparent) 0%,
            color-mix(in srgb, var(--barva-tmava) 88%, transparent) 40%,
            color-mix(in srgb, var(--barva-tmava) 74%, transparent) 62%,
            color-mix(in srgb, var(--barva-tmava) 40%, transparent) 100%);
    }
}

/* Doplňková věta pod perexem – menší, ale pořád plně čitelná
   (tlumená bílá by na překryvu spadla pod 4,5:1). */
.hero-doplnek[b-t5ycphqm4i] {
    max-width: 42rem;
    margin-bottom: 0;
    font-size: .98rem;
    color: var(--text-na-tmavem);
}

/* ---------------------------------------------------------------------
   2. Karty služeb
   Klikací je celá karta (rozšířený odkaz), ať se na dotyku netrefuje
   do dvouřádkového popisku. Vlastní <a> zůstává kvůli klávesnici a čtečkám.
   --------------------------------------------------------------------- */
.sluzba-karta[b-t5ycphqm4i] {
    position: relative;
}

.sluzba-karta .karta-odkaz[b-t5ycphqm4i]::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Šestá dlaždice „Nevíte, co potřebujete?" – tmavá karta, aby pátá služba
   nezůstala v mřížce sama s dírou vedle sebe.
   Barvy textu, nadpisu, ikony i odkazu dědí od utility .sekce-tmava, která je
   na stejném prvku (stejný trik jako u panelu VyzvaCta). Přebít se musí jen
   plocha a okraj: .karta v app.css stojí NÍŽ než .sekce-tmava, takže by při
   shodné specificitě vyhrálo bílé pozadí. */
.karta-vyzva[b-t5ycphqm4i] {
    background: linear-gradient(155deg, var(--barva-primarni), var(--barva-tmava) 72%);
    border-color: transparent;
    box-shadow: var(--stin-m);
}

@media (hover: hover) and (pointer: fine) {
    .karta-vyzva:hover[b-t5ycphqm4i] {
        /* Světlá linka z .karta:hover by na navy ploše svítila jako rámeček –
           zvedáme jen elevaci a zlatý okraj v barvě akcentu. */
        border-color: var(--akcent-jemny);
        box-shadow: var(--stin-l);
    }
}

.karta-vyzva:focus-within[b-t5ycphqm4i] {
    border-color: var(--akcent-jemny);
    box-shadow: var(--stin-l);
}

/* Šipka za popiskem – čistý tvar z clip-path, žádné další SVG ke stažení. */
.karta-odkaz .sipka[b-t5ycphqm4i] {
    flex: none;
    width: 18px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 38%, 60% 38%, 60% 0, 100% 50%, 60% 100%, 60% 62%, 0 62%);
    transition: transform var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .sluzba-karta:hover .karta-odkaz .sipka[b-t5ycphqm4i] {
        transform: translateX(4px);
    }
}

/* ---------------------------------------------------------------------
   3. Blok „osobní přístup"
   V DOM je text první; fotka se doleva přesouvá jen vizuálně, a to až tam,
   kde jsou dva sloupce (pod 861 px .dva-sloupce stejně padá do jednoho).
   --------------------------------------------------------------------- */
@media (min-width: 861px) {
    .blok-pristup .pristup-foto[b-t5ycphqm4i] {
        order: -1;
    }
}

.pristup-foto[b-t5ycphqm4i] {
    margin: 0;
}

/* Na úzkém displeji je portrét na výšku přes celou šířku moc dominantní –
   zkrotíme ho a vystředíme (tomu odpovídá i poslední hodnota v sizes). */
@media (max-width: 860px) {
    .pristup-foto[b-t5ycphqm4i] {
        max-width: 420px;
        margin-inline: auto;
    }
}

/* Citát firmy: zlatá svislá linka je dekorace, text zůstává navy. */
.citat[b-t5ycphqm4i] {
    margin: 1.8rem 0;
    padding-left: 1.2rem;
    border-left: 3px solid var(--akcent);
}

.citat blockquote[b-t5ycphqm4i] {
    margin: 0 0 .5rem;
    font-size: var(--text-perex);
    line-height: 1.5;
    font-style: italic;
    color: var(--barva-primarni);
}

.citat figcaption[b-t5ycphqm4i] {
    font-size: .85rem;
    font-weight: var(--vaha-silna);
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Ztmavená zlatá – plná zlatá by na krémovém podkladu měla jen 1,9:1. */
    color: var(--akcent-tmavy);
}

/* ---------------------------------------------------------------------
   4. Reference
   --------------------------------------------------------------------- */
.reference[b-t5ycphqm4i] {
    margin: 0;
}

/* Ozdobná zlatá linka místo velké uvozovky – uvozovky už jsou v textu. */
.reference[b-t5ycphqm4i]::before {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: 1.1rem;
    border-radius: 2px;
    background: var(--akcent);
}

.reference blockquote[b-t5ycphqm4i] {
    margin: 0 0 1.3rem;
    color: var(--text);
}

.reference figcaption[b-t5ycphqm4i] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .55rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--linka);
}

.reference figcaption span[b-t5ycphqm4i] {
    font-size: var(--text-drobny);
    color: var(--text-tlumeny);
}

/* ---------------------------------------------------------------------
   5. Omezený pohyb – barvy se měnit smějí, posuny ne.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .karta-odkaz .sipka[b-t5ycphqm4i] {
        transition: none;
    }

    .sluzba-karta:hover .karta-odkaz .sipka[b-t5ycphqm4i] {
        transform: none;
    }
}
/* /Components/Pages/Hypoteky.razor.rz.scp.css */
/* =====================================================================
   Financování bydlení (hypotéky) – specifika stránky.
   Sekce, karty, mřížky, tlačítka i dvousloupcový blok jsou v app.css.
   ===================================================================== */

/* Fotka v dvousloupcovém bloku. Rozměry drží width/height v HTML (CLS 0),
   tvar a elevaci dává .dva-sloupce img z app.css. */
.foto-bloku[b-xra44dzqdd] {
    margin: 0;
}

/* Karta „proč to řešit s námi": zlatá linka nad nadpisem je dekorace.
   Jako text by zlatá na světlém podkladu měla jen 1,9:1 – tam se nesmí. */
.duvod h3[b-xra44dzqdd]::before {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: .9rem;
    border-radius: 2px;
    background: var(--akcent);
}

.duvod p:last-child[b-xra44dzqdd] {
    margin-bottom: 0;
}

/* Křížové odkazy: klikací je celá karta (rozšířený odkaz), vlastní <a>
   zůstává kvůli klávesnici a čtečkám. */
.sluzba-karta[b-xra44dzqdd] {
    position: relative;
}

.sluzba-karta .karta-odkaz[b-xra44dzqdd]::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Šipka za popiskem – tvar z clip-path, žádné další SVG ke stažení. */
.karta-odkaz .sipka[b-xra44dzqdd] {
    flex: none;
    width: 18px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 38%, 60% 38%, 60% 0, 100% 50%, 60% 100%, 60% 62%, 0 62%);
    transition: transform var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .sluzba-karta:hover .karta-odkaz .sipka[b-xra44dzqdd] {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .karta-odkaz .sipka[b-xra44dzqdd] {
        transition: none;
    }

    .sluzba-karta:hover .karta-odkaz .sipka[b-xra44dzqdd] {
        transform: none;
    }
}
/* /Components/Pages/Kontakt.razor.rz.scp.css */
.kontakty-mrizka[b-awm67basc1] {
    margin-top: 1rem;
}

/* Věta pod dlaždicemi – vysvětluje, co jsme zač (nezávislý zprostředkovatel). */
.kontakty-poznamka[b-awm67basc1] {
    margin: clamp(1.4rem, 3vw, 2rem) 0 0;
    max-width: 60ch;
    color: var(--barva-text-tlumeny, #55606f);
    font-size: .96rem;
}
/* /Components/Pages/Nenalezeno.razor.rz.scp.css */
/* Chybová stránka 404 – vystředěná, s rozcestím zpátky do webu.
   Barvy jen přes tokeny z app.css – zděděné aliasy (--barva-*) tahle stránka
   už nepoužívá, jede rovnou na jména z designového systému. */
.nenalezeno[b-n4vvlvpg0h] {
    text-align: center;
}

.nenalezeno .tlacitka[b-n4vvlvpg0h] {
    justify-content: center;
}

.nenalezeno-vodic[b-n4vvlvpg0h] {
    margin: clamp(2rem, 4vw, 2.8rem) 0 1rem;
    font-size: .95rem;
    color: var(--text-tlumeny);
}

/* Rychlé odkazy jako pilulky – dotykový cíl 44 px dělá výplň, ne velikost písma. */
.rychle-odkazy[b-n4vvlvpg0h] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rychle-odkazy a[b-n4vvlvpg0h] {
    display: inline-flex;
    align-items: center;
    min-height: var(--cil-dotyk);
    padding: .35rem .95rem;
    border: 1px solid var(--linka);
    border-radius: var(--radius-pilulka);
    background: var(--podklad);
    color: var(--barva-primarni);
    font-size: .92rem;
    font-weight: var(--vaha-silna);
    text-decoration: none;
    transition: border-color var(--prechod), box-shadow var(--prechod),
                transform var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .rychle-odkazy a:hover[b-n4vvlvpg0h] {
        transform: translateY(-2px);
        border-color: var(--akcent);
        box-shadow: var(--stin-s);
    }
}

.rychle-odkazy a:active[b-n4vvlvpg0h] {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .rychle-odkazy a[b-n4vvlvpg0h] {
        transition: none;
    }

    .rychle-odkazy a:hover[b-n4vvlvpg0h],
    .rychle-odkazy a:active[b-n4vvlvpg0h] {
        transform: none;
    }
}
/* /Components/Pages/Odeslano.razor.rz.scp.css */
/* Poděkování po odeslání poptávky – klidná stránka, jediná akce je telefon.
   Barvy jen přes tokeny z app.css (fallback = firemní navy/zlatá). */
.odeslano-ikona[b-ib2b5bmj20] {
    display: inline-grid;
    place-items: center;
    margin-bottom: 1rem;
}

.odeslano-kroky[b-ib2b5bmj20] {
    margin-top: 2.5rem;
}

.odeslano-kroky h2[b-ib2b5bmj20] {
    margin: .4rem 0 .4rem;
    font-size: 1.1rem;
}

.odeslano-kroky p[b-ib2b5bmj20] {
    margin: 0;
    color: var(--barva-text-tlumeny, #55606f);
    font-size: .96rem;
}

.odeslano-vyzva[b-ib2b5bmj20] {
    margin-top: 2.5rem;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    background: var(--barva-primarni-tint, #eef1f7);
    border: 1px solid var(--barva-linka-vyrazna, #c9cfdd);
    border-radius: var(--radius-l, 24px);
    text-align: center;
}

.odeslano-vyzva .perex[b-ib2b5bmj20] {
    margin-bottom: 1.2rem;
}

.odeslano-vyzva .tlacitka[b-ib2b5bmj20] {
    justify-content: center;
}

.odeslano-poznamka[b-ib2b5bmj20] {
    margin: 1rem 0 0;
    font-size: .88rem;
    color: var(--barva-text-tlumeny, #55606f);
}

.odeslano-odkazy[b-ib2b5bmj20] {
    margin-top: 2.5rem;
    text-align: center;
    color: var(--barva-text-tlumeny, #55606f);
}

.odeslano-seznam[b-ib2b5bmj20] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Dotykový cíl ≥ 44 px dělá výplň, ne velikost písma. */
.odeslano-seznam a[b-ib2b5bmj20] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .35rem .9rem;
    border: 1px solid var(--barva-linka, #dfe3ea);
    border-radius: 999px;
    background: var(--barva-podklad, #fff);
    font-size: .92rem;
    text-decoration: none;
    transition: border-color var(--prechod, .22s ease), box-shadow var(--prechod, .22s ease);
}

@media (hover: hover) and (pointer: fine) {
    .odeslano-seznam a:hover[b-ib2b5bmj20] {
        border-color: var(--akcent, #D0B66F);
        box-shadow: var(--stin-s, 0 1px 2px rgba(26, 37, 64, .06), 0 3px 8px rgba(26, 37, 64, .06));
    }
}

@media (prefers-reduced-motion: reduce) {
    .odeslano-seznam a[b-ib2b5bmj20] {
        transition: none;
    }
}
/* /Components/Pages/ONas.razor.rz.scp.css */
/* =====================================================================
   O nás – jen specifika stránky, zbytek je v globálním app.css.
   ===================================================================== */

/* Druhý, drobnější odstavec v heru. Tlumená barva má na krémovém podkladu
   6,3:1, takže se smí zmenšit, aniž by se ztratila. */
.hero-doplnek[b-nqtisofatv] {
    max-width: 42rem;
    margin-bottom: 0;
    font-size: .99rem;
    color: var(--text-tlumeny);
}

/* Široký fotopás nad hodnotami. Rozměry drží width/height v HTML,
   tady jen tvar a elevace. */
.foto-pas[b-nqtisofatv] {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.foto-pas img[b-nqtisofatv] {
    display: block;
    width: 100%;
    border-radius: var(--radius-l);
    box-shadow: var(--stin-l);
}

/* Karta hodnoty – zlatá linka nad nadpisem je dekorace, ne nositel informace
   (na světlém podkladu se zlatá jako text použít nesmí). */
.hodnota h3[b-nqtisofatv]::before {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: .9rem;
    border-radius: 2px;
    background: var(--akcent);
}

.hodnota p:last-child[b-nqtisofatv] {
    margin-bottom: 0;
}

/* Seznam oblastí je vzdušnější než běžný výčet – jsou to tři hlavní pilíře. */
.seznam-oblasti[b-nqtisofatv] {
    max-width: 62ch;
    gap: .9rem;
    font-size: var(--text-perex);
}

.oblasti-zaver[b-nqtisofatv] {
    max-width: 62ch;
    margin-top: 1.6rem;
    color: var(--text-tlumeny);
}

/* Blok „proč si vybrat nás": v DOM je text první, fotka se doleva
   přesouvá jen vizuálně a jen tam, kde jsou opravdu dva sloupce. */
@media (min-width: 861px) {
    .blok-pristup .pristup-foto[b-nqtisofatv] {
        order: -1;
    }
}

.pristup-foto[b-nqtisofatv] {
    margin: 0;
}

@media (max-width: 860px) {
    .pristup-foto[b-nqtisofatv] {
        max-width: 420px;
        margin-inline: auto;
    }
}
/* /Components/Pages/PojisteniMajetku.razor.rz.scp.css */
/* =====================================================================
   Pojištění majetku – specifika stránky.
   Sekce, karty, mřížky, tlačítka i dvousloupcový blok jsou v app.css.
   ===================================================================== */

/* Fotka v dvousloupcovém bloku. Rozměry drží width/height v HTML (CLS 0),
   tvar a elevaci dává .dva-sloupce img z app.css. */
.foto-bloku[b-m3gnycz1ik] {
    margin: 0;
}

/* Druhý blok (chalupa) navazuje na první – potřebuje mezeru, ne novou sekci. */
.blok-chalupa[b-m3gnycz1ik] {
    margin-top: clamp(3rem, 6vw, 5rem);
}

/* Fotky se v obou blocích střídají: první vpravo, druhá vlevo.
   V DOM je text vždy první, přesun je čistě vizuální a jen tam,
   kde jsou opravdu dva sloupce (pod 861 px padá .dva-sloupce do jednoho). */
@media (min-width: 861px) {
    .blok-chalupa .foto-bloku[b-m3gnycz1ik] {
        order: -1;
    }
}

/* Karta „proč to řešit s námi": zlatá linka nad nadpisem je dekorace.
   Jako text by zlatá na světlém podkladu měla jen 1,9:1 – tam se nesmí. */
.duvod h3[b-m3gnycz1ik]::before {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: .9rem;
    border-radius: 2px;
    background: var(--akcent);
}

.duvod p:last-child[b-m3gnycz1ik] {
    margin-bottom: 0;
}

/* Křížové odkazy: klikací je celá karta (rozšířený odkaz), vlastní <a>
   zůstává kvůli klávesnici a čtečkám. */
.sluzba-karta[b-m3gnycz1ik] {
    position: relative;
}

.sluzba-karta .karta-odkaz[b-m3gnycz1ik]::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Šipka za popiskem – tvar z clip-path, žádné další SVG ke stažení. */
.karta-odkaz .sipka[b-m3gnycz1ik] {
    flex: none;
    width: 18px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 38%, 60% 38%, 60% 0, 100% 50%, 60% 100%, 60% 62%, 0 62%);
    transition: transform var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .sluzba-karta:hover .karta-odkaz .sipka[b-m3gnycz1ik] {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .karta-odkaz .sipka[b-m3gnycz1ik] {
        transition: none;
    }

    .sluzba-karta:hover .karta-odkaz .sipka[b-m3gnycz1ik] {
        transform: none;
    }
}
/* /Components/Pages/PojisteniVozidel.razor.rz.scp.css */
/* =====================================================================
   Pojištění vozidel – specifika stránky.
   Stránka nemá fotku, hero je proto typografický: navy plocha (.hero-tmavy
   z app.css), zlatý rámeček s ikonou a velký vodoznak v rohu. Je to vědomý
   designový prvek, ne díra po chybějícím obrázku.
   ===================================================================== */

.hero-typo[b-9butz63c2n] {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

/* Drobečky na navy: tlumená bílá (7,3:1). Barvy z app.css jsou počítané
   na světlý podklad a tady by zanikly. */
.hero-typo .drobecky[b-9butz63c2n],
.hero-typo .drobecky a[b-9butz63c2n] {
    color: var(--text-na-tmavem-tlumeny);
}

.hero-typo .drobecky li[b-9butz63c2n]::after {
    color: var(--akcent-jemny);
}

@media (hover: hover) and (pointer: fine) {
    .hero-typo .drobecky a:hover[b-9butz63c2n] {
        color: var(--podklad);
    }
}

/* Ikona v rámečku nad nadpisem – zlatá na navy má 7,7:1, takže je čitelná
   i jako dekorace. */
.hero-znak[b-9butz63c2n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 1.5rem;
    border: 1.5px solid var(--akcent-jemny);
    border-radius: var(--radius-m);
    background: color-mix(in srgb, var(--podklad) 8%, transparent);
    color: var(--akcent);
}

/* Vodoznak v rohu. .hero má overflow: hidden, takže přesah čistě ořízne.
   Na úzkém displeji se nekreslí – tam by lezl pod text. */
.hero-vodoznak[b-9butz63c2n] {
    position: absolute;
    right: -3.5rem;
    bottom: -5rem;
    display: none;
    color: var(--akcent);
    opacity: .1;
    pointer-events: none;
}

@media (min-width: 900px) {
    .hero-vodoznak[b-9butz63c2n] {
        display: block;
    }
}

/* Karta „proč to řešit s námi": zlatá linka nad nadpisem je dekorace.
   Jako text by zlatá na světlém podkladu měla jen 1,9:1 – tam se nesmí. */
.duvod h3[b-9butz63c2n]::before {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: .9rem;
    border-radius: 2px;
    background: var(--akcent);
}

.duvod p:last-child[b-9butz63c2n] {
    margin-bottom: 0;
}

/* Křížové odkazy: klikací je celá karta (rozšířený odkaz), vlastní <a>
   zůstává kvůli klávesnici a čtečkám. */
.sluzba-karta[b-9butz63c2n] {
    position: relative;
}

.sluzba-karta .karta-odkaz[b-9butz63c2n]::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Šipka za popiskem – tvar z clip-path, žádné další SVG ke stažení. */
.karta-odkaz .sipka[b-9butz63c2n] {
    flex: none;
    width: 18px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 38%, 60% 38%, 60% 0, 100% 50%, 60% 100%, 60% 62%, 0 62%);
    transition: transform var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .sluzba-karta:hover .karta-odkaz .sipka[b-9butz63c2n] {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .karta-odkaz .sipka[b-9butz63c2n] {
        transition: none;
    }

    .sluzba-karta:hover .karta-odkaz .sipka[b-9butz63c2n] {
        transform: none;
    }
}
/* /Components/Pages/ProPodnikatele.razor.rz.scp.css */
/* =====================================================================
   Pojištění pro podnikatele – specifika stránky.
   Stránka nemá fotku, hero je proto typografický: navy plocha (.hero-tmavy
   z app.css), zlatý rámeček s ikonou a velký vodoznak v rohu. Je to vědomý
   designový prvek, ne díra po chybějícím obrázku.
   ===================================================================== */

.hero-typo[b-r9d7fz2niy] {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

/* Drobečky na navy: tlumená bílá (7,3:1). Barvy z app.css jsou počítané
   na světlý podklad a tady by zanikly. */
.hero-typo .drobecky[b-r9d7fz2niy],
.hero-typo .drobecky a[b-r9d7fz2niy] {
    color: var(--text-na-tmavem-tlumeny);
}

.hero-typo .drobecky li[b-r9d7fz2niy]::after {
    color: var(--akcent-jemny);
}

@media (hover: hover) and (pointer: fine) {
    .hero-typo .drobecky a:hover[b-r9d7fz2niy] {
        color: var(--podklad);
    }
}

/* Ikona v rámečku nad nadpisem – zlatá na navy má 7,7:1, takže je čitelná
   i jako dekorace. */
.hero-znak[b-r9d7fz2niy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 1.5rem;
    border: 1.5px solid var(--akcent-jemny);
    border-radius: var(--radius-m);
    background: color-mix(in srgb, var(--podklad) 8%, transparent);
    color: var(--akcent);
}

/* Vodoznak v rohu. .hero má overflow: hidden, takže přesah čistě ořízne.
   Na úzkém displeji se nekreslí – tam by lezl pod text. */
.hero-vodoznak[b-r9d7fz2niy] {
    position: absolute;
    right: -3.5rem;
    bottom: -5rem;
    display: none;
    color: var(--akcent);
    opacity: .1;
    pointer-events: none;
}

@media (min-width: 900px) {
    .hero-vodoznak[b-r9d7fz2niy] {
        display: block;
    }
}

/* Karta „proč to řešit s námi": zlatá linka nad nadpisem je dekorace.
   Jako text by zlatá na světlém podkladu měla jen 1,9:1 – tam se nesmí. */
.duvod h3[b-r9d7fz2niy]::before {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: .9rem;
    border-radius: 2px;
    background: var(--akcent);
}

.duvod p:last-child[b-r9d7fz2niy] {
    margin-bottom: 0;
}

/* Křížové odkazy: klikací je celá karta (rozšířený odkaz), vlastní <a>
   zůstává kvůli klávesnici a čtečkám. */
.sluzba-karta[b-r9d7fz2niy] {
    position: relative;
}

.sluzba-karta .karta-odkaz[b-r9d7fz2niy]::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Šipka za popiskem – tvar z clip-path, žádné další SVG ke stažení. */
.karta-odkaz .sipka[b-r9d7fz2niy] {
    flex: none;
    width: 18px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 38%, 60% 38%, 60% 0, 100% 50%, 60% 100%, 60% 62%, 0 62%);
    transition: transform var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .sluzba-karta:hover .karta-odkaz .sipka[b-r9d7fz2niy] {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .karta-odkaz .sipka[b-r9d7fz2niy] {
        transition: none;
    }

    .sluzba-karta:hover .karta-odkaz .sipka[b-r9d7fz2niy] {
        transform: none;
    }
}
/* /Components/Pages/ZivotniPojisteni.razor.rz.scp.css */
/* =====================================================================
   Životní a úrazové pojištění – specifika stránky.
   Sekce, karty, mřížky, tlačítka i dvousloupcový blok jsou v app.css.
   ===================================================================== */

/* Fotka v dvousloupcovém bloku. Rozměry drží width/height v HTML (CLS 0),
   tvar a elevaci dává .dva-sloupce img z app.css. */
.foto-bloku[b-bdh54ubh3s] {
    margin: 0;
}

/* Karta „proč to řešit s námi": zlatá linka nad nadpisem je dekorace.
   Jako text by zlatá na světlém podkladu měla jen 1,9:1 – tam se nesmí. */
.duvod h3[b-bdh54ubh3s]::before {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: .9rem;
    border-radius: 2px;
    background: var(--akcent);
}

.duvod p:last-child[b-bdh54ubh3s] {
    margin-bottom: 0;
}

/* Křížové odkazy: klikací je celá karta (rozšířený odkaz), vlastní <a>
   zůstává kvůli klávesnici a čtečkám. */
.sluzba-karta[b-bdh54ubh3s] {
    position: relative;
}

.sluzba-karta .karta-odkaz[b-bdh54ubh3s]::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Šipka za popiskem – tvar z clip-path, žádné další SVG ke stažení. */
.karta-odkaz .sipka[b-bdh54ubh3s] {
    flex: none;
    width: 18px;
    height: 9px;
    background: currentColor;
    clip-path: polygon(0 38%, 60% 38%, 60% 0, 100% 50%, 60% 100%, 60% 62%, 0 62%);
    transition: transform var(--prechod);
}

@media (hover: hover) and (pointer: fine) {
    .sluzba-karta:hover .karta-odkaz .sipka[b-bdh54ubh3s] {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .karta-odkaz .sipka[b-bdh54ubh3s] {
        transition: none;
    }

    .sluzba-karta:hover .karta-odkaz .sipka[b-bdh54ubh3s] {
        transform: none;
    }
}
/* /Components/Shared/CookieSouhlas.razor.rz.scp.css */
/* === Lišta souhlasu s cookies ===
   Karta u spodního okraje, ne celoobrazovková zeď. Matné sklo jako hlavička
   a spodní mobilní lišta (rodinný standard 25. 7.).

   Žebříček z-indexů na webu: mobilní lišta 90 → hlavička 100 → SOUHLAS 150.
   Souhlas tedy leží nad obsahem i nad oběma lištami.

   Prvek je `position: fixed`, takže nic neposouvá – CLS 0 i při pozdním
   odkrytí skriptem. */
.souhlas[b-zuixbhqq9h] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: block;
    padding: .75rem;
    /* Gesta a zaoblené displeje: karta nesmí končit pod domovským proužkem. */
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    /* Pruh kolem karty nesmí brát kliknutí obsahu pod ním. */
    pointer-events: none;
}

/* Bez JavaScriptu (nebo s hotovou volbou) lišta prostě není. `hidden` by samo
   o sobě prohrálo s display: block výš. */
.souhlas[hidden][b-zuixbhqq9h] {
    display: none;
}

.souhlas-karta[b-zuixbhqq9h] {
    pointer-events: auto;
    max-width: var(--obal-sirka);
    margin: 0 auto;
    padding: clamp(1rem, 2.2vw, 1.4rem);
    border: 1px solid color-mix(in srgb, var(--linka) 70%, transparent);
    border-radius: var(--radius-m);
    background: color-mix(in srgb, var(--podklad) 88%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: var(--stin-l);
    /* Rozbalené nastavení na malém displeji (nebo na šířku) se musí vejít –
       zbytek se odscrolluje uvnitř karty, ne přes celou stránku. */
    max-height: min(80dvh, 640px);
    overflow-y: auto;
    animation: souhlas-najed-b-zuixbhqq9h .24s cubic-bezier(.4, 0, .2, 1);
}

/* Bez podpory backdrop-filter spadneme na plnou plochu (jako hlavička a lišta). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .souhlas-karta[b-zuixbhqq9h] {
        background: var(--podklad);
    }
}

@keyframes souhlas-najed-b-zuixbhqq9h {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.souhlas-uvod[b-zuixbhqq9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem clamp(1rem, 2.5vw, 2rem);
}

.souhlas-text[b-zuixbhqq9h] {
    flex: 1 1 22rem;
}

.souhlas-nadpis[b-zuixbhqq9h] {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
}

/* Nadpis se zaostřuje po otevření z patičky – rámeček kolem něj nechceme
   (stejné pravidlo jako u h1 v app.css). */
.souhlas-nadpis:focus[b-zuixbhqq9h],
.souhlas-nadpis:focus-visible[b-zuixbhqq9h] {
    outline: none;
}

.souhlas-text p[b-zuixbhqq9h] {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--text-tlumeny);
    max-width: 62ch;
}

.souhlas-tlacitka[b-zuixbhqq9h] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    flex: none;
}

.souhlas-tlacitka-panel[b-zuixbhqq9h] {
    margin-top: 1rem;
}

/* Dotykový cíl ≥ 44 px děláme plochou, ne písmem. */
.souhlas-tlacitko[b-zuixbhqq9h] {
    min-height: 46px;
    padding-inline: 1.3rem;
    font-size: .96rem;
}

.souhlas-tlacitko-vedlejsi[b-zuixbhqq9h] {
    /* Doplňková volba – menší váha než souhlas/odmítnutí, ale pořád plný cíl. */
    font-weight: var(--vaha-silna);
}

/* --- Rozbalené nastavení kategorií --- */
.souhlas-panel[b-zuixbhqq9h] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linka);
}

.souhlas-panel[hidden][b-zuixbhqq9h] {
    display: none;
}

.souhlas-volby[b-zuixbhqq9h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .7rem;
}

.souhlas-volba[b-zuixbhqq9h] {
    padding: .7rem .85rem;
    border: 1px solid var(--linka);
    border-radius: var(--radius-s);
    background: color-mix(in srgb, var(--podklad-sedy) 80%, transparent);
}

.souhlas-prepinac[b-zuixbhqq9h] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: var(--cil-dotyk);
    font-weight: var(--vaha-silna);
    color: var(--barva-primarni);
    cursor: pointer;
}

.souhlas-prepinac input[b-zuixbhqq9h] {
    flex: none;
    width: 20px;
    height: 20px;
    accent-color: var(--barva-primarni);
}

.souhlas-prepinac input:disabled[b-zuixbhqq9h] {
    cursor: default;
}

.souhlas-znacka[b-zuixbhqq9h] {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--podklad-tint);
    color: var(--barva-primarni);
    font-size: .74rem;
    font-weight: var(--vaha-silna);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.souhlas-popis[b-zuixbhqq9h] {
    margin: .15rem 0 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--text-tlumeny);
}

.souhlas-poznamka[b-zuixbhqq9h] {
    margin: .9rem 0 0;
    font-size: .88rem;
    color: var(--text-tlumeny);
}

/* Na mobilu jdou tlačítka pod text a roztáhnou se na celou šířku – palcem
   se do nich musí trefit napoprvé. Obě hlavní zůstávají stejně velká. */
@media (max-width: 640px) {
    .souhlas-uvod[b-zuixbhqq9h] {
        gap: .9rem;
    }

    .souhlas-tlacitka[b-zuixbhqq9h] {
        width: 100%;
    }

    .souhlas-tlacitko[b-zuixbhqq9h] {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .souhlas-karta[b-zuixbhqq9h] {
        animation: none;
    }
}
/* /Components/Shared/PoptavkaFormular.razor.rz.scp.css */
/* Poptávkový formulář – dvousloupcová sekce (text vlevo, karta s formulářem vpravo).
   Styly jsou u komponenty schválně: formulář může stát i na dalších stránkách
   a scoped CSS s ním jde všude s sebou.

   Barvy jen přes tokeny z app.css; fallback je firemní navy/zlatá, ať se nic
   nerozsype, kdyby token ještě nebyl vydaný. */
.poptavka-obal[b-yfndyzpvdi] {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    /* Kotva #poptavka nesmí skončit pod lepivou hlavičkou. */
    scroll-margin-top: calc(var(--vyska-hlavicky, 78px) + 24px);
}

.poptavka-uvod h2[b-yfndyzpvdi] {
    margin-bottom: .4em;
}

/* Telefon pod odrážkami – kdo nechce psát, má druhou cestu na dosah. */
.poptavka-telefon[b-yfndyzpvdi] {
    margin-top: 1.2rem;
    font-weight: 600;
}

.poptavka-telefon a[b-yfndyzpvdi] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* Dotykový cíl ≥ 44 px dělá výplň, ne velikost písma. */
    min-height: 44px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.poptavka-formular[b-yfndyzpvdi] {
    padding: clamp(1.4rem, 3vw, 2.4rem);
    background: var(--barva-podklad, #fff);
    border: 1px solid var(--barva-linka, #dfe3ea);
    border-radius: var(--radius-l, 24px);
    box-shadow: var(--stin-m, 0 2px 4px rgba(26, 37, 64, .06), 0 10px 22px rgba(26, 37, 64, .09));
}

.poptavka-odeslani[b-yfndyzpvdi] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    align-items: flex-start;
    margin-top: .3rem;
}

/* Souhlas se zpracováním osobních údajů – zaškrtávátko s textem vedle sebe. */
.poptavka-souhlas[b-yfndyzpvdi] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    /* Celý řádek je klikací popisek, takže i tady drží dotykový cíl 44 px. */
    min-height: 44px;
    padding: .3rem 0;
    font-size: .92rem;
    cursor: pointer;
}

/* Zaškrtávátko vykresluje InputCheckbox, tedy prvek BEZ scope atributu –
   bez ::deep by na něj scoped pravidlo vůbec nedopadlo. */
.poptavka-souhlas[b-yfndyzpvdi]  input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
    flex: none;
    accent-color: var(--barva-primarni, #1A2540);
    cursor: pointer;
}

@media (max-width: 900px) {
    .poptavka-obal[b-yfndyzpvdi] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/VyzvaCta.razor.rz.scp.css */
/* Světlý pás kolem panelu. Je teplý, ne bílý – ať výzva neskončí na stejné ploše
   jako obsah nad ní a zároveň se jasně oddělí od tmavé patičky pod ní. */
.vyzva[b-3mhn842lid] {
    background: var(--podklad-teply);
}

/* Panel = tmavá karta, ne celoplošný pruh. Barvy textu, nadpisů a tlačítek
   dědí od utility .sekce-tmava (je na stejném prvku), tady řešíme jen tvar,
   elevaci a podklad. */
.vyzva-panel[b-3mhn842lid] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.4rem, 3vw, 2.5rem);
    padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.5rem, 4vw, 3.4rem);
    border-radius: var(--radius-l);
    box-shadow: var(--stin-l);
    overflow: hidden;
    /* .sekce-tmava nastavuje pozadí zkratkou; vlastní barvu držíme napevno,
       ať text leží na tmavém i kdyby se přechod nevykreslil. */
    background-color: var(--barva-tmava);
}

/* Zlatá záře v rohu – jediná dekorace, žádná fotka a žádný další požadavek. */
.vyzva-panel[b-3mhn842lid]::after {
    content: '';
    position: absolute;
    top: -45%;
    right: -8%;
    width: min(50%, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(208, 182, 111, .18), transparent 68%);
    pointer-events: none;
}

.vyzva-text[b-3mhn842lid] {
    position: relative;
    z-index: 1;
    max-width: 46ch;
}

.vyzva-panel h2[b-3mhn842lid] {
    margin-bottom: .4em;
}

.vyzva-panel p[b-3mhn842lid] {
    margin: 0;
}

.vyzva-tlacitka[b-3mhn842lid] {
    position: relative;
    z-index: 1;
}

@media (max-width: 700px) {
    .vyzva-panel .tlacitko[b-3mhn842lid] {
        width: 100%;
    }
}