/* =========================================================
   site.css — CLEAN + FAST (deduped, conflict-free)
   ========================================================= */

/* ------------------------
   THEME TOKENS
------------------------- */
:root{
  --bg:#0b1528;
  --paper:#ffffff;
  --ink:#0b1736;
  --muted:#6b7c90;
  --line:#e6ebf2;

  --brand:#0bb6a5;
  --brand-2:#1f7cff;

  --glass: rgba(255,255,255,.6);
  --radius:18px;
  --shadow:0 12px 40px rgba(10,25,66,.16);

  --nav-bg:#ffffff;
  --nav-ink:#0b1736;
  --nav-border:#e6ebf2;

  --footer-bg: color-mix(in srgb, var(--paper) 80%, transparent);
  --footer-ink: var(--ink);
}

:root[data-theme="light"]{
  --bg:#f6f8fb;
  --paper:#ffffff;
  --ink:#0b1736;
  --muted:#627087;
  --brand:#0bb6a5;
  --brand-2:#1f7cff;

  --nav-bg:#ffffff;
  --nav-ink:#0b1736;
  --nav-border:#e6ebf2;

  --footer-bg: color-mix(in srgb, #ffffff 90%, transparent);
  --footer-ink:#35405a;
}

:root[data-theme="dark"]{
  --bg:#0b1528;
  --paper:#0e1a31;
  --ink:#e8f1ff;
  --muted:#a8b4c7;
  --brand:#0bb6a5;
  --brand-2:#72a1ff;

  --nav-bg:#0e1a31;
  --nav-ink:#e8f1ff;
  --nav-border: transparent;

  --footer-bg:#0e1a31;
  --footer-ink:#cfe1ff;
}

:root[data-theme="orange"]{
  --bg:#0e0f12;
  --paper:#10141f;
  --ink:#f6f7fb;
  --muted:#a8b4c7;
  --brand:#ff7a00;
  --brand-2:#ffd79a;

  --nav-bg:#10141f;
  --nav-ink:#f6f7fb;
  --nav-border: transparent;

  --footer-bg:#0f131b;
  --footer-ink:#f0f4fa;
}

/* Optional violet theme hooks (you already use violet in header menu) */
:root[data-theme="violet"]{
  --brand:#7c3aed;
  --brand-2:#6d28d9;
  --link:var(--brand);
}

/* ------------------------
   BASE
------------------------- */
html,body{ background:var(--bg); color:var(--ink) }
a{ color:inherit }
img{ max-width:100%; height:auto }

/* Keep navbar/theme dropdown above hero */
.site-header{ position:relative; z-index:3000; }
.navbar .dropdown-menu{ z-index:3500; }
.hero, #heroShow{ position:relative; z-index:1; }
.navbar{ overflow: visible; }

/* ------------------------
   HEADER / NAVBAR
------------------------- */
.site-header.border-bottom{ border-bottom:1px solid var(--nav-border); }

.site-header .navbar{
  background:var(--nav-bg);
  border-color:var(--nav-border);
  backdrop-filter:saturate(1.4) blur(8px);
}

.nav-rail{ display:flex; align-items:center; gap:12px; }
.nav-ghost{ width:56px; height:48px; }

/* Navbar sizing */
@media (max-width: 1199.98px){
  .site-header .navbar{ min-height:96px; padding-block:18px; }
}
@media (min-width: 1200px){
  .site-header .navbar{ min-height:80px; padding-block:14px; }
}

/* Links */
.navbar .nav-link{
  color: color-mix(in srgb, var(--nav-ink) 86%, transparent);
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color: var(--brand);
}

/* Toggler (button) */
.navbar-toggler{
  width:48px; height:44px;
  padding:.55rem;
  border-radius:14px;
  color: var(--nav-ink);
  border-color: color-mix(in srgb, var(--nav-ink) 30%, transparent);
  background:transparent;
  transition: background-color .2s ease, transform .2s ease;
}
.navbar-toggler:hover{
  background-color: color-mix(in srgb, var(--nav-ink) 10%, transparent);
  transform: translateY(-1px);
}

/* DARK/ORANGE: keep button glassy, bars white */
:root[data-theme="dark"] .navbar-toggler,
:root[data-theme="orange"] .navbar-toggler{
  color:#ffffff;
  border-color: rgba(255,255,255,.35);
  background-color: rgba(255,255,255,.06);
}

/* Hamburger icon SVG uses currentColor */
.navbar-toggler-icon{
  width:100%;
  height:100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Tap target on phones */
@media (max-width: 767.98px){
  .navbar-toggler{ width:56px; height:50px; padding:.6rem; border-radius:16px; }
}

/* Brand stack */
.brand-stack{ display:inline-flex; flex-direction:column; align-items:center; }
.brand-tagline{
  margin-top:.25rem;
  font-size:.85rem;
  line-height:1.1;
  letter-spacing:.2px;
  color: var(--bs-secondary-color);
  white-space:nowrap;
}
.brand-stack-drawer .brand-tagline{ font-size:.82rem; }

/* Slogan white only in dark/orange */
[data-theme="dark"] .brand-tagline,
[data-theme="orange"] .brand-tagline{ color:#fff; }
[data-theme="dark"] .nav-drawer .brand-tagline,
[data-theme="orange"] .nav-drawer .brand-tagline{ color:#fff; }

/* Logo sizing (stable + no layout jump) */
.navbar-brand img{ height:68px; } /* default */
@media (min-width:1200px){
  .navbar-brand img{ height:68px; }
}
@media (max-width:1199.98px){
  .navbar-brand img{ height:67px; }
}

/* Mobile: center brand + keep toggler right (no shifting) */
@media (max-width: 991.98px){
  .site-header .nav-rail{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.5rem 1rem;
    min-height:56px;
  }

  .site-header .nav-ghost{
    flex:0 0 44px;
    height:44px;
  }

  .site-header .navbar-brand{
    margin-left:auto;
    margin-right:auto;
    max-width:60vw;
    text-align:center;
  }

  /* Top bar logo */
  #brandLogo{
    max-height:64px !important;
    height:auto;
    width:auto;
    display:block;
  }

  .site-header .brand-tagline{
    font-size:.78rem;
    line-height:1.1;
    white-space:normal;
    margin-top:.2rem;
  }

  .site-header .navbar-toggler{
    margin-left:auto;
    position:static !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px; height:44px;
    z-index:1001;
  }
}

/* Extra-small phones */
@media (max-width: 360px){
  #brandLogo{ max-height:56px !important; }
}

/* ------------------------
   OFFCANVAS (MOBILE DRAWER)
------------------------- */
.nav-drawer{
  --bs-offcanvas-width:82vw;
  max-width:420px;
  background:var(--nav-bg);
  color:var(--nav-ink);
  border-left:1px solid var(--nav-border);
  box-shadow: 0 10px 60px rgba(0,0,0,.35);
}

/* IMPORTANT: offcanvas must not affect layout height */
.offcanvas.nav-drawer{
  position: fixed !important;
  inset: 0 0 0 auto;
  height: 100%;
}

.nav-drawer .offcanvas-header{ border-bottom:1px solid var(--nav-border); }
.nav-drawer .btn-close{ filter:none; }
:root[data-theme="dark"] .nav-drawer .btn-close,
:root[data-theme="orange"] .nav-drawer .btn-close{
  filter: invert(1) contrast(1.2);
}

/* Drawer links nicer */
.nav-drawer .nav-link{
  color: color-mix(in srgb, var(--nav-ink) 86%, transparent);
  border-radius:12px;
  padding:.55rem .75rem;
  transition: background-color .18s ease, transform .18s ease, color .18s ease;
}
.nav-drawer .nav-link:hover{
  background: color-mix(in srgb, var(--nav-ink) 10%, transparent);
  transform: translateX(2px);
}
.nav-drawer .nav-link.active{
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Subtle slide-in animation */
.nav-list-animated .nav-item{
  opacity:0;
  transform: translateX(8px);
  animation: navIn .35s ease forwards;
}
.nav-list-animated .nav-item:nth-child(1){ animation-delay:.04s; }
.nav-list-animated .nav-item:nth-child(2){ animation-delay:.08s; }
.nav-list-animated .nav-item:nth-child(3){ animation-delay:.12s; }
.nav-list-animated .nav-item:nth-child(4){ animation-delay:.16s; }
@keyframes navIn{ to{ opacity:1; transform:none; } }

/* Theme icon colors */
.theme-sun{ color:#f6b500; }
.theme-moon{ color:#a8b4ff; }
.emoji-orange{ font-size:1.05rem; line-height:1; display:inline-block; transform:translateY(-1px); }
.dropdown-menu .bi, .dropdown-menu .emoji-orange{ width:1.1rem; text-align:center; }
.theme-dot{ display:inline-block; width:.9em; height:.9em; border-radius:50%; background:var(--c); }

/* Theme chips (mobile) */
.theme-chip{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  border-radius:999px;
  padding:.45rem .8rem;
}

/* Drawer logo bigger + centered */
#navDrawer .offcanvas-header{
  position:relative;
  justify-content:center;
  padding-block:22px;
}
#drawerLogo{
  display:block;
  margin-inline:auto;
  height: clamp(48px, 10vw, 80px);
  width:auto;
  max-width:80vw;
}
#navDrawer .offcanvas-header .btn-close{
  position:absolute;
  right:12px;
  top:12px;
  margin:0;
}

/* ------------------------
   BUTTONS / BADGES
------------------------- */
.btn-outline-brand{
  border-color:var(--brand);
  color:var(--brand);
}
.btn-outline-brand:hover{
  background:var(--brand);
  color:#fff;
}

.btn-brand{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  border:0;
}
.btn-brand:hover{ opacity:.95; }

.text-brand{ color:var(--brand); }
.text-bg-brand-soft{
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  color:var(--brand);
}

/* Violet theme buttons (optional) */
:root[data-theme="violet"] .btn-brand{
  background-color:var(--brand)!important;
  border-color:var(--brand)!important;
  color:#fff!important;
}
:root[data-theme="violet"] .btn-brand:hover{
  background-color:var(--brand-2)!important;
  border-color:var(--brand-2)!important;
}
:root[data-theme="violet"] .btn-outline-brand{
  color:var(--brand)!important;
  border-color:var(--brand)!important;
}
:root[data-theme="violet"] .btn-outline-brand:hover{
  background-color:var(--brand)!important;
  color:#fff!important;
}
:root[data-theme="violet"] .text-bg-brand-soft{
  background: rgba(124,58,237,.12)!important;
  color: var(--brand)!important;
}

/* ------------------------
   HERO / SECTIONS
------------------------- */
.hero{ position:relative; padding: clamp(48px, 10vw, 96px) 0; }
.hero-gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 400px at 20% -10%, color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 70%),
    radial-gradient(900px 400px at 100% 0%, color-mix(in srgb, var(--brand-2) 16%, transparent) 0%, transparent 70%);
  pointer-events:none;
}

.hero-card{ position:relative; }
.hero-img{ aspect-ratio:4/3; object-fit:cover; }
.hero-floater{
  position:absolute; bottom:12px; left:12px;
  background:var(--paper);
  color:var(--ink);
  padding:10px 14px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.section{ padding: clamp(36px, 6vw, 72px) 0; }
.bg-paper{ background:var(--paper); }

.tile{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  height:100%;
  box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover{ transform: translateY(-4px); }
.tile .icon{
  font-size:28px;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  color:var(--brand);
  margin-bottom:8px;
}

.cta-wrap{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent);
}
.cta-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:var(--shadow);
}
@media (max-width: 991.98px){
  .cta-card{ flex-direction:column; align-items:flex-start; }
}

.stat{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}
.stat strong{ font-size:24px; line-height:1; }
.stat span{ color:var(--muted); }

.card.lift{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}

.rounded-4{ border-radius:20px; }
.hero .display-5{ letter-spacing:-.3px; }

/* Remove big white gap under navbar on first section */
body[data-page="start"] .section:first-of-type,
body[data-page="leistungen"] .section:first-of-type,
body[data-page="ueber"] .section:first-of-type,
body[data-page="kontakt"] .section:first-of-type{
  padding-top: 0 !important;
}

/* ------------------------
   REVEAL ANIMATION
------------------------- */
.reveal{ opacity:1; transform:none; }
.js .reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.in{ opacity:1; transform:none; }

/* ------------------------
   SERVICES CARDS
------------------------- */
.svc-card{
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-color: rgba(48,92,222,.25);
}
.svc-media{
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f3f6ff;
}
.svc-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.svc-card:hover .svc-media img{ transform: scale(1.06); }

.svc-body{ padding: 16px 16px 14px; }
.svc-icon{
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 1.25rem;
  color:#305cde;
  background: rgba(48,92,222,.12);
  margin-bottom: .5rem;
}
.svc-list{ list-style:none; padding:0; margin:0 0 .75rem; }
.svc-list li{ display:flex; gap:.5rem; align-items:flex-start; }
.svc-list li::before{ content:"✓"; color:#305cde; font-weight:700; line-height:1.2; }
@media (max-width: 575.98px){
  .svc-body{ padding: 14px; }
  .svc-icon{ width:44px; height:44px; font-size:1.1rem; }
}

/* ------------------------
   CONTACT (Direktkontakt tiles)
------------------------- */
.contact-v2 .c-list{
  display:grid;
  gap:.65rem;
}
.contact-v2 .c-list li{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.75rem .9rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  transition: background-color .18s ease, transform .18s ease;
}
.contact-v2 .c-list li:hover{
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  transform: translateY(-1px);
}
.contact-v2 .c-list i{
  color: var(--brand);
  font-size: 1.1rem;
  width: 1.4rem;
  text-align:center;
}
.contact-v2 .c-list a{
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--ink) !important;
  text-decoration: none;
  word-break: break-word;
}
.contact-v2 .c-list a:hover{ color: var(--brand) !important; }

/* ------------------------
   BEFORE/AFTER SLIDER
------------------------- */
.ba{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--paper);
}
.ba img{
  width:100%;
  height:clamp(240px, 48vw, 460px);
  object-fit:cover;
  display:block;
  image-rendering:auto;
  filter:saturate(1) contrast(1.02);
}
.ba .ba-top{
  position:absolute;
  inset:0;
  will-change:clip-path;
  clip-path: inset(0 calc(100% - var(--cut,50%)) 0 0);
  transition:clip-path .12s ease-out;
}
.ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
}
.ba-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-1px);
  background:color-mix(in srgb, var(--ink) 30%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--paper) 60%, transparent);
  pointer-events:none;
}
.ba-handle{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  background:color-mix(in srgb, var(--paper) 75%, transparent);
  border:2px solid color-mix(in srgb, var(--ink) 25%, transparent);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  pointer-events:none;
}
.ba-label{
  position:absolute;
  z-index:2;
  top:14px;
  padding:.35rem .65rem;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  border:1px solid var(--line);
}
.ba-left{ left:14px; }
.ba-right{ right:14px; }
@media (max-width: 575.98px){
  .ba-handle{ width:52px; height:52px; }
  .ba-label{ font-size:.9rem; }
}

