/* Portál banda!cz — prezentační web (úvodka, Založit bandu, 404, zásady a podmínky).
   Barvy a písmo podle CI banda!cz 1.0, rozvržení podle schválených mockupů (2026-09-24).
   Desktop ≥ 1100 px, tablet 760–1099 px, mobil < 760 px. */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --kava: #191411; --kava-2: #241D18; --kava-linka: #3A302A; --kava-carka: #5A4A3C;
  --krem: #FFF8ED; --krem-2: #F1E4CF; --linka: #EADCC6; --linka-2: #E2D2B8;
  --zluta: #FFD600; --zluta-hover: #FFE55C; --zluta-bublina: #FFF0A8;
  --cervena: #F4432B; --cervena-hover: #FF5E45; --cervena-text: #C0301A; --cervena-text-hover: #8F2212;
  --text-2: #4A3F36; --text-3: #5C5046; --svetly-text: #D9CFC2;
  --klub: #1D4E89; --klub-2: #173F70; --klub-svetla: #E8F0FA; --klub-linka: #CFE0F5; --klub-pozadi: #F4F7FB;
  --wrap: 1280px; --okraj: 32px;
}

/* ---------- základ ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--krem); color: var(--kava); font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
/* patička vždy dole i na krátké stránce (majitel 29. 9.): stránka aspoň na výšku okna, obsah vyplní volné místo */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
img { max-width: 100%; }
a { color: var(--cervena-text); }
a:hover { color: var(--cervena-text-hover); }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.025em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--kava); outline-offset: 2px; box-shadow: 0 0 0 6px var(--zluta); }
.wrap { max-width: calc(var(--wrap) + 2 * var(--okraj)); margin: 0 auto; padding: 0 var(--okraj); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.preskocit { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--zluta); color: var(--kava); padding: 10px 18px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.preskocit:focus { left: 16px; }
.ik { flex-shrink: 0; display: block; }

.nadtitulek { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cervena-text); }
.tmava .nadtitulek { color: var(--zluta); }
.nadpis-2 { margin-top: 16px; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; }
.perex { margin-top: 16px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--text-2); }
.tmava .perex { color: var(--svetly-text); }
.vykricnik { color: var(--cervena); }

