/* =====================================================================
   Doplňky ke koupené šabloně.

   Šablona (`/theme/app.css`) umí hlavičku, nabídku, patičku a mřížku.
   NEZNÁ naše obsahové prvky — perex, pásy, konfigurátor, poptávku, FAQ.
   Tenhle soubor je dodává a jinak do šablony nesahá.

   🔴 PRVNÍ PRAVIDLO JE TU NEJDŮLEŽITĚJŠÍ. Šablona schová celou stránku
   preloaderem a odkryje ji až JavaScriptem. Když JS nedoběhne — chyba,
   pomalá síť, vypnutý JS, čtečka, náhledový robot — zůstane BÍLÁ PLOCHA.
   Přesně to Oto viděl na svém snímku a myslel si, že se web nedopsal.
   Preloader se proto zobrazí, JEN když JavaScript prokazatelně běží.
   ===================================================================== */

.tlp-preloader { display: none; }
.js .tlp-preloader { display: block; }

/* Přeskočení na obsah pro toho, kdo chodí klávesnicí nebo čtečkou.
   Šablona to nemá. */
.preskocit {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .7rem 1.1rem;
    background: #fff;
    color: #1657cf;
    font-weight: 600;
}
.preskocit:focus { left: 0; }

/* Obsah stránky uvnitř šablony — šablona počítá s vlastní mřížkou,
   naše stránky píšou rovnou <h1>, <p>, <ul>. */
/* ⚠️ VYJMENOVANÉ prvky, ne `main#obsah > *`. Hvězdička brala i <section>
   ze šablony a stlačila celoplošné bloky do textového sloupce — hero
   pak byl 700 px široký uprostřed bílé plochy. Bloky šablony si šířku
   řídí samy. */
main#obsah > h1,
main#obsah > h2,
main#obsah > h3,
main#obsah > p,
main#obsah > ul,
main#obsah > ol,
main#obsah > table,
main#obsah > form,
main#obsah > figure {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

:root {
    --znacka: #1657cf;
    --znacka-tmava: #0f3f9c;
    --znacka-svetla: #e9f0fd;
    --text: #16181d;
    --text-tlumeny: #5b6470;
    --linka: #e4e7ec;
    --plocha: #f7f8fb;
    --bila: #fff;
    --tmava: #14161c;
    --varovani: #8a5a00;
    --varovani-plocha: #fff8e6;
    --sirka: 72rem;
    --sirka-textu: 44rem;
    --radius: 12px;
    --stin: 0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px rgba(20, 22, 28, .06);
}

/* Na krátkých stránkách (obchod, tržiště) patička nedosáhla na spodek okna
   a pod ní zbýval bílý pruh — vypadalo to, že se stránka nedopsala. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--bila);
}

.preskocit {
    position: absolute; left: -9999px;
    background: var(--znacka); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
}

.preskocit:focus { left: 0; top: 0; z-index: 100; }

main > h1,
main > h2, main > h3, main > p, main > ul, main > ol,
main > table, main > address, main > .duraz, main > .varovani,
main > .faq, main > .vstupy, main > .perex, main > .podnadpis {
    max-width: var(--sirka-textu);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.perex, .podnadpis {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-tlumeny);
    margin-bottom: 1.75rem;
}

.duraz {
    padding: 1.15rem 1.35rem;
    background: var(--znacka-svetla);
    border-left: 4px solid var(--znacka);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 1.5rem;
}

.varovani {
    padding: 1.15rem 1.35rem;
    background: var(--varovani-plocha);
    border-left: 4px solid var(--varovani);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--varovani);
    margin-bottom: 1.5rem;
}

/* --- rozcestník na úvodní --------------------------------------------- */

.vstupy {
    max-width: var(--sirka) !important;
    list-style: none;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.vstupy li {
    margin: 0;
    padding: 1.5rem;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    transition: transform .15s ease, box-shadow .15s ease;
}

.vstupy li:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(20,22,28,.07), 0 16px 40px rgba(20,22,28,.09); }