/* ------------------------
   FLOATING BUTTONS
------------------------- */
/* WhatsApp */
.fab-wa{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 3400;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem .95rem;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  color: #fff !important;
  background: #25D366;
  box-shadow: var(--shadow);
}
.fab-wa:hover{ filter: brightness(.95); }
.fab-wa .bi{ font-size: 1.2rem; }

/* Back to top (above WA) */
.to-top{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom) + 64px + 12px);
  z-index: 3600;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  border:0;
  box-shadow: var(--shadow);

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.94);
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
}
.to-top.show{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.to-top .bi{ font-size: 1.25rem; }

@media (min-width: 992px){
  .fab-wa{ right: 22px; bottom: 22px; }
  .to-top{ right: 22px; bottom: calc(22px + 64px + 14px); }
}

/* Phones: ensure footer isn't blocked by FAB */
@media (max-width: 575.98px){
  .fab-wa{ bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  .to-top{ bottom: calc(152px + env(safe-area-inset-bottom)) !important; }
  .footer{ padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ------------------------
   FOOTER
------------------------- */
.footer{
  background: var(--footer-bg);
  color: var(--footer-ink);
}
.footer .link-muted{
  color: color-mix(in srgb, var(--footer-ink) 70%, transparent);
  text-decoration:none;
}
.footer .link-muted:hover{ color:var(--brand); }

.footer-title{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.6rem;
  color: color-mix(in srgb, var(--footer-ink) 86%, transparent);
}
.footer .footer-links li + li{ margin-top:.4rem; }

/* Phone footer left-align (your preference) */
@media (max-width: 576px){
  .footer .col-6,
  .footer .col-12,
  .footer .footer-title,
  .footer .footer-links,
  .footer .footer-links li,
  .footer .footer-links a{
    text-align: left !important;
  }
  .footer .footer-links{ margin-left:0; padding-left:0; }
}

/* Footer logo stable (don’t go crazy huge, keeps layout nice) */
#footerLogo{
  height: clamp(64px, 7vw, 96px);
  width:auto;
  display:block;
}

/* Creator badge (clean + consistent) */
.creator-badge{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.5rem .9rem;
  border-radius:999px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--footer-ink) 18%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.creator-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.creator-badge img{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--footer-ink) 12%, transparent);
}
.creator-badge .handle{
  font-size: .9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--footer-ink);
  white-space: nowrap;
}
@media (max-width: 576px){
  .creator-badge .handle{ font-size:.82rem; }
}

/* ------------------------
   MISC
------------------------- */
.text-brand{ color:var(--brand); }