/* ---------- tlačítka ---------- */
.tl { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; border: 2px solid transparent; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 800; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; }
.tl-velke { min-height: 58px; padding: 16px 32px; font-size: 18px; }
.tl-cervene { background: var(--cervena); color: var(--kava); }
.tl-cervene:hover { background: var(--cervena-hover); color: var(--kava); }
.tl-zlute { background: var(--zluta); color: var(--kava); }
.tl-zlute:hover { background: var(--zluta-hover); color: var(--kava); }
.tl-obrys { border-color: var(--kava); color: var(--kava); }
.tl-obrys:hover { background: var(--kava); color: #fff; }
.tl-obrys-svetle { border-color: #fff; color: #fff; }
.tl-obrys-svetle:hover { background: #fff; color: var(--kava); }
.odkaz-sipka { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; }

/* ---------- hlavička ---------- */
.pruh { height: 6px; background: var(--zluta); }
.hlavicka { position: relative; z-index: 20; background: var(--kava); color: #fff; }
.hlavicka-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.logo { display: block; flex-shrink: 0; }
.logo img { display: block; width: 200px; height: auto; }
.menu { display: flex; align-items: center; gap: 32px; }
.menu a { padding: 6px 0; border-bottom: 2px solid transparent; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--zluta); color: #fff; }
.hlavicka-akce { display: flex; align-items: center; gap: 8px; }
.hlavicka-prihlasit { padding: 12px 16px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.hlavicka-prihlasit:hover { color: var(--zluta); }
.hlavicka .tl { min-height: 44px; padding: 10px 22px; font-size: 15px; }
.menu-tlacitko { display: none; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; align-items: center; justify-content: center; cursor: pointer; }
.menu-tlacitko .ik-zavrit, .hlavicka.otevrene .menu-tlacitko .ik-menu { display: none; }
.hlavicka.otevrene .menu-tlacitko .ik-zavrit { display: block; }
/* panel s menu: na počítači se „rozpustí“ a menu i tlačítka jsou přímo v hlavičce; na mobilu vyjede zprava (níž, tablet) */
.menu-panel { display: contents; }
.menu-panel-hlava, .menu-zavoj { display: none; }

/* ---------- patička ---------- */
.paticka { background: var(--kava); color: #fff; border-top: 6px solid var(--zluta); }
.paticka-in { padding-top: 56px; padding-bottom: 32px; }
.paticka-horni { display: flex; justify-content: space-between; gap: 40px; }
.paticka-logo img { display: block; width: 150px; height: auto; }
.paticka-slogan { margin-top: 14px; font-size: 14px; color: var(--svetly-text); }
.paticka-sloupce { display: flex; gap: 72px; font-size: 15px; }
.paticka-sloupce h2 { margin-bottom: 12px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zluta); }
.paticka-sloupce ul { display: flex; flex-direction: column; gap: 10px; }
.paticka-sloupce a { color: #fff; text-decoration: none; }
.paticka-sloupce a:hover { color: var(--zluta); text-decoration: underline; }
.paticka-tel { white-space: nowrap; }
.paticka-sloupce .paticka-fb { display: inline-flex; align-items: center; gap: 8px; }   /* Facebook v Kontaktu: decentní béžová ikona (majitel 9. 10.) */
.paticka-fb svg { display: block; flex: none; color: var(--svetly-text); }
.paticka-fb:hover svg { color: var(--zluta); }
/* „Nastavení cookies" je tlačítko (souhlas.css ho podtrhává) — v patičce jako ostatní odkazy */
.paticka-sloupce .lista-cookies-otevrit { color: #fff; text-decoration: none; text-align: left; }
.paticka-sloupce .lista-cookies-otevrit:hover { color: var(--zluta); text-decoration: underline; }
.paticka-spodni { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--kava-linka); font-size: 14px; color: var(--svetly-text); }
.paticka-hosting { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; color: #5C5046; font-size: 12px; font-weight: 600; text-decoration: none; }
.paticka-hosting:hover { box-shadow: 0 0 0 2px var(--zluta, #FFD600); color: #5C5046; text-decoration: none; }
.paticka-hosting img { display: block; height: 15px; width: auto; }

/* ---------- ÚVODKA: hero ---------- */
.hero { overflow: hidden; background: var(--kava); color: #fff; }
.hero-in { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 660px); justify-content: space-between; min-height: 700px; }
.hero-text { align-self: center; padding: 64px 0 90px; }
.hero h1 { margin-top: 20px; font-size: clamp(44px, 5.7vw, 82px); line-height: 0.98; letter-spacing: -0.03em; }
.hero h1 span { color: var(--zluta); }
.hero .perex { max-width: 540px; margin-top: 28px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; }
.hero-tlacitka { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.hero-tlacitka .odkaz-sipka { color: #fff; font-size: 17px; font-weight: 600; }
.hero-tlacitka .odkaz-sipka .ik { color: var(--zluta); }
.hero-tlacitka .odkaz-sipka:hover { color: var(--zluta); }
.hero-plusy { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 15px; color: var(--svetly-text); }
.hero-plusy li { display: flex; align-items: center; gap: 8px; }
.hero-plusy .ik { color: var(--zluta); }
.hero-obraz { position: relative; height: 700px; }
.kruh { position: absolute; left: 140px; top: 110px; width: 500px; height: 500px; border-radius: 50%; background: var(--zluta); }
.kruh-carka { position: absolute; left: 118px; top: 88px; width: 544px; height: 544px; border: 2px dashed var(--kava-carka); border-radius: 50%; }
.hero-maskot { position: absolute; left: 200px; bottom: 20px; display: block; width: 365px; height: auto; }   /* majitel 25. 9.: o 20 px doleva a nahoru */
.karta { position: absolute; padding: 16px 18px; border-radius: 18px; background: #fff; color: var(--kava); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.karta-stitek { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.karta-titul { margin-top: 6px; font-size: 17px; font-weight: 800; }
.karta-pokladna { left: 0; top: 110px; width: 230px; }
.prubeh { height: 8px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: var(--krem-2); }
.prubeh span { display: block; height: 100%; border-radius: 99px; background: var(--zluta); }
.karta-akce { left: 0; top: 330px; width: 270px; padding: 18px; border-radius: 20px; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.4); }
.karta-akce .karta-titul { font-size: 19px; }
.karta-misto { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--text-3); }
.karta-radek { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 14px; font-weight: 700; }
.avatary { display: flex; }
.avatary span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; background: var(--linka); font-size: 11px; font-weight: 800; }
.avatary span:first-child { margin-left: 0; background: var(--zluta); }
.avatary span:nth-child(2) { background: var(--cervena); }
.avatary span:nth-child(3) { background: var(--kava); color: #fff; }
.volba { display: flex; gap: 8px; margin-top: 14px; }
.volba span { flex: 1; padding: 8px 0; border: 2px solid var(--kava); border-radius: 999px; font-size: 15px; font-weight: 700; text-align: center; }
.volba .ano { border-color: var(--cervena); background: var(--cervena); font-weight: 800; }
.karta-pripominka { right: 0; top: 470px; display: flex; gap: 12px; width: 250px; padding: 16px; }
.karta-pripominka .kolecko { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--zluta); }
.karta-pripominka strong { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.karta-pripominka .kdy { font-size: 12px; font-weight: 600; color: var(--text-3); }
/* jen pro „živou“ úvodku (portal.js) — ve statické kompozici schované */
.avatary .av-ty, .karta-akce .volba .ano .ik, .karta-akce .prst { display: none; }
.karta-pripominka p { margin-top: 2px; font-size: 14px; line-height: 1.4; color: #3E342C; }

/* ---------- sporty ---------- */
/* pruh „přes 1 700 týmů" decentně podbarvený 5 % hnědé banda!cz (majitel 25. 9., předtím 20 %); štítky na něm krémové s obrysem */
.sporty { border-bottom: 1px solid var(--linka); background: #F3ECE2; background: color-mix(in srgb, var(--kava) 5%, var(--krem)); }
.sporty .stitky a:not(.tmavy) { background: var(--krem); }
.sporty-in { display: flex; align-items: center; gap: 16px 32px; min-height: 128px; padding-top: 24px; padding-bottom: 24px; }
.sporty-hlava { flex-shrink: 0; width: 290px; }
.sporty-titul { font-size: 19px; font-weight: 800; }
.sporty-pod { margin-top: 4px; font-size: 15px; color: var(--text-3); }
.stitky { display: flex; flex-wrap: wrap; gap: 10px; }
.stitky li { display: flex; }
/* štítky vedou do katalogu týmů (sport, hledání; „a desítky dalších“ na celý katalog) */
.stitky a { padding: 9px 16px; border: 1.5px solid var(--linka-2); border-radius: 999px; color: var(--kava); font-size: 15px; font-weight: 600; text-decoration: none; }
.stitky a:hover { border-color: var(--kava); color: var(--kava); }
.stitky .tmavy { border-color: var(--kava); background: var(--kava); color: #fff; }
.stitky a.tmavy:hover { background: var(--kava-2); color: var(--zluta); }

/* ---------- proč ne jen chat ---------- */
.proc-in { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 640px); justify-content: space-between; align-items: center; gap: 40px; padding-top: 100px; padding-bottom: 100px; }
.proc h2 { margin-top: 16px; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; }
.proc .perex { margin-top: 22px; }
.odrazky { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; font-size: 17px; font-weight: 600; }
.odrazky li { display: flex; align-items: flex-start; gap: 12px; }
.odrazky .ik { margin-top: 1px; color: var(--cervena-text); }
.proc-obraz { position: relative; height: 520px; }
.chat { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 8px; width: 290px; opacity: 0.6; transform: rotate(-3deg); }
.chat-hlava { font-size: 13px; font-weight: 700; color: var(--text-3); }
.bublina { align-self: flex-start; max-width: 230px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--krem-2); font-size: 15px; }
.bublina.moje { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--zluta-bublina); }
/* gekon pod chatem ukazuje na kartu akce (majitel 25. 9. — místo ležící Bandy; z „Co banda umí“ a z ceníku maskoti pryč) */
.proc-maskot { position: absolute; z-index: 10; left: 120px; top: 292px; display: block; width: 190px; height: auto; }   /* přes okraj karty akce */
.akce-karta { position: absolute; left: 300px; top: 150px; width: 340px; padding: 24px; border: 1px solid var(--krem-2); border-radius: 22px; background: #fff; box-shadow: 0 24px 50px rgba(25, 20, 17, 0.14); }
.akce-hlava { display: flex; align-items: center; gap: 14px; }
.datum { display: flex; flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--zluta); }
.datum small { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.datum b { font-size: 22px; line-height: 1; }
.akce-nazev { font-size: 20px; font-weight: 800; }
.akce-sub { margin-top: 2px; font-size: 14px; color: var(--text-3); }
.akce-info { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-size: 15px; color: #3E342C; }
.akce-info li { display: flex; align-items: center; gap: 8px; }
.dochazka { display: flex; gap: 3px; height: 10px; margin-top: 18px; overflow: hidden; border-radius: 99px; }
.dochazka span:nth-child(1) { width: 75%; background: var(--kava); }
.dochazka span:nth-child(2) { width: 12.5%; background: var(--cervena); }
.dochazka span:nth-child(3) { width: 12.5%; background: var(--linka-2); }
.dochazka-text { margin-top: 8px; font-size: 14px; color: #3E342C; }
.akce-karta .volba { margin-top: 18px; gap: 10px; }
.akce-karta .volba span { padding: 11px 0; font-size: 16px; }
.akce-pozn { margin-top: 12px; font-size: 13px; color: var(--text-3); text-align: center; }
/* Ilustrace se jednou přehraje, když k ní člověk dojede (majitel 8. 10.): bubliny chatu přibývají jedna po druhé, pak přijede
   karta zápasu, naplní se docházka a nakonec vykoukne gekon. Výchozí stav .ceka a spuštění .hraje dává portal.js —
   bez JS a při prefers-reduced-motion zůstává statická scéna. */
.proc-obraz.ceka .chat-hlava, .proc-obraz.ceka .bublina { opacity: 0; transform: translateY(14px); }
.proc-obraz.ceka .akce-karta { opacity: 0; transform: translateY(30px) scale(0.97); }
.proc-obraz.ceka .proc-maskot { opacity: 0; transform: translateX(-26px) rotate(-6deg); }
.proc-obraz.ceka .dochazka span { width: 0; }
.proc-obraz.hraje :is(.chat-hlava, .bublina, .akce-karta, .proc-maskot) { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.proc-obraz.hraje .dochazka span { transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 2.3s; }
.proc-obraz.hraje .bublina:nth-child(2) { transition-delay: 0.3s; }
.proc-obraz.hraje .bublina:nth-child(3) { transition-delay: 0.65s; }
.proc-obraz.hraje .bublina:nth-child(4) { transition-delay: 1s; }
.proc-obraz.hraje .bublina:nth-child(5) { transition-delay: 1.35s; }
.proc-obraz.hraje .bublina:nth-child(6) { transition-delay: 1.6s; }
.proc-obraz.hraje .akce-karta { transition-delay: 1.85s; }
.proc-obraz.hraje .dochazka span:nth-child(2) { transition-delay: 2.6s; }
.proc-obraz.hraje .dochazka span:nth-child(3) { transition-delay: 2.75s; }
.proc-obraz.hraje .proc-maskot { transition-delay: 2.9s; }
/* …a nakonec se někdo přihlásí (majitel 8. 10.): prst klepne na Jdu, tlačítko se vybarví s fajfkou, 12 → 13 jde,
   2 → 1 neví a lišta docházky se posune (.klik / .jdu z portal.js — i když je sekce vidět hned po načtení). Výchozí
   (i bez JS) je stav PŘED přihlášením: Jdu nevybrané. Přechody patří ke stavu .jdu, takže fungují i bez .hraje. */
.akce-karta .volba .ano { position: relative; overflow: hidden; border-color: var(--kava); background: transparent; font-weight: 700;
  transition: background-color 0.35s ease, border-color 0.35s ease; }
.akce-karta .volba .ano .ik { display: inline-block; width: 0; margin-right: 0; opacity: 0; vertical-align: -2px;
  transition: width 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease 0.1s; }
.proc-obraz.jdu .akce-karta .volba .ano { border-color: var(--cervena); background: var(--cervena); font-weight: 800; }
.proc-obraz.jdu .akce-karta .volba .ano .ik { width: 14px; margin-right: 5px; opacity: 1; }
.akce-karta .volba .ano::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.6); opacity: 0; transform: translate(-50%, -50%) scale(0); pointer-events: none; }
.proc-obraz.jdu .akce-karta .volba .ano::after { animation: klik-vlna 0.65s ease-out; }
.akce-karta .prst { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(25, 20, 17, 0.16); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; }
.proc-obraz.klik .akce-karta .prst { animation: prst-klik 0.95s ease forwards; }
.proc-obraz .dochazka-text .cislo { display: inline-block; }
.proc-obraz .dochazka-text .cislo.skok { animation: cislo-skok 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
.proc-obraz.jdu .dochazka span:nth-child(n) { transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0s; }
.proc-obraz.jdu .dochazka span:nth-child(1) { width: 81.25%; }   /* 13 z 16 */
.proc-obraz.jdu .dochazka span:nth-child(3) { width: 6.25%; }    /* 1 z 16 */

/* ---------- funkce ---------- */
.funkce { background: #fff; }
.funkce-in { padding-top: 100px; padding-bottom: 100px; }
.funkce-hlava { display: flex; align-items: center; gap: 36px; }
.mrizka-funkci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.funkce-karta { position: relative; min-height: 260px; padding: 28px; border: 1px solid var(--krem-2); border-radius: 22px; background: var(--krem); }
.ikona { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--zluta); color: var(--kava); }
.funkce-karta h3 { margin-top: 20px; font-size: 20px; letter-spacing: -0.01em; }
.funkce-karta p { margin-top: 10px; font-size: 16px; color: var(--text-3); }
.funkce-karta.tmava { border-color: var(--kava); background: var(--kava); color: #fff; }
.funkce-karta.tmava p { color: var(--svetly-text); }
.stitek-premium { position: absolute; top: 28px; right: 24px; padding: 5px 10px; border-radius: 999px; background: var(--zluta); color: var(--kava); font-size: 12px; font-weight: 800; }
.funkce-dalsi { margin-top: 36px; font-size: 17px; color: var(--text-2); text-align: center; }
.funkce-dalsi strong { color: var(--kava); }

/* ---------- jak to funguje ---------- */
.jak { overflow: hidden; background: var(--kava); color: #fff; }
.jak-in { position: relative; min-height: 660px; padding-top: 100px; padding-bottom: 100px; }
.jak-obsah { max-width: 880px; }
.jak .nadpis-2 { color: #fff; }
.kroky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.krok { min-height: 260px; padding: 28px; border: 1px solid var(--kava-linka); border-radius: 22px; background: var(--kava-2); }
.krok-cislo { font-size: 48px; font-weight: 800; line-height: 1; color: var(--zluta); }
.krok h3 { margin-top: 16px; font-size: 22px; }
.krok p { margin-top: 10px; color: var(--svetly-text); }
/* Banda s notebookem sedí na kameni — výš a víc vpravo, ať je u kroků, ne u spodní hrany (majitel 8. 10.: right 0, bottom 100) */
.jak-maskot { position: absolute; right: 0; bottom: 100px; display: block; width: 398px; height: auto; }

/* ---------- ukázka webu klubu ---------- */
.ukazka-in { padding-top: 100px; padding-bottom: 100px; }
.ukazka-hlava { text-align: center; }
.ukazka-hlava .perex { max-width: 760px; margin-left: auto; margin-right: auto; }
.scena { position: relative; width: 1280px; height: 580px; margin: 50px auto 0; font-size: 14px; }
.prohlizec { position: absolute; left: 60px; top: 0; display: flex; flex-direction: column; width: 940px; height: 560px; overflow: hidden; border: 1px solid var(--linka); border-radius: 18px; background: #fff; box-shadow: 0 30px 60px rgba(25, 20, 17, 0.16); }
.prohlizec-lista { display: flex; flex-shrink: 0; align-items: center; gap: 8px; height: 44px; padding: 0 16px; background: #F6EBD9; }
.prohlizec-lista > span { width: 12px; height: 12px; border-radius: 50%; background: #E0CFB5; }
.adresa { display: flex; align-items: center; justify-content: center; gap: 6px; width: 420px; height: 28px; margin-left: 200px; border-radius: 999px; background: #fff; font-size: 13px; color: var(--text-3); }
.klub-hlava { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; height: 72px; padding: 0 28px; background: var(--klub); color: #fff; }
.klub-znak { display: flex; align-items: center; gap: 14px; }
.klub-znak > span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--klub); font-size: 16px; font-weight: 800; }
.klub-znak b { display: block; font-size: 20px; }
.klub-znak small { display: block; font-size: 13px; color: var(--klub-linka); }
.klub-prihlasit { padding: 8px 16px; border: 1.5px solid #fff; border-radius: 999px; font-weight: 700; }
.klub-menu { display: flex; flex-shrink: 0; align-items: center; gap: 26px; height: 44px; padding: 0 28px; background: var(--klub-2); color: #fff; font-weight: 600; }
.klub-menu .aktivni { padding: 12px 0 9px; border-bottom: 3px solid #fff; }
.klub-obsah { display: flex; flex-grow: 1; gap: 24px; padding: 24px 28px; }
.klub-akce { flex-shrink: 0; width: 520px; }
.klub-nadpis { display: flex; align-items: baseline; justify-content: space-between; }
.klub-nadpis b { font-size: 18px; }
.klub-nadpis span { font-weight: 700; color: var(--klub); }
.klub-radek { display: flex; align-items: center; gap: 14px; height: 88px; border-bottom: 1px solid #ECECEC; }
.klub-radek:first-of-type { margin-top: 8px; }
.klub-radek:last-child { border-bottom: 0; }
.klub-datum { display: flex; flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--klub-svetla); color: var(--klub); }
.klub-datum small { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.klub-datum b { font-size: 20px; line-height: 1; }
.klub-radek > div:nth-child(2) { flex-grow: 1; }
.klub-radek b { display: block; font-size: 16px; }
.klub-radek small { display: block; margin-top: 3px; font-size: 13px; color: var(--text-3); }
.klub-tl { flex-shrink: 0; padding: 9px 16px; border-radius: 999px; background: var(--klub); color: #fff; font-weight: 700; }
.klub-tl.jdes { display: flex; align-items: center; gap: 6px; background: var(--klub-svetla); color: var(--klub); }
.klub-bok { display: flex; flex-direction: column; flex-shrink: 0; gap: 16px; width: 300px; }
.klub-karta { padding: 18px; border-radius: 14px; background: var(--klub-pozadi); }
.klub-karta > small { display: block; font-size: 13px; font-weight: 700; color: var(--text-3); }
.klub-konto { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 18px; font-weight: 800; }
.klub-konto .ik { color: var(--klub); }
.klub-karta p { margin-top: 4px; font-size: 13px; color: var(--text-3); }
.klub-soupiska { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-weight: 600; }
.klub-soupiska li { display: flex; align-items: center; gap: 10px; }
.klub-soupiska li > span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--klub-linka); color: var(--klub); font-size: 11px; font-weight: 800; }
.klub-soupiska li:first-child > span { background: var(--klub); color: #fff; }
.klub-soupiska .dalsi { font-size: 13px; font-weight: 700; color: var(--klub); }
.telefon { position: absolute; left: 940px; top: 20px; width: 280px; height: 560px; padding: 10px; border-radius: 44px; background: var(--kava); box-shadow: 0 30px 60px rgba(25, 20, 17, 0.28); }
.telefon-displej { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 34px; background: #fff; }
/* aplikace v telefonu (PWA) — zatím „už brzy“ */
.aplikace { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 48px auto 0; padding: 22px 26px; border: 1px solid var(--linka); border-radius: 22px; background: #fff; }
.aplikace .ikona { flex-shrink: 0; }
.aplikace-titul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; font-weight: 800; }
.aplikace-text { margin-top: 4px; color: var(--text-3); }
.stitek-brzy { padding: 4px 10px; border-radius: 999px; background: var(--kava); color: var(--zluta); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- ceník ---------- */
.cenik { overflow: hidden; background: #fff; }
@supports (overflow: clip) { .cenik { overflow: clip; } }   /* hidden by blokovalo přilepenou hlavičku srovnání tarifů */
.cenik-in { position: relative; padding-top: 100px; padding-bottom: 100px; }
.cenik-hlava { text-align: center; }
/* podrobné srovnání tarifů (na kliknutí pod kartami ceníku) */
.srovnani { margin-top: 36px; text-align: center; }
.srovnani-tl { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.srovnani-tl::-webkit-details-marker { display: none; }
.srovnani-tl .ik { transform: rotate(90deg); transition: transform 0.2s; }
.srovnani[open] .srovnani-tl .ik { transform: rotate(-90deg); }
.srovnani-obal { margin-top: 24px; overflow-x: auto; border: 1px solid var(--linka); border-radius: 22px; background: #fff; text-align: left; }
/* overflow-x: auto dělá z obalu posuvný kontejner a přilepená hlavička tabulky se pak počítá vůči němu (s top 84 px spadla
   doprostřed tabulky). clip ořízne rohy, ale kontejner nevytvoří → hlavička se lepí k oknu pod hlavičku portálu. Tabulka se
   na mobilu vejde (table-layout: fixed), posouvat do stran ji není potřeba. */
@supports (overflow: clip) { .srovnani-obal { overflow: clip; } }
.srovnani-obal:focus-visible { outline: 3px solid var(--kava); outline-offset: 2px; }
.srovnani-tab { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.srovnani-tab th, .srovnani-tab td { padding: 12px 18px; border-bottom: 1px solid var(--linka); }
.srovnani-tab thead th { position: sticky; top: 0; background: var(--kava); color: #fff; font-size: 16px; }
.srovnani-tab thead th:first-child { border-top-left-radius: 21px; }
.srovnani-tab thead th:last-child { border-top-right-radius: 21px; }
.srovnani-tab thead th.hlavni { color: var(--zluta); }
.srovnani-tab thead th:not(:first-child) { text-align: center; }
.srovnani-tab td { width: 17%; text-align: center; color: var(--kava); font-weight: 600; }
.srovnani-tab td.hlavni { background: color-mix(in srgb, var(--zluta) 10%, #fff); }
.srovnani-tab tbody th { font-weight: 500; color: var(--text-2); }
.srovnani-tab .srovnani-skupina th { padding-top: 22px; background: var(--krem); color: var(--kava); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.srovnani-tab tr:last-child th, .srovnani-tab tr:last-child td { border-bottom: 0; }
.srovnani-tab .ano { color: #1E8E3E; }
.srovnani-tab .ne { color: var(--cervena-text); }
.srovnani-tab .ano, .srovnani-tab .ne { display: inline-flex; vertical-align: middle; }
@media (max-width: 759px) {
  /* na mobilu všechny tři tarify vedle sebe: užší sloupce, názvy tarifů se zalomí (&shy; v šabloně) */
  .srovnani-tab { min-width: 0; table-layout: fixed; font-size: 13px; }
  .srovnani-tab th, .srovnani-tab td { padding: 10px 4px; }
  .srovnani-tab thead th { padding: 12px 4px; font-size: 12px; text-align: center; hyphens: manual; }
  .srovnani-tab thead th:first-child, .srovnani-tab tbody th { width: 40%; padding-left: 12px; text-align: left; }
  .srovnani-tab .srovnani-skupina th { font-size: 11px; }
}
.tarify { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 50px; }
.tarif { position: relative; display: flex; flex-direction: column; padding: 36px; border: 1px solid var(--linka); border-radius: 26px; background: var(--krem); }
.tarif.hlavni { border-color: var(--kava); background: var(--kava); color: #fff; box-shadow: 0 30px 60px rgba(25, 20, 17, 0.22); }
.tarif-stitek { position: absolute; top: -14px; left: 36px; padding: 6px 14px; border-radius: 999px; background: var(--zluta); color: var(--kava); font-size: 13px; font-weight: 800; }
.tarif h3 { font-size: 24px; }
.tarif-popis { min-height: 48px; margin-top: 8px; font-size: 16px; color: var(--text-3); }
.tarif-cena { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.tarif-cena strong { font-size: 52px; line-height: 1.1; letter-spacing: -0.02em; }
.tarif-obdobi { font-size: 17px; color: var(--text-3); }
.tarif-pod { min-height: 44px; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--text-3); }
.tarif-kratce { display: none; margin-top: 6px; font-size: 14px; color: var(--text-3); }
.tarif.hlavni .tarif-popis, .tarif.hlavni .tarif-obdobi, .tarif.hlavni .tarif-pod, .tarif.hlavni .tarif-kratce { color: var(--svetly-text); }
.tarif .tl { width: 100%; margin-top: 16px; }
.tarif-vlastnosti { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linka); }
.tarif.hlavni .tarif-vlastnosti { border-top-color: var(--kava-linka); }
.tarif-vlastnosti li { display: flex; align-items: flex-start; gap: 10px; }
.tarif-vlastnosti .ik { margin-top: 3px; color: var(--cervena-text); }
.tarif.hlavni .tarif-vlastnosti .ik { color: var(--zluta); }
.cenik-pozn { max-width: 900px; margin: 30px auto 0; font-size: 15px; line-height: 1.55; color: var(--text-3); text-align: center; }
.cenik-cta { display: none; }

/* ---------- nápověda ---------- */
.napoveda-in { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 760px); justify-content: space-between; gap: 40px; padding-top: 100px; }
.napoveda-bok { position: relative; min-height: 650px; }
.napoveda h2 { margin-top: 16px; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; }
.podpora-karta { margin-top: 28px; padding: 24px; border: 1px solid var(--linka); border-radius: 20px; background: #fff; }
.podpora-karta b { display: block; font-size: 18px; }
.podpora-karta p { margin-top: 8px; color: var(--text-3); }
.podpora-karta .odkaz-sipka { margin-top: 14px; }
.napoveda-maskot { position: absolute; left: 0; bottom: 0; display: block; width: 260px; height: auto; }
.otazky { border-top: 1px solid var(--linka); }
.otazky details { border-bottom: 1px solid var(--linka); }
.otazky summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; font-size: 20px; font-weight: 800; list-style: none; cursor: pointer; }
.otazky summary::-webkit-details-marker { display: none; }
.otazky .znak { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--kava); border-radius: 50%; }
.otazky details[open] .znak { border-color: var(--zluta); background: var(--zluta); }
.otazky details[open] .znak .svisla { display: none; }
.otazky details p { margin-top: -12px; padding: 0 56px 26px 0; font-size: 17px; line-height: 1.55; color: var(--text-2); }

/* ---------- cedule s maskotem (text položený na ceduli z obrázku; Založit bandu) ---------- */
.cedule { position: relative; width: min(760px, 100%); margin: 0 auto; }
.cedule > img { display: block; width: 100%; height: auto; }
.cedule-text { position: absolute; left: 6%; right: 6%; top: 66.5%; bottom: 2.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* ---------- gekon „zpět nahoru“: vykoukne z pravého okraje, když je návštěvník dole (portal.js) ---------- */
.nahoru { position: fixed; right: 0; bottom: 24px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--kava); font: inherit; cursor: pointer; visibility: hidden; transform: translateX(110%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.5s; }
.nahoru.ukazat { visibility: visible; transform: translateX(0); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
/* obrázek je oříznutý i s prsty, které se drží okraje — rovná hrana těla (3,3 % šířky od kraje) sedí na okraji okna */
.nahoru img { display: block; width: 110px; height: auto; transform: translateX(16%); transition: transform 0.25s ease; }
.nahoru:hover img, .nahoru:focus-visible img { transform: translateX(6%); }   /* i po najetí drží okraj (majitel 4. 10.: neutrhnout se) */
.nahoru-bublina { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--zluta); font-size: 14px; font-weight: 800; box-shadow: 0 8px 20px rgba(25, 20, 17, 0.25); opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease 0.35s, transform 0.3s ease 0.35s; }
.nahoru.ukazat .nahoru-bublina { opacity: 1; transform: none; }
.nahoru:focus-visible { outline: none; box-shadow: none; }
.nahoru:focus-visible .nahoru-bublina { outline: 3px solid var(--kava); outline-offset: 2px; }

/* ---------- hero: žlutý kruh se jemně „nadechuje“, čárkovaný prstenec pomalu obíhá, karty doplují ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kruh { animation: kruh-vstup 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, kruh-dech 7s ease-in-out 1s infinite alternate; }
  .kruh-carka { animation: jen-objevit 1.2s ease-out 0.2s both, carka-obeh 90s linear infinite; }
  .hero-maskot { animation: maskot-vstup 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
  .karta { animation: karta-vstup 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both, karta-vznaseni 6s ease-in-out infinite alternate; }
  .karta-pokladna { animation-delay: 0.5s, 1.3s; }
  .karta-akce { animation-delay: 0.65s, 2.1s; }
  .karta-pripominka { animation-delay: 0.8s, 2.9s; }
}
@keyframes kruh-vstup { from { opacity: 0; transform: scale(0.7); } }
@keyframes kruh-dech { from { scale: 1; } to { scale: 1.04; } }
@keyframes jen-objevit { from { opacity: 0; } }
@keyframes carka-obeh { to { rotate: 360deg; } }
@keyframes maskot-vstup { from { opacity: 0; transform: translateY(24px); } }
@keyframes karta-vstup { from { opacity: 0; transform: translateY(16px); } }
@keyframes karta-vznaseni { from { translate: 0 0; } to { translate: 0 -6px; } }

/* ---------- hero naživo (portal.js přidá .zive; bez JS a při prefers-reduced-motion se nic z toho nepoužije) ----------
   Majitel 26. 9.: „je to trošku plné… bubliny střídat a dělat v nich lehké animace, jako že to žije“. Karty se střídají
   (na počítači nejvýš dvě naráz, na mobilu jedna ve stejném místě), vstup a odchod = transform + opacity (vznášení
   dál běží přes vlastnost translate, takže se nebijí). Uvnitř: klepnutí na Jdu (prst, vlna, fajfka, přibude avatar
   TY a číslo), pokladna přičítá platby (pruh roste, přeběhne lesk), připomínka zazvoní. */
.hero-obraz.zive .karta {
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.97);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.6s;
  animation: karta-vznaseni 6s ease-in-out infinite alternate;
}
.hero-obraz.zive .karta-pripominka { transform: translateX(40px) scale(0.97); }   /* přijede zprava jako upozornění v telefonu */
.hero-obraz.zive .karta.je-videt { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
.hero-obraz.zive .cislo { display: inline-block; }
.hero-obraz.zive .cislo.skok { animation: cislo-skok 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }

/* akce: někdo klepne na Jdu */
.hero-obraz.zive .karta-akce .volba .ano { position: relative; overflow: hidden; transition: background-color 0.35s ease, border-color 0.35s ease; }
.hero-obraz.zive .karta-akce:not(.jdu) .volba .ano { border-color: var(--kava); background: transparent; font-weight: 700; }
.hero-obraz.zive .karta-akce .volba .ano .ik { display: inline-block; width: 0; margin-right: 0; opacity: 0; vertical-align: -2px; transition: width 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease 0.1s; }
.hero-obraz.zive .karta-akce.jdu .volba .ano .ik { width: 14px; margin-right: 5px; opacity: 1; }
.hero-obraz.zive .karta-akce .volba .ano::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.6); opacity: 0; transform: translate(-50%, -50%) scale(0); pointer-events: none; }
.hero-obraz.zive .karta-akce.jdu .volba .ano::after { animation: klik-vlna 0.65s ease-out; }
.hero-obraz.zive .karta-akce .prst { display: block; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(25, 20, 17, 0.16); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; }
.hero-obraz.zive .karta-akce.klik .prst { animation: prst-klik 0.95s ease forwards; }
.hero-obraz.zive .avatary .av-ty { display: flex; order: -1; max-width: 0; margin-left: 0; overflow: hidden; border-width: 0; background: var(--kava); color: var(--zluta); opacity: 0; transform: scale(0.3); transition: max-width 0.4s ease, border-width 0.4s ease, opacity 0.3s ease 0.1s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s; }
.hero-obraz.zive .avatary span:first-child { transition: margin-left 0.4s ease; }
.hero-obraz.zive .karta-akce.jdu .avatary .av-ty { max-width: 28px; border-width: 2px; opacity: 1; transform: none; }
.hero-obraz.zive .karta-akce.jdu .avatary span:first-child { margin-left: -8px; }

/* pokladna: přibývají platby */
.hero-obraz.zive .prubeh span { position: relative; overflow: hidden; transition: width 0.9s cubic-bezier(0.3, 0.8, 0.3, 1); }
.hero-obraz.zive .prubeh span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%); transform: translateX(-100%); }
.hero-obraz.zive .prubeh.lesk span::after { animation: pruh-lesk 0.9s ease-out; }

/* připomínka: zazvoní */
.hero-obraz.zive .karta-pripominka.je-videt .kolecko { animation: kolecko-puls 1.4s ease-out 0.45s 2; }
.hero-obraz.zive .karta-pripominka.je-videt .kolecko .ik { transform-origin: 50% 12%; animation: zvonek-cink 1.1s ease-in-out 0.45s 2; }

@keyframes cislo-skok { from { opacity: 0; transform: translateY(9px); } }
@keyframes klik-vlna { 0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes prst-klik { 0% { opacity: 0; transform: scale(1.5); } 35% { opacity: 1; transform: scale(1.05); } 50% { transform: scale(0.8); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes pruh-lesk { to { transform: translateX(100%); } }
@keyframes kolecko-puls { from { box-shadow: 0 0 0 0 rgba(255, 214, 0, 0.75); } to { box-shadow: 0 0 0 12px rgba(255, 214, 0, 0); } }
@keyframes zvonek-cink { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }

/* ---------- podstránky portálu ---------- */
.stranka { padding-top: 56px; padding-bottom: 80px; }   /* jen svisle — boční okraj dává .wrap */
.dokument { max-width: 75ch; }
.dokument h1 { margin: 0 0 6px; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; overflow-wrap: anywhere; }
.dokument .muted { color: var(--text-3); }
.dokument-text { margin-top: 24px; line-height: 1.65; }
.dokument-text p, .dokument-text ul, .dokument-text ol { margin: 0 0 1em; }
.dokument-text ul, .dokument-text ol { padding-left: 1.4em; list-style: revert; }
.dokument-text a { overflow-wrap: anywhere; }
/* zásady a podmínky (migrace 066): nadpisy částí, tabulky účelů / příjemců / dob, poznámka „pracovní verze“ */
.dokument-text h2 { margin: 36px 0 10px; font-size: 22px; line-height: 1.3; }
.dokument-text h3 { margin: 24px 0 8px; font-size: 18px; line-height: 1.3; }
.dokument-text table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.dokument-text th, .dokument-text td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linka); text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }
.dokument-text th { font-weight: 800; }
.dokument-text blockquote { margin: 0 0 24px; padding: 14px 18px; border-radius: 14px; background: var(--krem-2); }
.dokument-text blockquote p { margin: 0; }
.dokument-dalsi { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linka); }
/* stránka Cookies (views/cookies_obsah.php, app/modules/mereni.php) */
.cookies h2 { margin: 36px 0 8px; font-size: 22px; }
.dokument-text .cookies-seznam { display: grid; gap: 8px; padding: 0; list-style: none; }
.cookies-seznam li { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--linka); border-radius: 14px; background: #fff; }
.cookies-seznam code { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.cookies-seznam small { color: var(--text-3); font-size: 14px; }
.cookies-volba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 24px 0; padding: 16px 20px; border-radius: 16px; background: var(--krem-2); }
.dokument-text .cookies-volba p { margin: 0; }
.cookies-zmenit { min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--kava); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.cookies-zmenit:hover { background: var(--kava-2); }
.cookies-zmenit[hidden] { display: none; }

/* Založit bandu (zatím „už brzy“) */
.brzy-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; gap: 48px; padding-top: 80px; padding-bottom: 80px; }
.brzy h1 { margin-top: 16px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.brzy .perex { max-width: 560px; }
.brzy-tlacitka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.brzy-pozn { margin-top: 28px; font-size: 15px; color: var(--text-3); }
.cedule-gekon .cedule-text { top: 75%; bottom: 2.5%; }
.cedule-gekon b { font-size: clamp(24px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.02em; }

/* 404 */
.chyba { background: var(--kava); color: #fff; }
/* obrázek a text jako jeden celek uprostřed stránky, vodorovně i svisle (majitel 8. 10.) */
.chyba-in { display: flex; align-items: center; justify-content: center; gap: 32px 72px; min-height: 600px; padding-top: 48px; padding-bottom: 48px; }
.chyba-maskot { flex: 0 0 auto; display: block; width: clamp(200px, 24vw, 300px); height: auto; }
.chyba-text { flex: 0 1 540px; }
.chyba-kod { font-size: clamp(80px, 10vw, 120px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--zluta); }
.chyba h1 { margin-top: 12px; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.chyba .perex { max-width: 520px; margin-top: 14px; }
.chyba-tlacitka { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* chybová stránka celá tmavá (majitel 8. 10.): obsah se natáhne do výšky okna a tmavá sekce s ním — bez krémového pruhu
   nad patičkou; kaktus (gekon) stojí dole u patičky, text uprostřed */
.bhp > main:has(> .chyba) { display: flex; flex-direction: column; background: var(--kava); box-shadow: none !important; border-radius: 0 !important; }
.bhp > main > .chyba { flex: 1 0 auto; display: flex; flex-direction: column; }
.bhp > main > .chyba > .chyba-in { flex: 1 0 auto; width: 100%; }

/* ---------- ZALOŽENÍ BANDY (app/views/zalozeni_*.php) ---------- */
.zalozeni { padding: 56px 0 80px; }
.zalozeni-in { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 640px); justify-content: center; align-items: start; gap: 32px; }
.zalozeni-in-siroke { grid-template-columns: minmax(0, 880px); }
.zalozeni-bok { position: relative; overflow: hidden; min-height: 780px; padding: 40px 40px 0; border-top: 6px solid var(--zluta); border-radius: 28px; background: var(--kava); color: #fff; }
.zalozeni-bok h1 { margin-top: 14px; font-size: clamp(36px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
.zalozeni-bok .perex { margin-top: 18px; font-size: 17px; }
.zalozeni-seznam { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; font-weight: 600; }
.zalozeni-seznam li { display: flex; align-items: flex-start; gap: 12px; }
.zalozeni-seznam .ik { margin-top: 1px; color: var(--zluta); }
.zalozeni-maskot { position: absolute; right: 12px; bottom: 0; display: block; width: 280px; height: auto; }
.zalozeni-karta { position: relative; padding: 40px; border: 1px solid var(--krem-2); border-radius: 28px; background: #fff; box-shadow: 0 30px 70px rgba(25, 20, 17, 0.1); }
.zalozeni-karta h2 { margin-top: 28px; font-size: clamp(26px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.zalozeni-pod { margin-top: 8px; color: var(--text-3); }
.kroky-zalozeni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text-3); }
.kroky-zalozeni li { display: flex; align-items: center; gap: 8px; }
.kroky-zalozeni li + li::before { content: ""; width: 32px; height: 2px; background: var(--linka); }
.krok-znak { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid #D8C8AE; border-radius: 50%; font-size: 13px; }
.kroky-zalozeni .aktualni { color: var(--kava); }
.kroky-zalozeni .aktualni .krok-znak { border-color: var(--kava); background: var(--kava); color: var(--zluta); }
.kroky-zalozeni .hotovy { color: var(--kava); }
.kroky-zalozeni .hotovy .krok-znak { border-color: var(--zluta); background: var(--zluta); color: var(--kava); }
.pole { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.pole > label { font-size: 14px; font-weight: 700; }
.pole input, .pole select { width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid #D8C8AE; border-radius: 14px; background: #fff; color: var(--kava); font: inherit; font-size: 16px; }
.pole input::placeholder, .pole textarea::placeholder { color: #8A7D71; }
.pole textarea { width: 100%; min-height: 90px; padding: 12px 16px; border: 1.5px solid #D8C8AE; border-radius: 14px; background: #fff; color: var(--kava); font: inherit; font-size: 16px; resize: vertical; }   /* vzkaz u žádosti o převod */
.pole [aria-invalid="true"], .adresa-pole.spatne { border-color: var(--cervena-text); }
.adresa-pole { display: flex; overflow: hidden; height: 50px; border: 1.5px solid #D8C8AE; border-radius: 14px; background: #fff; }
.adresa-pole input { flex: 1; min-width: 0; height: auto; border: 0; border-radius: 0; }
.adresa-pole input:focus-visible { outline: none; box-shadow: none; }
.adresa-pole:focus-within { outline: 3px solid var(--kava); outline-offset: 2px; box-shadow: 0 0 0 6px var(--zluta); }
.adresa-kraj { display: flex; align-items: center; padding: 0 14px; background: #F6EBD9; color: var(--text-3); font-size: 15px; white-space: nowrap; }
.pole-stav { font-size: 14px; color: var(--text-3); }
.pole-stav.volna { color: var(--kava); font-weight: 700; }
.pole-stav.volna::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--zluta); font-size: 12px; }
.pole-chyba { font-size: 14px; font-weight: 600; color: var(--cervena-text); }
.pole-stav.pole-chyba { font-weight: 600; }
.pole-dve { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pole-napoveda { margin-top: 10px; font-size: 14px; color: var(--text-3); }
.souhlas { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.souhlas input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--kava); }
.souhlas + .pole-chyba { margin-top: 6px; }
.hlaska-chyba { margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: #FDE7E3; color: var(--cervena-text-hover); font-weight: 600; }
.past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zalozeni-odeslat { width: 100%; margin-top: 26px; }
.zalozeni-login { margin-top: 16px; color: var(--text-3); text-align: center; }
.volba-tarifu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; border: 0; }
.volba-tarifu.pocet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pole-titulek { font-size: 14px; font-weight: 700; }
.tarif-volba { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 20px 20px; border: 2px solid var(--linka); border-radius: 20px; background: var(--krem); cursor: pointer; }
.tarif-volba input[type="radio"] { position: absolute; top: 22px; right: 18px; width: 22px; height: 22px; margin: 0; accent-color: var(--kava); }
.tarif-volba:has(input:checked) { border-color: var(--kava); background: #fff; box-shadow: 0 0 0 4px var(--zluta); }
.tarif-volba .tarif-stitek { left: 20px; }
.tarif-volba-hlava { display: flex; flex-direction: column; gap: 2px; padding-right: 30px; }
.tarif-volba-hlava b { font-size: 20px; }
.tarif-volba-cena { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.tarif-volba-cena small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.tarif-volba-popis { font-size: 15px; color: var(--text-2); }
.tarif-volba-limity { font-size: 14px; color: var(--text-3); }
.tarif-volba select { margin-top: auto; height: 44px; padding: 0 10px; border: 1.5px solid #D8C8AE; border-radius: 12px; background: #fff; color: var(--kava); font: inherit; font-size: 14px; }
.tarif-volba-zdarma { margin-top: auto; padding: 11px 0; font-size: 14px; font-weight: 700; }
.tarif-volba-uspora { margin-top: -2px; font-size: 13px; font-weight: 700; color: var(--cervena-text); }
/* Převod webu: užší formulář vedle Bandy → tarify pod sebou, název s cenou na jednom řádku (majitel 9. 10. přidal tarif zdarma) */
.volba-tarifu.radky { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.volba-tarifu.radky .tarif-volba { gap: 6px; padding: 18px 20px 18px 58px; }
.volba-tarifu.radky .tarif-volba input[type="radio"] { top: 21px; left: 20px; right: auto; }
.volba-tarifu.radky .tarif-volba-hlava { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 12px; padding-right: 0; }
.volba-tarifu.radky .tarif-volba-cena { font-size: 22px; white-space: nowrap; }
.volba-tarifu.radky .doporuceny { margin-top: 10px; }   /* štítek přečnívá nad kartu, nesmí se lepit na kartu nad ní */
.volba-tarifu.radky .tarif-stitek { top: -13px; left: 56px; right: auto; padding: 4px 12px; font-size: 12px; }
.volba-tarifu.radky .tarif-volba select { margin-top: 6px; }
.volba-tarifu.radky .tarif-volba-zdarma { margin-top: 0; padding: 0; }
.zalozeni-tlacitka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.odkaz-sipka.zpet .ik { transform: rotate(180deg); }
.shrnuti { margin: 24px 0 0; border-top: 1px solid var(--linka); }
.shrnuti div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linka); }
.shrnuti dt { color: var(--text-3); }
.shrnuti dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.zprava-maskot { justify-self: center; display: block; width: min(340px, 100%); height: auto; }
.hotovo-in { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 640px); justify-content: center; align-items: center; gap: 48px; }
.hotovo-obraz { position: relative; align-self: end; }
.hotovo-kruh { position: absolute; left: 8%; right: 8%; top: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--zluta); }
.hotovo-obraz img { position: relative; display: block; width: 100%; height: auto; }
.hotovo-text .kroky-zalozeni { margin-bottom: 24px; }
.hotovo-text h1 { margin-top: 12px; font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.hotovo-text .perex a { font-weight: 700; overflow-wrap: anywhere; }
.hotovo-platba { display: flex; gap: 20px; margin-top: 24px; padding: 20px; border: 1px solid var(--linka); border-radius: 20px; background: #fff; }
.hotovo-qr svg { display: block; width: 160px; height: 160px; }
.hotovo-platba dl { margin: 10px 0; }
.hotovo-platba dl div { display: flex; gap: 8px; font-size: 15px; }
.hotovo-platba dt { color: var(--text-3); }
.hotovo-platba dd { margin: 0; font-weight: 700; }
.hotovo-platba p { font-size: 14px; color: var(--text-3); }
.hotovo-dal { margin-top: 26px; font-weight: 800; }
.hotovo-kroky { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hotovo-kroky a, .hotovo-odkaz { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--linka); border-radius: 14px; background: #fff; color: var(--kava); font-weight: 700; text-decoration: none; }
.hotovo-kroky a:hover { border-color: var(--kava); color: var(--kava); }
.hotovo-kroky .ikona { width: 32px; height: 32px; border-radius: 10px; }
.hotovo-kroky a > span:nth-child(2) { flex-grow: 1; }
.hotovo-odkaz > span:nth-child(2) { display: flex; flex-direction: column; flex-grow: 1; gap: 6px; min-width: 0; }
.hotovo-odkaz input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--linka); border-radius: 10px; background: var(--krem); color: var(--text-3); font: inherit; font-size: 13px; }
.hotovo-odkaz .tl { flex-shrink: 0; min-height: 40px; padding: 8px 16px; font-size: 14px; }
.hotovo-text > .tl { margin-top: 24px; }

/* ---------- KATALOG TÝMŮ (app/views/katalog.php, assets/js/katalog.js, mapa Leaflet v assets/vendor/leaflet) ---------- */
/* filtr leží napůl přes předěl tmavé hlavy a krémového těla (majitel 25. 9.); flow-root = záporný spodní okraj filtru
   zkrátí hlavu (bez něj by se okraj „propadl“ ven a tmavé pozadí končilo až pod filtrem) */
.katalog-hlava { display: flow-root; background: var(--kava); color: #fff; padding-top: 56px; }
.katalog-hlava-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.katalog-uvod { max-width: 760px; }
.katalog-hlava h1 { margin-top: 14px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.katalog-hlava .perex { max-width: 620px; color: var(--svetly-text); }
.katalog-celkem { flex-shrink: 0; padding: 14px 20px; border: 1px solid var(--kava-linka); border-radius: 18px; color: var(--svetly-text); font-size: 15px; }
.katalog-celkem strong { display: block; color: var(--zluta); font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; }
.katalog-filtr { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 14px; margin: 36px 0 -64px; padding: 20px; border-radius: 24px; background: #fff; color: var(--kava); box-shadow: 0 24px 60px rgba(25, 20, 17, 0.18); }
.kf-pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kf-pole label { font-size: 13px; font-weight: 700; color: var(--text-3); }
.kf-pole select, .kf-vstup { height: 50px; border: 1.5px solid #D8C8AE; border-radius: 14px; background: #fff; color: var(--kava); font: inherit; font-size: 16px; }
.kf-pole select { width: 100%; padding: 0 10px; }
.kf-vstup { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.kf-vstup .ik { color: var(--text-3); }
.kf-vstup input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--kava); font: inherit; font-size: 16px; }
.kf-vstup input::placeholder { color: #8A7D71; }
.kf-vstup input:focus-visible { outline: none; box-shadow: none; }
.kf-vstup:focus-within { outline: 3px solid var(--kava); outline-offset: 2px; box-shadow: 0 0 0 6px var(--zluta); }
.kf-odeslat { min-height: 50px; padding: 10px 24px; }

.katalog-telo { padding: 120px 0 80px; }
.katalog-telo-in { display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: start; gap: 32px; }
.katalog-telo-in.bez-mapy { grid-template-columns: minmax(0, 1fr); }
.katalog-souhrn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.katalog-pocet { font-size: 20px; font-weight: 800; }
.katalog-cipy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.katalog-cipy a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--kava); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.katalog-cipy a:hover { background: var(--kava-2); color: var(--zluta); }
.katalog-cipy a.katalog-zrusit { padding: 7px 4px; background: none; color: var(--cervena-text); text-decoration: underline; }
.katalog-razeni { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-3); font-size: 14px; font-weight: 600; }
.katalog-razeni select { height: 40px; padding: 0 8px; border: 1.5px solid #D8C8AE; border-radius: 12px; background: #fff; color: var(--kava); font: inherit; font-size: 16px; font-weight: 600; }
.katalog-karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bez-mapy .katalog-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tym-karta { position: relative; display: flex; gap: 16px; height: 100%; padding: 20px; border: 1px solid var(--linka); border-radius: 20px; background: #fff; color: var(--kava); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.tym-karta:hover { border-color: var(--kava); color: var(--kava); box-shadow: 0 14px 34px rgba(25, 20, 17, 0.1); transform: translateY(-2px); }
.tym-znak { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 56px; height: 56px; overflow: hidden; border-radius: 16px; background: var(--znak, var(--kava)); color: var(--znak-akcent, var(--zluta)); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.tym-znak:has(img) { border: 1px solid var(--linka); background: #fff; }
.tym-znak img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tym-telo { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-right: 18px; }
.tym-nazev { font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tym-karta:has(.tym-stitek) .tym-nazev { padding-right: 56px; }
.tym-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--text-3); }
.tym-sport { padding: 3px 10px; border-radius: 999px; background: var(--krem-2); color: var(--kava); font-size: 13px; font-weight: 700; }
.tym-misto { display: inline-flex; align-items: center; gap: 4px; }
.tym-misto .ik { color: var(--cervena-text); }
.tym-popis { display: -webkit-box; overflow: hidden; color: var(--text-2); font-size: 14px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tym-stitek { position: absolute; top: 16px; right: 16px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.tym-stitek.aktivni { background: var(--zluta); color: var(--kava); }
.tym-stitek.novy { background: var(--kava); color: var(--zluta); }
/* tým ze starého banda.cz (migrace 029): tlumený štítek, karta vede na starý web */
.tym-stitek.stary { border: 1px solid var(--linka-2); background: var(--krem); color: var(--text-3); }
.tym-sipka { position: absolute; right: 16px; bottom: 16px; color: var(--text-3); transition: transform 0.15s, color 0.15s; }
.tym-karta:hover .tym-sipka { color: var(--kava); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .tym-karta, .tym-sipka { transition: none; } .tym-karta:hover { transform: none; } }

/* stránkování (paging_nav) v barvách portálu */
.katalog-vysledky .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; font-size: 15px; }
.katalog-vysledky .pg-info, .katalog-vysledky .pg-lbl, .katalog-vysledky .pg-gap { color: var(--text-3); }
.katalog-vysledky .pg-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.katalog-vysledky .pg { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1.5px solid var(--linka-2); border-radius: 999px; background: #fff; color: var(--kava); font-weight: 700; text-decoration: none; }
.katalog-vysledky a.pg:hover { border-color: var(--kava); }
.katalog-vysledky .pg.cur { border-color: var(--kava); background: var(--kava); color: var(--zluta); }
.katalog-vysledky .pg.off { opacity: 0.4; }

.katalog-prazdno { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 32px; padding: 32px; border: 1.5px dashed var(--linka-2); border-radius: 24px; background: #fff; }
.katalog-prazdno img { display: block; width: 100%; height: auto; }
.katalog-prazdno h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }
.katalog-prazdno p { max-width: 560px; margin-top: 10px; color: var(--text-2); }
.katalog-prazdno .katalog-prazdno-tl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }

/* mapa: na počítači sloupec vpravo (drží se při posouvání), na tabletu a mobilu za tlačítkem nad výpisem */
.katalog-mapa-bok { position: sticky; top: 24px; }
.katalog-mapa-prepinac { display: none; }
.katalog-mapa { position: relative; z-index: 1; height: min(640px, calc(100vh - 110px)); min-height: 420px; overflow: hidden; border: 1px solid var(--linka); border-radius: 24px; background: #EDE5D6; }
.katalog-mapa-stav { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; color: var(--text-3); font-weight: 600; text-align: center; }
.katalog-mapa-pozn { margin-top: 10px; font-size: 14px; color: var(--text-3); }
.katalog-mapa.leaflet-container { font: 14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.katalog-mapa .leaflet-control-attribution { font-size: 11px; }
.mapa-ikona { border: 0; background: none; }
.mapa-bod { display: block; width: 22px; height: 22px; border: 3px solid var(--kava); border-radius: 50%; background: var(--zluta); box-shadow: 0 3px 8px rgba(25, 20, 17, 0.35); }
.mapa-shluk { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 3px solid var(--zluta); border-radius: 50%; background: var(--kava); color: var(--zluta); font-size: 14px; font-weight: 800; box-shadow: 0 4px 12px rgba(25, 20, 17, 0.35); }
.katalog-mapa .leaflet-popup-content-wrapper { border-radius: 16px; }
.katalog-mapa .leaflet-popup-content { margin: 14px 16px; }
.mapa-popup b { display: block; font-size: 16px; line-height: 1.25; }
.mapa-popup span { display: block; margin-top: 4px; color: var(--text-3); }
.mapa-popup a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--cervena-text); font-weight: 800; text-decoration: none; }
.mapa-logo { display: block; line-height: 0; }
.mapa-logo img { width: 80px; height: auto; }

/* stránka týmu v katalogu (/katalog/tym/<adresa>, app/views/katalog_tym.php) */
.tym-hlava { padding-bottom: 56px; }
.tym-drobky { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; font-weight: 600; color: var(--svetly-text); }
.tym-drobky a { color: var(--svetly-text); text-decoration: none; }
.tym-drobky a:hover { color: var(--zluta); }
.tym-hlava-in { display: flex; align-items: center; gap: 28px; margin-top: 26px; }
.tym-znak-velky { width: 112px; height: 112px; border-radius: 28px; font-size: 36px; box-shadow: 0 0 0 1px var(--kava-linka); }
.tym-hlava h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.tym-hlava-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; color: var(--svetly-text); }
.tym-hlava-meta .tym-misto .ik { color: var(--zluta); }
.tym-hlava-meta .tym-stitek { position: static; }
.tym-hlava-tl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.tym-telo-stranka { padding-top: 56px; }
.tym-stranka { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 40px; }
.tym-obsah h2, .tym-box h2 { font-size: 22px; letter-spacing: -0.01em; }
.tym-obsah h2:not(:first-child) { margin-top: 36px; }
.tym-o-tymu { margin-top: 12px; max-width: 70ch; color: var(--text-2); line-height: 1.65; }
.tym-seznam { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; padding: 0; list-style: none; }
.tym-seznam a { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--linka); border-radius: 16px; background: #fff; color: var(--kava); text-decoration: none; }
.tym-seznam a:hover { border-color: var(--kava); }
.tym-seznam span { color: var(--text-3); font-size: 14px; }
.tym-bok { display: flex; flex-direction: column; gap: 16px; }
.tym-box { padding: 24px; border: 1px solid var(--linka); border-radius: 22px; background: #fff; }
.tym-box p { margin-top: 10px; color: var(--text-2); }
.tym-box-svetly { background: color-mix(in srgb, var(--kava) 5%, var(--krem)); }
@media (max-width: 899px) {
  .tym-stranka { grid-template-columns: minmax(0, 1fr); }
  .tym-hlava-in { align-items: flex-start; gap: 18px; }
  .tym-znak-velky { width: 72px; height: 72px; border-radius: 20px; font-size: 24px; }
}

/* „Chybí tu tvůj tým?“ inverzně: 5 % hnědé jako pruh na úvodce, tmavý text (majitel 25. 9.) */
.katalog-cta { overflow: hidden; border-top: 1px solid var(--linka); background: #F3ECE2; background: color-mix(in srgb, var(--kava) 5%, var(--krem)); color: var(--kava); }
/* Banda dole s odsazením od patičky (majitel 8. 10. 2026 — dřív stála přímo na ní) */
.katalog-cta-in { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: end; gap: 48px; padding-top: 48px; padding-bottom: 48px; }
.katalog-cta-maskot { display: block; width: 240px; height: auto; }
.katalog-cta-in > div { align-self: center; }
.katalog-cta h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; }
.katalog-cta .perex { max-width: 640px; color: var(--text-2); }
.katalog-cta-tl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.katalog-cta .odkaz-sipka { color: var(--kava); font-weight: 600; }
.katalog-cta .odkaz-sipka .ik { color: var(--cervena-text); }
.katalog-cta .odkaz-sipka:hover { color: var(--cervena-text); }
.katalog-cta-prevod { max-width: 640px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linka-2); color: var(--text-2); font-size: 15px; }
.katalog-cta-prevod a { color: var(--cervena-text); font-weight: 700; }

@media (max-width: 1343px) {
  .katalog-telo-in { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1099px) {
  .katalog-filtr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kf-hledat { grid-column: 1 / -1; }
  .katalog-telo-in, .katalog-telo-in.bez-mapy { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bez-mapy .katalog-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .katalog-mapa-bok { position: static; order: -1; }
  .katalog-mapa-prepinac { display: inline-flex; min-height: 44px; padding: 8px 20px; font-size: 15px; }
  .katalog-mapa-obal { display: none; margin-top: 14px; }
  .katalog-mapa-bok.otevrena .katalog-mapa-obal { display: block; }
  .katalog-mapa { height: 420px; min-height: 0; }
}
@media (max-width: 759px) {
  .katalog-hlava { padding-top: 28px; }
  .katalog-hlava .perex { margin-top: 10px; font-size: 16px; }
  .katalog-celkem { display: none; }   /* počet je i nad výsledky */
  .katalog-filtr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 -48px; padding: 16px; border-radius: 20px; }
  .kf-odeslat { grid-column: 1 / -1; }
  .katalog-razeni { margin-left: 0; }
  .katalog-telo { padding: 88px 0 48px; }
  .katalog-karty, .bez-mapy .katalog-karty { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tym-karta { padding: 16px; }
  .tym-znak { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; }
  .katalog-mapa { height: 360px; border-radius: 20px; }
  .katalog-vysledky .pg-list { margin-left: 0; }
  .katalog-prazdno { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 20px; text-align: center; }
  .katalog-prazdno img { width: 140px; margin: 0 auto; }
  .katalog-prazdno p { margin-left: auto; margin-right: auto; }
  .katalog-prazdno .katalog-prazdno-tl { justify-content: center; }
  .katalog-cta-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 40px; padding-bottom: 32px; }
  .katalog-cta-maskot { order: 2; width: 180px; margin: 0 auto; }
  .katalog-cta-in > div { padding-bottom: 28px; }
  .katalog-cta-tl { flex-direction: column; align-items: stretch; }
  .katalog-cta-tl .odkaz-sipka { justify-content: center; }
}

/* ========== menší notebooky ========== */
/* „Proč ne jen chat“: obraz je složený na 640 px (karta akce left 300 + šířka 340), sloupec ve dvou sloupcích ale
   pod ~1320 px šířky okna zúží až na ~490 px → karta vyčnívala z okna (1280 px s posuvníkem o 7 px, 1100 px o 118 px).
   Celý obraz se proto zmenší (jako .scena) tak, aby se vešel i s posuvníkem 17 px: 0,9 → sloupec ≥ 576 px (okno ≥ 1257),
   0,8 → ≥ 512 px (okno ≥ 1145), 0,75 → ≥ 480 px (okno ≥ 1081, pod 1100 je už jeden sloupec a zoom zase 1). */
@media (max-width: 1343px) {
  .scena { zoom: 0.8; }
  .proc-obraz { zoom: 0.9; }
  .cenik-hlava .nadpis-2 { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 1256px) { .proc-obraz { zoom: 0.8; } }
@media (max-width: 1144px) { .proc-obraz { zoom: 0.75; } }

/* ========== tablet ========== */
@media (max-width: 1099px) {
  .hlavicka-in { gap: 0 16px; min-height: 64px; }
  .logo img { width: 160px; }
  .menu-tlacitko { display: inline-flex; }
  /* mobilní menu: panel vyjede zprava, pod ním rozmazaný a ztmavený web; hlavička s logem zůstává, jak je (majitel 9. 10.) */
  .menu-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column;
    width: min(88vw, 380px); padding: 0 24px 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--kava);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35); transform: translateX(100%); visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s; }
  .hlavicka.otevrene .menu-panel { transform: none; visibility: visible; transition: transform 0.3s ease; }
  .menu-panel-hlava { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; min-height: 70px;
    border-bottom: 1px solid var(--kava-linka); }
  .menu-panel-logo img { display: block; width: 140px; height: auto; }
  .menu-zavrit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px;
    padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
  .menu-zavrit:hover { color: var(--zluta); }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a { padding: 15px 0; border-bottom: 1px solid var(--kava-linka); font-size: 18px; font-weight: 600; }
  .menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--kava-linka); color: var(--zluta); }
  .hlavicka-akce { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 24px; }
  .hlavicka-prihlasit { text-align: center; border: 2px solid var(--kava-linka); border-radius: 999px; }
  .menu-zavoj { position: fixed; inset: 0; z-index: 1; display: block; background: rgba(25, 20, 17, 0.5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
  .hlavicka.otevrene .menu-zavoj { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
  html.menu-otevrene { overflow: hidden; }

  .hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-text { padding: 56px 0 24px; }
  .hero-obraz { width: 660px; max-width: 100%; margin: -40px auto 0; }

  .sporty-in { flex-direction: column; align-items: flex-start; }
  .sporty-hlava { width: auto; }

  .proc-in { grid-template-columns: minmax(0, 1fr); }
  .proc-obraz { zoom: 1; width: 640px; max-width: 100%; margin: 0 auto; }

  .mrizka-funkci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funkce-karta { min-height: 0; }

  .jak-in { min-height: 0; }
  .jak-maskot { display: none; }
  .kroky { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .krok { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; min-height: 0; padding: 0; border: 0; background: none; }
  .krok-cislo { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--zluta); color: var(--kava); font-size: 18px; }
  .krok h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
  .krok p { margin: 0; font-size: 15px; }

  .scena { zoom: 1; width: 280px; height: 560px; }
  .prohlizec { display: none; }
  .telefon { left: 0; top: 0; }

  .tarify { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
  .tarif-popis, .tarif-pod { min-height: 0; }

  .napoveda-in { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .napoveda-bok { min-height: 0; }
  .napoveda-maskot { display: none; }

  .paticka-horni { flex-direction: column; }
  .paticka-sloupce { flex-wrap: wrap; gap: 28px 56px; }

  .brzy-in { grid-template-columns: minmax(0, 1fr); }
  .cedule-gekon { max-width: 560px; }

  .zalozeni-in, .hotovo-in { grid-template-columns: minmax(0, 640px); }
  .zalozeni-bok { min-height: 0; padding-bottom: 32px; }
  .zalozeni-maskot { display: none; }
  .hotovo-obraz { order: 2; width: min(320px, 100%); margin: 0 auto; }
}

/* ========== mobil ========== */
@media (max-width: 759px) {
  :root { --okraj: 20px; }
  .hero-text { padding: 28px 0 8px; }
  .hero h1 { margin-top: 14px; }
  .hero .perex { margin-top: 16px; }
  .hero-tlacitka { flex-direction: column; align-items: stretch; margin-top: 22px; }
  .hero-tlacitka .odkaz-sipka { justify-content: center; }
  .hero-plusy { justify-content: center; margin-top: 16px; font-size: 14px; }
  .hero-obraz { width: auto; max-width: none; height: 390px; margin: 0 calc(-1 * var(--okraj)); }
  .kruh, .kruh-carka, .karta-pokladna, .karta-pripominka { display: none; }
  .hero-maskot { left: auto; right: 0; width: 262px; }
  .karta-akce { left: var(--okraj); top: 20px; width: 190px; padding: 14px; }
  /* naživo se na mobilu střídají všechny tři karty na jednom místě (portal.js jede po jedné) */
  .hero-obraz.zive .karta-pokladna, .hero-obraz.zive .karta-pripominka { display: block; left: var(--okraj); right: auto; top: 20px; width: 200px; padding: 14px; }
  .hero-obraz.zive .karta-pripominka { display: flex; gap: 10px; }
  .hero-obraz.zive .karta-pripominka p { font-size: 13px; }
  .hero-obraz.zive .karta-pokladna .karta-titul { font-size: 16px; }
  .karta-akce .karta-titul { font-size: 16px; }
  .karta-akce .karta-radek { margin-top: 8px; }
  .karta-akce .avatary { display: none; }
  .karta-akce .volba span { padding: 7px 0; font-size: 14px; }

  .proc-in, .funkce-in, .jak-in, .ukazka-in, .cenik-in { padding-top: 48px; padding-bottom: 48px; }
  .proc-obraz { height: auto; }
  .chat, .proc-maskot { display: none; }
  .akce-karta { position: static; width: auto; }
  .proc-obraz.hraje .akce-karta { transition-delay: 0.1s; }   /* chat tu není → karta hned, docházka za ní */
  .proc-obraz.hraje .dochazka span { transition-delay: 0.6s; }
  .proc-obraz.hraje .dochazka span:nth-child(2) { transition-delay: 0.85s; }
  .proc-obraz.hraje .dochazka span:nth-child(3) { transition-delay: 1s; }

  .funkce-hlava { display: block; }
  .mrizka-funkci { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 24px; }
  .funkce-karta, .funkce-karta.tmava { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 0; border: 0; background: none; color: var(--kava); }
  .funkce-karta .ikona { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; }
  .funkce-karta h3 { margin: 0; font-size: 17px; }
  .funkce-karta p, .funkce-karta.tmava p { margin: 0; font-size: 15px; color: var(--text-3); }
  .stitek-premium { position: static; grid-column: 2; justify-self: start; margin-top: 4px; }
  .funkce-dalsi { margin-top: 28px; font-size: 16px; text-align: left; }

  .scena { margin-top: 32px; }

  .tarify { gap: 14px; margin-top: 24px; }
  .tarif { padding: 20px; border-radius: 20px; }
  .tarif-stitek { top: 20px; left: auto; right: 20px; padding: 4px 10px; font-size: 12px; }
  .tarif h3 { font-size: 18px; }
  .tarif-popis, .tarif-pod, .tarif .tl, .tarif-vlastnosti { display: none; }
  .tarif-cena { margin-top: 6px; }
  .tarif-cena strong { font-size: 30px; }
  .tarif-obdobi { font-size: 14px; }
  .tarif-kratce { display: block; }
  .cenik-pozn { margin-top: 16px; font-size: 14px; text-align: left; }
  .cenik-cta { display: flex; width: 100%; margin-top: 20px; }

  .napoveda-in { padding-top: 48px; padding-bottom: 48px; }
  .otazky summary { padding: 20px 0; font-size: 17px; }
  .otazky details p { padding: 0 0 20px; margin-top: -8px; font-size: 16px; }

  .aplikace { align-items: flex-start; gap: 14px; margin-top: 32px; padding: 18px; }
  .aplikace .ikona { width: 44px; height: 44px; border-radius: 14px; }
  .aplikace-titul { font-size: 17px; }

  .nahoru { bottom: 16px; }
  .nahoru img { width: 78px; }
  .nahoru-bublina { padding: 6px 10px; font-size: 13px; }

  .paticka-in { padding-top: 36px; padding-bottom: 28px; }
  .paticka-logo img { width: 130px; }
  .paticka-sloupce { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .paticka-sloupce > div:last-child { grid-column: 1 / -1; }   /* Kontakt přes celou šířku — e-mail se vejde na řádek */

  .brzy-in { gap: 32px; padding-top: 40px; padding-bottom: 48px; }

  .zalozeni { padding: 20px 0 48px; }
  .zalozeni-in { gap: 16px; }
  .zalozeni-bok, .zalozeni-karta { padding: 24px 20px; border-radius: 22px; }
  .zalozeni-bok .perex, .zalozeni-seznam { display: none; }
  .zalozeni-karta h2 { margin-top: 20px; }
  .kroky-zalozeni li:not(.aktualni) > span:last-child { display: none; }
  .kroky-zalozeni li + li::before { width: 16px; }
  .pole-dve, .volba-tarifu { grid-template-columns: minmax(0, 1fr); }
  .adresa-kraj { padding: 0 10px; font-size: 13px; }
  .shrnuti div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .zalozeni-tlacitka .tl { width: 100%; }
  .hotovo-platba { flex-direction: column; }
  .hotovo-odkaz { flex-wrap: wrap; }
  .chyba-in { flex-direction: column; gap: 28px; min-height: 0; text-align: center; }
  .chyba-text { flex: 0 0 auto; }
  .chyba .perex { margin-left: auto; margin-right: auto; }
  .chyba-tlacitka { justify-content: center; }
  .chyba-maskot { order: 2; width: 220px; }
}

/* ================= SLEVOVÁ AKCE v ceníku a výběru tarifu (slevy.php, plátno „20 let banda!cz a sleva“ 29. 9. 2026) ================= */
.cenik-akce { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 8px 22px 8px 8px; border-radius: 999px; background: var(--kava); color: var(--krem); font-size: 16px; font-weight: 600; text-decoration: none; }
.cenik-akce b { color: var(--zluta); }
.cenik-akce:hover { color: #fff; }
.cenik-akce-znak, .tarif-akce-znak { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--zluta); color: var(--kava); font-weight: 800; font-size: 16px; }
.cenik-akce-vice { display: inline-flex; align-items: center; gap: 4px; color: var(--zluta); font-weight: 700; }
.tarif-sleva { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--linka); }
.tarif.hlavni .tarif-sleva { background: #2F2721; border-color: #2F2721; }
.tarif-sleva-radek { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; }
.tarif-sleva-radek b { font-size: 17px; }
.tarif-sleva-radek s { color: var(--text-3); }
.tarif.hlavni .tarif-sleva-radek s { color: #A89B8C; }
.tarif-sleva-proc, .tarif-volba-sleva b { padding: 2px 8px; border-radius: 999px; background: var(--cervena); color: var(--kava) !important; font-size: 12px !important; font-weight: 800; align-self: center; }
.tarif-sleva small { font-size: 13px; color: var(--text-3); }
.tarif.hlavni .tarif-sleva small { color: var(--svetly-text); }
.tarif-akce { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding: 8px 18px 8px 8px; border-radius: 18px; background: var(--kava); color: var(--krem); font-size: 15px; }
.tarif-akce a { color: var(--zluta); font-weight: 700; }
.tarif-akce-znak { width: 38px; height: 38px; font-size: 14px; }
.pole-titulek + .tarif-akce { margin-top: 12px; }
.tarif-akce + .volba-tarifu { margin-top: 28px; }         /* štítek Doporučujeme přečnívá nad kartu, nesmí se lepit na pruh */
.tarif-akce + .volba-tarifu.radky { margin-top: 16px; }   /* pod sebou je doporučená až druhá karta */
.tarif-volba-sleva { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 700; }
.tarif-volba-sleva s { color: var(--text-3); font-weight: 500; }
@media (max-width: 759px) {
  .cenik-akce { font-size: 14px; gap: 10px; padding-right: 16px; border-radius: 22px; }
  .cenik-akce-vice { display: none; }
  .tarif-sleva { display: flex; }
}

/* ================= STRÁNKA VÝROČÍ /20-let (app/views/vyroci.php) ================= */
.menu .menu-vyroci { color: var(--zluta); }
.v20-hero { position: relative; overflow: hidden; background: var(--kava); color: var(--krem); }
.v20-hero-in { position: relative; display: flex; align-items: center; gap: 40px; min-height: 640px; padding-top: 40px; }
.v20-hero-text { position: relative; z-index: 1; flex: 1 1 0; display: flex; flex-direction: column; gap: 22px; max-width: 600px; padding: 20px 0 60px; }
.v20-nadtitulek { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--zluta); }
.v20-hero h1 { margin: 0; font-size: clamp(46px, 6.2vw, 84px); font-weight: 800; line-height: .96; letter-spacing: -.035em; }
.v20-hero h1 span { color: var(--zluta); }
.v20-perex { margin: 0; font-size: 20px; line-height: 1.5; color: #CDBFB1; }
.v20-perex b { color: var(--krem); }
.v20-stav { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; margin: 0; padding: 8px 18px 8px 8px; border-radius: 999px; background: #2F2721; font-size: 16px; font-weight: 700; }
.v20-stav-proc { padding: 7px 12px; border-radius: 999px; background: var(--cervena); color: var(--kava); font-weight: 800; }
.v20-tl { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.v20-tl-obrys { border: 2px solid var(--kava-linka); color: var(--krem); }
.v20-tl-obrys:hover { border-color: var(--krem); color: #fff; }
.v20-hero-obraz { position: relative; flex: 0 0 auto; width: min(700px, 48%); align-self: center; display: flex; justify-content: center; }   /* obrázek výš, ne přilepený ke spodku (majitel 29. 9.) */
.v20-hero-obraz img { position: relative; display: block; width: 100%; height: auto; }
.v20-kruh { position: absolute; width: 76%; aspect-ratio: 1; border-radius: 50%; background: var(--zluta); left: 12%; bottom: 8%; }
.v20-konfety { position: absolute; inset: 0; pointer-events: none; }
.v20-konfety i { position: absolute; display: block; width: 16px; height: 7px; border-radius: 2px; background: var(--zluta); }
.v20-konfety i:nth-child(1) { left: 44%; top: 12%; transform: rotate(-24deg); }
.v20-konfety i:nth-child(2) { left: 48%; top: 82%; width: 10px; height: 10px; border-radius: 50%; background: var(--cervena); }
.v20-konfety i:nth-child(3) { left: 93%; top: 17%; background: var(--cervena); transform: rotate(18deg); }
.v20-konfety i:nth-child(4) { left: 95%; top: 68%; width: 10px; height: 10px; border-radius: 50%; background: var(--zluta-bublina); }
.v20-konfety i:nth-child(5) { left: 6%; top: 9%; background: var(--krem); opacity: .5; transform: rotate(40deg); }
.v20-konfety i:nth-child(6) { left: 39%; top: 36%; width: 8px; height: 8px; border-radius: 50%; }

.v20-darek { padding: 100px 0 90px; }
.v20-hlava { max-width: 760px; margin: 0 auto; text-align: center; }
.v20-karty { display: flex; justify-content: center; gap: 24px; margin-top: 50px; }
.v20-karta { position: relative; flex: 0 1 460px; display: flex; flex-direction: column; gap: 12px; padding: 34px 36px 32px; border-radius: 28px; background: #fff; border: 1px solid var(--krem-2); }
.v20-karta.hlavni { background: var(--kava); border-color: var(--kava); color: var(--krem); }
.v20-karta h3 { margin: 0; font-size: 24px; }
.v20-karta-popis { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.v20-karta.hlavni .v20-karta-popis, .v20-karta.hlavni .v20-cena span, .v20-karta.hlavni .v20-mesicne { color: #CDBFB1; }
.v20-cena { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 0; }
.v20-cena strong { font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.v20-cena span { font-size: 16px; color: var(--text-3); }
.v20-puvodni { display: flex; align-items: center; gap: 10px; margin: 0; }
.v20-puvodni s { font-size: 18px; color: #8C7F74; }
.v20-karta.hlavni .v20-puvodni s { color: #A89B8C; }
.v20-usetrite { padding: 5px 10px; border-radius: 999px; background: var(--zluta); color: var(--kava); font-size: 14px; font-weight: 800; }
.v20-karta.hlavni .v20-usetrite { background: var(--cervena); }
.v20-mesicne { margin: 0; font-size: 14px; color: var(--text-3); }
.v20-karta .tl { justify-content: center; margin-top: 10px; }
.v20-karta.hlavni .tarif-stitek { left: 32px; }
.v20-stitky { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.v20-stitky li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--krem-2); font-size: 15px; font-weight: 600; }
.v20-stitky .ik { color: #1C7A34; }
.v20-uz-mate { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.v20-kroky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 60px 0 0; padding: 0; list-style: none; }
.v20-kroky li { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 24px; background: #fff; border: 1px solid var(--krem-2); }
.v20-kroky b { font-size: 20px; }
.v20-kroky span:last-child { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.v20-krok-c { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--zluta); font-size: 19px; font-weight: 800; }

.v20-pribeh { padding: 100px 0; background: var(--kava); color: var(--krem); }
.v20-pribeh .nadtitulek { color: var(--zluta); }
.v20-pribeh-hlava { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.v20-pribeh-hlava .nadpis-2 { max-width: 720px; color: var(--krem); }
.v20-osa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 50px 0 0; padding: 0; list-style: none; }
.v20-osa li { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 3px solid var(--kava-linka); }
.v20-osa li.zluta { border-top-color: var(--zluta); }
.v20-osa li.cervena { border-top-color: var(--cervena); }
.v20-osa .v20-rok { font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.v20-osa li.zluta .v20-rok { color: var(--zluta); }
.v20-osa li.cervena .v20-rok { color: var(--cervena); }
.v20-osa b:not(.v20-rok) { font-size: 19px; }
.v20-osa span { font-size: 16px; line-height: 1.5; color: #CDBFB1; }

.v20-otazky { padding: 100px 0 40px; }
.v20-otazky-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
.v20-otazky-hlava p { font-size: 17px; line-height: 1.55; color: var(--text-2); }
.v20-otazky-hlava img { display: block; width: min(270px, 100%); height: auto; margin: 28px auto 0; }   /* Banda na kameni uprostřed sloupce (majitel 9. 10.) */
.v20-faq { display: flex; flex-direction: column; gap: 12px; }
.v20-faq details { padding: 20px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--krem-2); }
.v20-faq summary { font-size: 18px; font-weight: 800; cursor: pointer; }
.v20-faq p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }

.v20-dik { margin-top: 40px; margin-bottom: 90px; }
.v20-dik-in { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 20px 24px; padding: 50px 56px; overflow: hidden; border-radius: 32px; background: var(--zluta); }   /* gekon v pozadí: u .novinky-karta */
.v20-dik-in > div { flex: 1 1 360px; }
.v20-dik h2 { margin: 0 0 8px; font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.v20-dik p { margin: 0; font-size: 18px; color: #2F2721; }
.v20-tl-kava { background: var(--kava); color: var(--krem); }
.v20-tl-kava:hover { color: #fff; background: #2F2721; }
.v20-tl-kava-obrys { border: 2px solid var(--kava); color: var(--kava); }

@media (max-width: 1099px) {
  .v20-hero-in { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; }
  .v20-hero-text { max-width: none; padding-bottom: 20px; }
  .v20-hero-obraz { width: min(560px, 100%); align-self: center; padding-top: 12%; }
  .v20-karty { flex-direction: column; align-items: center; }
  .v20-karta { width: 100%; max-width: 560px; flex-basis: auto; }
  .v20-osa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v20-otazky-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 759px) {
  .v20-hero-in { padding-top: 24px; }
  .v20-hero-text { gap: 16px; }
  .v20-perex { font-size: 17px; }
  .v20-stav { font-size: 14px; border-radius: 22px; }
  .v20-tl .tl { width: 100%; justify-content: center; }
  .v20-darek { padding: 56px 0 44px; }
  .v20-karty { margin-top: 30px; gap: 20px; }
  .v20-karta { padding: 26px 22px 22px; border-radius: 24px; }
  .v20-karta.hlavni .tarif-stitek { top: -12px; left: 22px; right: auto; padding: 5px 12px; }
  .v20-cena strong { font-size: 42px; }
  .v20-stitky { gap: 8px; }
  .v20-stitky li { padding: 8px 12px; font-size: 14px; }
  .v20-kroky { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
  .v20-kroky li { padding: 20px; }
  .v20-pribeh { padding: 56px 0; }
  .v20-osa { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 30px; }
  .v20-osa li { padding: 0 0 0 16px; border-top: 0; border-left: 3px solid var(--kava-linka); }
  .v20-osa li.zluta { border-left-color: var(--zluta); }
  .v20-osa li.cervena { border-left-color: var(--cervena); }
  .v20-osa .v20-rok { font-size: 30px; }
  .v20-otazky { padding: 50px 0 20px; }
  .v20-otazky-hlava img { display: none; }
  .v20-dik-in { padding: 30px 22px; border-radius: 26px; }
  .v20-dik h2 { font-size: 28px; }
  .v20-dik-in .tl { width: 100%; justify-content: center; }
}

/* ================= UKÁZKA NAŽIVO (majitel 28.–29. 9. 2026; osa v assets/js/ukazka.js, .zive přidá JS) =================
   Telefon = skutečný kabát aplikace (tmavá hlavička s logem a klubem, přehled Domů, spodní lišta — jako app.css),
   barvy webu klubu v prohlížeči se střídají. Banda nad telefonem byla, majitel 29. 9. ji odebral (hned nad ukázkou je další). */
.ukazka { overflow-x: clip; }
.telefon-displej { position: relative; background: #FFF8ED; }
.uk-app-top { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; height: 58px; padding: 14px 12px 0 16px; background: var(--kava); }
.uk-app-top img { width: 84px; height: auto; }
.uk-app-klub { display: flex; align-items: center; gap: 6px; padding: 2px 2px 2px 9px; border: 1px solid var(--kava-linka); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--krem); font-size: 11px; font-weight: 700; white-space: nowrap; }
.uk-app-znak { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--klub); color: #fff; font-size: 9px; font-weight: 800; }
.uk-app-obsah { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.uk-app-posun { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 20px; }
.uk-app-ahoj { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.uk-app-karta { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; border: 1px solid #F1E4CF; border-radius: 16px; background: #fff; }
.uk-app-karta > small { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cervena-text); }
.uk-app-karta > b { font-size: 15px; }
.uk-app-karta > span { font-size: 11.5px; color: var(--text-3); }
.uk-app-volba { display: flex; gap: 6px; margin-top: 6px; }
.uk-app-volba > span { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 0; border: 1.5px solid #E2D2B8; border-radius: 999px; font-size: 12px; font-weight: 700; }
.uk-app-volba .uk-ano { border-color: var(--kava); background: var(--kava); color: var(--krem); font-weight: 800; }
.uk-app-volba .uk-ano .ik { color: var(--zluta); }
.uk-prst { display: none; }
.uk-app-radek { display: flex; gap: 8px; font-size: 12px; }
.uk-app-radek b { flex: 0 0 62px; font-size: 12px; }
.uk-app-ok { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.uk-app-ok .ik { color: #1C7A34; }
.uk-app-zprava { display: flex; gap: 8px; font-size: 12px; line-height: 1.35; }
.uk-app-zprava b { display: block; font-size: 12px; }
.uk-app-av { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #F1E4CF; font-size: 9px; font-weight: 800; }
.uk-app-fotky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 4px; }
.uk-app-fotky i { display: block; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, #FFD600, #F4432B); }
.uk-app-fotky i:nth-child(2) { background: linear-gradient(135deg, #1D4E89, #7FB2F0); }
.uk-app-fotky i:nth-child(3) { background: linear-gradient(135deg, #2F2721, #C0A06A); }
.uk-app-lista { display: flex; flex-shrink: 0; padding: 5px 2px 14px; border-top: 1px solid #F1E4CF; background: #fff; }
.uk-app-lista > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; font-weight: 600; color: var(--text-3); }
.uk-app-lista i { display: flex; padding: 3px 10px; border-radius: 999px; }
.uk-app-lista svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uk-app-lista .on { color: var(--kava); font-weight: 800; }
.uk-app-lista .on i { background: var(--zluta); }
/* prohlížeč: řádek tréninku umí stav „Přihlásit se“ i „Jdeš“ (bez JS platí Jdeš jako dřív) */
.uk-radek-trenink .uk-tl-prihlasit { display: none; }
.uk-pocet { display: inline-block; }
/* barvy klubu pod scénou */
.uk-barvy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 22px; }
.uk-barvy-popis { margin-right: 8px; font-size: 14px; color: var(--text-3); }
.uk-barvy-popis b { color: var(--kava); }
.uk-barva { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.uk-barva i { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--linka); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.uk-barva:hover i { transform: scale(1.12); }
.uk-barva[aria-pressed="true"] i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--kava); }
.uk-barva:focus-visible { outline: 3px solid var(--kava); outline-offset: 0; }
/* plynulá změna barev klubu */
.klub-hlava, .klub-menu, .klub-datum, .klub-tl, .klub-karta, .klub-znak > span, .klub-nadpis span, .klub-soupiska li > span, .klub-soupiska .dalsi, .klub-konto .ik, .uk-app-znak {
  transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease; }

/* ---------- naživo (ukazka.js přidá .zive; bez JS a při omezeném pohybu nic z toho) ---------- */
.scena.zive .uk-radek-trenink .uk-tl-prihlasit { display: block; }
.scena.zive .uk-radek-trenink .uk-tl-jdes { display: none; }
.scena.zive.prijdu .uk-radek-trenink .uk-tl-prihlasit { display: none; }
.scena.zive.prijdu .uk-radek-trenink .uk-tl-jdes { display: flex; animation: uk-naskoc 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
.scena.zive .uk-pocet.skok { animation: cislo-skok 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
.scena.zive .uk-app-volba .uk-ano { overflow: hidden; border-color: #E2D2B8; background: #fff; color: var(--kava); font-weight: 700; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.scena.zive .uk-app-volba .uk-ano .ik { width: 0; opacity: 0; transition: width 0.3s ease, opacity 0.3s ease 0.1s; }
.scena.zive.prijdu .uk-app-volba .uk-ano { border-color: var(--kava); background: var(--kava); color: var(--krem); font-weight: 800; }
.scena.zive.prijdu .uk-app-volba .uk-ano .ik { width: 13px; opacity: 1; }
.scena.zive .uk-app-volba .uk-ano::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.55); opacity: 0; transform: translate(-50%, -50%) scale(0); pointer-events: none; }
.scena.zive.prijdu .uk-app-volba .uk-ano::after { animation: klik-vlna 0.65s ease-out; }
.scena.zive .uk-prst { display: block; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(25, 20, 17, 0.16); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; }
.scena.zive.klik .uk-prst { animation: prst-klik 0.95s ease forwards; }
.scena.zive .uk-app-posun { transition: transform 2.6s cubic-bezier(0.45, 0, 0.25, 1); }
.scena.zive.dolu .uk-app-posun { transform: translateY(var(--uk-posun, -220px)); }
@keyframes uk-naskoc { from { opacity: 0; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) {
  .klub-hlava, .klub-menu, .klub-datum, .klub-tl, .klub-karta, .klub-znak > span, .klub-nadpis span, .klub-soupiska li > span, .klub-soupiska .dalsi, .klub-konto .ik, .uk-app-znak { transition: none; }
}
@media (max-width: 1099px) {
  .uk-barvy { display: none; }   /* na tabletu a mobilu je vidět jen telefon — barvy webu klubu tam nejsou */
}

/* ---------- NOVINKY E-MAILEM (přihlášení k newsletteru: sekce na úvodce + stránka /newsletter/prihlasit, newsletter.php) ---------- */
.novinky-odber { padding: 0 0 110px; }   /* karta hned pod Bandou z Nápovědy — Banda z ní vylézá (majitel 29. 9.) */
.novinky-karta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px 56px; align-items: center;
  margin-top: -3px; padding: 48px 56px; border-radius: 28px; background: var(--zluta); color: var(--kava); overflow: hidden; }
/* velký černý gekon jen lehce prosvítá pod obsahem, nakloněný a větší než karta (majitel 29. 9.) — ve všech velkých
   žlutých boxech portálu (majitel 8. 10.: novinky na úvodce, „Díky, že hrajete s námi“ na /20-let) */
.novinky-karta::before, .v20-dik-in::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; width: 620px; height: 708px;
  background: url("/assets/img/logo/banda-symbol-cerny.svg") center / contain no-repeat; opacity: .06;
  transform: translate(-50%, -50%) rotate(-18deg); pointer-events: none; }
.novinky-karta > *, .v20-dik-in > * { position: relative; z-index: 1; }
.novinky-karta .nadtitulek { color: var(--kava); }
.novinky-karta h2 { margin-top: 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.novinky-text > p:last-child { margin-top: 12px; font-size: 17px; color: var(--text-2); }
.nl-odber { display: flex; flex-direction: column; gap: 8px; }
.nl-odber-popisek { font-size: 14px; font-weight: 700; }
.nl-odber-radek { display: flex; gap: 10px; }
.nl-odber-radek input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 18px; border: 1.5px solid #D8C8AE; border-radius: 999px; background: #fff; color: var(--kava); font: inherit; font-size: 16px; }
.nl-odber-radek input::placeholder { color: #8A7D71; }
.nl-odber-radek input[aria-invalid="true"] { border-color: var(--cervena-text); }
.nl-odber-radek .tl { min-height: 52px; white-space: nowrap; }
.novinky-karta .nl-odber-radek input { border-color: var(--kava); }
.novinky-karta .tl-cervene { background: var(--kava); border-color: var(--kava); color: #fff; }   /* na žluté kávové — červená by na ní nevynikla */
.nl-odber-pozn { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.nl-odber-pozn a { color: inherit; }
.nl-stranka { max-width: 560px; margin-top: 28px; }
@media (max-width: 1099px) {
  .novinky-odber { padding-top: 24px; }   /* Banda z Nápovědy je od téhle šířky schovaná */
  .novinky-karta { grid-template-columns: minmax(0, 1fr); margin-top: 0; padding: 40px; }
}
@media (max-width: 759px) {
  .novinky-odber { padding: 8px 0 64px; }
  .novinky-karta { padding: 32px 22px; border-radius: 22px; }
  .nl-odber-radek { flex-direction: column; }
  .nl-odber-radek .tl { width: 100%; }
}

/* ---------- PORTÁL (body.bhp — všechny stránky s layoutem portálu): přilepená hlavička + odhalovací patička (majitel 30. 9.) ----------
   Hlavička zůstává nahoře (na mobilu se při rolování dolů schová a při rolování nahoru vrátí — portal.js).
   Obsah je „list papíru“ se stínem, který při dorolování odjede nahoru a odkryje patičku přilepenou ke spodku okna.
   Jen na dost velkém okně (patička musí být nižší než okno), na mobilu normální patička.
   Žlutý pruh (6 px) patří ke značce a zůstává nahoře i při rolování (majitel 8. 10.) — hlavička se lepí hned pod něj, menu
   tak neposkočí; na mobilu schovaná hlavička zajede pod pruh. */
html:has(body.bhp) { scroll-padding-top: 96px; }
.bhp .pruh { position: sticky; top: 0; z-index: 36; }
.bhp .hlavicka { position: sticky; top: 6px; z-index: 35; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.bhp .hlavicka.odrolovano { box-shadow: 0 6px 24px rgba(25, 20, 17, 0.28); }
.bhp .srovnani-tab thead th { top: 90px; }
.bhp .katalog-mapa-bok { top: 114px; }
.bhp .katalog-mapa { height: min(640px, calc(100vh - 196px)); }   /* pod přilepenou hlavičkou se mapa i s poznámkou vejde do okna */
/* obsah jako vlastní vrstva: mapa (Leaflet má vrstvy se z-index 400–1000) ani nic jiného z obsahu nepřekryje hlavičku */
.bhp > main { isolation: isolate; }
@media (max-width: 1099px) {
  html:has(body.bhp) { scroll-padding-top: 76px; }
  .bhp .srovnani-tab thead th { top: 70px; }
  .bhp .hlavicka.schovana:not(.otevrene) { transform: translateY(-100%); box-shadow: none; }
}
@media (min-width: 900px) and (min-height: 640px) {
  .bhp > main { position: relative; z-index: 2; background: var(--krem); border-radius: 0 0 36px 36px;
    overflow: clip;   /* i barevná poslední sekce dostane zaoblený spodek; clip (ne hidden) nechá fungovat přilepené prvky uvnitř */
    box-shadow: 0 30px 60px -20px rgba(25, 20, 17, 0.55); }
  .bhp > .paticka { position: sticky; bottom: 0; z-index: 1; margin-top: -36px; padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { .bhp .hlavicka, .menu-panel, .menu-zavoj, .hlavicka.otevrene .menu-panel, .hlavicka.otevrene .menu-zavoj { transition: none; } }