.vstupy a { font-size: 1.1rem; font-weight: 600; text-decoration: none; }

.vstupy a::after { content: " →"; color: var(--znacka); }

/* --- tabulka „co to umí a co ne" -------------------------------------- */

.meze {
    max-width: var(--sirka-textu);
    margin: 0 auto 1.75rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--stin);
}

.meze th, .meze td {
    text-align: left;
    vertical-align: top;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--linka);
}

.meze tr:last-child td { border-bottom: 0; }

.meze thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--text-tlumeny);
    background: var(--plocha);
}

.meze td:first-child { color: var(--text-tlumeny); width: 40%; }

/* --- nejčastější otázky v bloku šablony -------------------------------- */

/* 🔴 ODPOVĚDI SE VRACEJÍ DO TEXTOVÉHO SLOUPCE.
   Blok `pricing-wrap-layout1` ze šablony dává obsahu celou šířku
   kontejneru (1170 px). Nadpisu to sluší, ale odpovědi jsou souvislý text
   a při 1170 px se čtou špatně — zbytek stránky přitom stojí na 44rem.
   Změřeno v prohlížeči 6. 9. 2026 na /alarm: řádek odpovědi 1170 px proti
   704 px u odstavců o kus výš.
   ⚠️ Nadpis zůstává přes celou šířku SCHVÁLNĚ — to je ta věc, kterou blok
   ze šablony přináší. Zužuje se jen čtený text. */
.pricing-wrap-layout1 .content-holder {
    max-width: var(--sirka-textu);
    margin-left: auto;
    margin-right: auto;
}

/* --- nejčastější otázky ----------------------------------------------- */

.faq { margin-top: 3rem; }

.faq > h2 { margin-top: 0; }

.faq-polozka {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--linka);
}

.faq-polozka:last-child { border-bottom: 0; }

.faq-otazka { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 600; }

.faq-odpoved { margin: 0; color: var(--text-tlumeny); }

/* --- poptávkový formulář ---------------------------------------------- */

.poptavka {
    margin: 4rem auto 0;
    max-width: var(--sirka);
    padding: 2.25rem 1.25rem 3rem;
    background: var(--plocha);
    border-top: 1px solid var(--linka);
}

.poptavka > * { max-width: var(--sirka-textu); margin-left: auto; margin-right: auto; }

.poptavka h2 { margin-top: 0; }

.poptavka form { display: grid; gap: .85rem; }

.poptavka label { display: block; font-weight: 600; font-size: .95rem; }

.poptavka label span { font-weight: 400; color: var(--text-tlumeny); }

/* ⚠️ `margin: 0` by přebilo automatické okraje výš a odstavec by utekl
   o 200 px vlevo (změřil claude11-testovac). Nulují se proto jen svislé. */
.poptavka p { margin-top: 0; margin-bottom: 0; }

.poptavka input[type="text"], .poptavka input[type="email"],
.poptavka input:not([type]), .poptavka select, .poptavka textarea {
    width: 100%;
    margin-top: .3rem;
    padding: .65rem .8rem;
    font: inherit;
    color: inherit;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: 8px;
}

.poptavka textarea { resize: vertical; }

.poptavka :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--znacka);
    outline-offset: 1px;
    border-color: var(--znacka);
}

/* --- stránky tržiště a obchodu ---------------------------------------- */

.zbrane-obsah { max-width: var(--sirka-textu); margin: 3rem auto; padding: 0 1.25rem; }

.tlacitko {
    display: inline-block;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    background: var(--znacka);
    color: #fff !important;
    border: 1px solid var(--znacka);
}

.tlacitko:hover { background: var(--znacka-tmava); border-color: var(--znacka-tmava); }

.tlacitko--tise {
    background: var(--bila);
    color: var(--text) !important;
    border-color: var(--linka);
}

.tlacitko--tise:hover { background: var(--bila); border-color: var(--znacka); color: var(--znacka) !important; }

.faq-polozka { transition: background-color .18s ease; }

.faq-polozka:hover { background: var(--plocha); }

