/* Teleskopprothese.cool – YATROGEN Consulting s.r.o. */
:root{
  --ink:#1f2023;--muted:#5c6068;--bg:#fff;--soft:#f4f4f6;--line:#e3e3e8;
  --red:#8f1d24;--red2:#a9262f;--gold:#b0965a;--dark:#2a2a2e;--dark2:#1d1d20;
  --r:14px;--wrap:1240px;
  --shadow:0 24px 60px -28px rgba(30,20,30,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 Montserrat,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}

/* jazyky */
html:not([data-l="de"]) [lang="de"],html:not([data-l="cs"]) [lang="cs"],html:not([data-l="ru"]) [lang="ru"]{display:none!important}
html[data-l="ru"] .ru-de [lang="de"]{display:revert!important}

/* horní lišta */
.topbar{background:linear-gradient(#323236,var(--dark2));color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.brand svg{width:40px;height:46px;flex:none}
.brand .bt{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-size:22px;font-weight:800;letter-spacing:-.01em}
.brand b span{color:#e9c9cb;font-weight:600}
.brand .stars{color:var(--gold);font-size:11px;letter-spacing:4px;margin-top:5px}
.tb-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tagline{color:var(--gold);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.tb-info{display:flex;align-items:center;gap:18px;font-size:13.5px}
.tb-info a{text-decoration:none;display:inline-flex;align-items:center;gap:7px;opacity:.92}
.tb-info a:hover{opacity:1;text-decoration:underline}
.tb-info .ic{width:22px;height:22px;border-radius:50%;background:var(--red2);display:inline-grid;place-items:center;font-size:11px}
.lang{display:flex;gap:6px}
.lang button{width:30px;height:20px;border-radius:3px;border:1px solid rgba(255,255,255,.35);padding:0;cursor:pointer;opacity:.55;transition:.2s}
.lang button[aria-pressed="true"]{opacity:1;outline:2px solid #fff;outline-offset:1px}
.lang button:hover{opacity:1}
.f-de{background:linear-gradient(#000 0 33.3%,#dd0000 0 66.6%,#ffce00 0)}
.f-ru{background:linear-gradient(#fff 0 33.3%,#0039a6 0 66.6%,#d52b1e 0)}
.f-cs{background:linear-gradient(#fff 0 50%,#d7141a 0);position:relative;overflow:hidden}
.f-cs::before{content:"";position:absolute;left:0;top:0;border-left:15px solid #11457e;border-top:9.5px solid transparent;border-bottom:9.5px solid transparent}

/* menu */
.nav{background:#ececef;border-bottom:3px solid var(--red2);position:sticky;top:0;z-index:40}
.nav .wrap{display:flex;align-items:stretch}
.nav a{display:flex;align-items:center;gap:9px;padding:15px 22px;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#3a3a3e;border-right:1px solid #d9d9de;transition:.2s}
.nav a:first-child{border-left:1px solid #d9d9de}
.nav a::before{content:"";width:8px;height:8px;border-right:2.5px solid var(--red2);border-bottom:2.5px solid var(--red2);transform:rotate(-45deg)}
.nav a.home::before{display:none}
.nav a.home svg{width:18px;height:18px;fill:#3a3a3e}
.nav a:hover,.nav a[aria-current="page"]{background:#fff;color:var(--red)}
#burger{display:none}

/* hero */
.hero{padding:40px 0 10px;text-align:center}
.hero h1{font-size:clamp(24px,3.6vw,44px);font-weight:800;max-width:1100px;margin:0 auto 26px}
.hero h1 .eq{color:var(--red)}
.typer .ch{opacity:0;display:inline;animation:ch .5s forwards}
@keyframes ch{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}

/* animace */
.film{max-width:1280px;margin:0 auto;perspective:1800px}
.film-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#e9ebf0;transform-style:preserve-3d;transition:transform .1s linear}
.film canvas{width:100%;height:100%;display:block}
.film:not(.ready) .film-stage::after{content:"";position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;border:3px solid #cfd2da;border-top-color:var(--red2);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.film-bar{display:flex;align-items:center;gap:14px;margin-top:16px}
.film-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--red2);color:#fff;cursor:pointer;display:grid;place-items:center}
.film-play::before{content:"";width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.film-play.paused::before{width:0;height:0;border-left:13px solid #fff;border-right:0;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.film-range{flex:1;accent-color:var(--red2);height:6px}
.film-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.film-steps button{font:inherit;font-size:13px;font-weight:600;text-align:left;border:0;border-top:3px solid #d6d7dc;background:none;padding:9px 2px 0;color:#7a7e86;cursor:pointer;transition:.25s}
.film-steps button b{display:block;font-size:11px;color:var(--gold);letter-spacing:.12em}
.film-steps button.done{border-top-color:#c9a9ab;color:#55595f}
.film-steps button.on{border-top-color:var(--red2);color:var(--ink)}
.film-cap{min-height:56px;margin-top:10px;font-size:17px;font-weight:500}
.film-cap [data-ph]{display:none}
.film-cap [data-ph].on{display:block;animation:capin .5s}
html:not([data-l="de"]) .film-cap [lang="de"],html:not([data-l="cs"]) .film-cap [lang="cs"],html:not([data-l="ru"]) .film-cap [lang="ru"]{display:none!important}
@keyframes capin{from{opacity:0;transform:translateY(6px)}}
.film-note{font-size:12.5px;color:var(--muted);margin-top:4px}

/* úvodní text + konzultace */
.intro{max-width:900px;margin:30px auto 0;text-align:center;font-size:18px;line-height:1.75;color:#3b3d42}
.intro strong{color:var(--red);font-weight:700}
.konsbtn{display:inline-flex;align-items:center;gap:14px;margin:18px auto 0;padding:14px 28px;border:1px solid #cfcfd5;border-radius:6px;background:linear-gradient(#fff,#f1f1f3);text-decoration:none;font-weight:800;font-size:26px;color:var(--red);box-shadow:0 2px 0 #ddd;transition:.2s}
.konsbtn:hover{border-color:var(--red2);transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(143,29,36,.6)}
.konsbtn svg{width:26px;height:30px;fill:none;stroke:#9a9aa0;stroke-width:1.6}
.konsbtn i{font-style:normal;font-size:24px}
.phoneline{font-size:14.5px;color:var(--muted);margin-top:14px}
.phoneline a{color:var(--red);font-weight:700;text-decoration:none}

/* sekce */
.sec{padding:70px 0}
.sec.grey{background:var(--soft)}
.sec-h{text-align:center;margin:0 auto 36px;max-width:820px}
.sec-h h2{font-size:clamp(24px,3vw,34px);color:var(--red);display:inline-block;padding-bottom:12px;border-bottom:3px solid var(--red2)}
.sec-h p{margin:16px 0 0;color:var(--muted);font-size:17px}
.quote{max-width:860px;margin:0 auto;text-align:center;font-size:clamp(19px,2.2vw,25px);font-weight:600;line-height:1.5}
.quote::before{content:"„";display:block;font-size:64px;line-height:1;height:34px;overflow:hidden;color:var(--red2);margin-bottom:6px}
.quote small{display:block;margin-top:14px;font-size:15px;font-weight:400;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:6px;background:var(--red2);color:#fff;text-decoration:none;font-weight:700;border:0;font:inherit;font-weight:700;cursor:pointer;transition:.2s}
.btn:hover{background:var(--red)}
.btn.ghost{background:#fff;color:var(--red);border:1.5px solid var(--red2)}
.btn.ghost:hover{background:#fbf3f3}
.center{text-align:center}

/* galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery.home{grid-template-columns:repeat(4,1fr)}
.gallery.home .ph:first-child{grid-column:span 2;grid-row:span 2}
.ph{padding:0;margin:0;border:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:#ddd;aspect-ratio:4/3;position:relative}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ph:hover img{transform:scale(1.05)}
.gallery.home .ph:first-child{aspect-ratio:auto}
.lightbox{position:fixed;inset:0;background:rgba(10,10,12,.92);z-index:100;display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:90vh;max-width:94vw;border-radius:8px}
.lb-close{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:42px;cursor:pointer}
.gal-h{margin:44px 0 16px;font-size:20px;color:var(--ink)}

/* karty a tabulky */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.sec.grey .card{border-color:transparent;box-shadow:0 6px 24px -18px rgba(0,0,0,.4)}
.card h3{font-size:17px;margin-bottom:8px;color:var(--red)}
.card p{margin:0;color:#45484e;font-size:15px}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps4 .card{position:relative;padding-top:52px}
.steps4 .card::before{counter-increment:s;content:"0" counter(s);position:absolute;top:18px;left:24px;font-weight:800;color:var(--gold);letter-spacing:.1em}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.split img{border-radius:12px;box-shadow:var(--shadow)}
  .tbl{overflow-x:auto;border-radius:12px}
table.mat{min-width:560px;width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:15px}
.mat th,.mat td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.mat thead th{background:var(--dark);color:#fff;font-weight:600}
.mat tbody th{font-weight:600;color:var(--muted);width:22%}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vfig{margin:0;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.vfig img{aspect-ratio:4/3;object-fit:cover;width:100%}
.vfig figcaption{padding:12px 14px;font-size:14px;color:#45484e}
.vfig figcaption b{display:block;color:var(--ink);margin-bottom:3px}
.callbox{background:var(--dark);color:#fff;border-radius:16px;padding:36px;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.callbox h2{font-size:clamp(22px,2.6vw,30px);max-width:620px}
.callbox p{margin:8px 0 0;color:#c9c9cf}
.callbox .nums{display:flex;flex-direction:column;gap:10px}
.callbox .nums a{color:#fff;font-size:22px;font-weight:700;text-decoration:none}
.callbox .nums a:hover{color:#f1c6c9}

/* reference */
.badges{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.badges a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 22px;border:1px solid var(--line);border-radius:12px;text-decoration:none;min-width:220px;transition:.2s;background:#fff}
.badges a:hover{border-color:var(--red2);box-shadow:var(--shadow)}
.badges b{color:var(--red);font-size:17px}
.badges span{font-size:13px;color:var(--muted)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.rev .who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rev .av{width:44px;height:44px;border-radius:50%;background:#e7e7ec;display:grid;place-items:center;font-weight:700;color:#7b7d84}
.rev .who b{color:var(--red);font-size:17px}
.rev .st{color:#e3b23c;letter-spacing:2px;font-size:15px}
.rev p{font-size:15px;color:#3f4247;margin:0}
.rev .orig{display:block;font-size:12px;color:var(--muted);margin-top:10px}

/* kontakt */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.contact dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
.contact dt{font-weight:700;color:var(--muted)}
.contact dd{margin:0}
.copy{margin-left:8px;font:inherit;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:4px;padding:1px 7px;cursor:pointer}
.maplink{display:inline-block;margin-top:18px;color:var(--red);font-weight:700}
form#f{display:grid;gap:14px;background:var(--soft);padding:28px;border-radius:14px}
form#f label{display:grid;gap:6px;font-weight:600;font-size:14px}
form#f input,form#f select,form#f textarea{font:inherit;font-weight:400;padding:11px 13px;border:1px solid #cfd0d6;border-radius:8px;background:#fff}
form#f textarea{min-height:120px;resize:vertical}
form#f .consent{display:flex;gap:10px;font-weight:400;font-size:13px;align-items:flex-start}
.hp{display:none}
.note{background:#fff;border-left:3px solid var(--red2);padding:10px 14px;border-radius:6px;font-size:14px}

/* podstránky */
.pagehead{padding:46px 0 10px;text-align:center}
.pagehead h1{font-size:clamp(28px,4vw,46px);color:var(--red)}
.pagehead p{max-width:760px;margin:14px auto 0;font-size:18px;color:var(--muted)}
.prose{max-width:820px;margin:0 auto}
.prose h2{font-size:22px;margin:32px 0 10px;color:var(--red)}

/* patička */
footer{background:var(--dark2);color:#b9b9c0;margin-top:70px;padding:44px 0 30px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
footer b{color:#fff}
footer a{color:#e7e7ea;text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fl{display:flex;flex-direction:column;gap:6px}
footer .bottom{grid-column:1/-1;border-top:1px solid #333338;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

@media (max-width:980px){
  .tagline{display:none}
  .tb-info .mail{display:none}
  .cards,.revs{grid-template-columns:1fr 1fr}
  .steps4,.vgrid{grid-template-columns:1fr 1fr}
  .split,.contact{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery.home{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .mat th,.mat td{padding:10px 11px;font-size:13.5px}
  .topbar .wrap{min-height:66px}
  .brand svg{width:30px;height:36px}
  .brand b{font-size:17px}
  .tb-info .tel2{display:none}
  .tb-info .tel1 .t{display:none}
  .topbar .wrap{padding:0 14px;gap:10px}
  .brand{gap:8px;min-width:0}
  .brand b{font-size:15px}
  .brand .stars{font-size:9px;letter-spacing:2px}
  .tb-info{gap:10px}
  .lang{gap:4px}
  .lang button{width:24px;height:16px}
  .f-cs::before{border-left-width:12px;border-top-width:7.5px;border-bottom-width:7.5px}
  .nav .wrap{padding:0;overflow-x:auto;scrollbar-width:none}
  .nav a{padding:13px 14px;font-size:12px;letter-spacing:.03em;white-space:nowrap;gap:7px}
  .nav a::before{width:6px;height:6px}
  .hero{padding-top:26px}
  .film-steps button{font-size:11px}
  .film-cap{font-size:15px}
  .konsbtn{font-size:21px;padding:12px 20px}
  .intro{font-size:16px}
  .cards,.revs,.steps4,.vgrid{grid-template-columns:1fr}
  .gallery.home .ph:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  footer .wrap{grid-template-columns:1fr}
  .sec{padding:52px 0}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.typer .ch{animation:none;opacity:1}}

/* 3D animace */
.film{perspective:none}
.film-stage{transform:none!important;background:radial-gradient(70% 85% at 50% 30%,#ffffff 0%,#eceef2 60%,#d9dce3 100%)}
.film-stage::before{content:"";position:absolute;inset:0;background:#fff;opacity:calc(var(--flash,0) + var(--fade,0));pointer-events:none;z-index:1}
.film canvas{cursor:grab;touch-action:pan-y}
.film-stage.grab canvas{cursor:grabbing}
.film-hint{position:absolute;z-index:2;right:14px;bottom:12px;font-size:12px;font-weight:600;color:#55595f;background:rgba(255,255,255,.85);border:1px solid #dcdde2;border-radius:99px;padding:6px 12px 6px 30px;pointer-events:none;transition:opacity .5s}
.film-hint::before{content:"";position:absolute;left:11px;top:50%;width:12px;height:12px;margin-top:-6px;border:2px solid var(--red2);border-radius:50%;border-left-color:transparent;animation:spin 2.4s linear infinite}
.film.hinted .film-hint{opacity:0}
@media (max-width:640px){.film-stage{aspect-ratio:4/3}.film-hint{font-size:11px;right:10px;bottom:9px}}
/* Impressum */
.impdl{display:grid;grid-template-columns:minmax(180px,250px) 1fr;border-top:1px solid #e1e2e6}
.impdl dt,.impdl dd{margin:0;padding:13px 0;border-bottom:1px solid #e1e2e6}
.impdl dt{font-weight:600;color:var(--muted);padding-right:20px}
@media (max-width:640px){.impdl{grid-template-columns:1fr}.impdl dt{border-bottom:0;padding-bottom:2px}.impdl dd{padding-top:0}}
@media (max-width:640px){.film-steps{gap:5px}.film-steps button{font-size:10.5px;overflow-wrap:anywhere;hyphens:auto;min-width:0}.prose h1,.prose h2,.pagehead h1{overflow-wrap:anywhere;hyphens:auto}}
@media (max-width:480px){.film-steps{grid-template-columns:repeat(2,1fr);gap:4px 10px}.film-steps button{font-size:12px;overflow-wrap:normal;hyphens:manual}}