:root{
  --black:#000000;
  --white:#ffffff;
  --brown:#5b3d3d;
  --panel-dark: rgba(91, 61, 61, 0.80);
  --panel-dark-border: rgba(255,255,255,0.18);
  --panel-light: rgba(255,255,255,0.92);
  --panel-light-border: rgba(0,0,0,0.08);
  --title-on-white: #000;
  --title-on-image: #fff;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
  font-family: Arial, Helvetica, sans-serif;
}

main{ width:100%; }

/* Anchor helpers (for #home, #o_nas, #kolektiv, #kontakt) */
.section-anchor{
  height: 0;
  overflow: hidden;
}

/* Slide = full viewport */
.slide{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:relative;
}

.slide--black{ background:var(--black); color:var(--white); }
.slide--white{ background:var(--white); color:var(--black); }

.theme-light .slide{ background:#fff; color:#000; }
.theme-dark  .slide{ background:#000; color:#fff; }

/* Stage is exactly the viewport */
.stage{
  position:relative;
  width:100%;
  height:100%;
}

/* Basic positioned elements */
.t, .img, .box{ position:absolute; }

/* Image placeholders */
.ph{
  border:none;
  background: transparent;
}
.slide--white .ph{
  border-color: rgba(0,0,0,.25);
  background: rgba(0,0,0,.02);
}

.img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Typography */
.t--small{
  font-size: clamp(12px, 1.9vh, 18px);
  font-weight: 600;
  opacity: .95;
}

.t--bk{
  font-weight: 800;
  font-size: clamp(48px, min(16vw, 18vh), 210px);
  line-height: 0.9;
}

.t--svc{
  font-weight: 700;
  font-size: clamp(16px, 4.6vh, 44px);
  line-height: 1.15;
}

.t--svcBig{
  font-weight: 800;
  font-size: clamp(22px, min(7vw, 8.5vh), 84px);
}

/* Slide 2 title */
.t--title{
  font-weight: 500;
  font-size: clamp(28px, 9vh, 74px);
  letter-spacing: -0.01em;
  position: absolute;
  z-index: 20;
}

/* PDF-style text boxes */
.box{
  padding: 1.8vh 1.6vw;
  font-size: 24px;
  line-height: 1.35;
  overflow: hidden;
}

.box--light{
  background: #ffffff;
  color:#000000;
}

.box--dark{
  background: rgba(255,255,255,.22);
  color:#ffffff;
}

/* Slide 3 */
.t--hiwere{
  background:#000;
  z-index: 30;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  font-size: 66px;
  line-height: 1;
  font-weight: 500;
}

.t--para{
  font-size: clamp(12px, 1.85vh, 18px);
  line-height: 1.45;
}

.t--photoOverlay{
  position:absolute;
  left: 30%;
  bottom: 20%;
  font-weight: 800;
  font-size: clamp(200px, 40vh, 240px);
  line-height: 0.92;
  color:#fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

/* Slide 4/5/6 text styles */
.t--h2{
  font-weight: 700;
  font-size: clamp(18px, 4.8vh, 48px);
}

.t--teamHead{
  font-weight: 700;
  font-size: clamp(11px, 1.6vh, 16px);
}

.t--teamCol{
  font-size: clamp(12px, 1.8vh, 16px);
  line-height: 1.35;
}

.t--refs{
  font-weight: 700;
  font-size: clamp(22px, 6vh, 56px);
}

.t--refBlock{
  font-size: clamp(11px, 1.55vh, 16px);
  line-height: 1.35;
}

.t--bkCenter{
  font-weight: 800;
  font-size: clamp(48px, 12vh, 140px);
  line-height: 0.95;
}

/* Slide 7 */
.t--kontakt{
  font-weight: 800;
  font-size: clamp(22px, 6vh, 60px);
}

.t--contactLine{
  font-size: clamp(12px, 2vh, 18px);
}

.t--bkRight{
  font-weight: 800;
  font-size: clamp(56px, 18vh, 190px);
  line-height: 0.95;
}

/* =========================
   Navigation / UI
   ========================= */

/* Hamburger menu */
.menu{
  position: fixed;
  top: 2%;
  left: 2%;
  z-index: 9999;
}

.menu__btn{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  cursor: pointer;

  line-height: 1;
}

.menu__btn .burger{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
  line-height: 0;
}

.menu__btn .burger span{
  width: 18px;
  height: 2px;
  background: #fff;
  display: block;
}

.menu__label{
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #fff;
  line-height: 1;
}

.menu__panel{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display: none;
  min-width: 170px;
}

.menu__panel.open{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu__link{
  color:#fff;
  text-decoration: underline;
  font-size: 12px;
  letter-spacing: .18em;
  opacity: .78;
}
.menu__link:hover{ opacity: 1; }

/* Theme toggle button */
.themeToggle{
  position: fixed;
  left: calc(2% + 110px);
  top: 2%;
  z-index: 9999;

  width: 36px;
  height: 36px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.18);
  color: #000;
  cursor: pointer;
}

.theme-dark .themeToggle{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
}

.themeToggle:focus-visible{
  outline: 2px solid #e80000;
  outline-offset: 3px;
}

.themeToggle .icon{
  width: 18px;
  height: 18px;
  display: block;
}

.themeToggle .icon-sun{ display: none; }
.theme-dark .themeToggle .icon-moon{ display: none; }
.theme-dark .themeToggle .icon-sun{ display: block; }

/* =========================
   ------- section home --------
   ========================= */

.img-overlay{
  position: absolute;
  left: 8%;
  top: 52%;
  font-weight: 800;
  font-size: clamp(26px, 8vh, 82px);
  line-height: 0.92;
  color: #fff;
  z-index: 10;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

#slide-1 .s1-left{
  position: absolute;
  left: 6%;
  top: 20%;
  width: 24%;
  z-index: 10;
}

#slide-1 .s1-left .t{ position: static; }

#slide-1 .t--bk{
  font-size: clamp(48px, 14vw, 180px);
  line-height: 0.9;
  margin: 0 0 12%;
}

#slide-1 .t--svc{
  font-size: clamp(14px, 3.2vw, 36px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 6%;
  white-space: nowrap;
  overflow-wrap: normal;
}

#slide-1 .t--svcBig{
  font-size: clamp(20px, 5.2vw, 64px);
  font-weight: 800;
  margin-top: 2%;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* =========================
   ------- section o_nas --------
   ========================= */

/* Dark theme overrides for slide-2 */
.theme-dark #slide-2.slide--white{
  background: var(--black);
  color: var(--white);
}

.theme-dark #slide-2 .t--title{
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.theme-dark #slide-2 .box--light{
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}