/* --- karty rozcestníku: ikona, nadpis, věta --------------------------- */

.vstupy li {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1.75rem 1.6rem;
}

.vstupy__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--znacka), #0b84c7);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 87, 207, .28);
}

.vstupy__ikona svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.8; }

.vstupy a { font-size: 1.15rem; }

.vstupy li p { margin: .5rem 0 0; color: var(--text-tlumeny); font-size: .97rem; line-height: 1.6; }

/* 🔴 `position: relative` na `li` je TO PODSTATNÉ, ne ozdoba. Bez něj
   se spojnice ukotví k nejbližšímu POZICOVANÉMU předkovi — v šabloně
   je to prvek o několik pater výš — a natáhne se přes půl stránky jako
   svislá čára u levého okraje. Oto to nahlásil 6. 9. 2026 a našlo se to
   až rozborem pixelů: čára na x=17 px, barva rgb(228,231,236), což je
   `left: 1.05rem` tohohle pravidla.
   ⚠️ Vzniklo to při přenosu na šablonu: bral jsem si z vlastního stylu
   jen bloky s „obsahovými" jmény a `main ol > li` mezi ně nepatřilo. */
main ol > li { position: relative; }

/* Svislá linka mezi kroky — drží je pohromadě jako jeden postup. */
main ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 2.4rem;
    bottom: .2rem;
    width: 2px;
    background: var(--linka);
}

/* ======================================================================
   PÁSY — stavba podle ostrého webu (rozhodl Oto 4. 9. 2026)
   ======================================================================
   Stránka se skládá z pásů přes celou šířku: střídá se bílá a světlá,
   uprostřed jeden barevný. Uvnitř pásu je obsah vystředěný na 72 rem.
   Je to stavba převzatá z ostrého webu; převzatá NENÍ jeho nálož
   (Bootstrap, jQuery, tři karusely, preloader).
   ------------------------------------------------------------------- */

.pas { padding: clamp(3rem, 7vw, 5rem) 1.25rem; }

.pas--tise { background: var(--plocha); }

.pas--uvod {
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    background:
        radial-gradient(50rem 26rem at 12% -10%, rgba(22, 87, 207, .13), transparent 60%),
        radial-gradient(40rem 24rem at 92% 0%, rgba(11, 132, 199, .12), transparent 55%),
        var(--bila);
}

.pas__vnitrek { max-width: var(--sirka); margin: 0 auto; }

.pas__vnitrek--uzky { max-width: var(--sirka-textu); }

.pas__vnitrek--dva {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

.pas h2 { margin-top: 0; }

.pas h2::before { display: none; }

/* barevná čárka patří jen do textových stránek */
.pas p { max-width: 40rem; }

.pas__perex {
    font-size: 1.1rem;
    opacity: .92;
    max-width: 34rem;
}

/* --- obrázky ---------------------------------------------------------- */

.obrazek { margin: 0; }

.obrazek img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(20,22,28,.08), 0 18px 44px rgba(20,22,28,.12);
}

/* --- štítek, tlačítka, značky ----------------------------------------- */

.stitek {
    margin: 0 0 .75rem;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--znacka);
}

.tlacitka { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1.5rem; }

.znacky { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; padding: 0; list-style: none; }

.znacky li {
    margin: 0;
    padding: .35rem .9rem;
    background: var(--bila);
    border: 1px solid var(--znacka-svetla);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--znacka);
}

.znacky--dalsi {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text-tlumeny) !important;
    font-weight: 400 !important;
}

.dal { font-weight: 600; text-decoration: none; }

.dal::after { content: " →"; }

.dal:hover { text-decoration: underline; }

/* --- barevný pás s kroky ---------------------------------------------- */

