/* =========================================================================
   Praktická ikonografia — Jana Lukášová

   Farbskala + Schriftpaarung: „štýly fonty farba.docx"
     Pinterest-Palette (Sage/Cream/Moss/Sand/Forest/Earth)
     Cormorant Garamond (Display) + Nunito (Text/Labels)
     — Ausnahme: die Bildunterschriften der Galerie stehen in Newsreader,
       weil Cormorant das slowakische ľ mit schwebendem Háček statt
       angehängtem Komma setzt (Kristus Kráľ, Ján Krstiteľ).

   Gestaltungssprache (refero.design: Subset · OhDada · Atelier Deux-Cé)
     0 px Radius · keine Schatten · keine Verläufe · Haarlinien ·
     warme Naturflächen · linksbündig.

   Kompositions-Bausteine (softriver.co · carasanders.com.au · Outlead)
     Jeder Abschnitt hat eine eigene Form — kein Baustein wiederholt sich:
     01 Cinematischer Hero, Textblock überlappt die Fotografie
     02 Informationsband, einzeilig
     03 Manifest: haftender Titel links, Text rechts
     04 Zitatband über die volle Breite
     05 Bildband, randlos über beide Seitenkanten
     06 Bild läuft in die linke Seitenkante, Text rechts
     07 Galerie als Mosaik mit doppelt großen Kacheln
     08 Porträt links, Jahreszahl als Anker, Text rechts
     09 Haftender Etappen-Register + waagrechter Bildstreifen
     10 Gestaffelte Collage mit versetzten Kacheln
     11 Zwei ganzflächige Farbkacheln nebeneinander
     12 Terminkarte dreispaltig mit großer Preiszahl
     13 Sandband mit Titelbild
     14 Kontaktliste
   ========================================================================= */

:root{
  --sage:#a7ad89;
  --cream:#dbd0c4;
  --moss:#8c916c;
  --sand:#b69c85;
  --forest:#697254;
  --earth:#92735c;
  --earth-ink:#7d5f49;
  --label:#5f6549;
  --forest-ink:#4a5240;
  --forest-deep:#4e573f;         /* Kachel „Ikonopisecký pobyt" — tiefer als das Terminband */
  --frame:#2a2018;               /* dunkles Braun für Rahmen und Trennlinien */

  --canvas:#efe9df;
  --canvas-2:#e4dbcd;
  --ink:#1f1e19;
  --ink-2:#3d3b34;
  --ink-3:#6b675b;
  --rule:#c8bfae;
  --rule-light:#d8cfc0;
  --on-dark:#ece6da;
  --on-dark-2:#c2bcac;

  --ff-display:"Cormorant Garamond",Garamond,Georgia,serif;
  --ff-nazvy:"Newsreader",Garamond,Georgia,serif;   /* nur Galerie-Bildunterschriften */
  --ff-body:"Nunito","Helvetica Neue",Helvetica,Arial,sans-serif;

  --sp:56px;                     /* Abstand an jeder Umbruchlinie (wie Outlead) */
  --sp-in:40px;                  /* Abstand innerhalb eines Abschnitts */
  --gap:24px;
  --measure:31rem;               /* gemeinsame Zeilenlänge Lead + Fließtext */
  --bar:69px;                    /* Höhe der Kopfzeile */
  --edge:max(5vw,(100vw - 1240px)/2);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:var(--bar);-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;border-radius:0}
a{color:inherit}
button{font:inherit;border-radius:0}

.wrap{width:min(1240px,100% - 10vw);margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--canvas);padding:12px 18px}
.skip:focus{left:0;top:0}
:where(a,button,.shot-btn):focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* --------------------------------------------------------- Typografie --- */

h1,h2,h3{font-family:var(--ff-display);font-weight:300;color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:clamp(48px,6vw,92px);line-height:.94;letter-spacing:-.012em}
h2{max-width:18ch;font-size:clamp(36px,4.4vw,66px);line-height:1.03;letter-spacing:-.008em;margin-bottom:.45em}
h3{font-weight:400;font-size:clamp(23px,2vw,30px);line-height:1.18}

p{margin:0 0 1.1em;text-wrap:pretty;max-width:var(--measure)}
p:last-child{margin-bottom:0}

.eyebrow,.form-kicker,.term-type,.step-no,.etapa-no,.mini-no,
.nav a,.chip,.act,.brand-sub,.strip-in,.strip-hint{
  font-family:var(--ff-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.17em;font-size:11.5px;line-height:1.4;
}

.eyebrow{color:var(--label);margin:0 0 20px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor;flex:0 0 auto}

.lead{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(21px,2.05vw,28px);line-height:1.42;
  color:var(--ink-2);max-width:var(--measure);margin-bottom:1.1em;
}

.head-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32ch);
  gap:24px clamp(32px,5vw,80px);align-items:end;
  padding-bottom:28px;border-bottom:1px solid var(--rule);
}
.head-row h2{margin-bottom:0}
.head-note{color:var(--ink-3);font-size:15.5px;margin:0;max-width:36ch}

.sub-h{margin:0}
.podpis{
  font-family:var(--ff-display);font-style:italic;font-size:26px;
  color:var(--earth-ink);margin-top:1.4em;
}

/* ---------------------------------------------------------- Kopfzeile --- */

.topbar{position:sticky;top:0;z-index:40;background:var(--canvas);border-bottom:1px solid var(--rule)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:14px 0}

.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;white-space:nowrap}
.brand-main{font-family:var(--ff-display);font-weight:400;font-size:22px;line-height:1.05}
.brand-sub{color:var(--label);font-size:10px}

.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--ink-3);text-decoration:none;padding-bottom:2px;white-space:nowrap;border-bottom:1px solid transparent}
.nav a:not(.nav-cta):hover,
.nav a:not(.nav-cta).is-current{color:var(--ink);border-bottom-color:var(--ink)}
.nav .nav-cta{color:var(--canvas);padding:12px 20px;border-bottom:0}
.nav .nav-cta:hover{color:var(--canvas)}
.nav-cta:hover{border-bottom:0}

.burger{display:none;width:40px;height:32px;border:0;background:none;cursor:pointer;padding:6px 0}
.burger span{display:block;height:1px;background:var(--ink);margin:6px 0}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* -------------------------------------------------- 01 Hero (cinematic) --- */

.hero{position:relative;aspect-ratio:8/3;overflow:hidden}   /* ~540 px bei 1440 px, wie Outlead */
.hero-img{width:100%;height:100%;object-fit:cover;object-position:center 59%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(38,27,18,.55) 0%,
    rgba(38,27,18,.32) 24%,
    rgba(38,27,18,.12) 38%,
    rgba(38,27,18,0)   50%);   /* ab der Hälfte vollständig transparent */
}