.theme-dark #slide-2 .box--dark{
  background: rgba(91, 61, 61, 0.62);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}

#slide-2.slide--white{
  background: var(--white);
}

#slide-2 .t--title{
  color: var(--title-on-white);
  text-shadow: none;
}

#slide-2 .box--light{
  background: var(--panel-light);
  color: #000;
  border: 1px solid var(--panel-light-border);
}

#slide-2 .box--dark{
  background: var(--panel-dark);
  color: #fff;
  border: 1px solid var(--panel-dark-border);
  backdrop-filter: blur(8px);
}

@media (max-width: 900px){
  #slide-2 .t--title{
    color: var(--title-on-image);
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
  }
}

/* Slide 3 */
#slide-3 .t--hiwere{
  width: 360px !important;
  height: 72px !important;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 66px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  z-index: 50;
}

#slide-3 .img{ z-index: 10; }
#slide-3 .t--para{ z-index: 5; }

#slide-3 .t--para{
  --min-font: 10;
  overflow: hidden;
}

@media (max-width: 900px){
  #slide-3 .t--hiwere{
    left: auto !important;
    top: 10% !important;
    right: 10% !important;
  }
}

.theme-dark #slide-3 .t--hiwere{
  background: #fff;
  color: #000;
}

/* =========================
   ------- section kolektiv --------
   ========================= */

/* Slide 4 */
#slide-4 .s4-title{
  background: #5b3d3d;
  color: #fff;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: auto;
  z-index: 30;
}

#slide-4 .ph--sq{
  background: transparent;
  border: transparent;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

#slide-4 .ph--sq img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#slide-4 .fit{
  --min-font: 9;
  font-size: 16px;
  line-height: 1.35;
  overflow: hidden;
  white-space: normal;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

#slide-4 .t--teamCol.fit{
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

#slide-4 .t--teamHead,
#slide-4 .t--teamCol{
  font-weight: 400;
}

#slide-4 strong{
  font-weight: 700;
}

#slide-4{
  --s4-scale: clamp(0.70, 100vw / 1200, 1);
}

#slide-4 .t--h2,
#slide-4 .t--teamCol{
  transform: scale(var(--s4-scale));
  transform-origin: top left;
}

.theme-dark #slide-4 .s4-title{
  background: #5b3d3d;
  color: #fff;
}

/* Slide 5 */
#slide-5 .fit{
  --min-font: 10;
  overflow: hidden;
}
#slide-5 .t--refBlock{ font-weight: 400; }
#slide-5 strong{ font-weight: 700; }
#slide-5 .t--refs{ font-size: 75px; }