.pas--barevny {
    background: linear-gradient(135deg, var(--znacka) 0%, #3f6fe0 55%, #0b84c7 100%);
    color: #fff;
    text-align: center;
}

.pas--barevny h2 { color: #fff; }

.pas--barevny .pas__perex { margin: 0 auto 2.5rem; }

.kroky {
    counter-reset: none;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    text-align: left;
}

.kroky li {
    margin: 0;
    padding: 1.5rem 1.4rem;
    background: var(--bila);
    color: var(--text);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(10, 20, 60, .18);
}

.kroky li::before, .kroky li::after { display: none; }

/* přebíjí obecný postup */

.kroky__cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem; height: 2.2rem;
    margin-bottom: .85rem;
    border-radius: 999px;
    background: var(--znacka-svetla);
    color: var(--znacka);
    font-weight: 700;
}

.kroky strong { display: block; margin-bottom: .25rem; font-size: 1.05rem; }

.kroky span:last-child { color: var(--text-tlumeny); font-size: .95rem; line-height: 1.55; }

/* Poptávka na úvodní navazuje na pásy, ne na textový sloupec. */
.pas + .poptavka { margin-top: 0; }

/* --- proč my ----------------------------------------------------------
   Konkurence tady vede čísly (1000 instalací, 30 let na trhu). Ta nemáme
   ověřená, takže tu nejsou — místo nich doklady, které obstojí. */

.duvody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.duvod {
    padding: 1.5rem 1.4rem;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
}

.duvod h3 { margin: 0 0 .5rem; font-size: 1.05rem; }

.duvod p { margin: 0; font-size: .96rem; color: var(--text-tlumeny); line-height: 1.6; max-width: none; }

/* --- konfigurátor alarmu ---------------------------------------------
   Formulář je záměrně v mřížce po dvou: šest otázek pod sebou by vypadalo
   jako dotazník na úřadě a lidé to nedokončí. */

.konfigurator {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.75rem;
    max-width: var(--sirka-textu);
    /* ⚠️ `auto` po stranách, ne 0. Obsah stránky se středí automatickými
       okraji, a `margin: 2rem 0` je zrušilo — formulář pak začínal
       u levého okraje okna, zatímco nadpis nad ním byl vystředěný. */
    margin: 2rem auto 2.5rem;
    padding: 1.5rem;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    box-shadow: var(--stin);
}

.konfigurator__otazka { margin: 0; }

.konfigurator__otazka label { display: block; font-size: .96rem; }

.konfigurator__otazka strong { display: block; margin-bottom: .15rem; }

.konfigurator__napoveda {
    display: block;
    margin-bottom: .4rem;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--text-tlumeny);
}

.konfigurator input[type="number"],
.konfigurator select {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    color: var(--text);
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: 8px;
}

.konfigurator input[type="number"]:focus,
.konfigurator select:focus { outline: 2px solid var(--znacka); outline-offset: 1px; }

/* Tlačítko přes obě sloupce, ať je jasné, že patří k celku. */
.konfigurator > p:last-child { grid-column: 1 / -1; margin: .25rem 0 0; }

.konfigurator__soupis {
    width: 100%;
    max-width: var(--sirka-textu);
    margin: 1.25rem auto 2rem;
    border-collapse: collapse;
    font-size: .95rem;
}

.konfigurator__soupis th,
.konfigurator__soupis td {
    padding: .7rem .9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linka);
}

.konfigurator__soupis thead th {
    font-size: .78rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-tlumeny);
}

.konfigurator__soupis td:nth-child(2) { white-space: nowrap; font-weight: 700; }

.konfigurator__soupis td:last-child { color: var(--text-tlumeny); font-size: .9rem; }
/* Podnabídka: šablona ji otevírá JEN najetím myší. Doplňuju klávesnici —
   kdo chodí tabulátorem, se k Rodinnému domu jinak nedostane. */