.hero-card{
  position:absolute;left:0;bottom:0;z-index:1;
  width:min(900px,70vw);
  padding:0 0 clamp(34px,4vw,60px) var(--edge);
  color:#f2ede1;
}
.hero-card .eyebrow{color:var(--sage);margin-bottom:24px;font-size:14px;letter-spacing:.10em}
.hero-card h1{
  font-size:clamp(42px,5.4vw,78px);line-height:1;
  color:#f7f2e7;white-space:nowrap;
}
.hero-sub{
  font-family:var(--ff-display);font-style:italic;
  font-size:clamp(21px,2.2vw,32px);line-height:1.2;
  color:#dcc9ad;margin:14px 0 0;
}
.hero-card .acts{margin-top:30px}
.hero-card .act{font-size:14px;letter-spacing:.10em}
.hero-card .act-fill{background:var(--canvas);color:var(--ink);padding:15px 26px}
.hero-card .act-fill:hover{background:#fff}
.hero-card .act-line{color:#f2ede1;border-bottom-color:#f2ede1;padding:15px 0}
.hero-card .act-line:hover{color:var(--sage);border-bottom-color:var(--sage)}

/* ---------------------------------------------------------- 02 Infoband --- */

.strip-date{background:var(--ink);color:var(--on-dark)}
.strip-in{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.strip-in > *{padding:15px 22px;border-left:1px solid rgba(236,230,218,.26)}
.strip-in > *:first-child{padding-left:0;border-left:0}
.strip-label{color:var(--sage)}
.strip-link{
  margin-left:auto;text-decoration:none;border-left:0;
  display:inline-flex;align-items:center;gap:12px;color:var(--sage);
}
.strip-link::after{content:"\2192";font-size:14px;letter-spacing:0}
.strip-link:hover{color:#fff}

/* ---------------------------------------------------------- Sektionen --- */

.sec{padding:var(--sp) 0}
.sec-alt{background:var(--canvas-2)}
.sec-dark{background:var(--forest);color:var(--on-dark)}
.sec-dark h2,.sec-dark h3{color:#f4efe4}
.sec-dark .eyebrow{color:var(--cream)}
.sec-dark p{color:var(--on-dark-2)}
.sec-dark .head-row{border-bottom-color:rgba(236,230,218,.3)}
.sec-dark .head-note{color:var(--on-dark-2)}

.sec-sand{background:var(--sand);color:var(--ink)}
.sec-sand .eyebrow{color:#4a3a2b}
.sec-sand p{color:#302a22}

.sec-contact{background:var(--ink);color:var(--on-dark)}
.sec-contact h2{color:#f4efe4}
.sec-contact .eyebrow{color:var(--sage)}
.sec-contact .head-row{border-bottom-color:rgba(236,230,218,.28)}
.sec-contact .head-note{color:var(--on-dark-2)}

/* ----------------------------------------------------- Aktionen/Links --- */

.acts{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;max-width:none}
.act{text-decoration:none;display:inline-block}
/* Buttons erben sonst Rahmen und Fläche vom Browser — :where() hat keine
   Spezifität, .act-fill und .act-line setzen ihre Werte also weiterhin durch. */
:where(button.act){
  border:0;background:none;color:inherit;cursor:pointer;
  padding:0;margin:0;text-align:left;-webkit-appearance:none;appearance:none;
}
.act-fill{background:var(--ink);color:var(--canvas);padding:15px 26px}
.act-fill:hover{background:var(--forest)}
.act-line{color:inherit;padding:15px 0;border-bottom:1px solid currentColor}
.act-line:hover{color:var(--label)}

.sec-dark .act-fill,.sec-contact .act-fill{background:var(--canvas);color:var(--ink)}
.sec-dark .act-fill:hover,.sec-contact .act-fill:hover{background:#fff}
.sec-sand .act-fill{background:var(--ink);color:var(--sand)}
.sec-dark .act-line:hover{color:var(--cream)}

/* --------------------------------------------- 03 Manifest (5/7-Raster) --- */

.cols-5-7{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,96px);align-items:start}

/* Fließtext läuft bis an die rechte Satzspiegelkante — bündig mit „Detaily →" */
.col-body > *,
.omne-txt > *,
.proces-txt > *,
.break-txt > *{max-width:none}
.col-head{position:sticky;top:calc(var(--bar) + 40px)}
.col-head h2{margin-bottom:0}


/* ------------------------------------------------------------ 04 Zitat --- */

.quote-band{
  background:var(--forest);color:#f3eee2;margin:0;
  padding:var(--sp) 0 32px;      /* unten enger — das Braunband schließt direkt an */
}
.quote-band p{
  font-family:var(--ff-display);font-style:italic;font-weight:300;
  font-size:clamp(25px,3vw,44px);line-height:1.3;
  max-width:66.6%;margin:0;
}

/* -------------------------------------------------------- 05 Bildband --- */

.pas{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:4px;padding:28px 10px;
  background:var(--frame);
}
.pas-item{margin:0}
.pas-item .shot-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pas-item img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 24%}

/* ------------------------------------------- 06 Bild in die Seitenkante --- */

.sec-break{
  display:grid;grid-template-columns:44fr 56fr;
  align-items:stretch;background:var(--canvas);
}
.break-img{margin:0}
.break-img img{width:100%;height:100%;object-fit:cover;min-height:520px}
.break-txt{
  padding:var(--sp) var(--edge) var(--sp) clamp(36px,5vw,88px);
  align-self:center;
}

/* ------------------------------------------- 07 Galerie: Raster zum Wischen --- */

.track-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 32px;margin:var(--sp-in) 0 0;border-bottom:1px solid var(--rule);
}
.chips{display:flex;flex-wrap:wrap;gap:0}
.chip{border:0;background:none;cursor:pointer;color:var(--ink-3);padding:14px 26px 14px 0}
.chip:hover{color:var(--ink)}
.chip.is-active{color:var(--forest-ink);text-decoration:underline;text-underline-offset:5px}

.track-nav{display:flex;align-items:center;gap:14px;padding-bottom:8px}
.track-arrow{
  width:44px;height:44px;border:1px solid var(--rule);background:none;
  color:var(--ink);font-size:24px;line-height:1;cursor:pointer;
}
.track-arrow:hover{border-color:var(--ink)}
.track-arrow[disabled]{opacity:.3;cursor:default}
.track-arrow[disabled]:hover{border-color:var(--rule)}

.gal-track{
  display:grid;grid-auto-flow:column;
  grid-template-rows:auto auto;grid-auto-columns:280px;
  gap:36px var(--gap);
  margin-top:var(--sp-in);padding:0 var(--edge) 26px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--edge);
  scrollbar-color:var(--moss) var(--canvas-2);scrollbar-width:thin;
}
.gal-track::-webkit-scrollbar{height:3px}
.gal-track::-webkit-scrollbar-track{background:var(--rule-light)}
.gal-track::-webkit-scrollbar-thumb{background:var(--moss)}

.tile{margin:0;scroll-snap-align:start;display:flex;flex-direction:column}
.tile[hidden]{display:none}
.tile .shot-btn{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
.tile img{width:100%;aspect-ratio:3/4;object-fit:cover}
.tile figcaption{
  display:flex;flex-direction:column;gap:4px;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);
}
.tile-name{font-family:var(--ff-nazvy);font-weight:400;font-size:18px;line-height:1.25}

/* --------------------------------------------------------- 08 Über mich --- */

.omne-grid{display:grid;grid-template-columns:42fr 58fr;gap:clamp(36px,5vw,88px);align-items:stretch}
.omne-side{display:block}
.omne-img{margin:0;position:sticky;top:calc(var(--bar) + 32px)}
.omne-img .shot-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.omne-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:58% 38%}


/* -------------------------------------- 09 Register + waagrechter Streifen --- */

.sec-proces{padding:var(--sp) 0;background:var(--canvas)}
.proces-grid{display:grid;grid-template-columns:minmax(210px,290px) minmax(0,1fr);gap:clamp(36px,5vw,88px);align-items:start}
.proces-index{position:sticky;top:calc(var(--bar) + 40px)}

.etapy{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.etapy li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--rule)}
.etapa-no{color:var(--label);flex:0 0 auto;padding-top:4px}
.etapa-name{font-family:var(--ff-display);font-size:20px;line-height:1.25}
.index-note{margin-top:22px;font-size:14.5px;color:var(--ink-3)}

.triptych{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:var(--sp);border-top:1px solid var(--rule);
}
.triptych > div{padding:30px 30px 0;border-left:1px solid var(--rule)}
.triptych > div:first-child{border-left:0;padding-left:0}
.triptych > div:last-child{padding-right:0}
.triptych h3{font-size:21px;margin-bottom:.35em}
.triptych p{font-size:15px;color:var(--ink-3);max-width:34ch}

.strip-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin-top:var(--sp);padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.strip-hint{color:var(--label);margin:0}

.filmstrip{
  list-style:none;display:flex;gap:var(--gap);margin:28px 0 0;
  padding:0 var(--edge) 20px;
  overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--edge);
  scrollbar-color:var(--moss) var(--canvas-2);scrollbar-width:thin;
}
.filmstrip .step{flex:0 0 300px;scroll-snap-align:start}
.filmstrip .shot-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.filmstrip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.step-txt{display:flex;gap:12px;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}
.step-no{color:var(--label);flex:0 0 auto}
.step-name{font-size:14px;color:var(--ink-2);line-height:1.45}

/* ---------------------------------------- 10 Pás z kurzu, popis pri hoveri --- */

.kurz-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:380px;
  gap:var(--gap);margin-top:var(--sp-in);padding:0 var(--edge) 26px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--edge);
  scrollbar-color:var(--moss) var(--canvas-2);scrollbar-width:thin;
}
.kurz-track::-webkit-scrollbar{height:3px}
.kurz-track::-webkit-scrollbar-track{background:var(--rule-light)}
.kurz-track::-webkit-scrollbar-thumb{background:var(--moss)}

