/* Písma (soubory ve složce /pisma) */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url(../pisma/manrope-latin-ext-400-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url(../pisma/manrope-latin-400-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url(../pisma/manrope-latin-ext-500-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url(../pisma/manrope-latin-500-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url(../pisma/manrope-latin-ext-600-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url(../pisma/manrope-latin-600-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url(../pisma/manrope-latin-ext-700-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url(../pisma/manrope-latin-700-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url(../pisma/manrope-latin-ext-800-normal.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:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url(../pisma/manrope-latin-800-normal.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 Mono';font-style:normal;font-display:swap;font-weight:400;src:url(../pisma/ibm-plex-mono-latin-ext-400-normal.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 Mono';font-style:normal;font-display:swap;font-weight:400;src:url(../pisma/ibm-plex-mono-latin-400-normal.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 Mono';font-style:normal;font-display:swap;font-weight:500;src:url(../pisma/ibm-plex-mono-latin-ext-500-normal.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 Mono';font-style:normal;font-display:swap;font-weight:500;src:url(../pisma/ibm-plex-mono-latin-500-normal.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 Mono';font-style:normal;font-display:swap;font-weight:600;src:url(../pisma/ibm-plex-mono-latin-ext-600-normal.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 Mono';font-style:normal;font-display:swap;font-weight:600;src:url(../pisma/ibm-plex-mono-latin-600-normal.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}

/* =========================================================================
   odpisybytu.cz – styly
   Barvy a základní hodnoty jsou v :root níže – změna zde se projeví všude.
   Písma (@font-face) jsou v souboru pisma.css, který postav.py vloží na začátek.
   ========================================================================= */

:root {
  --pozadi: #F4F6F3;       /* světlé pozadí stránky */
  --bila: #FFFFFF;
  --tmava: #13201A;        /* hlavní tmavá (text, tmavé bloky) */
  --tmava-2: #1A2A22;      /* pole v tmavých blocích */
  --zelena: #1E6B45;       /* odkazy, akcenty */
  --zelena-tmava: #134A2F;
  --limetka: #B8F0A0;      /* zvýraznění na tmavém */
  --mata: #E4EDE5;         /* světle zelené pásy */
  --text: #13201A;
  --text-2: #46544C;       /* doprovodný text */
  --text-3: #5E6B63;       /* drobné poznámky */
  --text-tmave-2: #C4D4C8; /* doprovodný text na tmavém */
  --text-tmave-3: #A9C2B1;
  --linka: #DCE3DD;
  --linka-tmava: #2E4036;
  --radius: 16px;
  --sirka: 1240px;
  --pismo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Consolas', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--pozadi); color: var(--text); font-family: var(--pismo); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--zelena); }
a:hover { color: var(--zelena-tmava); }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-weight: 800; letter-spacing: -0.035em; }
h2 { font-weight: 800; font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-weight: 700; font-size: 20px; }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); }
.obal { max-width: var(--sirka); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sekce { padding: 80px 0; }
.sekce-mensi { padding: 56px 0; }
.bez-horni { padding-top: 0; }
.pas-bily { background: var(--bila); border-top: 1px solid #E1E8E2; border-bottom: 1px solid #E1E8E2; }
.pas-mata { background: var(--mata); }
.pas-tmavy { background: var(--tmava); color: #E9F0EA; }
.pas-tmavy h2, .pas-tmavy h3 { color: #fff; }
.uvodni-text { font-size: 18px; color: var(--text-2); max-width: 720px; margin: 10px 0 32px; }
.nadtitulek { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--zelena); margin: 0 0 14px; }
.poznamka { font-size: 13px; color: var(--text-3); }
.preskocit { position: absolute; left: -9999px; top: 0; background: var(--tmava); color: #fff; padding: 10px 16px; z-index: 100; }
.preskocit:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--zelena); outline-offset: 2px; }

/* ---------- Tlačítka ---------- */
.tl { display: inline-block; text-decoration: none; border-radius: 999px; font-weight: 800; font-size: 17px; padding: 15px 26px; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.3; text-align: center; }
.tl-tmave { background: var(--tmava); color: #fff; }
.tl-tmave:hover { background: #24382D; color: #fff; }
.tl-obrys { border-color: var(--tmava); color: var(--tmava); font-weight: 700; }
.tl-obrys:hover { background: var(--tmava); color: #fff; }
.tl-limetka { background: var(--limetka); color: var(--tmava); }
.tl-limetka:hover { background: #A6E68C; color: var(--tmava); }
.tl-mensi { font-size: 15px; padding: 11px 18px; }
.tl[disabled] { opacity: .6; cursor: wait; }

/* ---------- Hlavička ---------- */
.hlavicka .obal { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.znacka { text-decoration: none; color: var(--tmava); display: flex; flex-direction: column; line-height: 1.2; }
.znacka b { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.znacka b span { color: var(--zelena); }
.znacka small { font-size: 13px; color: var(--text-3); }
.znacka:hover { color: var(--tmava); }
.menu { display: flex; align-items: center; gap: 24px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.menu ul a { text-decoration: none; color: var(--tmava); font-weight: 600; font-size: 15px; }
.menu ul a:hover, .menu ul a[aria-current] { color: var(--zelena); }
.menu-tlacitko { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--tmava); }
.menu-tlacitko svg { width: 28px; height: 28px; }

/* ---------- Úvod ---------- */
.uvod .obal { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 72px; }
.uvod h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.04; margin-bottom: 20px; }
.uvod h1 span { color: var(--zelena); }
.uvod .perex { font-size: 20px; color: var(--text-2); max-width: 600px; margin: 0 0 30px; }
.uvod .perex strong { color: var(--tmava); }
.tlacitka { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.stitky { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.stitky li { background: var(--bila); border: 1px solid var(--linka); border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 600; }

/* Mini kalkulačka */
.mini-kalk { background: var(--tmava); color: #E9F0EA; border-radius: 20px; padding: 30px; box-shadow: 0 24px 60px rgba(19,32,26,.18); display: flex; flex-direction: column; gap: 18px; }
.mini-kalk h2 { font-size: 24px; color: #fff; letter-spacing: -0.01em; }
.mini-kalk .pole-rada { display: flex; flex-wrap: wrap; gap: 14px; }
.mini-kalk label { flex: 1 1 160px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 13px; color: var(--text-tmave-2); }
.mini-kalk input { font-family: var(--mono); font-size: 19px; padding: 11px 13px; border: 1.5px solid #3A4D42; border-radius: 10px; background: var(--tmava-2); color: #fff; width: 100%; }
.mini-kalk input:focus { border-color: var(--limetka); outline: none; }
.mini-kalk .vysledek { border-top: 1px solid var(--linka-tmava); padding-top: 16px; }
.mini-kalk .vysledek p { margin: 0; font-size: 14px; color: var(--text-tmave-2); }
.mini-kalk .vysledek .castka { font-family: var(--mono); font-weight: 600; font-size: clamp(36px, 4vw, 46px); line-height: 1.05; color: var(--limetka); margin: 2px 0 6px; }
.mini-kalk .castka-mala { color: #fff; font-family: var(--mono); }
.mini-kalk .predpoklad { font-size: 12px; color: var(--text-tmave-3); margin: 0; }
.mini-kalk .tl { align-self: flex-start; }

/* ---------- Karty situací ---------- */
.karty-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.karta-situace { background: var(--pozadi); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; color: var(--tmava); text-decoration: none; }
a.karta-situace:hover { background: #EAF0EB; color: var(--tmava); }
.karta-situace .cislo { font-family: var(--mono); font-size: 13px; color: var(--zelena); }
.karta-situace strong { font-size: 20px; line-height: 1.25; }
.karta-situace span.text { font-size: 15px; color: var(--text-2); }
.karta-situace .odkaz { margin-top: auto; font-weight: 700; color: var(--zelena); }
.karta-situace.carkovana { background: transparent; border: 1.5px dashed #9FB3A6; }

/* ---------- Řetězec vy → já → poradce ---------- */
.retez { display: grid; grid-template-columns: 1fr 48px 1.2fr 48px 1fr; align-items: stretch; }
.retez .sipka { display: flex; align-items: center; justify-content: center; }
.retez .sipka svg { width: 36px; height: 22px; }
.role { background: var(--bila); border: 1px solid var(--linka); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.role .kdo { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; }
.role strong { font-size: 20px; }
.role span.text { font-size: 15px; color: var(--text-2); }
.role .pozn { font-size: 13px; color: var(--text-3); border-top: 1px solid #E5EBE6; padding-top: 8px; margin-top: auto; }
.role-ja { background: var(--tmava); color: #E9F0EA; border: 0; box-shadow: 0 20px 50px rgba(19,32,26,.16); gap: 10px; }
.role-ja .kdo { color: var(--limetka); }
.role-ja strong { color: #fff; font-size: 21px; }
.role-ja .hodnoty { background: var(--tmava-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; }
.role-ja .hodnoty .h1 { font-family: var(--mono); color: var(--limetka); font-weight: 600; }
.role-ja .hodnoty .slabe { color: var(--text-tmave-3); }
.role-ja .pozn-tmava { font-size: 13px; color: var(--limetka); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.role-ja .pozn-tmava:hover { color: #fff; }

/* ---------- Ukázky ---------- */
.ukazky { background: var(--mata); border-radius: 24px; padding: 40px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: center; }
.ukazky h2 { font-size: 32px; margin-bottom: 14px; }
.ukazky-karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ukazka { text-decoration: none; color: var(--tmava); background: var(--bila); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(19,32,26,.08); transition: transform .15s; }
.ukazka:hover { transform: translateY(-3px); color: var(--tmava); }
.ukazka img { width: 100%; border-bottom: 1px solid var(--linka); }
.ukazka span.popis { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.ukazka strong { font-size: 17px; line-height: 1.3; }
.ukazka small { font-size: 14px; color: var(--text-2); }
.ukazka em { font-style: normal; margin-top: 8px; font-weight: 700; color: var(--zelena); font-size: 15px; }

/* ---------- Postup ---------- */
.kroky { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kroky li { background: var(--bila); border: 1px solid var(--linka); border-radius: var(--radius); padding: 26px; }
.kroky .kdy { font-family: var(--mono); color: var(--zelena); font-weight: 600; margin: 0 0 12px; }
.kroky h3 { margin-bottom: 8px; }
.kroky p { margin: 0; color: var(--text-2); }
.podklady { margin-top: 20px; background: var(--mata); border-radius: var(--radius); padding: 8px 28px; }
.podklady > div { display: grid; grid-template-columns: 290px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid #CFDCD1; }
.podklady > div:last-child { border-bottom: 0; }
.podklady strong { font-size: 17px; }

/* ---------- Ceník ---------- */
.cenik .obal { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 40px; align-items: start; }
.cenik p { color: var(--text-tmave-2); font-size: 18px; }
.cenik .platba { font-size: 15px; color: var(--text-tmave-3); }
.ceny { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; }
.cena { border: 1px solid #3A4D42; border-radius: var(--radius); padding: 26px; }
.cena p { margin: 0; }
.cena .nazev { font-weight: 800; color: #fff; font-size: 17px; }
.cena .castka { font-family: var(--mono); font-size: 24px; font-weight: 600; color: #fff; white-space: nowrap; margin: 6px 0 8px; }
.cena .popis { font-size: 14px; color: var(--text-tmave-2); margin-bottom: 8px; }
.cena .upresneni { font-size: 13px; color: var(--text-tmave-3); }
.cena-hlavni { background: var(--limetka); border: 0; }
.cena-hlavni .nazev, .cena-hlavni .castka, .cena-hlavni .popis { color: var(--tmava); }
.cena-hlavni .castka { font-size: 38px; line-height: 1.1; }
.terminy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #3A4D42; border: 1px solid #3A4D42; border-radius: var(--radius); overflow: hidden; }
.terminy p { margin: 0; }
.terminy-nadpis, .terminy-pozn { grid-column: 1 / -1; background: var(--tmava); padding: 16px 22px 4px; font-weight: 800; color: #fff !important; font-size: 17px !important; }
.terminy-pozn { padding: 12px 22px 16px; font-weight: 400; font-size: 13px !important; color: var(--text-tmave-3) !important; }
.termin { background: var(--tmava); padding: 12px 22px; }
.termin .nazev { font-size: 14px !important; color: var(--text-tmave-3) !important; }
.termin .lhuta { font-family: var(--mono); font-size: 20px !important; font-weight: 600; color: var(--limetka) !important; margin: 2px 0; }
.termin .priplatek { font-size: 14px !important; color: var(--text-tmave-2); }

/* ---------- Domy (rozklikávací) ---------- */
.domy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dum { background: var(--bila); border: 1px solid var(--linka); border-radius: var(--radius); padding: 22px; }
.dum summary { list-style: none; cursor: pointer; display: flex; gap: 20px; align-items: center; }
.dum summary::-webkit-details-marker { display: none; }
.dum summary .ikona { width: 52px; height: 52px; flex: none; }
.dum summary .titul { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dum summary strong { font-size: 19px; }
.dum summary small { font-size: 15px; color: var(--text-2); }
.dum summary .rozbal { width: 20px; height: 20px; transition: transform .2s; flex: none; }
.dum[open] summary .rozbal { transform: rotate(180deg); }
.dum .obsah { margin-top: 16px; padding-top: 16px; border-top: 1px solid #E5EBE6; font-size: 15px; color: #2C3A32; }
.dum .obsah p { margin: 0 0 10px; }

/* ---------- Průvodce ---------- */
.hlavicka-sekce { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 26px; }
.clanky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.clanky a { text-decoration: none; color: var(--tmava); background: var(--bila); border-radius: 14px; padding: 22px; font-weight: 700; }
.clanky a span { display: block; margin-top: 6px; font-weight: 500; color: var(--text-2); font-size: 15px; }
.clanky a:hover { box-shadow: 0 8px 24px rgba(19,32,26,.08); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.faq div { background: var(--bila); border: 1px solid var(--linka); border-radius: 14px; padding: 20px 22px; }
.faq strong { display: block; font-size: 17px; margin-bottom: 4px; }
.faq p { margin: 0; font-size: 15px; color: var(--text-2); }

/* ---------- Reference + o mně ---------- */
.reference { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
.recenze { margin: 0; background: var(--bila); border: 1px solid var(--linka); border-radius: 20px; padding: 34px; }
.recenze .hvezdy { color: var(--zelena); letter-spacing: 3px; margin: 0 0 12px; }
.recenze blockquote { margin: 0 0 16px; font-weight: 600; font-size: 18px; line-height: 1.55; }
.recenze blockquote p { margin: 0 0 10px; }
.recenze figcaption { color: var(--text-3); }
.o-mne { background: var(--tmava); color: #E9F0EA; border-radius: 20px; padding: 34px; display: flex; flex-direction: column; gap: 14px; }
.o-mne .hlava { display: flex; gap: 16px; align-items: center; }
.o-mne img { width: 64px; height: 64px; border-radius: 50%; }
.o-mne .jmeno { font-weight: 800; font-size: 21px; color: #fff; margin: 0; }
.o-mne p { color: var(--text-tmave-2); margin: 0; }
.o-mne dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.o-mne dd { margin: 0; font-family: var(--mono); font-size: 28px; color: var(--limetka); }
.o-mne dt { font-size: 13px; color: var(--text-tmave-3); }
.o-mne .tl { margin-top: auto; align-self: flex-start; }

/* ---------- Jiný účel ---------- */
.jiny-ucel { background: var(--limetka); border-radius: 24px; padding: 40px 44px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.jiny-ucel h2 { font-size: 32px; margin-bottom: 8px; }
.jiny-ucel p { margin: 0; font-size: 17px; color: #2C3A32; }

/* ---------- Patička ---------- */
.paticka { border-top: 1px solid var(--linka); }
.paticka .obal { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 14px 36px; justify-content: space-between; font-size: 14px; color: var(--text-2); }
.paticka .upozorneni { width: 100%; font-size: 13px; color: var(--text-3); border-top: 1px dashed var(--linka); padding-top: 14px; margin: 0; }

/* ---------- Podstránky ---------- */
.zahlavi { padding: 40px 0 32px; }
.zahlavi h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; margin-bottom: 14px; }
.zahlavi .podtitulek { font-weight: 800; font-size: 21px; color: var(--zelena); margin: -2px 0 10px; }
.zahlavi .perex { font-size: 19px; color: var(--text-2); max-width: 760px; margin: 0; }
.drobky { font-size: 14px; color: var(--text-3); margin-bottom: 18px; }
.drobky a { color: var(--text-3); }
.text { max-width: 780px; font-size: 17px; }
.text h2 { font-size: 28px; margin: 40px 0 14px; }
.text h3 { margin: 28px 0 10px; }
.text ul, .text ol { padding-left: 22px; }
.text li { margin-bottom: 6px; }
.text table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; background: var(--bila); border-radius: 12px; overflow: hidden; }
.text th, .text td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linka); vertical-align: top; }
.text th { background: var(--mata); font-weight: 700; }
.ramecek { background: var(--bila); border: 1px solid var(--linka); border-left: 4px solid var(--zelena); border-radius: 12px; padding: 18px 22px; margin: 24px 0; }
.ramecek p:last-child { margin: 0; }
.s-panelem { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.panel { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.panel-box { background: var(--bila); border: 1px solid var(--linka); border-radius: var(--radius); padding: 24px; }
.panel-box.tmavy { background: var(--tmava); color: #E9F0EA; border: 0; }
.panel-box.tmavy h3 { color: #fff; }
.panel-box h3 { font-size: 18px; margin-bottom: 8px; }
.panel-box p { font-size: 15px; color: var(--text-2); }
.panel-box.tmavy p { color: var(--text-tmave-2); }


/* ---------- Kalkulačka (stránka) ---------- */
.kalk { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bila); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 var(--linka), 0 24px 60px rgba(19,32,26,.08); }
.kalk-zadani { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.kalk-rada { display: flex; flex-wrap: wrap; gap: 16px; }
.kalk-pole { flex: 1 1 160px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.kalk-pole.siroke { flex: 2 1 220px; }
.kalk-pole input { font-family: var(--mono); font-size: 20px; padding: 12px 14px; border: 1.5px solid #CBD5CE; border-radius: 10px; background: #FAFBFA; color: var(--tmava); width: 100%; }
.kalk-pole input:focus { border-color: var(--zelena); outline: none; }
.kalk-pomoc { margin: -6px 0 0; font-size: 13px; color: var(--text-3); }
.kalk-pomoc strong { color: var(--tmava); }
.kalk-volba { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kalk-volba legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; padding: 0; }
.kalk-volba label { position: relative; }
.kalk-volba input { position: absolute; opacity: 0; }
.kalk-volba span { display: inline-block; font-weight: 700; font-size: 15px; min-height: 44px; line-height: 41px; padding: 0 16px; border-radius: 10px; border: 1.5px solid #CBD5CE; cursor: pointer; }
.kalk-volba input:checked + span { background: var(--tmava); color: #fff; border-color: var(--tmava); }
.kalk-volba input:focus-visible + span { outline: 3px solid var(--zelena); outline-offset: 2px; }
.kalk-vysledek { padding: 32px; background: var(--tmava); color: #E9F0EA; display: flex; flex-direction: column; gap: 20px; }
.kalk-vysledek p { margin: 0; }
.kalk-vysledek .maly { font-size: 14px; color: var(--text-tmave-2); }
.kalk-vysledek .maly strong { color: #fff; }
.kalk-vysledek .tucne { font-weight: 700; color: var(--text-tmave-3); }
.kalk-vysledek .velka { font-family: var(--mono); font-weight: 600; font-size: clamp(40px, 5vw, 60px); line-height: 1.05; color: var(--limetka); }
.souhrn { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--linka-tmava); border: 1px solid var(--linka-tmava); border-radius: 10px; overflow: hidden; }
.souhrn div { background: var(--tmava-2); padding: 10px 6px; text-align: center; }
.souhrn dt { font-size: 12px; color: var(--text-tmave-3); }
.souhrn dd { margin: 2px 0 0; font-family: var(--mono); font-size: 14px; color: #fff; }
.srovnani { display: flex; flex-direction: column; gap: 10px; }
.pruh-popis { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 5px; }
.pruh-osa { height: 10px; background: #2A3A31; border-radius: 5px; }
.pruh-hodnota { height: 10px; border-radius: 5px; background: #7C8F83; }
.pruh-hodnota.zvyraznena { background: var(--limetka); }
.kalk-upozorneni { font-size: 13px; color: #F2D9A0; border-left: 3px solid #F2D9A0; padding-left: 12px; }
.kalk-akce { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; border-top: 1px solid var(--linka-tmava); padding-top: 20px; }
.tabulka-obal { overflow-x: auto; background: var(--bila); border-radius: 14px; border: 1px solid var(--linka); }
.kalk-tabulka { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; font-family: var(--mono); text-align: right; }
.kalk-tabulka th, .kalk-tabulka td { padding: 10px 16px; border-bottom: 1px solid #EEF2EF; }
.kalk-tabulka thead th { font-family: var(--pismo); font-size: 13px; color: var(--text-2); font-weight: 700; border-bottom: 1px solid var(--linka); }
.kalk-tabulka th[scope=row], .kalk-tabulka thead th:first-child { text-align: left; font-family: var(--pismo); }
.kalk-tabulka .uspora { color: var(--zelena); font-weight: 600; }
.predpoklady { margin-top: 32px; background: var(--mata); border-radius: 14px; padding: 20px 24px; }
.predpoklady summary { cursor: pointer; font-weight: 800; font-size: 17px; }
.predpoklady ul { margin: 14px 0 0; padding-left: 20px; font-size: 15px; color: #2C3A32; }
.predpoklady li { margin-bottom: 6px; }
@media (max-width: 900px) { .kalk { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .souhrn { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kalk-zadani, .kalk-vysledek { padding: 22px; } }

/* ---------- Dotazník ---------- */
.dt-rozvrzeni { grid-template-columns: minmax(0, 1fr) 300px; }
.dt { min-width: 0; scroll-margin-top: 16px; }
.dt-nacitani { color: var(--text-3); }
.dt-postup { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: none; }
.dt-postup li { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-3); border-top: 4px solid var(--linka); padding-top: 10px; }
.dt-postup li.hotovo { border-color: var(--zelena); color: var(--text-2); }
.dt-postup li.aktivni { border-color: var(--tmava); color: var(--tmava); }
.dt-postup-cislo { font-family: var(--mono); font-size: 12px; }
.dt-postup-tl { display: flex; flex-direction: column; gap: 8px; width: 100%; background: none; border: 0; padding: 0 0 4px; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer; }
.dt-postup-tl:hover .dt-postup-nazev { text-decoration: underline; text-underline-offset: 3px; }
.dt-formular { background: var(--bila); border: 1px solid var(--linka); border-radius: 20px; padding: 36px; box-shadow: 0 24px 60px rgba(19,32,26,.06); }
.dt-krok h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 10px; outline: none; }
.dt-krok-cislo { display: block; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--zelena); letter-spacing: 0; margin-bottom: 6px; }
.dt-uvod { color: var(--text-2); font-size: 16px; max-width: 680px; margin-bottom: 28px; }
.dt-otazka { margin: 0 0 26px; }
.dt-otazka[hidden] { display: none; }
.dt-popisek, .dt-volby legend { display: block; font-weight: 700; font-size: 16px; margin: 0 0 8px; padding: 0; line-height: 1.35; }
.dt-povinne { color: #B3261E; }
.dt-napoveda { font-size: 14px; color: var(--text-3); margin: -2px 0 10px; }
.dt-vstup { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid #CBD5CE; border-radius: 10px; background: #FAFBFA; color: var(--tmava); }
.dt-vstup:focus { border-color: var(--zelena); outline: none; box-shadow: 0 0 0 3px rgba(30,107,69,.15); }
textarea.dt-vstup { resize: vertical; min-height: 64px; }
input[type=date].dt-vstup { max-width: 240px; }
.dt-volby { border: 0; margin: 0; padding: 0; min-width: 0; }
.dt-mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dt-volby.sloupce-3 .dt-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dt-volby.sloupce-4 .dt-mrizka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dt-volby.sloupce-5 .dt-mrizka { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dt-volba { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border: 1.5px solid var(--linka); border-radius: 10px; cursor: pointer; font-size: 15px; line-height: 1.4; background: #FAFBFA; }
.dt-volba:hover { border-color: #AFC0B4; }
.dt-volba input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--zelena); }
.dt-volba:has(input:checked) { border-color: var(--zelena); background: #EEF6F0; }
.dt-volba:has(input:focus-visible) { outline: 3px solid var(--zelena); outline-offset: 2px; }
.dt-dlazdice .dt-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dt-dlazdice .dt-volba { padding: 18px 16px; font-size: 16px; font-weight: 700; line-height: 1.35; min-height: 88px; border-width: 2px; }
.dt-dlazdice .dt-volba:has(input:checked) { background: var(--tmava); color: #fff; border-color: var(--tmava); }
.dt-dlazdice .dt-volba:has(input:checked) input { accent-color: var(--limetka); }
.dt-jine { margin-top: 8px; }
.dt-s-jednotkou { position: relative; max-width: 320px; }
.dt-tab-radek .dt-s-jednotkou { max-width: none; }
.dt-s-jednotkou .dt-vstup { padding-right: 48px; }
.dt-jednotka { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 600; pointer-events: none; }
.dt-tab-hlava, .dt-tab-radek { display: grid; gap: 8px; align-items: center; }
.dt-tab-hlava { font-size: 13px; font-weight: 700; color: var(--text-3); margin-bottom: 6px; }
.dt-tab-telo { display: flex; flex-direction: column; gap: 8px; }
.dt-tab-radek .dt-vstup { padding: 10px 12px; font-size: 15px; min-width: 0; }
.dt-tab-radek select.dt-vstup { padding-right: 6px; }
.dt-tab-smaz { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linka); background: var(--bila); color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; }
.dt-tab-smaz:hover { background: var(--tmava); color: #fff; }
.dt-tab-pridat { margin-top: 10px; background: var(--tmava); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dt-tab-pridat:hover { background: #24382D; }
.dt-matice-obal { overflow-x: auto; border: 1px solid var(--linka); border-radius: 10px; }
.dt-matice table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.dt-matice th, .dt-matice td { border-bottom: 1px solid #EEF2EF; padding: 0; text-align: center; }
.dt-matice thead th { background: var(--mata); font-weight: 700; padding: 8px 6px; min-width: 76px; vertical-align: bottom; line-height: 1.25; }
.dt-matice thead th:first-child { position: sticky; left: 0; z-index: 1; }
.dt-matice tbody th { text-align: left; font-weight: 600; padding: 8px 12px; background: #FAFBFA; white-space: nowrap; position: sticky; left: 0; }
.dt-matice td label { display: flex; justify-content: center; align-items: center; min-height: 42px; cursor: pointer; }
.dt-matice td input { width: 20px; height: 20px; accent-color: var(--zelena); cursor: pointer; }
.dt-matice tbody tr:last-child th, .dt-matice tbody tr:last-child td { border-bottom: 0; }
.dt-souhrn dd { white-space: pre-line; }
.dt-jine[hidden] { display: none; }
.dt-info { background: #FFF6E0; border-left: 4px solid #D9A400; border-radius: 10px; padding: 12px 16px; font-size: 15px; }
.dt-info p { margin: 0; }
.dt-chyba { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: #B3261E; }
.dt-chyba:empty { display: none; }
.ma-chybu .dt-vstup, .ma-chybu .dt-volba, .ma-chybu .dt-zona { border-color: #B3261E; }
.dt-skryty { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dt-zona { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 28px 16px; border: 2px dashed #B9C7BD; border-radius: 14px; background: #F7FAF7; cursor: pointer; font-size: 14px; color: var(--text-3); }
.dt-zona strong { font-size: 16px; color: var(--tmava); }
.dt-zona:hover, .dt-zona.nad { border-color: var(--zelena); background: #EEF6F0; }
.dt-soubory input:focus-visible + .dt-zona { outline: 3px solid var(--zelena); outline-offset: 2px; }
.dt-zona-ikona { width: 40px; height: 40px; border-radius: 50%; background: var(--tmava); color: var(--limetka); font-size: 22px; line-height: 40px; font-weight: 700; margin-bottom: 4px; }
.dt-soubory-stav { font-size: 14px; font-weight: 700; color: var(--zelena); margin: 10px 0 0; }
.dt-soubory-stav:empty { display: none; }
.dt-seznam { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dt-seznam li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--linka); border-radius: 10px; font-size: 14px; }
.dt-seznam img, .dt-typ { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.dt-typ { display: grid; place-items: center; background: var(--mata); font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--zelena); }
.dt-nazev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-velikost { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.dt-seznam.foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.dt-seznam.foto li { grid-template-columns: 1fr; gap: 4px; padding: 0 0 6px; overflow: hidden; }
.dt-seznam.foto img { width: 100%; height: 96px; border-radius: 9px 9px 0 0; }
.dt-seznam.foto .dt-nazev, .dt-seznam.foto .dt-velikost { padding: 0 8px; font-size: 12px; }
.dt-seznam.foto .dt-velikost { font-size: 11px; white-space: normal; }
.dt-smaz { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--tmava); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.dt-seznam.foto .dt-smaz { position: absolute; top: 6px; right: 6px; }
.dt-souhrn { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.dt-souhrn-blok { border: 1px solid var(--linka); border-radius: 14px; padding: 18px 20px; }
.dt-souhrn-hlava { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.dt-souhrn-hlava h3 { font-size: 17px; }
.dt-souhrn dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dt-souhrn dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; font-size: 14px; border-top: 1px solid #EEF2EF; padding-top: 8px; }
.dt-souhrn dt { color: var(--text-3); }
.dt-souhrn dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.dt-upravit, .dt-odkaz { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--zelena); text-decoration: underline; cursor: pointer; }
.dt-souhlas-text { margin: 14px 0 0; font-size: 13px; color: var(--text-3); text-align: right; }
.dt-souhlas-text[hidden] { display: none; }
.dt-past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dt-navigace { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--linka); padding-top: 24px; margin-top: 8px; }
.dt-ulozeno { margin: 0; font-size: 13px; color: var(--text-3); text-align: center; }
.dt-navigace .tl:disabled { opacity: .5; cursor: wait; }
.dt-obnova { background: var(--mata); border-radius: 12px; padding: 12px 16px; font-size: 15px; }
.dt-hlaseni { margin-top: 16px; border-radius: 12px; padding: 16px 20px; font-weight: 700; }
.dt-hlaseni p { margin: 0; }
.dt-hlaseni.prubeh { background: var(--tmava); color: #fff; }
.dt-hlaseni.chyba { background: #FCE8E6; color: #8C1D18; }
.dt-lista { height: 8px; border-radius: 4px; background: #2E4036; margin-top: 10px; overflow: hidden; }
.dt-lista span { display: block; height: 100%; background: var(--limetka); transition: width .3s; }
.dt-hotovo { background: var(--bila); border: 1px solid var(--linka); border-radius: 20px; padding: 44px 36px; outline: none; }
.dt-hotovo h2 { margin: 14px 0 12px; }
.dt-hotovo-ikona { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--limetka); color: var(--tmava); font-size: 28px; font-weight: 800; }
.dt-panel-seznam { margin: 0 0 10px; padding-left: 18px; font-size: 15px; color: var(--text-2); }
.dt-panel-seznam li { margin-bottom: 6px; }
@media (max-width: 900px) { .dt-postup-nazev { display: none; } .dt-postup-tl { align-items: center; padding: 6px 0 8px; } }
@media (max-width: 600px) {
  .dt-formular { padding: 22px 18px; border-radius: 16px; }
  .dt-mrizka, .dt-volby.sloupce-3 .dt-mrizka, .dt-dlazdice .dt-mrizka { grid-template-columns: 1fr; }
  .dt-dlazdice .dt-volba { min-height: 0; }
  .dt-volby.sloupce-4 .dt-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-volby.sloupce-5 .dt-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dt-souhrn dl div { grid-template-columns: 1fr; gap: 2px; }
  .dt-tab-hlava { display: none; }
  .dt-tab-radek { position: relative; grid-template-columns: 1fr 1fr !important; padding: 10px 46px 10px 10px; border: 1px solid var(--linka); border-radius: 10px; }
  .dt-tab-radek > :first-child { grid-column: 1 / -1; }
  .dt-tab-radek .dt-tab-smaz { position: absolute; top: 14px; right: 8px; }
  .dt-navigace { flex-wrap: wrap; }
  .dt-navigace .tl { width: auto; flex: 1 1 40%; padding: 14px 16px; }
  .dt-ulozeno { order: 3; flex: 1 1 100%; }
  .dt-hotovo { padding: 32px 22px; }
}

/* ---------- Odpovědi na mobilu ---------- */
@media (max-width: 1080px) {
  .menu-tlacitko { display: block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 74px; background: var(--bila); flex-direction: column; align-items: stretch; padding: 20px 24px 24px; gap: 16px; box-shadow: 0 20px 40px rgba(19,32,26,.12); z-index: 50; }
  .menu.otevrene { display: flex; }
  .menu ul { flex-direction: column; gap: 4px; }
  .menu ul a { display: block; padding: 10px 0; font-size: 17px; }
  .hlavicka { position: relative; }
  .karty-4, .kroky, .clanky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ceny { grid-template-columns: 1fr 1fr; }
  .cena-hlavni { grid-column: 1 / -1; }
  .ukazky { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .uvod .obal, .cenik .obal, .reference, .s-panelem { grid-template-columns: 1fr; }
  .panel { position: static; }
  .retez { grid-template-columns: 1fr; gap: 6px; }
  .retez .sipka { transform: rotate(90deg); height: 40px; }
  .podklady > div { grid-template-columns: 1fr; gap: 6px; }
  .domy, .faq { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .sekce { padding: 56px 0; }
  .obal { padding-left: 16px; padding-right: 16px; }
  .karty-4, .kroky, .clanky, .ukazky-karty, .ceny, .terminy { grid-template-columns: 1fr; }
  .ukazky { padding: 24px; }
  .jiny-ucel { padding: 28px 24px; }
  .uvod .obal { padding-top: 16px; }
  .mini-kalk { padding: 24px; }
  .tl { width: 100%; }
  .tlacitka .tl { width: auto; flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }