/* ===== Green Tower Umag — soft brand-gold system (Baltić blue hue-shifted to the logo gold, H≈41°) ===== */
:root{
  /* core palette (per brand spec) */
  --bg:#decfb0;        /* background = brand blue, ~10% lighter, -20% saturation */
  --ink:#3a2f16;       /* headings */
  --ink-2:#3a2f16;
  --slate:#706755;     /* body text */
  --slate-2:#706755;
  --brand:#cbae6f;     /* accent teal — text accents (eyebrows, links, active) */
  --brand-light:#e1cca0;
  --accent:#cbae6f;
  /* derived */
  --hairline:#f1ece2;
  --line:#ece3cf;
  --panel-border:rgba(225,204,160,.55);
  --panel-shadow:rgba(88,69,28,.22);
  --panel-radius:30px;
  --grad-btn:linear-gradient(180deg,#e1cca0,#cbae6f);
  --grad-card:linear-gradient(165deg,#cdb279,#ad8f4f);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Onest',-apple-system,sans-serif;}
img{display:block;}
a{text-decoration:none;color:inherit;}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Presentation deck: every section is a fixed-size slide (1360x860) that is
   uniformly scaled to fit the viewport (see scaleSlides() in app.js), so the
   whole design grows/shrinks with the screen instead of reflowing. Each slide
   sits centered in a full-viewport frame. */
html{scroll-behavior:smooth;}

.field{
  position:relative;
  z-index:0;
  min-height:100vh;
  background:var(--bg);
  padding:0;
}
/* viewport-fixed brand-teal field so the same soft tint sits behind every slide */
.field::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(125% 85% at 50% -8%, #eadfc6 0%, #decfb0 45%, #d6c49e 100%);
}
.deck{display:flex;flex-direction:column;}
.slide-wrap{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.panel{
  width:1360px;
  height:860px;
  flex:none;
  border-radius:var(--panel-radius);
  border:1.5px solid var(--panel-border);
  /* small lift off the brand-teal field — applied to every section */
  box-shadow:0 18px 44px var(--panel-shadow);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ---------- shared buttons / typography ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:none;font-family:inherit;font-size:15px;font-weight:600;border-radius:40px;
}
.btn-primary{
  padding:14px 26px 14px 16px;background:var(--grad-btn);color:var(--ink);
  box-shadow:0 12px 26px rgba(203,174,111,.5);
}
.btn-bubble{
  display:inline-flex;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.55);align-items:center;justify-content:center;font-size:14px;
}
.btn-secondary{
  padding:13px 22px;background:#ffffff;border:1.5px solid var(--line);color:var(--ink);
}

.eyebrow{font-size:13px;letter-spacing:.14em;font-weight:600;color:var(--accent);}
.eyebrow.on-dark{color:rgba(255,255,255,.85);}

.section-head{text-align:center;}
.section-title{margin:10px 0 0;font-size:50px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.section-lead{margin:14px auto 0;max-width:540px;font-size:16px;line-height:1.55;color:var(--slate);}
.center-cta{text-align:center;margin-top:40px;}

.nav-circle{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  user-select:none;
}
.nav-circle.active{border-color:var(--accent);color:var(--accent);}
.counter{font-size:15px;color:var(--ink);font-weight:600;}

/* ---------- logo ---------- */
.logo{position:relative;width:30px;height:32px;display:inline-block;flex:none;}
.logo-leaf{position:absolute;}
.logo-leaf.a{left:0;top:2px;width:15px;height:28px;border-radius:50% 40% 45% 50%/55% 55% 45% 45%;background:linear-gradient(150deg,#e1cca0,#cbae6f);}
.logo-leaf.b{right:0;top:0;width:15px;height:30px;border-radius:40% 50% 50% 45%/55% 55% 45% 45%;background:linear-gradient(150deg,#eee1c4,#d4b87c);}
.logo-spark{position:absolute;right:2px;top:5px;color:#ffffff;font-size:11px;}
.logo-lg{width:54px;height:58px;}
.logo-lg .logo-leaf.a{left:0;top:4px;width:26px;height:50px;background:linear-gradient(150deg,#eee1c4,#dec99b);}
.logo-lg .logo-leaf.b{right:0;top:0;width:26px;height:54px;background:linear-gradient(150deg,#f9f4ea,#eadcbf);}
.logo-lg .logo-spark{right:5px;top:9px;font-size:18px;}

/* ================= HERO ================= */
.hero{background:#ffffff;box-shadow:0 22px 55px var(--panel-shadow);padding:34px 46px 0;justify-content:flex-start;}
.nav{display:flex;align-items:flex-start;position:relative;height:54px;}
.brand{display:flex;align-items:center;gap:10px;}
/* shown downscaled so it stays crisp even when the slide scales up;
   viši od nav-trake (54px) — smije viriti u prazan prostor ispod */
.brand-logo{height:64px;width:auto;max-width:420px;max-height:80px;display:block;}
.brand-name{line-height:1.02;font-weight:700;color:var(--ink-2);font-size:15px;}
.nav-links{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  display:flex;gap:30px;font-size:15px;color:var(--ink);font-weight:500;
}
.nav-links a{cursor:pointer;}
.nav-contact{margin-left:auto;font-size:15px;color:var(--ink-2);font-weight:600;cursor:pointer;padding-top:8px;}

.hero-body{position:relative;flex:1;min-height:540px;}
.hero-title{
  position:absolute;left:6px;top:150px;width:760px;margin:0;z-index:2;
  font-size:60px;line-height:1.0;font-weight:800;letter-spacing:-0.02em;color:var(--ink);
}
.hero-lead{position:absolute;left:8px;top:450px;width:340px;margin:0;z-index:2;font-size:16px;line-height:1.5;color:var(--slate);}
.hero-tooth{
  /* izvorni format 16:9 (height:auto) — slika se vidi CIJELA, bez kvadratnog izreza;
     povećana +50% (490→735px) i CENTRIRANA u hero prostoru (1268px);
     raspored se NE preslaguje — tekst smije ići preko slike s bilo koje strane */
  position:absolute;left:266px;top:150px;width:735px;height:auto;z-index:1;
  border-radius:24px;box-shadow:0 24px 50px rgba(88,69,28,.32);
  animation:floaty 7s ease-in-out infinite;
}
.hero-cta-block{position:absolute;right:6px;top:330px;width:380px;z-index:2;}
.hero-sub{font-size:50px;line-height:1.04;font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.hero-cta-block .btn{margin-top:22px;}
.hero-watermark{
  position:absolute;left:0;bottom:-6px;width:100%;z-index:0;
  font-size:92px;font-weight:800;letter-spacing:-0.02em;color:rgba(110,88,40,.08);
  white-space:nowrap;overflow:hidden;pointer-events:none;
  /* font-size is fitted to the panel width by fitWatermark() in app.js */
}

/* ============ ABOUT + STATS ============ */
.about{border-color:var(--panel-border);display:flex;flex-direction:row;}
.about-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.about-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(52,42,20,.92) 0%,rgba(84,68,34,.66) 48%,rgba(112,92,50,.5) 100%);}
.about-inner{position:relative;flex:1;display:flex;flex-direction:column;padding:54px 56px;color:#ffffff;}
.about-eyebrow{position:absolute;right:56px;top:54px;}
.about-title{margin:0;width:640px;font-size:50px;line-height:1.04;font-weight:700;letter-spacing:-0.02em;}
.about-lead{margin:26px 0 0;width:540px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);}
.stats{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:48px;}
.stat{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px);border-radius:14px;padding:22px;
}
.stat-num{font-size:50px;font-weight:700;line-height:1;}
.stat-label{margin-top:8px;font-size:15px;color:rgba(255,255,255,.82);}

/* ================= SERVICES ================= */
.services{background:#ffffff;box-shadow:0 22px 55px var(--panel-shadow);padding:54px 46px 50px;}
.service-row{display:flex;gap:16px;margin-top:42px;height:330px;}
.service-card{
  position:relative;flex:1;min-width:0;border-radius:18px;overflow:hidden;
  background:var(--grad-card);cursor:pointer;
  transition:flex .5s cubic-bezier(.4,0,.2,1), box-shadow .4s;
}
.service-card.active{flex:2.4;box-shadow:0 18px 42px rgba(140,112,50,.4);}
.service-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.service-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(52,41,18,0) 38%,rgba(52,41,18,.82) 100%);}
.service-body{position:absolute;left:20px;right:20px;bottom:20px;color:#ffffff;}
.service-label{font-size:19px;font-weight:700;}
.service-desc{
  margin-top:8px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85);
  max-height:0;opacity:0;overflow:hidden;transition:all .45s ease;
}
.service-card.active .service-desc{max-height:80px;opacity:1;}

/* ================= SPECIALISTS ================= */
.specialists{background:#ffffff;box-shadow:0 22px 55px var(--panel-shadow);padding:54px 0 50px 56px;}
.spec-eyebrow{position:absolute;right:56px;top:54px;}
.spec-grid{display:grid;grid-template-columns:440px 1fr;align-items:start;}
.spec-left{padding-right:40px;display:flex;flex-direction:column;height:520px;}
.spec-title{margin:0;font-size:46px;line-height:1.05;font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.avatar-stack{display:inline-flex;align-items:center;vertical-align:middle;margin:0 2px;}
.avatar{width:34px;height:34px;border-radius:50%;border:2px solid #ffffff;background:linear-gradient(160deg,#d9c28f,#ad8f4f);background-size:cover;background-position:center;}
.avatar.a1{background-image:url("assets/spec-lokacija.jpg");}
.avatar.a2{background-image:url("assets/spec-najam.jpg");}
.avatar.a3{background-image:url("assets/spec-dizajn.jpg");}
.avatar.a2,.avatar.a3,.avatar-more{margin-left:-10px;}
.avatar-more{
  width:34px;height:34px;border-radius:50%;background:#806835;color:#ffffff;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;border:2px solid #ffffff;
}
.spec-lead{margin:22px 0 0;width:380px;font-size:16px;line-height:1.6;color:var(--slate);}
.spec-all{margin-top:28px;align-self:flex-start;}
.spec-controls{margin-top:auto;display:flex;align-items:center;gap:18px;}
.spec-viewport{overflow:hidden;}
.spec-track{display:flex;gap:16px;transition:transform .45s ease;}
.spec-card{flex:none;width:252px;background:linear-gradient(180deg,#bb9c5a,#806835);border-radius:18px;overflow:hidden;}
.spec-photo{position:relative;height:300px;}
.spec-photo .ph{position:absolute;inset:0;}
.spec-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.spec-role{position:absolute;left:12px;top:12px;background:#ffffff;color:var(--ink);font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;}
.spec-info{padding:18px;color:#ffffff;}
.spec-name{font-size:19px;font-weight:700;}
.spec-desc{margin:8px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.82);}
.spec-since{margin-top:16px;font-size:12px;color:rgba(255,255,255,.6);}

/* ================= TESTIMONIALS ================= */
.testimonials{background:#ffffff;box-shadow:0 22px 55px var(--panel-shadow);padding:54px 46px 50px;}
.tabs{display:flex;justify-content:center;gap:54px;margin-top:34px;border-bottom:1px solid var(--hairline);}
.tab{padding:0 4px 14px;cursor:pointer;font-size:16px;font-weight:600;color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}

.testimonial-grid{display:grid;grid-template-columns:1fr 360px 360px;gap:36px;margin-top:40px;align-items:start;}
.t-title{margin:0;font-size:32px;line-height:1.1;font-weight:700;color:var(--ink);}
.t-desc{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--slate);}
.t-didtitle{font-size:17px;font-weight:700;color:var(--ink);margin-top:26px;}
.t-bullets{margin-top:10px;}
.t-bullet{display:flex;gap:8px;font-size:14.5px;color:var(--slate-2);padding:4px 0;}
.t-bullet .dot{color:var(--accent);}

/* before/after — <img-comparison-slider> web component (assets/img-comparison-slider.js) */
.ba{position:relative;height:420px;border-radius:14px;overflow:hidden;user-select:none;}
.ba img-comparison-slider{
  display:block;width:100%;height:100%;
  --divider-width:2px;--divider-color:#ffffff;
  --default-handle-width:56px;--default-handle-opacity:.95;
}
.ba img-comparison-slider:not(:defined){visibility:hidden;}
.ba img-comparison-slider:focus{outline:none;}
.ba img{width:100%;height:420px;object-fit:cover;display:block;}
/* obje strane su ista render fotka — "ideja" strana je prigušena da usporedba ima smisla */
.ba img[slot="first"]{filter:grayscale(.85) brightness(.94);}
.ba-tag{position:absolute;top:12px;z-index:2;pointer-events:none;background:rgba(52,42,20,.55);color:#ffffff;font-size:12px;padding:3px 10px;border-radius:20px;}
.ba-tag-l{left:14px;}
.ba-tag-r{right:14px;}
.t-portrait{width:100%;height:300px;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;}
.t-caption{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--slate);}
.t-controls{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:8px;}
.t-controls .nav-circle{width:40px;height:40px;}

/* ---------- branded image placeholders ---------- */
.ph{
  background:linear-gradient(150deg,#f4ecdc 0%,#e6d2a8 45%,#cdb279 100%);
  position:relative;
}
.ph::after{
  content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);opacity:.55;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='m21 15-5-5L5 21'/></svg>");
}

/* ================= FOOTER ================= */
.footer{border-color:var(--panel-border);background:linear-gradient(135deg,#ad8f4f,#6d582c);padding:80px 56px;}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:22px;}
.footer-brand{display:flex;align-items:center;gap:16px;}
/* bijela verzija loga stoji izravno na zlatnom gradijentu — bez bijele pločice */
.footer-logo{height:84px;width:auto;display:block;}
.footer-name{font-size:46px;line-height:1;font-weight:700;color:#f9f6ee;}
.footer-name .dim{opacity:.85;}
.footer-links{display:flex;gap:30px;font-size:15px;color:rgba(255,255,255,.85);flex-wrap:wrap;justify-content:center;}
.footer-links a{cursor:pointer;}
.footer-contact{display:flex;gap:12px;font-size:15px;color:rgba(255,255,255,.85);flex-wrap:wrap;justify-content:center;}
.footer-contact a{cursor:pointer;}
.footer-copy{font-size:13px;color:rgba(255,255,255,.6);}

/* ================= RESPONSIVE FALLBACK ================= */
@media (max-width:1100px){
  .field{padding:14px;}
  .deck{gap:16px;}
  .slide-wrap{height:auto;display:block;}
  .panel{width:auto;height:auto;min-height:0;display:block;zoom:1 !important;}
  .hero,.services,.testimonials{padding:36px 22px 40px;}
  .about{display:flex;flex-direction:column;}
  .nav-links{display:none;}
  .nav-contact{display:none;}
  /* logo stretches to the full content width, same as the paragraph below it */
  .nav{height:auto;}
  .brand{width:100%;}
  .brand-logo{width:100%;height:auto;max-width:none;max-height:none;}
  .hero-body{height:auto;flex:none;min-height:0;display:flex;flex-direction:column;gap:20px;padding-bottom:8px;}
  .hero-title,.hero-lead,.hero-tooth,.hero-cta-block,.hero-watermark{position:static;width:auto;}
  /* long compound words (DE/HR) must wrap instead of clipping at the panel edge */
  .hero-title{font-size:34px;line-height:1.08;overflow-wrap:break-word;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4;margin-top:26px;}
  .hero-title br{display:none;}
  .hero-sub{font-size:28px;}
  .hero-tooth{width:100%;max-width:340px;height:auto;margin:0 auto;}
  .hero-watermark{display:none;}
  .btn{font-size:14px;}
  .about-inner{padding:36px 22px 40px;}
  .about-title,.about-lead{width:auto;}
  .about-title{font-size:29px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4;}
  .about-lead{font-size:15px;}
  .about-eyebrow{position:static;margin-bottom:14px;}
  /* pravilo (2026-07-06): na mobitelu statistike uvijek u JEDAN stupac */
  .stats{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:36px;}
  .stat{padding:16px;}
  .stat-num{font-size:30px;overflow-wrap:break-word;}
  .stat-label{font-size:13px;}
  .section-title{font-size:29px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4;}
  .section-lead{font-size:15px;}
  .service-row{flex-direction:column;height:auto;margin-top:30px;}
  .service-card,.service-card.active{flex:none;height:200px;}
  .service-card .service-desc{max-height:90px;opacity:1;}
  .specialists{padding:36px 22px 40px;}
  .spec-eyebrow{position:static;margin-bottom:14px;}
  .spec-grid{grid-template-columns:1fr;gap:26px;}
  .spec-left{height:auto;padding-right:0;}
  .spec-title{font-size:29px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4;}
  .avatar,.avatar-more{width:26px;height:26px;}
  .spec-lead{width:auto;font-size:15px;}
  /* on touch devices the carousel swipes natively; arrow buttons are hidden so the
     JS transform stays at 0 and never fights the scroll position */
  .spec-controls{display:none;}
  .spec-viewport{margin:0 -22px;padding:0 22px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .spec-viewport::-webkit-scrollbar{display:none;}
  .testimonial-grid{grid-template-columns:1fr;gap:26px;margin-top:26px;}
  .tabs{gap:18px;flex-wrap:wrap;justify-content:center;}
  .tab{font-size:14px;padding-bottom:10px;}
  .t-title{font-size:26px;}
  .ba{height:340px;}
  .ba img{height:340px;}
  /* the portrait repeats the before/after image on mobile — show only the caption */
  .t-portrait{display:none;}
  .t-caption{margin:0;}
  .t-controls{justify-content:center;margin-top:18px;}
  .footer{padding:48px 22px;}
  .footer-links{gap:14px 18px;}
  .footer-contact{flex-direction:column;gap:6px;align-items:center;text-align:center;}
  .footer-contact .sep{display:none;}
  .footer-copy{text-align:center;}
}

/* ===== GDPR-Privola (Cookie-Consent-Popup) ===== */
.consent-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(58,47,22,.45);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;transition:opacity .4s ease;
}
.consent-backdrop.show{opacity:1;}
.consent-card{
  background:#ffffff;border:1px solid var(--panel-border);border-radius:28px;
  box-shadow:0 40px 90px -30px var(--panel-shadow);
  max-width:520px;width:100%;padding:38px 40px 34px;text-align:center;
  transform:translateY(16px) scale(.97);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.consent-backdrop.show .consent-card{transform:none;}
.consent-icon{display:block;width:54px;height:54px;margin:0 auto 16px;}
.consent-title{color:var(--ink);font-size:22px;font-weight:800;margin:0 0 10px;}
.consent-text{color:var(--slate);font-size:14.5px;line-height:1.65;margin:0 0 22px;}
.consent-text a{color:var(--brand);font-weight:600;}
.consent-text a:hover{text-decoration:underline;}
.consent-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.consent-actions .btn-primary{padding:14px 26px;}
@media (max-width:640px){
  .consent-card{padding:30px 24px 26px;border-radius:22px;}
  .consent-title{font-size:19px;}
  .consent-actions{flex-direction:column;}
  .consent-actions .btn{justify-content:center;}
}

/* ===== Link- & Button-Animationen (Hover/Klick) ===== */
a{transition:color .22s ease,opacity .22s ease;}
a:active{opacity:.55;}
.nav-links a,.footer-links a,.footer-contact a,.footer-copy a{
  position:relative;
}
.nav-links a::after,.footer-links a::after,.footer-contact a::after,.footer-copy a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1.5px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.nav-links a:hover::after,.footer-links a:hover::after,.footer-contact a:hover::after,.footer-copy a:hover::after{
  transform:scaleX(1);
}
.nav-links a:hover,.nav-contact:hover{color:var(--brand);}
.footer-links a:hover,.footer-contact a:hover,.footer-copy a:hover{color:var(--brand-light);}
.nav-contact{transition:color .22s ease,opacity .22s ease;}
.brand{transition:opacity .22s ease;}
.brand:hover{opacity:.75;}
.btn{
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,border-color .22s ease,color .22s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.965);opacity:1;}
.btn-primary:hover{box-shadow:0 16px 32px rgba(203,174,111,.6);}
.btn-secondary:hover{border-color:var(--brand);color:var(--brand);}
.nav-circle{transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s ease,color .22s ease;}
.nav-circle:hover{transform:scale(1.1);border-color:var(--accent);color:var(--accent);}
.nav-circle:active{transform:scale(.9);}
.tab{transition:color .22s ease,border-bottom-color .22s ease;}
.tab:hover{color:var(--accent);}
.tab:active{opacity:.6;}

/* ===== Hell/Dunkel-Umschalter + Dark Mode ===== */
.theme-toggle{
  width:38px;height:20px;border-radius:999px;border:1.5px solid var(--line);
  background:#ffffff;cursor:pointer;position:relative;padding:0;flex-shrink:0;margin-left:18px;margin-top:6px;
  transition:background .25s ease,border-color .25s ease;
}
.theme-toggle .knob{
  position:absolute;top:1.5px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--grad-btn);display:flex;align-items:center;justify-content:center;
  font-size:8px;line-height:1;transition:left .25s cubic-bezier(.2,.8,.3,1);
}
.theme-toggle .knob::after{content:"🌙";}
html.dark .theme-toggle{background:#41351b;border-color:#594b2c;}
html.dark .theme-toggle .knob{left:19px;}
html.dark .theme-toggle .knob::after{content:"☀️";}

html.dark{
  --bg:#28200e;
  --ink:#f8f3e9; --ink-2:#f8f3e9;
  --slate:#c6bba3; --slate-2:#c6bba3;
  --brand:#d8bb7d; --accent:#d8bb7d;
  --hairline:#4e4124; --line:#594b2c;
  --panel-border:rgba(165,138,80,.35);
  --panel-shadow:rgba(0,0,0,.55);
}
html.dark body{background:var(--bg);}
html.dark .field::before{
  background:radial-gradient(125% 85% at 50% -8%, #3f3217 0%, #28200e 45%, #1f180a 100%);
}
html.dark .hero,
html.dark .services,
html.dark .specialists,
html.dark .testimonials{background:#312813;}
html.dark .btn-secondary{background:#41351b;}
html.dark .btn-primary{color:#30260f;}
html.dark .consent-card{background:#312813;}
html.dark .consent-backdrop{background:rgba(0,0,0,.55);}
html.dark .hero-watermark{color:rgba(240,221,180,.07);}
/* Rollen-Pille auf Teamfotos bleibt weiß -> Schrift muss dunkel bleiben */
html.dark .spec-role{color:#3a2f16;}


/* ===== Schwebender Anruf-Button (CTA morpht beim Scrollen) ===== */
.cta-fab{
  position:fixed;right:26px;bottom:26px;z-index:900;
  width:60px;height:60px;border-radius:50%;
  background:var(--grad-btn);
  box-shadow:0 12px 26px rgba(203,174,111,.5);
  display:flex;align-items:center;justify-content:center;
  transform:translate(30px,90px) scale(.35);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .35s ease,box-shadow .22s ease;
}
.cta-fab .btn-bubble{width:34px;height:34px;font-size:17px;}
html.cta-floating .cta-fab{transform:none;opacity:1;pointer-events:auto;}
html.cta-floating .cta-fab:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(203,174,111,.65);}
html.cta-floating .cta-fab:active{transform:scale(.92);opacity:1;}
html.dark .cta-fab{box-shadow:0 12px 26px rgba(0,0,0,.5);}
@media (max-width:640px){
  .cta-fab{right:18px;bottom:18px;width:54px;height:54px;}
}