nav.template-main-menu > ul > li:focus-within ul.dropdown-menu-col-1 {
    z-index: 999;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Nabídka: šablona počítala se sedmi KRATŠÍMI názvy. U nás se
   „Chytrá domácnost" a „IT služby" lámaly na dva řádky (změřeno při 1440
   i 1280 px). Text se nesmí lámat a odsazení se o kousek zúží — položky
   se tím vejdou i na 1280. */
nav.template-main-menu > ul > li > a { white-space: nowrap; }

@media (max-width: 1600px) {
    nav.template-main-menu > ul > li { margin: 0 2px; }
    nav.template-main-menu > ul > li > a { padding-left: 12px; padding-right: 12px; font-size: 15px; }
}

/* =====================================================================
   NÁBĚH: ze šablony 5 sekund → pod jednu.

   Oto 5. 9. 2026: „Určitě snížit na minimum — ten náběh je opravdu
   dlouhý." Změřeno před zásahem: nadpis hero viditelný po 2 802 ms,
   poslední prvek po 5 000 ms. To není animace, to je čekání.

   🔴 Zpoždění se DĚLÍ, nezahazuje. Kdyby se všechna nastavila na nulu,
   prvky naskočí naráz a zmizí i ten postupný nájezd, kvůli kterému to
   v šabloně je. Dělením zůstane POŘADÍ zachované a jen se zrychlí.

   ⚠️ Tyhle třídy jsou ze šablony a je jich 61. Přepisují se VŠECHNY,
   ne jen ty, co jsou dnes na stránce — jinak by se příště přidal blok
   s `transition-delay-4000` a čekalo by se u něj znovu.
   ===================================================================== */

.transition-delay-0 { transition-delay: 0ms !important; -webkit-transition-delay: 0ms !important; }
.transition-delay-10 { transition-delay: 1ms !important; -webkit-transition-delay: 1ms !important; }
.transition-delay-20 { transition-delay: 2ms !important; -webkit-transition-delay: 2ms !important; }
.transition-delay-30 { transition-delay: 4ms !important; -webkit-transition-delay: 4ms !important; }
.transition-delay-40 { transition-delay: 5ms !important; -webkit-transition-delay: 5ms !important; }
.transition-delay-50 { transition-delay: 6ms !important; -webkit-transition-delay: 6ms !important; }
.transition-delay-60 { transition-delay: 8ms !important; -webkit-transition-delay: 8ms !important; }
.transition-delay-70 { transition-delay: 9ms !important; -webkit-transition-delay: 9ms !important; }
.transition-delay-80 { transition-delay: 10ms !important; -webkit-transition-delay: 10ms !important; }
.transition-delay-90 { transition-delay: 11ms !important; -webkit-transition-delay: 11ms !important; }
.transition-delay-100 { transition-delay: 12ms !important; -webkit-transition-delay: 12ms !important; }
.transition-delay-200 { transition-delay: 25ms !important; -webkit-transition-delay: 25ms !important; }
.transition-delay-300 { transition-delay: 38ms !important; -webkit-transition-delay: 38ms !important; }
.transition-delay-400 { transition-delay: 50ms !important; -webkit-transition-delay: 50ms !important; }
.transition-delay-500 { transition-delay: 62ms !important; -webkit-transition-delay: 62ms !important; }
.transition-delay-600 { transition-delay: 75ms !important; -webkit-transition-delay: 75ms !important; }
.transition-delay-700 { transition-delay: 88ms !important; -webkit-transition-delay: 88ms !important; }
.transition-delay-800 { transition-delay: 100ms !important; -webkit-transition-delay: 100ms !important; }
.transition-delay-900 { transition-delay: 112ms !important; -webkit-transition-delay: 112ms !important; }
.transition-delay-1000 { transition-delay: 125ms !important; -webkit-transition-delay: 125ms !important; }
.transition-delay-1100 { transition-delay: 138ms !important; -webkit-transition-delay: 138ms !important; }
.transition-delay-1200 { transition-delay: 150ms !important; -webkit-transition-delay: 150ms !important; }
.transition-delay-1300 { transition-delay: 162ms !important; -webkit-transition-delay: 162ms !important; }
.transition-delay-1400 { transition-delay: 175ms !important; -webkit-transition-delay: 175ms !important; }
.transition-delay-1500 { transition-delay: 188ms !important; -webkit-transition-delay: 188ms !important; }
.transition-delay-1600 { transition-delay: 200ms !important; -webkit-transition-delay: 200ms !important; }
.transition-delay-1700 { transition-delay: 212ms !important; -webkit-transition-delay: 212ms !important; }
.transition-delay-1800 { transition-delay: 225ms !important; -webkit-transition-delay: 225ms !important; }
.transition-delay-1900 { transition-delay: 238ms !important; -webkit-transition-delay: 238ms !important; }
.transition-delay-2000 { transition-delay: 250ms !important; -webkit-transition-delay: 250ms !important; }
.transition-delay-2100 { transition-delay: 262ms !important; -webkit-transition-delay: 262ms !important; }
.transition-delay-2200 { transition-delay: 275ms !important; -webkit-transition-delay: 275ms !important; }
.transition-delay-2300 { transition-delay: 288ms !important; -webkit-transition-delay: 288ms !important; }
.transition-delay-2400 { transition-delay: 300ms !important; -webkit-transition-delay: 300ms !important; }
.transition-delay-2500 { transition-delay: 312ms !important; -webkit-transition-delay: 312ms !important; }
.transition-delay-2600 { transition-delay: 325ms !important; -webkit-transition-delay: 325ms !important; }
.transition-delay-2700 { transition-delay: 338ms !important; -webkit-transition-delay: 338ms !important; }
.transition-delay-2800 { transition-delay: 350ms !important; -webkit-transition-delay: 350ms !important; }
.transition-delay-2900 { transition-delay: 362ms !important; -webkit-transition-delay: 362ms !important; }
.transition-delay-3000 { transition-delay: 375ms !important; -webkit-transition-delay: 375ms !important; }
.transition-delay-3100 { transition-delay: 388ms !important; -webkit-transition-delay: 388ms !important; }
.transition-delay-3200 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-3300 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-3400 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-3500 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-3600 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-3700 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-3800 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-3900 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4000 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4100 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4200 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4300 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4400 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4500 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4600 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4700 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4800 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-4900 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5000 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5100 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5200 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5300 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5400 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5500 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5600 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5700 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5800 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-5900 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }
.transition-delay-6000 { transition-delay: 400ms !important; -webkit-transition-delay: 400ms !important; }