/* Slide 6 */
#slide-6 .fit{
  --min-font: 10;
  overflow: hidden;
}
#slide-6 .t--refBlock{ font-weight: 400; }
#slide-6 strong{ font-weight: 700; }

/* slide 8 */

#slide-8 .fit{
  --min-font: 10;
  overflow: hidden;
}
#slide-8 .t--refBlock{ font-weight: 400; }
#slide-8 strong{ font-weight: 700; }

/* =========================
   SLIDE 8 – bottom bar
   ========================= */

#slide-8 .bottom-bar{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 13%;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
  color: #fff;

  z-index: 20;
}

/* text inside the bar */
#slide-8 .bottom-bar .t{
  position: relative;
  text-align: center;
  white-space: nowrap;
}

#slide-8 .bottom-bar .t--bkCenter{
  font-size: clamp(70px, 30vh, 160px);
  line-height: 0.95;
}

/* dark theme inversion */
.theme-dark #slide-8 .bottom-bar{
  background: #fff;
  color: #000;
}


/* =========================
   ------- section kontakt --------
   ========================= */

.ci{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.ci-ico{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:inline-block;
}

.t--contactLine{
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.contact-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:2px;
  background: rgba(0,0,0,0.78);
  color:#fff;
}

#slide-7 .contactLink{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  gap: 12px;
}

#slide-7 .label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 130px;
  flex-shrink: 0;
}

#slide-7 .value{
  display: inline-block;
}

#slide-7 .ci-ico{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
}

/* =========================================================
   SLIDE 1 ONLY — text -> logo images (fixed theme swap + 1x services)
   Put this at the VERY END of styles.css
   ========================================================= */

/* ---------- 1) bk. (left column) ---------- */
#slide-1 .t--bk{
  display: block;
  width: 70%;
  height: clamp(48px, 14vw, 180px);
  margin: 0 0 12%;

  color: transparent !important;
  text-shadow: none !important;

  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* LIGHT (default) */
html:not(.theme-dark) body:not(.theme-dark) #slide-1 .t--bk{ background-image: url("/assets/bk_black.png"); }
/* DARK */
html.theme-dark #slide-1 .t--bk,
body.theme-dark #slide-1 .t--bk{ background-image: url("/assets/bk_white.png"); }


/* ---------- 2) SERVICES: show ONCE (hide the other 2 lines) ---------- */
#slide-1 .s1-left .t--svc{
  display: block;
  width: 70%;

  /* one bigger box for the whole "services" logo */
  height: clamp(90px, 18vh, 220px);
  margin: 0;

  color: transparent !important;
  text-shadow: none !important;

  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}

/* Hide the 2nd services line + the "marketing" line */
#slide-1 .s1-left .t--svc + .t--svc,
#slide-1 .s1-left .t--svcBig{
  display: none !important;
}

/* LIGHT (default) */
html:not(.theme-dark) body:not(.theme-dark) #slide-1 .s1-left .t--svc{ background-image: url("/assets/services_desktop_black.png"); }
/* DARK */
html.theme-dark #slide-1 .s1-left .t--svc,
body.theme-dark #slide-1 .s1-left .t--svc{ background-image: url("/assets/services_desktop_white.png"); }

#slide-1 .s1-left .t--svc{
  margin-top: 36%;
}

/* ---------- 3) “burda kolektiv.” overlay on image ---------- */
#slide-1 .img-overlay{
  display: block;

  color: transparent !important;
  text-shadow: none !important;

  width: 84%;
  height: clamp(80px, 20vh, 220px);

  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

#slide-1 .img-overlay{ background-image: url("/assets/burdakolektiv2_white.png"); }


/* Slide 2 — title image replacement (WORKS) */

#slide-2 .t--title{
  font-size: clamp(20px, 8vh, 65px);
}

#slide-2 .t--title.t--img{
  background: none;
  padding: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* both images default hidden */
#slide-2 .t--title.t--img .title-img{
  display: none;
  height: 1em;     /* ties logo size to existing font-size clamp */
  width: auto;
  vertical-align: bottom;
}

/* DEFAULT (light) → show WHITE version? NO: light background needs BLACK text */
#slide-2 .t--title.t--img .title-img--light{
  display: inline-block;
}

/* DARK mode → swap */
html.theme-dark #slide-2 .t--title.t--img .title-img--light,
body.theme-dark #slide-2 .t--title.t--img .title-img--light{
  display: none;
}

html.theme-dark #slide-2 .t--title.t--img .title-img--dark,
body.theme-dark #slide-2 .t--title.t--img .title-img--dark{
  display: inline-block;
}






