@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonty/plex-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonty/plex-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonty/plex-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonty/plex-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonty/plex-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonty/plex-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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonty/serif-italic-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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonty/serif-italic-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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonty/serif-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonty/serif-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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonty/serif-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonty/serif-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;
}

/* Web oddluzeni-hanyas.cz — návrh „Základ". Vzhled jednotlivých prvků je
   v řádkových stylech stránek (tak ho předal návrh); tady je jen to, co
   v řádkovém stylu být nemůže: základ, stavy :hover/:focus a mobil.
   Písma (`pisma.css`) sem přilepí `sestav.py`. */

body { margin: 0; background: #ffffff; color: #45403b; font-family: "IBM Plex Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #b01f1b; text-decoration: none; }
a:hover { color: #8a1613; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid #b01f1b; outline-offset: 3px; }
details[open] summary > span:last-child > span:last-child { display: none; }   /* plus → minus */

.h1:hover { background: #8a1613 !important; border-color: #8a1613 !important; color: #ffffff !important; }
.h2:hover { background: #16130f !important; color: #ffffff !important; }
.h3:hover { background: #fbf9f7 !important; color: #16130f !important; }
.h4:hover { color: #b01f1b !important; }
.h7:hover { color: #ffffff !important; }
.f5:focus { border-color: #16130f !important; }
/* Past na roboty: pole, které člověk nevidí a nevyplní. */
.nevidet { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Barva podle druhu kontaktu ─────────────────────────────────────────────
   Telefon = červená webu, WhatsApp zelená, e-mail okrová, Facebook jeho vlastní modrá.
   Platí VŠUDE, kde se kontakt nabízí (lišta, tlačítka, dlaždice, karty,
   patička), aby se člověk orientoval podle barvy. `--k` je barva na světlém
   podkladu, `--ks` její světlá varianta na tmavém. */
.k-tel  { --k: #b01f1b; --kh: #8a1613; --ks: #f29a94; }
.k-wa   { --k: #1f8f4e; --kh: #176e3c; --ks: #6fd39a; }
.k-mail { --k: #b4690e; --kh: #8f5209; --ks: #f2b866; }
.k-fb   { --k: #1877f2; --kh: #1260c9; --ks: #7fb2ff; }
.k-btn  { background: var(--k) !important; border-color: var(--k) !important; color: #ffffff !important; }
.k-btn:hover { background: var(--kh) !important; border-color: var(--kh) !important; color: #ffffff !important; }
.k-obrys { color: var(--k) !important; border-color: var(--k) !important; background: transparent; }
.k-obrys:hover { background: var(--k) !important; color: #ffffff !important; }
.k-tma  { color: var(--ks) !important; }
.k-tma:hover { color: #ffffff !important; }
.k-text { color: var(--k) !important; }
.k-text:hover { color: var(--kh) !important; }
.k-odkaz:hover { color: var(--k) !important; }
.k-dlazdice svg[fill="none"] { stroke: var(--k) !important; }
.k-dlazdice svg:not([fill="none"]) { fill: var(--k) !important; }
.k-dlazdice > span:nth-of-type(2) { color: var(--k) !important; }
.k-dlazdice { border-top: 3px solid var(--k); }
.k-karta { border-top: 3px solid var(--k); }
/* Ikonka u kontaktu: velikost se řídí písmem, barva textem odkazu. */
.iko { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -0.16em; margin-right: 0.5em; }
.k-karta .iko, .k-odkaz .iko { color: var(--k); }
.k-karta h3 { color: var(--k) !important; }

/* Úvod: nadpis na JEDNOM řádku (na úzkém displeji se zalomit smí), věta, blok. */
.uvod h1 { max-width: none !important; white-space: nowrap; margin-bottom: 26px !important; }
.motto { font-family: 'Source Serif 4', serif; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.42; color: #16130f; margin: 0 0 50px; max-width: 30em; text-wrap: pretty; }
.motto em { font-style: italic; color: #b01f1b; }

/* ── Dvě cesty: „Ozvěte se nám" | „Ozveme se my" ───────────────────────────
   Jeden blok, všude stejný (úvod, Chci se oddlužit, Nejčastější dotazy).
   Levá půlka je klidná, pravá má jemně jiný podklad a červenou linku —
   je to výzva, ale ne křik. */
.k-vzkaz { --k: #16130f; --kh: #000000; --ks: #ded7d1; }
.dve { display: grid; grid-template-columns: 1fr 1fr; background: #ffffff; border: 1px solid #e6e0da; border-top: 2px solid #16130f; box-shadow: 0 14px 44px rgba(22, 19, 15, 0.06); }
.dve-pul { padding: 36px 40px 38px; min-width: 0; }
.dve-pul + .dve-pul { background: #fbf9f7; border-left: 1px solid #e6e0da; box-shadow: inset 0 3px 0 #b01f1b; margin-top: -2px; padding-top: 38px; }
.dve-pul h3 { font-family: 'Source Serif 4', serif; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: #16130f; margin: 0 0 6px; }
.dve-pul p { font-size: 15.5px; line-height: 1.5; color: #8d847d; margin: 0 0 8px; }
.dve-stav { font-size: 14px !important; margin-bottom: 0 !important; }
[hidden] { display: none !important; }
.dve-stav .doba-online { color: #1f8f4e; font-weight: 500; }
.dve-pul ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.dve-pul li a { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; }
.dve-pul li a:hover { text-decoration: none !important; }
.dve-pul li a:hover .kruh { background: var(--k); color: #ffffff; }
/* Ikonka v obrysovém kroužku v barvě kanálu (varianta 5 z šestnácti návrhů). */
.kruh { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--k); background: #ffffff; border: 1.5px solid var(--k); transition: background 0.15s, color 0.15s; }
.kruh .iko { margin: 0; width: 19px; height: 19px; }
.dve-pul + .dve-pul p { margin-bottom: 22px; }
.dve-pul form { display: flex; flex-direction: column; gap: 10px; }
.dve-pul input[type="tel"], .dve-pul select { border: 1px solid #d8d1c9; background: #ffffff; padding: 0 16px; height: 54px; font-size: 17px; color: #16130f; outline: none; font-family: inherit; width: 100%; }
.dve-pul input[type="tel"]:focus, .dve-pul select:focus { border-color: #b01f1b; box-shadow: 0 0 0 3px rgba(176, 31, 27, 0.12); }
.dve-pul button { background: #b01f1b; color: #ffffff; border: 1px solid #b01f1b; height: 54px; font-size: 17px; font-weight: 600; cursor: pointer; font-family: inherit; }
.dve-pul button:hover { background: #8a1613; border-color: #8a1613; }
.dve-pozn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: #1f8f4e; margin-top: 6px; }
.dve-pozn svg { width: 18px; height: 18px; flex: none; }

/* Odskok na kotvu (#zavolejte-mi, #napiste-nam): přilepená hlavička ji nesmí překrýt. */
section[id], .dve-pul[id] { scroll-margin-top: 116px; }

.vzkaz input, .vzkaz select { height: 46px; }

/* Telefonní doba v liště; `stav.js` přidá `.doba-online`, když právě běží. */
.doba { display: inline-flex; align-items: center; gap: 8px; }
.jen-mobil { display: none !important; }
.doba-tecka { width: 8px; height: 8px; border-radius: 50%; background: #6e655f; flex: none; }
/* Tečka jen když jsme v kanceláři; jinak holé hodiny. */
.doba:not(.doba-online) .doba-tecka { display: none; }
.doba-online { color: #d8f3e2; }
.doba-online .doba-tecka { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: tep 2.4s ease-out infinite; }
@keyframes tep { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
@media (prefers-reduced-motion: reduce) { .doba-online .doba-tecka { animation: none; } }

/* Šipka mezi kroky „Jak to bude probíhat" — ukazuje, že jdou po sobě. */
.sipka { font-size: 26px; line-height: 1; color: #6e655f; }

/* ── Plovoucí tlačítka vpravo dole: „Zavolejte mi" a „Napište nám" ─────────
   Bez skriptu: každé je <details>, tlačítko je jeho <summary>. Společné
   `name` zajistí, že je otevřené nejvýš jedno. Barvy jako u kontaktů: hovor
   červeně (telefon), psaná zpráva modře (jako e-mail). */
.plovouci { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: flex-end; gap: 10px; }
.vzkaz-tlacitko { display: flex; align-items: center; color: #ffffff; padding: 13px 20px; font-size: 15.5px; font-weight: 600; border-radius: 999px; box-shadow: 0 6px 22px rgba(22, 19, 15, 0.28); user-select: none; white-space: nowrap; }
.vzkaz-psat .vzkaz-tlacitko { background: #1e5aa8; }
.vzkaz-psat .vzkaz-tlacitko:hover { background: #174783; }
.vzkaz-volat .vzkaz-tlacitko { background: #b01f1b; }
.vzkaz-volat .vzkaz-tlacitko:hover { background: #8a1613; }
.vzkaz-tlacitko .iko { width: 1.2em; height: 1.2em; }
.vzkaz-zavrit { display: none; font-size: 26px; line-height: 0.7; }
.vzkaz[open] .vzkaz-popis, .vzkaz[open] .vzkaz-tlacitko .iko { display: none; }
.vzkaz[open] .vzkaz-zavrit { display: block; }
.vzkaz[open] .vzkaz-tlacitko { padding: 15px 18px; }
.vzkaz-okno { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - 110px); overflow-y: auto; background: #ffffff; border: 1px solid #e6e0da; box-shadow: 0 14px 44px rgba(22, 19, 15, 0.22); padding: 22px 22px 18px; }
.vzkaz-psat .vzkaz-okno { border-top: 3px solid #1e5aa8; }
.vzkaz-volat .vzkaz-okno { border-top: 3px solid #b01f1b; }
.vzkaz-nadpis { font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 600; color: #16130f; margin: 0 0 6px; }
.vzkaz-text { font-size: 14.5px; line-height: 1.5; margin: 0 0 16px; }
.vzkaz form { display: flex; flex-direction: column; gap: 12px; }
.vzkaz label { display: flex; flex-direction: column; gap: 5px; }
.vzkaz label > span { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #8d847d; font-weight: 500; }
.vzkaz input, .vzkaz textarea, .vzkaz select { border: 1px solid #d8d1c9; background: #ffffff; padding: 10px 12px; font-size: 16px; color: #16130f; outline: none; font-family: inherit; width: 100%; resize: vertical; }
.vzkaz input:focus, .vzkaz textarea:focus, .vzkaz select:focus { border-color: #16130f; }
.vzkaz button { align-self: flex-start; color: #ffffff; padding: 12px 26px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.vzkaz-psat button { background: #1e5aa8; border: 1px solid #1e5aa8; }
.vzkaz-psat button:hover { background: #174783; border-color: #174783; }
.vzkaz-volat button { background: #b01f1b; border: 1px solid #b01f1b; }
.vzkaz-volat button:hover { background: #8a1613; border-color: #8a1613; }
.vzkaz-pozn { font-size: 13px; line-height: 1.5; color: #8d847d; margin: 0; }

@media print { .plovouci { display: none; } }

@media (max-width: 900px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .uvod h1 { white-space: normal; }
  .dve { grid-template-columns: 1fr; }
  .dve-pul + .dve-pul { border-left: 0; border-top: 1px solid #e6e0da; margin-top: 0; }
  section[id], .dve-pul[id] { scroll-margin-top: 62px; }
  .g3 { grid-template-columns: 1fr !important; }
  .g2 { grid-template-columns: 1fr !important; gap: 22px !important; }
  /* Kroky pod sebou: šipka míří dolů, ne doprava. */
  .krok .sipka { transform: rotate(90deg); }
  /* Na úzké obrazovce se lepí JEN řádek menu. Celá hlavička (lišta + logo +
     menu) má 160 px, tedy pětinu telefonu. Aby se menu mohlo přilepit k okraji
     stránky a ne jen ke své hlavičce, obaly se „rozpustí" (`display: contents`)
     a logo i menu se stanou přímými řádky stránky. */
  .hlavicka, .hlavicka header, .hlavicka header > .sirka { display: contents !important; }
  .hlavicka header > .sirka > a:first-child { background: #ffffff; padding: 12px 28px 6px; }
  .hlavicka header > .sirka > span { display: none; }
  /* Tlačítko by v rozpuštěné hlavičce zabralo vlastní řádek — „Chci se
     oddlužit" je červeně přímo v menu. */
  .cta { display: none !important; }
  .jen-mobil { display: flex !important; }
  /* Menu na jednom řádku; když se nevejde, posouvá se do strany. */
  .menu { position: sticky; top: 0; z-index: 50; box-sizing: border-box; gap: 20px !important; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; padding: 6px 28px 8px; background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); border-bottom: 1px solid #e6e0da; }
  .menu a { padding: 6px 0; }
  .menu { scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
  .dve-pul { padding: 26px 20px 28px; }
  .dve-pul ul { grid-template-columns: 1fr; gap: 14px; }
  .dve-pul form { max-width: none; }
  .motto { margin-bottom: 34px; }
  /* Lišta na jeden řádek: stav vlevo, telefon a WhatsApp vpravo. E-mail a
     Facebook jsou o kus níž v obsahu a v patičce. */
  .lista .sirka { gap: 14px !important; flex-wrap: nowrap !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  .lista .k-mail, .lista .k-fb { display: none; }
  .lista a { white-space: nowrap; padding: 4px 0; }
  .hlavicka header > .sirka > a:first-child { padding-left: 18px; padding-right: 18px; }
  .menu { padding-left: 18px; padding-right: 18px; }
  .podtitul { display: none; }
  /* Tlačítko v hlavičce by zabralo vlastní řádek — na mobilu je „Chci se
     oddlužit" červeně přímo v menu. */
  .cta { display: none !important; }
  .jen-mobil { display: flex !important; }
  .lista .doba { white-space: nowrap; }
  .lista .doba-do { display: none; }
  /* Plovoucí „vzkaz" jen jako ikona — vedle „Zavolejte mi" by zabral půl obrazovky. */
  .vzkaz-psat .vzkaz-popis { display: none; }
  .vzkaz-psat .vzkaz-tlacitko .iko { margin-right: 0; }
  footer a { padding: 4px 0; }
  .plovouci { right: 12px; bottom: 12px; gap: 8px; }
  .vzkaz-tlacitko { padding: 12px 15px; font-size: 14.5px; }
  /* Okraje stejné na všech stránkách — i u dvousloupcových sekcí, které třídu `sirka` nemají. */
  .sirka, main [style*="max-width:1180px"] { padding-left: 18px !important; padding-right: 18px !important; }
  main section > [style*="max-width:1180px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  section > .sirka { padding-top: 52px !important; padding-bottom: 52px !important; }
  .g4, .g2m { grid-template-columns: 1fr !important; }
  .g4 > a { min-height: 0 !important; }
  footer .g3 { padding-left: 18px !important; padding-right: 18px !important; }
}