/* Doba přechodu. V šabloně jde až do 2 s — samo o sobě další dvě
   sekundy k tomu zpoždění. Kratší přechod je pořád vidět, jen se
   nečeká. */
.transition-10 { transition: cubic-bezier(0, 1, 1, 1) 25ms, opacity 25ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 25ms, opacity 25ms !important; }
.transition-20 { transition: cubic-bezier(0, 1, 1, 1) 50ms, opacity 50ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 50ms, opacity 50ms !important; }
.transition-30 { transition: cubic-bezier(0, 1, 1, 1) 75ms, opacity 75ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 75ms, opacity 75ms !important; }
.transition-40 { transition: cubic-bezier(0, 1, 1, 1) 100ms, opacity 100ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 100ms, opacity 100ms !important; }
.transition-50 { transition: cubic-bezier(0, 1, 1, 1) 125ms, opacity 125ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 125ms, opacity 125ms !important; }
.transition-100 { transition: cubic-bezier(0, 1, 1, 1) 250ms, opacity 250ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 250ms, opacity 250ms !important; }
.transition-150 { transition: cubic-bezier(0, 1, 1, 1) 375ms, opacity 300ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 375ms, opacity 300ms !important; }
.transition-200 { transition: cubic-bezier(0, 1, 1, 1) 500ms, opacity 300ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 500ms, opacity 300ms !important; }
.transition-250 { transition: cubic-bezier(0, 1, 1, 1) 500ms, opacity 300ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 500ms, opacity 300ms !important; }
.transition-300 { transition: cubic-bezier(0, 1, 1, 1) 500ms, opacity 300ms !important; -webkit-transition: cubic-bezier(0, 1, 1, 1) 500ms, opacity 300ms !important; }