.kurz-track .shot{position:relative;margin:0;scroll-snap-align:start}
.kurz-track .shot-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.kurz-track img{width:100%;aspect-ratio:4/3;object-fit:cover}
.kurz-track figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--ink);color:var(--on-dark);
  padding:14px 18px;pointer-events:none;
  font-family:var(--ff-body);font-weight:700;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.5;
  opacity:0;transition:opacity .15s linear;
}
@media (hover:hover){
  .kurz-track .shot:hover figcaption,
  .kurz-track .shot:focus-within figcaption{opacity:1}
}
@media (hover:none){
  .kurz-track figcaption{opacity:1}
}

/* ----------------------------------------------------- 11 Farbige Kacheln --- */

.forms-head{padding:var(--sp) 0 var(--sp-in)}
.forms-head h2{margin-bottom:.4em;max-width:none}
.forms-head .head-note{max-width:none}
.forms-tiles{display:grid;grid-template-columns:1fr 1fr;gap:0}
.forma{margin:0;display:flex;flex-direction:column}
.forma-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.forma-txt{padding:clamp(32px,3.6vw,56px);flex:1;display:flex;flex-direction:column}
.forma-forest{background:var(--forest-deep);color:var(--on-dark)}
.forma-forest h3{color:#f4efe4}
.forma-forest p{color:#ddd7c8}
.forma-forest .form-kicker{color:var(--cream)}
.forma-forest .act-line:hover{color:var(--cream)}
.forma-sand{background:var(--sand);color:var(--ink)}
.forma-sand .form-kicker{color:#4a3a2b}
.forma-sand p{color:#302a22}
.form-kicker{margin:0 0 12px}
.forma h3{margin-bottom:.55em}
.forma .acts{margin-top:auto;padding-top:26px}   /* CTA beider Kacheln auf gleicher Grundlinie */

/* --------------------------------------------------------- 12 Termíny --- */

.term{padding:var(--sp) 0;border-bottom:1px solid rgba(236,230,218,.3)}
.term:first-of-type{margin-top:var(--sp-in);border-top:0}
.term-lead{display:grid;grid-template-columns:300px minmax(0,1fr) 250px;gap:clamp(28px,4vw,64px);align-items:start}
.term-simple{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(28px,4vw,64px);align-items:start}
.term-poster .shot-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.term-body > *{max-width:none}
.term-type{color:var(--cream);margin:0 0 12px}
.term h3{font-size:clamp(26px,2.6vw,38px);margin-bottom:.5em}
.term-meta{
  list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;
  font-family:var(--ff-body);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:#e6e0d2;
}
.term-meta li{padding:0 20px;border-left:1px solid rgba(236,230,218,.4)}
.term-meta li:first-child{padding-left:0;border-left:0}
.term-note{font-family:var(--ff-display);font-style:italic;font-size:19px;color:#f0e9da !important;margin-top:1em}

.term-price{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.price-num{font-family:var(--ff-display);font-weight:300;font-size:clamp(52px,5vw,76px);line-height:1;color:#f4efe4}
.term-price .acts{flex-direction:column;align-items:flex-start;gap:6px;margin-top:14px}

.term-outro{
  margin-top:var(--sp);font-family:var(--ff-display);font-style:italic;
  font-size:clamp(20px,2vw,27px);line-height:1.45;color:#ece6da !important;max-width:none;
}

/* ---------------------------------------------------------- 13 Manuál --- */

/* Textspalte gibt die Höhe vor, das Cover zieht sich exakt darauf – oben wie unten bündig */
.manual{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,250px);
  column-gap:clamp(36px,5vw,88px);row-gap:0;align-items:stretch}
.manual-txt{display:flex;flex-direction:column}
.manual .lead{font-size:clamp(19px,1.85vw,25px);max-width:48ch;margin-bottom:0}
.manual h2{max-width:none;font-size:clamp(32px,3.9vw,58px)}
.manual .eyebrow{margin-bottom:16px}
.manual .acts{margin-top:auto;padding-top:clamp(28px,3vw,44px)}
.manual-cover{align-self:start}
.manual-cover img{width:100%;height:auto}

/* Dreierband über die volle Breite – schließt den Abschnitt unten ab */
.manual-cards{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(24px,3vw,46px);
  margin-top:24px;
  padding-top:clamp(22px,2.4vw,34px);
  border-top:1px solid rgba(31,30,25,.34);
}
.mini{padding:0}
.manual-cards .mini + .mini{
  border-left:1px solid rgba(31,30,25,.24);
  padding-left:clamp(24px,3vw,46px);
}
.mini-no{color:#6d6152;margin:0 0 12px}
.mini h3{font-size:20px;margin-bottom:.3em}
.mini p{font-size:15px;color:#3a3229;max-width:34ch}
.manual .acts{margin-top:auto;padding-top:28px}

/* --------------------------------------------------------- 14 Kontakt --- */

.kontakt-volby{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:var(--sp-in);border-top:1px solid rgba(236,230,218,.26);
}
.volba{padding:36px 48px 36px 0}
.volba + .volba{border-left:1px solid rgba(236,230,218,.26);padding-left:48px;padding-right:0}
.volba .form-kicker{color:var(--sage);margin:0 0 12px}
.volba h3{color:#f4efe4;margin-bottom:.5em}
.volba p{color:var(--on-dark-2);max-width:38ch}
.volba .acts{margin-top:26px}


/* ------------------------------------------------------------- Dialóge --- */

.volby-zoznam{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rule)}
.volby-zoznam li{border-bottom:1px solid var(--rule)}
.volba-riadok{
  display:block;width:100%;text-align:left;
  border:0;background:none;cursor:pointer;
  padding:18px 34px 18px 0;position:relative;
}
.volba-riadok::after{
  content:"\2192";position:absolute;right:6px;top:50%;translate:0 -50%;
  color:var(--label);font-size:16px;
}
.volba-riadok:hover{background:rgba(31,30,25,.04)}
.volba-riadok:hover::after{color:var(--ink)}
.volba-nazov{
  display:block;font-family:var(--ff-display);font-size:23px;
  line-height:1.2;color:var(--ink);
}
.volba-popis{display:block;font-size:14.5px;color:var(--ink-3);margin-top:4px;max-width:42ch}

.modal{
  border:0;padding:0;background:var(--canvas);color:var(--ink);
  width:min(560px,92vw);max-height:88svh;
}
.modal::backdrop{background:rgba(31,30,25,.72)}
.modal-in{padding:clamp(30px,4vw,52px)}
.modal h3{font-size:clamp(26px,2.6vw,36px);margin-bottom:.45em}
.modal p{font-size:16px;color:var(--ink-2);max-width:44ch}
.modal .eyebrow{color:var(--label)}

.modal-close-form{margin:0}
.modal-close{
  position:absolute;top:10px;right:14px;
  border:0;background:none;color:var(--ink-3);
  font-size:30px;line-height:1;cursor:pointer;padding:8px 10px;
}
.modal-close:hover{color:var(--ink)}

.modal-mail{
  font-family:var(--ff-display);font-size:clamp(21px,2.1vw,28px);
  margin:18px 0 0;max-width:none;
}
.modal-mail a{text-decoration:none;border-bottom:1px solid var(--rule)}
.modal-mail a:hover{border-bottom-color:var(--ink)}
.modal .acts{margin-top:28px}

.modal-form{margin-top:26px}
.pole{display:block;margin-bottom:18px}
.pole span{
  display:block;font-family:var(--ff-body);font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:8px;
}
.pole input{
  width:100%;font:inherit;font-size:17px;color:var(--ink);
  background:var(--paper,#fff);border:1px solid var(--rule);
  padding:13px 14px;border-radius:0;
}
.pole input:focus{outline:2px solid var(--forest);outline-offset:-1px;border-color:var(--forest)}
.pole input[aria-invalid="true"]{border-color:#8d3f2c}
.pole-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.modal-note{font-size:13.5px;color:var(--ink-3);margin:0}
.modal-stav{margin:16px 0 0;font-size:15px;min-height:1.4em}
.modal-stav.je-chyba{color:#8d3f2c}
.modal-stav.je-ok{color:var(--forest-ink)}
.modal-hotovo{padding:6px 0 0}

/* --------------------------------------------------------- Fußzeile --- */

.footer{background:var(--ink);color:#8b8578;padding:24px 0;border-top:1px solid rgba(236,230,218,.16)}
.footer-in{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-size:13px}
.footer p{margin:0;max-width:none}
.footer a{color:#b3ac9c;text-decoration:none}
.footer a:hover{color:var(--sage)}
.footer-links span{opacity:.45;margin:0 4px}

/* --------------------------------------------------------- Lightbox --- */

.lightbox{position:fixed;inset:0;z-index:80;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,72px)}
.lightbox[hidden]{display:none}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-height:100%}
.lb-fig img{max-width:min(1100px,90vw);max-height:76svh;width:auto;object-fit:contain}
.lb-fig figcaption{font-family:var(--ff-display);font-size:21px;color:var(--on-dark)}
.lightbox button{position:absolute;background:none;border:0;color:var(--on-dark);cursor:pointer;line-height:1;font-family:var(--ff-body);font-weight:300}
.lightbox button:hover{color:var(--sage)}
.lb-close{top:20px;right:24px;font-size:34px;width:48px;height:48px}
.lb-prev,.lb-next{top:50%;translate:0 -50%;font-size:44px;width:60px;height:70px}
.lb-prev{left:8px}
.lb-next{right:8px}
body.no-scroll{overflow:hidden}

/* -------------------------------------------------------- Responsiv --- */

@media (max-width:1180px){
  .nav{gap:20px}
}

@media (max-width:1100px){
  .hero-card h1{white-space:normal}
}

@media (max-width:1024px){
  :root{--sp:72px;--sp-in:36px}
  .burger{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--canvas);border-bottom:1px solid var(--rule);
    padding:4px 5vw 18px;display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--rule-light)}
  .nav-cta{margin-top:14px;text-align:center;padding:14px 20px}

  .cols-5-7,.omne-grid,.proces-grid,.manual{grid-template-columns:1fr}
  .col-head,.omne-side,.proces-index{position:static}
  .omne-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,220px);gap:32px;align-items:end;max-width:640px}
  
  .sec-break{grid-template-columns:1fr}
  .break-img img{min-height:0;aspect-ratio:4/3}
  .break-txt{padding:var(--sp) var(--edge)}

  .manual-cover{max-width:280px;order:-1}
  .manual-cards{grid-template-columns:1fr;padding-top:0;row-gap:0}
  .mini{padding:20px 0;border-bottom:1px solid rgba(31,30,25,.24)}
  .manual-cards .mini + .mini{border-left:0;padding-left:0}
  .mini-no{margin-bottom:8px}
  .mini p{max-width:46ch}
  .term-lead{grid-template-columns:280px minmax(0,1fr)}
  .term-price{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:20px}
  .term-price .acts{flex-direction:row;margin-top:0}
  .term-simple{grid-template-columns:1fr}
}

@media (max-width:860px){
  .hero{aspect-ratio:auto;max-height:none}
  .hero-img{aspect-ratio:1537/1023;height:auto}
  .hero-card{
    position:static;width:auto;background:var(--cream);color:var(--ink);
    padding:34px 5vw 38px;
  }
  .hero-card h1{color:var(--ink);white-space:normal}
  .hero-card .eyebrow{color:var(--forest-ink)}
  .hero-sub{color:var(--earth-ink)}
  .hero-card .act-fill{background:var(--ink);color:var(--canvas)}
  .hero-card .act-line{color:var(--ink);border-bottom-color:var(--ink)}

  .pas{grid-template-columns:repeat(3,1fr)}
  .pas-item:nth-child(n+4){display:none}


  .triptych{grid-template-columns:1fr}
  .triptych > div{border-left:0;border-top:1px solid var(--rule);padding:24px 0 0}
  .triptych > div:first-child{border-top:0}


  .forms-tiles{grid-template-columns:1fr}
  .head-row{grid-template-columns:1fr;align-items:start}
}

@media (max-width:600px){
  body{font-size:16.5px}
  .gal-track{grid-auto-columns:70vw;grid-template-rows:auto}
  .kurz-track{grid-auto-columns:78vw}
  .track-nav{display:none}
  .strip-in > *{padding:11px 14px;font-size:10.5px}
  .strip-link{margin-left:0}
  .pas{grid-template-columns:repeat(2,1fr)}
  .pas-item:nth-child(n+3){display:none}

      .filmstrip .step{flex:0 0 78vw}
  .term-lead{grid-template-columns:1fr}
  .act-fill{padding:14px 22px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media print{
  .topbar,.lightbox,.chips,.strip-date,.filmstrip,.pas,.kurz-track,.track-bar{display:none !important}
  body{background:#fff;color:#000}
  .sec-dark,.sec-contact,.sec-sand,.footer,.quote-band,.forma{background:#fff !important;color:#000 !important}
  .sec-dark h2,.sec-dark h3,.sec-contact h2,.forma h3{color:#000 !important}
}