/* =========================
   Slide 3 – hi we're image inside the box
   ========================= */
/* =========================
   SLIDE 3 – hi we're box (FIX)
   ========================= */

#slide-3 .t--hiwere.t--imgBox{
  /* use your inline style width/height/left/top */
  display: flex;
  align-items: center;
  justify-content: center;

  /* IMPORTANT: remove text-box behavior */
  padding: 10px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 25% !important;
  height: auto !important;
  overflow: hidden;
  top: 12% !important;
  left: auto !important;
  right: 38% !important;

  background: #000; /* light mode */
  z-index: 50;
}

/* the PNGs inside */
#slide-3 .t--hiwere.t--imgBox .swapImg{
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* show whole logo */
  object-position: center; /* center it */
}

/* LIGHT (default): show WHITE logo */
#slide-3 .t--hiwere.t--imgBox .swapImg--light{
  display: block;
}

/* DARK: white box + BLACK logo */
.theme-dark #slide-3 .t--hiwere.t--imgBox,
body.theme-dark #slide-3 .t--hiwere.t--imgBox{
  background: #fff;
}

.theme-dark #slide-3 .t--hiwere.t--imgBox .swapImg--light,
body.theme-dark #slide-3 .t--hiwere.t--imgBox .swapImg--light{
  display: none;
}

.theme-dark #slide-3 .t--hiwere.t--imgBox .swapImg--dark,
body.theme-dark #slide-3 .t--hiwere.t--imgBox .swapImg--dark{
  display: block;
}


/* =========================
   SLIDE 3 – bk overlay image
   ========================= */

#slide-3 .bk-overlay-img{
  position: absolute;

  /* match your old placement */
  left: 20%;
  bottom: 20%;

  width: clamp(200px, 30vh, 260px);
  height: auto;

  display: block;
  pointer-events: none;
  user-select: none;

  z-index: 30;
}


/* =========================
   SLIDE 4 – title image swap
   ========================= */

#slide-4 .s4-title{
  padding: 20px 28px !important; /* KEEP your existing padding */
}

/* base image */
#slide-4 .s4-title-img{
  display: none;
  max-height: 1.2em;   /* 🔑 THIS is the key */
  width: auto;
  max-width: 150%;
  object-fit: contain;
}


/* light theme */
.theme-light #slide-4 .s4-title-img--white{
  display: block;
}

/* dark theme */
.theme-dark #slide-4 .s4-title-img--white{
  display: block;
}

/* =========================
   SLIDE 5 – reference image title
   ========================= */

#slide-5 .t--refsImg{
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
}

/* base image */
#slide-5 .refs-img{
  display: none;
  max-height: 65%;
  width: auto;
  object-fit: contain;
}

/* default (LIGHT) */
#slide-5 .refs-img--white{ display:none; }
#slide-5 .refs-img--black{ display:block; }

/* DARK */
.theme-dark #slide-5 .refs-img--white{ display:block; }
.theme-dark #slide-5 .refs-img--black{ display:none; }

/* =========================
   SLIDE 6 – bk logo swap
   ========================= */

#slide-6 .bk6-logo{
  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 0;
  overflow: hidden;
}

/* image behavior */
#slide-6 .bk6-img{
  display: none;
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* default (LIGHT) */
#slide-6 .bk6-img--white{ display:none; }
#slide-6 .bk6-img--black{ display:block; }

/* DARK */
.theme-dark #slide-6 .bk6-img--white{ display:block; }
.theme-dark #slide-6 .bk6-img--black{ display:none; }


/* =========================
   SLIDE 7 – bottom bar logo
   ========================= */

#slide-8 .bk7-logo{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  line-height: 0;
}

/* image sizing = text replacement */
#slide-8 .bk7-img{
  display: none;
  height: 102%;
  max-height: 102%;
  width: auto;
  object-fit: contain;
}

/* default (LIGHT) */
#slide-8 .bk7-img--black{ display:none; }
#slide-8 .bk7-img--white{ display:block; }

/* DARK */
.theme-dark #slide-8 .bk7-img--black{ display:block; }
.theme-dark #slide-8 .bk7-img--white{ display:none; }


/* =========================
   SLIDE 7 – right bk logo swap
   ========================= */

#slide-7 .bk7-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

#slide-7 .bk7-img{
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* default (LIGHT) */
#slide-7 .bk7-img--white{ display:none; }
#slide-7 .bk7-img--black{ display:block; }

/* DARK */
.theme-dark #slide-7 .bk7-img--white{ display:block; }
.theme-dark #slide-7 .bk7-img--black{ display:none; }