/* =====================================================================
   Naše prvky UVNITŘ šablony. Šablona má vlastní `a`, `p` i `span`
   pravidla s vyšší specifičností, takže naše tlačítka spadla pod sebe
   a značky ztratily tvar. Tady se to vrací — schválně s `.main-banner-box-layout2`
   a `#obsah` v selektoru, ať to platí i proti `app.css`.
   ===================================================================== */

/* 🔴 BAREVNÝ TVAR V HLAVIČCE VNITŘNÍ STRÁNKY SE POD 1200 px SCHOVÁVÁ.

   Šablona ho pod 768 px schovává sama, ale mezi 768 a 1199 px ho nechává —
   a v tom pásmu je textový sloupec `col-xl-6` už přes CELOU šířku. Tvar
   (1414 px, `top: -30%; right: 0`) tak leží pod celým nadpisem i perexem
   a černé písmo na fialové se nedá přečíst. Změřeno 6. 9. 2026 v 992 px
   na /pristupove-systemy; týká se to všech vnitřních stránek, ne jedné.

   ⚠️ Není to vada překryvu — text je NAD tvarem (`z-index: -1`).
   Je to vada KONTRASTU, takže vrstvením se nespraví.

   Schovat tvar je proti obarvení písma bezpečnější: barvu písma řídí
   šablona na několika místech a bílý nadpis by se rozešel se zbytkem webu.
   ===================================================================== */
@media only screen and (max-width: 1199px) {
    .main-banner-wrap-layout4 .animated-figure {
        display: none;
    }
}

#obsah .tlacitka,
.main-banner-box-layout2 .tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    /* 🔴 `auto` po stranách, ne `0`. Tenhle blok je specifičtější než
       `main#obsah > p` (třída poráží značku), takže zkratkou `margin`
       přebíjel i `margin-left/right: auto`, kterými se text drží ve
       sloupci. Tlačítko pak stálo na LEVÉM OKRAJI OKNA, zatímco všechno
       kolem začínalo o 368 px dál — změřeno prohlížečem 6. 9. 2026 na
       /alarm, /kamery a /chytra-domacnost (`p.tlacitka` mělo `left: 0`,
       zbylých 16 prvků `left: 368`).
       ⚠️ Ve vodorovné hlavičce úvodu (`.main-banner-box-layout2`) se tím
       nic nemění: tam ten odstavec není přímý potomek `main#obsah`,
       nemá tedy `max-width` a `auto` nemá co rozdělit. */
    margin: 1.4rem auto 1.1rem;
}

#obsah .tlacitka .tlacitko,
.main-banner-box-layout2 .tlacitka .tlacitko {
    display: inline-block;
    padding: .8rem 1.6rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    color: #fff;
    background: #1657cf;
    border: 2px solid #1657cf;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
#obsah .tlacitka .tlacitko:hover { background: #0f47ad; border-color: #0f47ad; color: #fff; }

#obsah .tlacitka .tlacitko--tise,
.main-banner-box-layout2 .tlacitka .tlacitko--tise {
    color: #1a1a1a;
    background: #fff;
    border-color: #d8dde5;
}
#obsah .tlacitka .tlacitko--tise:hover { color: #1657cf; border-color: #1657cf; background: #fff; }

/* Značky pod tlačítky — na ostrém webu nejsou, jsou naše. */
#obsah .znacky,
.main-banner-box-layout2 .znacky {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin: 0;
}
#obsah .znacky span,
.main-banner-box-layout2 .znacky span {
    display: inline-block;
    padding: .3rem .8rem;
    font-size: .86rem;
    font-weight: 600;
    color: #1657cf;
    background: #fff;
    border: 1px solid #dbe4f5;
    border-radius: 999px;
}
#obsah .znacky .znacky--dalsi,
.main-banner-box-layout2 .znacky .znacky--dalsi {
    border: 0;
    background: none;
    font-weight: 400;
    color: #5b6470;
}

#obsah .hero-telefon { margin: .2rem 0 1.1rem; color: #5b6470; font-size: .96rem; }
#obsah .hero-telefon a { font-weight: 700; color: #1657cf; white-space: nowrap; }

/* V hero je sloupec 432 px — tlačítka tam musí být o kus menší,
   jinak se lámou pod sebe. Na ostatních stránkách zůstávají velká. */
.main-banner-box-layout2 .tlacitka .tlacitko { padding: .7rem 1.2rem; font-size: .95rem; }

/* Poptávka jako BLOK, ne holá čára přes stránku.
   V mém vlastním vzhledu ji odděloval `border-top` a dávalo to smysl,
   protože stránka byla jinak bez pásů. V šabloně, kde se pásy střídají
   barvou, vypadal ten okraj jako zbloudilá vodorovná čára — Oto to
   nahlásil 6. 9. Změřeno rozborem pixelů: y=3057, přes celou šířku. */
#obsah .poptavka {
    border-top: 0;
    margin-top: 3rem;
    padding: 3.5rem 1.25rem;
    background: #f7f8fb;
}
#obsah .poptavka > * { max-width: 44rem; margin-left: auto; margin-right: auto; }

