@charset "UTF-8";
/* ==========================================================================
   JIPOCAR — modern static redesign (draft)
   Plain CSS, no dependencies. Brand: red on industrial grey/dark.
   ========================================================================== */

:root{
  --red:#e2001a;
  --red-dark:#b30015;
  --ink:#13171d;        /* near-black slate */
  --ink-2:#1d2530;
  --grey-900:#222a35;
  --muted:#667085;
  --line:#e6e8ec;
  --bg:#ffffff;
  --bg-alt:#f5f6f8;
  --bg-dark:#13171d;
  --white:#ffffff;

  /* centred column: 1200px up to a 1600px viewport, then 75vw (1440px @ 1920), capped at 1800px (from 2400) */
  --maxw:clamp(1200px,75vw,1800px);
  --gap:clamp(1rem,3vw,2rem);
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(19,23,29,.10);
  --shadow-lg:0 24px 60px rgba(19,23,29,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:76px;

  --font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.65;font-size:17px;overflow-x:hidden;
  /* flex column + min-height: the footer (margin-top:auto) sits at the viewport bottom on short pages */
  min-height:100svh;display:flex;flex-direction:column;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{line-height:1.12;margin:0;font-weight:800;letter-spacing:-.02em}
p{margin:0 0 1em}

/* ---- layout helpers ---- */
.container{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
/* an optional section (sponzoring.html Články: [data-news-block] hidden until it has content) — pinned
   explicitly so a later author display on .section can never beat the UA [hidden] rule */
.section[hidden]{display:none}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--bg-dark);color:#e9edf2}
.center{text-align:center}
.grid{display:grid;gap:var(--gap)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin:0 0 .9rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red)}
/* a unit inside an uppercase eyebrow keeps its case — "200 µm", not "200 MM" (µ uppercases to Μ) */
.eyebrow .unit{text-transform:none}
.section--dark .eyebrow{color:#ff5a6e}
h2.title{font-size:clamp(1.8rem,4vw,2.7rem)}
.lead{font-size:1.12rem;color:var(--muted);max-width:60ch}
.lead a,.checklist a,.form__hint a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.lead a:hover,.checklist a:hover,.form__hint a:hover{color:var(--red-dark)}
.section--dark .lead{color:#aeb7c2}
.measure{max-width:64ch}

/* ---- buttons ---- */
.btn{
  --bg:var(--red);--fg:#fff;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--bg);color:var(--fg);font-weight:700;font-size:.98rem;
  padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(226,0,26,.30)}
.btn--ghost{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{box-shadow:none;background:rgba(255,255,255,.12)}
.btn--dark{--bg:var(--ink);--fg:#fff}
.btn--dark:hover{box-shadow:0 12px 24px rgba(19,23,29,.30)}
.btn--outline{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn--outline:hover{box-shadow:none;border-color:var(--ink)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),height .3s var(--ease);
}
.header__inner{display:flex;align-items:center;gap:1.5rem;width:100%;padding-inline:clamp(1.2rem,2.5vw,2.5rem)}
.header.scrolled{background:rgba(19,23,29,.96);backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brand img{height:30px;width:auto}
.brand__fallback{font-weight:900;font-size:1.4rem;letter-spacing:.04em;color:#fff}
.brand__fallback b{color:var(--red)}
.nav{display:flex;align-items:center;gap:clamp(.9rem,1.3vw,1.5rem)}
.nav a{
  color:#fff;font-weight:600;font-size:.97rem;position:relative;padding:.4rem 0;
  opacity:.92;transition:opacity .2s;
}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--red);
  transition:width .25s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.header__cta{display:flex;align-items:center;gap:1rem}
.header__phone{color:#fff;font-weight:700;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.header__phone svg{fill:var(--red)}
.lang{display:flex;gap:.35rem;font-size:.82rem;font-weight:700}
.lang a{color:#fff;opacity:.6}
.lang a:hover{opacity:1}
.lang a.active{opacity:1;color:var(--red)}
.lang--mobile{display:none}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;padding:8px}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;margin:5px 0;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   HERO (slider)
   ========================================================================== */
/* The hero owns a dark ground (2026-09-23): until a picture is decoded it shows THIS, not a
   low-resolution stand-in. A bundled picture small enough to paint instantly is visibly soft on a
   2x screen next to the published 3840 px one, and the soft→sharp jump is what reads as "bad
   quality" — a dark second reads as loading. The bundled picture is still there for a slow line,
   revealed by main.js after HERO_BUNDLED_DELAY_MS. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden;background:#13171d}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
/* the slide's picture (WebP srcset + JPEG fallback, rendered by main.js) fills the slide like the
   former background-image: cover, centred */
.hero__slide picture,.hero__slide img{display:block;width:100%;height:100%}
.hero__slide img{object-fit:cover;object-position:center}
.hero__slide.active{opacity:1}
/* The picture's movement is a PER-SLIDE SETTING (data-motion, from the admin — task
   web-carousel-motion, 2026-09-22): "zoom" = the slow Ken Burns zoom 1.08 → 1, "pan" = a slow
   sideways drift at a constant 1.05 (odd slides right, even left), "none" = still. A photo with fine
   regular lines (window blinds, facade panels) shimmers under a zoom and blinks under a pan — that
   is what "none" is for; measured on the areál facade: pan ~1 % frame-to-frame sharpness variation,
   zoom 2 %, still 0 %. A compositor animation on the PICTURE lasting exactly the slide's time plus
   the fade (--kb, set by main.js). The slide that leaves keeps its frame FROZEN while it fades
   (.leaving = the same animation, paused — the same animation-name keeps it running instead of
   restarting) and is reset once invisible (main.js drops .leaving after the fade). will-change only
   on the two slides that move — a 4K picture is a 30 MB layer, ten of them are not. */
.hero__slide[data-motion="zoom"] img{transform:scale(1.08)}
.hero__slide[data-motion="pan"] img{transform:scale(1.05) translateX(-1.2%)}
.hero__slide[data-motion="pan"]:nth-child(even) img{transform:scale(1.05) translateX(1.2%)}
.hero__slide[data-motion="zoom"].active img,.hero__slide[data-motion="zoom"].leaving img{animation:hero-zoom var(--kb,7s) linear forwards;will-change:transform}
.hero__slide[data-motion="pan"].active img,.hero__slide[data-motion="pan"].leaving img{animation:hero-pan var(--kb,7s) linear forwards;will-change:transform}
.hero__slide[data-motion="pan"]:nth-child(even).active img,.hero__slide[data-motion="pan"]:nth-child(even).leaving img{animation-name:hero-pan-back}
.hero__slide[data-motion].leaving img{animation-play-state:paused}
.hero__slide[data-motion="zoom"].active,.hero__slide[data-motion="zoom"].leaving,.hero__slide[data-motion="pan"].active,.hero__slide[data-motion="pan"].leaving{will-change:opacity}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes hero-pan{from{transform:scale(1.05) translateX(-1.2%)}to{transform:scale(1.05) translateX(1.2%)}}
@keyframes hero-pan-back{from{transform:scale(1.05) translateX(1.2%)}to{transform:scale(1.05) translateX(-1.2%)}}
/* The texts of a new slide rise gently (.hero__inner.is-fresh, replayed by main.js on every
   switch, never on the first paint) — motion that touches no photo pixels. */
.hero__inner.is-fresh{animation:hero-texts .7s var(--ease) both}
@keyframes hero-texts{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,16,20,.88) 0%,rgba(13,16,20,.6) 45%,rgba(13,16,20,.25) 100%);}
.hero__inner{position:relative;z-index:2;padding-top:var(--header-h);max-width:760px}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:900;letter-spacing:-.03em}
.hero h1 .accent{color:var(--red)}
.hero__sub{font-size:clamp(1.05rem,2.2vw,1.35rem);color:#d7dde4;margin:1.2rem 0 2rem;max-width:54ch}
/* The slogan picture a slide can show in place of h1 + .hero__sub (carousel contract v2): its own
   width, capped by the viewport, the container and 56rem, never upscaled (the width/height
   attributes keep the ratio), the sub's bottom rhythm above the CTA buttons. The global img rule
   sets display:block, so [hidden] needs its own rule (as .job-bonus[hidden] does). */
.hero__slogan{display:block;max-width:min(90vw,56rem,100%);height:auto;margin:0 0 2rem}
.hero__slogan[hidden]{display:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem}
.hero__dots{position:absolute;left:0;right:0;bottom:2rem;z-index:3;display:flex;gap:.6rem;justify-content:center}
.hero__dots button{width:34px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s}
.hero__dots button.active{background:var(--red);width:54px}
/* The yearly seal (carousel contract v2 "badge"): ONE <span class="hero__badge"><img></span> the slider
   appends to .hero — bottom-left, over every published slide and above the gradient (z-index 3, like
   the dots). The span is a translucent grey DISC — a true circle (aspect-ratio 1 + border-radius 50%;
   backdrop blur keeps it readable on busy photos): the corner sits in the darkest part of the hero
   gradient, so a dark drawing would vanish and a white card was too loud ("transparent, less
   pronounced", 2026-09-17). The img inside is centred on the disc and NOT clipped: the customer's
   white seal is not round — "36 YEARS" overshoots the ring and the SVG's viewBox (370.62 × 350.13)
   hugs the "3" and the "S" — so the former border-radius on the img itself (an ellipse of the
   picture's box) cut exactly those two glyphs (client, 2026-09-24; the user picked this variant out
   of five). The picture is as wide as the disc: the ring (93 % of the width) sits 3.5 % inside the
   edge and the glyph corners (53.6 % of the width from the centre) hang 3.6 % over it — 6 px at
   168 px, 3.4 px at 96 px. translate -50.6 % vertically because the ring's centre is 2.2 units below
   the viewBox centre. The disc width follows the viewport (168 px at 1400 px, 176 px from 1467 px,
   96 px at 390 px). [hidden] needs its own rule (learnings §30). No phone override needed: at 390 px
   the clamps give left 16 / bottom 56 / 96 px — clear of the dots and CTAs. */
.hero__badge{position:absolute;left:clamp(1rem,4vw,3rem);bottom:clamp(3.5rem,8vw,4.5rem);z-index:3;width:clamp(96px,12vw,176px);aspect-ratio:1;background:rgba(70,76,84,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%}
.hero__badge[hidden]{display:none}
.hero__badge img{position:absolute;left:50%;top:50%;width:100%;height:auto;transform:translate(-50%,-50.6%)}

/* ---- red stripe under the hero — text-free since 2026-09-18 (it used to hold the four home figures) ---- */
.hero-stripe{position:relative;z-index:4;background:var(--red);height:clamp(16px,1.6vw,24px)}

/* ==========================================================================
   SERVICES
   ========================================================================== */
/* Six service cards: 3 × 2 on desktop, 2 × 3 on tablets, one column on phones — a fixed column
   count, because auto-fit left an orphan row (5 + 1) on wide screens. */
.svc-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;
  display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow);isolation:isolate;
  background:var(--ink);
}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(19,23,29,0) 30%,rgba(19,23,29,.9) 100%)}
.svc:hover img{transform:scale(1.07)}
.svc__body{padding:1.5rem}
.svc__body h3{font-size:1.3rem;margin-bottom:.35rem}
.svc__body p{margin:0;color:#cfd5dc;font-size:.95rem}
.svc__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;color:#fff;font-weight:700;font-size:.9rem}
.svc__more svg{transition:transform .25s var(--ease)}
.svc:hover .svc__more svg{transform:translateX(4px)}
.svc--tall{grid-row:span 2}

/* icon cards (alt) */
.feature-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;transition:.3s var(--ease)}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.feature .ico{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;background:rgba(226,0,26,.1);margin-bottom:1rem}
.feature .ico svg{width:28px;height:28px;fill:var(--red)}
.feature h3{font-size:1.15rem;margin-bottom:.4rem}
.feature p{margin:0;color:var(--muted);font-size:.96rem}
/* EU co-financed project cards (spolufinancovani-eu.html, rendered by main.js): the muted programme
   note under the description and the optional "Více informací" link opening the project page. The
   descendant selectors beat ".feature p" (the note is a p) — keep them that way. */
.feature .feature__note{color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding-top:.8rem;margin-top:.8rem}
.feature .feature__more{display:inline-block;margin-top:.8rem;color:var(--red);font-weight:700;font-size:.9rem}

/* ==========================================================================
   ABOUT / SPLIT
   ========================================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover}
/* One wide photo across the container (sluzby#warehouse): the .split__media frame, cropped to a
   banner on desktop; phones get the whole 3:2 photo (a 5:2 strip would be ~140px tall there).
   object-position keeps the warehouseman's head and hands inside the crop. */
.wide-photo img{width:100%;aspect-ratio:5/2;object-fit:cover;object-position:center 42%;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
@media (max-width:640px){.wide-photo img{aspect-ratio:3/2}}
/* Promo video (o-nas.html, main.js initPromoVideo): the .split__media frame around a 16:9 video.
   The two buttons sit top-right — bottom-left belongs to the .badge that overlaps the frame. The
   sound button is a labelled pill while the sound is off (it is the one thing a visitor must
   discover), icon-only once it is on and on phones. */
/* isolation: the buttons and the timeline carry z-index 2 — without an own stacking context they
   paint over the .badge (a later sibling with z-index auto) and the timeline's gradient greys it. */
.promo-video{position:relative;isolation:isolate;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#0d1014}
.promo-video video{display:block;width:100%;height:100%;object-fit:cover}
/* The video could not be loaded (blob storage unreachable / not uploaded / ?blob=off): the poster
   stays as a plain picture — no buttons that lead nowhere. is-pending (set in o-nas.html) is the
   same picture while video/promo.json is on its way: the buttons have no icon or label before
   the player starts. */
.promo-video.is-unavailable .promo-video__controls,.promo-video.is-unavailable .promo-video__center,.promo-video.is-unavailable .promo-video__timeline,
.promo-video.is-pending .promo-video__controls,.promo-video.is-pending .promo-video__center,.promo-video.is-pending .promo-video__timeline{display:none}
/* Centre button: "play again" on the dimmed last frame once the video ended, and the big play
   button while the video may not start by itself (reduced motion, data saver, autoplay refused).
   It covers the whole frame (one big target) but sits UNDER the corner buttons and the timeline. */
.promo-video__center{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;padding:0;border:0;background:rgba(13,16,20,.42) center/cover no-repeat;color:#fff;cursor:pointer}
.promo-video__center[hidden]{display:none}
.promo-video__center span{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:rgba(19,23,29,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s var(--ease),transform .2s var(--ease)}
.promo-video__center:hover span,.promo-video__center:focus-visible span{background:var(--red);transform:scale(1.06)}
.promo-video__center:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.promo-video__center svg{width:42px;height:42px;fill:currentColor}
@media (max-width:560px){.promo-video__center span{width:64px;height:64px}.promo-video__center svg{width:32px;height:32px}}
.promo-video__controls{position:absolute;top:.8rem;right:.8rem;z-index:2;display:flex;gap:.5rem}
.promo-video__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:44px;height:44px;padding:0 .7rem;border:0;border-radius:999px;background:rgba(19,23,29,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:700 .88rem var(--font);cursor:pointer;transition:background .2s var(--ease)}
.promo-video__btn:hover,.promo-video__btn:focus-visible{background:var(--red)}
.promo-video__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.promo-video__btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.promo-video__btn--sound[aria-pressed="false"]{padding:0 1.05rem 0 .85rem}
.promo-video__btn--sound[aria-pressed="true"] span{display:none}
@media (max-width:560px){.promo-video__btn--sound span{display:none}.promo-video__btn--sound[aria-pressed="false"]{padding:0 .7rem}}
/* Timeline: a range input drawn as a slim bar over a bottom gradient. --p (0–100%) is the played
   share, set by main.js — WebKit has no ::range-progress, so the fill is a gradient on the track.
   (Until 2026-09-22 a "35+" badge covered the frame's bottom-left corner and main.js measured it
   to start the bar beside it or lift it above; the badge is gone, the bar runs edge to edge.) */
.promo-video__timeline{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:.7rem;padding:1.6rem .9rem .7rem;background:linear-gradient(transparent,rgba(13,16,20,.72))}
.promo-video__timeline[hidden]{display:none}
.promo-video__time{flex:none;color:#fff;font:600 .78rem var(--font);font-variant-numeric:tabular-nums;opacity:.92}
.promo-video__seek{--p:0%;flex:1;min-width:0;height:18px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.promo-video__seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--red) var(--p),rgba(255,255,255,.4) var(--p))}
.promo-video__seek::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
.promo-video__seek::-moz-range-progress{height:4px;border-radius:2px;background:var(--red)}
.promo-video__seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.promo-video__seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.promo-video__seek:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
@media (max-width:560px){.promo-video__timeline{gap:.5rem}}
.split__media .badge{
  position:absolute;left:-18px;bottom:-18px;background:var(--red);color:#fff;
  padding:1rem 1.3rem;border-radius:var(--radius-sm);box-shadow:var(--shadow);
}
.split__media .badge b{font-size:2rem;display:block;line-height:1}
.split__media .badge span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
.checklist{display:grid;gap:.7rem;margin:1.4rem 0 0}
.checklist li{position:relative;padding-left:2rem;color:var(--ink)}
.section--dark .checklist li,.section--dark .tl__body p{color:#d2d8df}
/* Jipocar Power (index.html / sluzby.html #jipocar-power): a dark band in two rows — the pitch +
   the button beside the wind-farm photo, then the storage photo beside the three body paragraphs
   (the square picture is shown 3:2 so it matches the text's height). */
.power__more{margin-top:clamp(2rem,4vw,3.5rem)}
.power__storage{aspect-ratio:6/5;object-fit:cover}
.power__text p{color:#d2d8df}
.power__text p:last-child{margin-bottom:0}
.power__site{margin:.9rem 0 0;font-size:.85rem;color:#8c96a3}
.section--dark h3,.section--dark .tl__year{color:#fff}
.checklist li::before{
  content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;
  background:var(--red);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
}

/* ==========================================================================
   MOTTO band
   ========================================================================== */
.motto{position:relative;color:#fff;text-align:center;overflow:hidden}
.motto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.motto::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(19,23,29,.82)}
.motto__inner{padding:clamp(3.5rem,7vw,6rem) 0}
.motto blockquote{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;max-width:24ch;margin:0 auto;line-height:1.3}
.motto cite{display:block;margin-top:1.2rem;font-style:normal;color:var(--red);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem}

/* ==========================================================================
   TIMELINE (history)
   ========================================================================== */
/* Year column = wide enough for a RANGE ("1991–1992") on one row; nowrap so it never breaks at the dash. */
.timeline{position:relative;max-width:860px;margin-inline:auto;padding-left:0}
.timeline::before{content:"";position:absolute;left:160px;top:0;bottom:0;width:2px;background:var(--line)}
.tl{position:relative;display:grid;grid-template-columns:160px 1fr;gap:2rem;padding:.7rem 0 1.6rem}
.tl__year{text-align:right;font-weight:900;color:var(--red);font-size:1.15rem;padding-right:1.6rem;white-space:nowrap}
.tl__body{position:relative;padding-left:1.6rem}
.tl__body::before{content:"";position:absolute;left:-7px;top:.45rem;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--bg)}
.tl__body p{margin:0;color:var(--ink)}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.gallery a{display:block;overflow:hidden;border-radius:var(--radius-sm);aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery a:hover img{transform:scale(1.08)}
/* One whole picture that opens in the lightbox (o-nas#areal — the illustration of the centre):
   the gallery's click behaviour without its grid, its 4:3 crop and its strong hover zoom. */
.gallery.site-plan{display:block}
.gallery.site-plan a{position:relative;aspect-ratio:auto;border-radius:var(--radius);box-shadow:var(--shadow-lg);cursor:zoom-in}
.gallery.site-plan img{height:auto;object-fit:contain;display:block}
.gallery.site-plan a:hover img{transform:scale(1.015)}
/* "this enlarges" — the magnifier in the corner; the picture is a preview, the lightbox is the real view */
.site-plan__zoom{position:absolute;right:.7rem;bottom:.7rem;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(19,23,29,.72);color:#fff;pointer-events:none}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,10,13,.92);display:none;
  align-items:center;justify-content:center;padding:2rem}
.lightbox.open{display:flex}
/* A single picture has nowhere to go — no arrows (set by main.js on open). */
.lightbox--single .lightbox__nav{display:none}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:var(--shadow-lg)}
.lightbox__close,.lightbox__nav{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:1.4rem;display:grid;place-items:center;transition:.2s}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--red)}
.lightbox__close{top:1.5rem;right:1.5rem}
.lightbox__nav{top:50%;transform:translateY(-50%)}
.lightbox__nav.prev{left:1.5rem}.lightbox__nav.next{right:1.5rem}

/* ==========================================================================
   NEWS / AKTUALITY
   ========================================================================== */
.news-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
/* a grid that may hold only one or two cards (sponzoring.html Články): auto-fill keeps the empty
   tracks, so a lone card gets the width of a card in a full row instead of the whole container */
.news-grid--fixed{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.news-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.news-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.news-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.news-card:hover .news-card__media img{transform:scale(1.07)}
.news-card__date{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;font-size:.78rem;font-weight:700;padding:.4rem .8rem;letter-spacing:.02em}
.news-card__body{display:flex;flex-direction:column;flex:1;padding:1.5rem}
.news-card__title{font-size:1.2rem;margin-bottom:.5rem;color:var(--ink)}
.news-card__excerpt{margin:0 0 1.1rem;color:var(--muted);font-size:.96rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-grid--full .news-card__excerpt{-webkit-line-clamp:unset;overflow:visible}
.news-card__more{margin-top:auto;color:var(--red);font-weight:700;font-size:.9rem}
.news-empty{color:var(--muted);text-align:center}
.jobs-unavailable{grid-column:1/-1;padding:2rem 1rem}
.gallery>.news-empty{grid-column:1/-1}
.jobs-unavailable a{color:var(--red);text-decoration:underline;text-underline-offset:2px;font-weight:700}
.section--dark .jobs-unavailable{color:#aeb7c2}

/* ==========================================================================
   CONTACT
   ========================================================================== */
/* 320px minimum: the longest department name ("Mezinárodní doprava nad 18 t", ~232px at this size,
   wider in en/de) stays on one line — 240px gave 276px cards in the 1200px column and wrapped it.
   15 cards land as 3 columns (5 full rows) in the 1200px column and 4 columns at 1920.
   min(…,100%) keeps a single column from overflowing phones narrower than the minimum. */
.contact-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.contact-card h3{font-size:1.05rem;margin-bottom:.6rem;color:var(--red)}
.contact-card a{display:block;color:var(--ink);font-weight:600}
.contact-card .muted{color:var(--muted);font-weight:400;font-size:.92rem}
/* Contact map (Leaflet, main.js initContactMap). isolation: Leaflet's panes and controls carry
   z-index 400–1000 — without an own stacking context they would paint over the fixed header. */
.map-wrap{position:relative;isolation:isolate;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:360px;background:var(--bg-alt)}
.contact-map{position:absolute;inset:0;font-family:var(--font)}
/* Tile seams. The grid column starts on a fractional pixel, so neighbouring tiles meet on a shared
   device pixel. Leaflet 1.9 answers that with mix-blend-mode:plus-lighter on the tiles (adds the
   two antialiased edges up) — which here ADDS two opaque edges and paints a white hairline along
   every tile border. So: normal blending, and half a pixel of overlap so no gap can open instead
   (the pre-1.9 remedy, Leaflet #3575). Both halves are needed — verified at DPR 1/2/3. */
.contact-map img.leaflet-tile{mix-blend-mode:normal;width:256.5px!important;height:256.5px!important}
.map-nav{position:absolute;left:1rem;bottom:1rem;z-index:1001;padding:.55rem 1.15rem;font-size:.9rem;box-shadow:var(--shadow)}
/* The marker: a white badge with the JIPOCAR logo in brand red (logo.png is the white header
   logo — used as a mask, so no second image file) and a tail whose tip is the exact spot.
   Its outer size + tip = iconSize/iconAnchor in initContactMap — change them together. */
.map-pin-icon{background:none;border:0}
.map-pin{position:relative;display:flex;align-items:center;justify-content:center;width:132px;height:44px;background:#fff;border:2px solid var(--red);border-radius:10px;box-shadow:0 6px 18px rgba(19,23,29,.28)}
.map-pin::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateX(-50%) rotate(45deg)}
/* Landmarks of the way in (kontakt.html data-lights/-fuel/-gate): a round badge at the spot, the
   label pill above or below it (main.js picks the side per landmark so close ones never overlap). */
.map-mark-icon{background:none;border:0}
.map-mark{position:relative;width:34px;height:34px}
.map-mark__badge{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--red);box-shadow:0 4px 12px rgba(19,23,29,.28)}
.map-mark__badge svg{width:20px;height:20px}
.map-mark__label{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:var(--ink);font:600 .72rem/1.2 var(--font);padding:.22rem .55rem;border-radius:6px;box-shadow:0 2px 8px rgba(19,23,29,.25)}
.map-mark--below .map-mark__label{top:39px}
.map-mark--below-start .map-mark__label{top:39px;left:0;transform:none}
.map-mark--below-end .map-mark__label{top:39px;left:auto;right:0;transform:none}
.map-mark--right .map-mark__label{left:40px;top:50%;transform:translateY(-50%)}
/* The CHECK-IN landmark carries the client's CHECK IN logo (assets/img/checkin.svg, client round
   2026-09-28): a rectangular white card with the red border instead of the 34 px disc, the label
   under the taller card. Card size = iconSize/iconAnchor of landmark(…, logo) in main.js. */
.map-mark--logo{width:48px;height:40px}
.map-mark--logo .map-mark__badge{width:48px;height:40px;border-radius:8px}
.map-mark--logo .map-mark__badge img{display:block;width:40px;height:32px}
.map-mark--logo.map-mark--below .map-mark__label{top:45px}
.map-pin__logo{width:104px;height:26px;background:var(--red);-webkit-mask:url(../img/logo.png) center/contain no-repeat;mask:url(../img/logo.png) center/contain no-repeat}

.form{display:grid;gap:1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{font-weight:600;font-size:.9rem;display:block;margin-bottom:.35rem}
.form input,.form textarea{
  width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.97rem;background:#fff;transition:border .2s,box-shadow .2s;
}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,0,26,.12)}

/* ==========================================================================
   TABLE (fleet)
   ========================================================================== */
.table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
table.fleet{width:100%;border-collapse:collapse;min-width:560px}
table.fleet th,table.fleet td{padding:1rem 1.1rem;text-align:center;border-bottom:1px solid var(--line)}
table.fleet thead th{background:var(--ink);color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
table.fleet tbody td:first-child{text-align:left;font-weight:700}
table.fleet tbody tr:hover{background:var(--bg-alt)}

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{position:relative;color:#fff;padding:calc(var(--header-h) + 4rem) 0 3.5rem;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(13,16,20,.9),rgba(13,16,20,.55))}
.page-hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:900}
.page-hero p{color:#d7dde4;max-width:60ch;margin:.8rem 0 0}
.breadcrumb{font-size:.85rem;color:#aeb7c2;margin-bottom:1rem}
.breadcrumb a:hover{color:#fff}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{margin-top:auto;background:#0e1115;color:#aeb7c2;padding:4rem 0 1.5rem;font-size:.95rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer h4{color:#fff;font-size:1rem;margin-bottom:1.1rem;letter-spacing:.02em}
.footer a:hover{color:#fff}
.footer .brand__fallback{font-size:1.5rem;margin-bottom:1rem}
.footer ul li{margin-bottom:.55rem}
.footer__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#7c8794}
/* GPS line under the HQ address (client review 2026-09-23, item 7) and the financing strip under
   the financing strip UNDER the dark footer (item 5 — the client's updated wording „pod tmavou část
   dát světlou", 2026-09-24; it sat above the footer for a day): the funding logos are artwork for a
   white ground, so the strip is white and centred like on the old site; the page gutter comes from
   .container, the picture scales down on phones (width:100% inside its max-width). */
.footer__gps{margin-top:.6rem}
.footer__gps a{color:#e9edf2;text-decoration:underline;text-underline-offset:.15em}
.footer__funding{background:#fff;padding:1.4rem 0}
.footer__funding .container{display:flex;justify-content:center}
.footer__funding a{display:block;width:100%;max-width:560px}
.footer__funding img{display:block;width:100%;height:auto}
.social{display:flex;gap:.7rem;margin-top:1rem}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.25s}
.social a:hover{background:var(--red)}
.social svg{width:18px;height:18px;fill:#fff}

/* ==========================================================================
   JOBS / KARIÉRA
   ========================================================================== */
.jobs-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.job-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.job-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.job-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.job-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.job-card:hover .job-card__media img{transform:scale(1.07)}
.job-card__badge{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;
  font-size:.78rem;font-weight:700;padding:.4rem .8rem;letter-spacing:.02em}
.job-card__body{display:flex;flex-direction:column;flex:1;padding:1.5rem}
.job-card__body h3{font-size:1.15rem;margin-bottom:.4rem;color:var(--ink)}
.job-card__sub{margin:0 0 1rem;color:var(--muted);font-size:.94rem}
/* The job-detail body section starts with the bonus badge — the default .section top padding
   (up to 6.5rem) leaves it floating; tighten just this section. */
.job-detail-body{padding-top:2.25rem}
/* signing-bonus badge — on job cards (pushed above the "detail" link) and at the top of the detail body */
.job-bonus[hidden]{display:none}
.job-bonus{display:inline-block;align-self:flex-start;margin:0 0 1rem;padding:.3rem .7rem;
  background:var(--red,#e30613);color:#fff;border-radius:999px;font-size:.85rem;font-weight:600;
  white-space:nowrap}
.job-card__body .job-bonus{margin-top:auto}
/* when the badge is present it takes the bottom-push; the link then sits right under it
   (must out-specify the .job-card .svc__more{margin-top:auto} rule below) */
.job-card__body .job-bonus + .svc__more{margin-top:.25rem}
.job-card__meta{display:flex;flex-direction:column;gap:.15rem;margin-bottom:1rem;
  font-size:.88rem;color:var(--muted)}
.job-card__meta b{color:var(--ink);font-size:.95rem}
.job-card .svc__more{margin-top:auto;color:var(--red)}
.job-facts{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.job-facts .feature p{margin:0;font-weight:700;color:var(--ink)}
.feature--accent{background:var(--red);border-color:var(--red);color:#fff}
.feature--accent h3,.feature--accent p{color:#fff}
.checklist--cols{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:2.5rem}

/* ==========================================================================
   DOCUMENTS
   ========================================================================== */
.doc-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.doc{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:1rem 1.2rem;font-weight:600;color:var(--ink);
  transition:.25s var(--ease)}
.doc:hover{border-color:var(--red);box-shadow:var(--shadow);transform:translateY(-2px)}
.doc__type{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;
  background:rgba(226,0,26,.1);color:var(--red);font-size:.72rem;font-weight:800;letter-spacing:.04em}

/* ==========================================================================
   GALLERY ALBUMS & CAPTIONS
   ========================================================================== */
.album{margin-top:3.5rem}
.album:first-child{margin-top:0}
.album__title{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:1.4rem;position:relative;padding-left:1rem}
.album__title::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;background:var(--red);border-radius:2px}
.gallery a{position:relative}
.gallery__cap{position:absolute;left:0;right:0;bottom:0;padding:.5rem .7rem;font-size:.78rem;color:#fff;
  background:linear-gradient(180deg,rgba(19,23,29,0),rgba(19,23,29,.85));opacity:0;transition:opacity .3s}
.gallery a:hover .gallery__cap{opacity:1}
.lightbox__cap{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);max-width:80vw;
  color:#e9edf2;font-size:.95rem;text-align:center}

/* ==========================================================================
   PARTNERS / SPONSORS
   ========================================================================== */
/* sponzoring.html "Koho podporujeme" — cards rendered by main.js renderPartners from
   sponsoring/partners.json: a fixed 96 px logo box (object-fit: contain keeps any logo inside it),
   an optional caption below, the whole card an <a> when the partner has a link. The loader-state
   text spans the grid; placeholder cards hold the grid's height while the blob answers. */
.partner-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;align-items:stretch}
.partner-grid>.news-empty{grid-column:1/-1}
.partner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.4rem;
  min-height:170px;color:var(--ink);text-align:center}
.partner__logo{display:block;width:auto;max-width:100%;height:96px;object-fit:contain}
/* the name sits under every logo (the same text as the alt); at most two lines, and a long
   unbreakable word wraps instead of widening the card (a grid item's min-width is auto) */
.partner__name{max-width:100%;font-size:.9rem;font-weight:600;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.partner__caption{max-width:100%;margin-top:-.4rem;font-size:.85rem;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.partner--link{transition:.25s var(--ease)}
.partner--link:hover{border-color:var(--red);box-shadow:var(--shadow);transform:translateY(-2px)}
.partner--placeholder{background:var(--bg-alt);border-color:transparent}
/* O nás „Pomáháme & Sponzoring" teaser (2026-09-24): the first partners as a 2 × 2 strip of the same
   cards in the split's media column; the split's picture rules (radius, shadow, cover) must not touch
   the logos. Hidden through the attribute when there is nothing to show. */
.partners-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;align-items:stretch}
.partners-preview[hidden]{display:none}
.partners-preview .partner{min-height:150px;padding:1.1rem}
.split__media .partner__logo{width:auto;height:80px;border-radius:0;box-shadow:none;object-fit:contain}
@media (max-width:560px){.partners-preview .partner{min-height:130px;padding:.9rem}.split__media .partner__logo{height:64px}}

/* ---- legal text (GDPR consent) ---- */
.legal ol{margin:0;padding-left:1.5rem;display:grid;gap:1.1rem}
.legal ol>li{padding-left:.3rem}
.legal ul.sub{list-style:lower-alpha;padding-left:1.6rem;margin-top:.6rem;display:grid;gap:.45rem}

/* ---- contact form extras ---- */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-weight:600}
.form__hint{margin:.35rem 0 0;color:var(--muted);font-size:.82rem}
/* required-field marker in the application forms (client round 2026-09-23, N9) */
.form .req{color:var(--red);margin-left:.15rem;font-weight:700}
.form .consent{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.9rem;cursor:pointer}
.form .consent input{width:auto;margin-top:.2rem;accent-color:var(--red)}
.form input[type="file"]{padding:.6rem;background:var(--bg-alt);cursor:pointer}
.apply-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow)}
.apply-form h3{margin-bottom:.4rem}

/* ==========================================================================
   REVEAL animation
   ========================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__slide{transition:opacity .4s}
  .hero__slide img{animation:none!important;transform:none!important}
  .hero__inner.is-fresh{animation:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1360px){
  .header__phone{display:none}
}
@media (max-width:980px){
  .split,.split--rev .split__media{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .header__phone,.header__cta .lang{display:none}
  .nav .lang--mobile{display:flex;gap:1.2rem;padding:1.1rem 0 .3rem;font-size:1rem}
  .burger{display:block}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;gap:0;
    background:rgba(19,23,29,.99);backdrop-filter:blur(8px);padding:.5rem 1.2rem 1.5rem;
    transform:translateY(-120%);transition:transform .35s var(--ease);box-shadow:0 20px 40px rgba(0,0,0,.4);
    align-items:stretch;
  }
  .nav.open{transform:none}
  .nav a{padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.05rem}
  .nav a::after{display:none}
  .header.scrolled,.header{background:rgba(19,23,29,.96);backdrop-filter:blur(8px)}
  .timeline::before{left:100px}
  .tl{grid-template-columns:100px 1fr;gap:1rem}
  .tl__year{padding-right:.8rem;font-size:.95rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .footer__grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .hero__inner{padding-top:calc(var(--header-h) + 1rem)}
}

/* ---- job detail v2: admin-authored HTML body + public gallery ---- */
.job-body h2 { font-size: 1.15rem; margin: 2rem 0 .7rem; }
.job-body h2:first-child, .job-body p:first-child { margin-top: 0; }
.job-body ul { list-style: none; padding: 0; margin: .3rem 0 0; }
.job-body ul li { position: relative; padding-left: 1.6rem; margin: .45rem 0; }
/* The check mark as an ASCII ESCAPE, never the literal character: the host sends text/css and
   text/html without a charset, so the stylesheet's encoding is the browser's guess — a wrong
   guess (Windows-1252) turned the literal into "✓" at the start of every row. */
.job-body ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--red); font-weight: 700; }
.job-body p { margin: .8rem 0; }
.job-body img { max-width: 100%; height: auto; border-radius: 10px; cursor: zoom-in; }
.job-gallery { margin-top: 2.5rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.job-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; cursor: zoom-in; }

/* ---- news detail (aktuality-detail.html): date pill in the page hero, same look as the card badge;
   the body + gallery reuse the .job-body / .job-gallery rules above ---- */
.news-detail__date { display: inline-block; background: var(--red); color: #fff; font-size: .78rem;
  font-weight: 700; padding: .4rem .8rem; letter-spacing: .02em; margin-bottom: 1rem; }
/* the author display above would beat the UA [hidden] rule and paint an empty pill in the unavailable state */
.news-detail__date[hidden] { display: none; }

/* ===== Cookie consent bar (assets/js/consent.js) ===== */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  background:var(--bg-dark);color:#e9edf2;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.cookiebar__inner{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-top:1rem;padding-bottom:1rem;
}
.cookiebar__text{margin:0;flex:1 1 20rem;font-size:.95rem;line-height:1.5}
.cookiebar__text a{color:#e9edf2;text-decoration:underline}
.cookiebar__actions{display:flex;gap:.6rem;margin-left:auto}
.cookiebar__btn{font-size:.9rem;padding:.55rem 1.2rem}
@media (max-width:640px){
  .cookiebar__actions{margin-left:0;width:100%}
  .cookiebar__actions .btn{flex:1}
}

/* ===== Language offer bar (assets/js/i18n.js) =====
   Shown once, right under the fixed header, when the browser prefers another language the site
   speaks and the visitor has not chosen one yet; either button remembers the decision. z-index
   below the header (100) so the opened mobile menu covers it, above the page content. */
.langbar{
  position:fixed;left:0;right:0;top:var(--header-h);z-index:90;
  background:#fff;color:var(--ink);border-bottom:1px solid var(--line);
  box-shadow:0 6px 24px rgba(19,23,29,.12);
}
.langbar__inner{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-top:.7rem;padding-bottom:.7rem;
}
.langbar__text{margin:0;flex:1 1 20rem;font-size:.95rem;line-height:1.5;font-weight:600}
.langbar__actions{display:flex;gap:.6rem;margin-left:auto}
.langbar__btn{font-size:.9rem;padding:.55rem 1.2rem}
@media (max-width:640px){
  .langbar__actions{margin-left:0;width:100%}
  .langbar__actions .btn{flex:1}
}