@media (max-width: 44rem) {
    /* Tabulka „co to umí a co ne" sahala na mobilu od kraje ke kraji,
       takže její horní a dolní okraj vypadaly jako dvě čáry přes celou
       stránku. Jako karta s odstupem je z toho zase blok. */
    #obsah .meze {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        width: auto;
    }
}

/* ── AKTIVNÍ POLOŽKA NABÍDKY ────────────────────────────────────────────
   🔴 Značka `aria-current` v HTML byla dřív, než tenhle styl: na `/alarm`
   i `/kontakt` se vypisovala správně, ale NEBYLA VIDĚT — pravidlo pro ni
   existovalo jen v `web.css` pod selektorem `.nabidka`, a hlavní web má
   nabídku ve třídě `template-main-menu`. Napsaná věc bez čtenáře.
   (Nález Oty 9. 9. 2026 na produkci.)

   ⚠️ Rodič se značí `aria-current="true"`, ne `page` — vede na svou vlastní
   stránku, jen zrovna stojím na jeho podstránce. Proto slabší podtržení. */
.template-main-menu > ul > li > a[aria-current] {
    color: #1657cf;
}

.template-main-menu > ul > li > a[aria-current="page"] {
    font-weight: 700;
    box-shadow: inset 0 -3px 0 0 #1657cf;
}

.template-main-menu > ul > li > a[aria-current="true"] {
    box-shadow: inset 0 -2px 0 0 rgba(22, 87, 207, .45);
}

.template-main-menu .dropdown-menu-col-1 a[aria-current="page"] {
    font-weight: 700;
    color: #1657cf;
}

/* ── PRŮBĚH SPOLUPRÁCE: pevná výška rámečku ──────────────────────────────
   🔴 DVĚ VADY Z JEDNÉ PŘÍČINY (nález Oty 9. 9. 2026, změřeno prohlížečem
   na produkci na pěti šířkách):
     · ikona přetékala PŘES HORNÍ HRANU rámečku (u „Zjištění potřeb" o 2,9 px
       na 1440/1200/768 a o 5,8 px na 390);
     · číslo „2" leželo PŘES nadpis „Návrh" a text nešel přečíst — na všech
       pěti měřených šířkách.

   Příčina je v šabloně: `.process-box-layout2` má PEVNÝCH 220 px výšky
   a `.count-number` je `position: absolute` BEZ `top`, takže si polohu bere
   ze statického místa v toku — a to se v každém rámečku liší podle toho,
   kolik je v něm textu. Naše rámečky nemají stejně dlouhý obsah jako vzor
   (u „Nasazení" chybí odstavec, česky je text delší), takže se čísla
   rozjela a obsah se do 220 px nevešel.

   ⚠️ Neopravuje se to v souboru šablony, ale tady — `app.css` je cizí kód
   a při jeho výměně by se oprava tiše ztratila. */
.process-box-layout2 {
    height: auto;
    min-height: 220px;
    align-items: center;
}

.process-box-layout2 .count-number {
    top: 16px;
}