/* =========================================================
   Olivia — Minimal Landing UI (Light/Dark, structured)
   ========================================================= */

/* 0) Root tokens (light defaults) */
:root{
  /* Colors */
  --bg: #ffffff;
  --text: #0f172a;      /* ink */
  --muted: #475569;
  --hair: #e5e7eb;
  --panel:#f1f5f9;
  --card: #ffffff;
  --link: #fdfdfd;
  --brand:#63c9df;      /* sky-500 */
  --brand-2:#63c9df;    /* hover */
  --ok:#16a34a; --warn:#f59e0b;

  /* Accents / chips */
  --pill-bg:#e0f2fe; --pill-text:#075985; --pill-border:#63c9df;

  /* Gradients */
  --grad-top:#f0f9ff;

  /* Layout / type / radii */
  --wrap:1120px; --r:16px;
  --shadow:0 12px 24px rgba(2,8,23,.06), 0 2px 6px rgba(2,8,23,.06);
  --fs-xxl:clamp(32px,6vw,48px);
  --fs-xl: clamp(22px,3.4vw,30px);
  --fs-lg: clamp(18px,2.2vw,22px);
  --fs-md:16px; --fs-sm:12px;

  /* Components */
  --nav-offset:64px;         /* sticky header height for hash scroll */
  --focus:#7dd3fc;           /* focus ring */
  --btn-radius:14px;

  /* Marquee / logos */
  --marquee-speed:28s; --marquee-delay:2.2s;
  --logo-h:72px; --logo-gap:32px;

  /* Rotator icon zoom */
  --zoom-base:1.04; --zoom-hover:1.3;

  /* Labels */
  --label-gap:4px; --label-nudge:-4px;

  /* Icons */
  --nav-icon:32px;
}

html{color-scheme:light}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font:400 var(--fs-md)/1.55 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}

/* Motion prefs */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* =========================
   Navigation
   ========================= */
.nav{
  position:sticky;top:0;inset-inline:0;z-index:50;
  background:var(--card); border-bottom:1px solid var(--hair);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0}
.nav .menu{display:flex;gap:18px;flex-wrap:wrap}
.nav a.menu-link{color:var(--muted);font-weight:600}
.nav .cta{
  display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--btn-radius);
  background:var(--brand);color:#fff;border:1px solid var(--brand)
}
.nav .cta:hover{background:var(--brand-2);border-color:var(--brand-2)}
.nav.is-stuck{box-shadow:0 8px 18px rgba(2,8,23,.06)}

/* keep email icon size */
.nav .menu .btn img{
  width:var(--nav-icon); height:var(--nav-icon); max-width:none; flex:0 0 var(--nav-icon); object-fit:contain;
}

/* =========================
   Hero
   ========================= */
.hero{
  background:linear-gradient(180deg,var(--grad-top),transparent 100%);
  
}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:30px 0}
@media (max-width:960px){ .hero .wrap{grid-template-columns:1fr} }
.hero h1{font-size:var(--fs-xxl);line-height:1.08;margin:8px 0}
.hero .lead{color:var(--muted);font-size:var(--fs-lg)}
.hero .lead{font-size:clamp(18px,2vw,20px)}

/* CTA buttons */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center; padding: 10px 0px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--btn-radius);
  font-weight:700;cursor:pointer;border:1px solid var(--brand);background:var(--brand);color:#fff;
  transition:transform .06s ease, background .14s ease, border-color .14s ease;
}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.ghost{background:var(--card);color:#0c4a6e;border-color:var(--focus)}
.btn-row.between{justify-content:space-between}

/* Cards */
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:18px;} /*box-shadow:var(--shadow)

/* =========================
   Sections and grids
   ========================= */
section{padding:28px 0}
.pillars .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.peek .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:960px){ .pillars .grid-2,.peek .grid-3,.split{grid-template-columns:1fr} }

/* Feature cards */
.feature{
  position:relative;overflow:visible;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:18px;
}
.feature h3{margin:0 0 6px;font-size:var(--fs-xl)}
.feature p{margin:0;color:var(--muted);font-size:var(--fs-md)}
.feature p + p{margin-top:12px}
.feature > .btn-row{margin-top:auto}

/* Eyebrow / badges */
.eyebrow{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--pill-bg);color:var(--pill-text);font-weight:700;font-size:12px;border:1px solid var(--pill-border)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--hair);background:var(--card)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.center{display:grid;place-items:center}

/* Gradient helper (reused outside hero) */
.grad{background:linear-gradient(180deg,var(--grad-top),transparent 100%);border-bottom:1px solid var(--hair)}

/* =========================
   Feature icon (spin + zoom)
   ========================= */
.feature .feature-icon{position:absolute;top:-25px;right:-7px;width:60px;height:60px;z-index:2;pointer-events:none}
.feature .feature-icon svg,.feature .feature-icon img{
  width:100%;height:100%;display:block;border-radius:50%;
  filter:drop-shadow(0 2px 6px rgba(2,8,23,.2));transform-origin:50% 50%;
  will-change:transform;transition:transform .2s ease;
}
@keyframes spin-zoom-stay{0%{transform:rotate(0) scale(var(--zoom-base))}100%{transform:rotate(360deg) scale(var(--zoom-hover))}}
.feature:hover .feature-icon svg,.feature:hover .feature-icon img{animation:spin-zoom-stay .9s cubic-bezier(.22,.9,.2,1) forwards}
@media (prefers-reduced-motion:reduce){
  .feature .feature-icon svg,.feature .feature-icon img{transition:none;animation:none!important;transform:rotate(6deg) scale(var(--zoom-base))}
}

/* =========================
   Reveal on scroll
   ========================= */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-16px)}
[data-reveal="right"]{transform:translateX(16px)}

/* =========================
   Screens / Peek cards
   ========================= */
.peek figure{margin:0;border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--panel)}
.peek figcaption{padding:10px 12px;font-size:var(--fs-sm);color:var(--muted);border-top:1px solid var(--hair);background:var(--card);text-align:center}

/* =========================
   Hero preview rotator
   ========================= */
.preview-rotator .rotator{
  position:relative;aspect-ratio:4/3;;border-radius:16px;overflow:hidden;background:var(--panel)
}
.rotator-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.rotator-slide.is-active{opacity:1}
.rotator-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.rotator-dots .dot{width:8px;height:8px;border-radius:999px;background:#cbd5e1;border:0;padding:0;cursor:pointer}
.rotator-dots .dot.is-active{background:var(--brand)}
@media (prefers-reduced-motion:reduce){ .rotator-slide{transition:none} }
.preview-rotator .rotator-note{margin-top:12px;color:var(--muted);font-size:var(--fs-sm);line-height:1.5}

/* =========================
   Logos marquee (with captions)
   ========================= */
.logos{padding:20px 0}
.logo-marquee{
  position:relative;border:1px solid var(--hair);border-radius:14px;background:var(--card);
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;scroll-snap-type:x mandatory;
  -webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
          mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
}
.logo-marquee:active{cursor:grabbing}
.marquee-track{
  display:flex;align-items:center;gap:var(--logo-gap);padding:18px 22px 18px 42px;
  width:max-content;animation:marquee var(--marquee-speed) linear infinite;animation-delay:var(--marquee-delay)
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-marquee:hover .marquee-track{animation-play-state:paused}
.logo-marquee.user-paused .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .logo-marquee{-webkit-mask-image:none;mask-image:none}
}
.logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:auto;min-width:140px;padding:2px 8px;flex:0 0 auto;scroll-snap-align:start;opacity:.92;transition:opacity .2s ease,filter .2s ease}
.logo:hover{opacity:1;filter:none}
.logo img{max-height:var(--logo-h);width:auto;display:block}
.logo-caption{font-size:12px;line-height:1.25;color:var(--muted);text-align:center;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =========================
   Forms
   ========================= */
.form{display:grid;gap:12px;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:16px}
.input, input.input, textarea.input, select.input, fieldset.input{
  width:100%;padding:12px;border:1px solid var(--brand);border-radius:12px;background:var(--card);
  font:inherit;outline:none;transition:border-color .15s ease, box-shadow .15s ease;color:var(--text); margin: 5px 0px;
}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(125,211,252,.18)}
.input.invalid{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.error-msg{margin-top:6px;font-size:12px;line-height:1.3;color:#b91c1c}
#contactMethodGroup .error-msg{margin-top:8px}

.form-field .label{display:block;font-size:16px;color:var(--text);margin:0 0 ;position:relative;top:var(--label-nudge)}
.radio-row,.checkbox-row{display:flex;gap:12px;flex-wrap:wrap}

/* Big, centered group error (inline, below group) */
.group-error-inline{
  display:block;text-align:center;margin-top:10px;background:#fee2e2;color:#991b1b;
  font-weight:600;font-size:14px;line-height:1.3;padding:8px 12px;border:1px solid #fecaca;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.06)
}

/* =========================
   Tabs (legal page)
   ========================= */
.tabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--hair);margin-bottom:14px;background:var(--card)}
.tab-link{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid transparent;border-bottom:none;border-radius:12px 12px 0 0;color:var(--muted);font-weight:600}
.tab-link:hover{background:var(--panel)}
.tab-link.active{background:var(--card);border-color:var(--hair)!important;border-bottom-color:var(--card)!important}
.tabs-panels .panel{display:block}
.panel{scroll-margin-top:calc(var(--nav-offset) + 8px)}

/* =========================
   Status badge
   ========================= */
.status-badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px;
  border:1px solid var(--hair);background:var(--card);color:var(--muted)
}
.status-badge .dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
.status-badge.ok{border-color:#bbf7d0;background:#f0fdf4}

/* =========================
   Divider & helpers
   ========================= */
.divider{height:1px;background:var(--hair)}
.divider.accent{background:#dbeafe}
.clients-intro{margin:0 0 12px}
.clients-intro .lead{margin:0 0 6px}
.hint,p.hint{color:var(--muted);font-size:var(--fs-sm);line-height:1.5;}
.hint a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hint strong{color:var(--text)}

/* =========================
   Dark Mode — auto (system)
   ========================= */
@media (prefers-color-scheme:dark){
  html{color-scheme:dark}
  :root{
    --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --hair:#334155;
    --panel:#0f172a; --card:#111827; --link:#93c5fd;
    --pill-bg:rgba(148,163,184,.16); --pill-text:#e5e7eb; --pill-border:rgba(148,163,184,.35);
    --grad-top:#111827;
  }
  .nav{background:rgba(2,6,23,.75)!important;border-bottom:1px solid var(--hair)!important;backdrop-filter:saturate(140%) blur(8px)}
  .btn{box-shadow:0 0 0 1px rgba(255,255,255,.02),0 6px 16px rgba(0,0,0,.35)}
  .btn.ghost{color:var(--link)!important;background:transparent!important;border-color:#475569!important}
  .btn.ghost:hover{background:rgba(148,163,184,.10)!important}
  .logo-marquee .logo img{filter:brightness(.98) contrast(1.06)}
  .status-badge{background:#0f172a;border-color:#1f2937;color:#cbd5e1}
  .status-badge .dot{background:#22c55e}
}

/* =========================
   Manual override
   ========================= */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --hair:#334155;
  --panel:#0f172a; --card:#111827; --link:#93c5fd;
  --pill-bg:rgba(148,163,184,.16); --pill-text:#e5e7eb; --pill-border:rgba(148,163,184,.35);
  --grad-top:#111827;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff; --text:#0f172a; --muted:#475569; --hair:#e5e7eb;
  --panel:#f1f5f9; --card:#ffffff; --link:#0ea5e9;
  --pill-bg:#e0f2fe; --pill-text:#075985; --pill-border:#63c9df; --grad-top:#f0f9ff;
}

/* =========================
   White logo in dark (two-asset pattern)
   ========================= */
.logo .logo-dark{display:none}
@media (prefers-color-scheme:dark){
  .logo .logo-light{display:none}
  .logo .logo-dark{display:block}
}
:root[data-theme="dark"] .logo .logo-light{display:none} 
:root[data-theme="dark"] .logo .logo-dark{display:block}
:root[data-theme="light"] .logo .logo-light{display:block}
:root[data-theme="light"] .logo .logo-dark{display:none}

/* Optional: invert dark-only assets if you must reuse a single image */
.on-dark-invert{filter:invert(1) hue-rotate(180deg) brightness(1.1) contrast(.95)}

p img {padding: 0 10px;}

/* Manual override (when you force dark with <html data-theme="dark">) */
:root[data-theme="dark"] .btn.ghost{
  color: var(--link);
  background: transparent;
  border-color: #475569;
}

:root[data-theme="dark"] .btn.ghost{
  color: var(--link);
  background: transparent;
  border-color: #475569;
} .nav a.menu-link{color:var(--text) !important;}


/* Snow overlay */
.wrap{ position: relative; }                 /* host for absolute canvas */
.snow-canvas{
  position: absolute;
  inset: 0;
  pointer-events: none;                      /* never block clicks */
  z-index: 5;                                /* above content, below nav overlays */
}

/* Light mode: add background image to nav, card, feature */
.pillars, .hero, .footer{
  background-image: url("/pic/bkg2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* keep your existing surface color as fallback */
  background-color: var(--card);
}

/* Dark mode (system): remove background image */
@media (prefers-color-scheme: dark){
  .pillars, .hero, .footer{
    background-image: none !important;
    background-color: var(--card);
  }
}

/* Dark mode (manual override): remove background image */
:root[data-theme="dark"] .pillars, :root[data-theme="dark"] .hero, :root[data-theme="dark"] .footer {

  background-image: none !important;
  background-color: var(--card);
} 

/* Mobile toggle button */
.nav-toggle{
  display:none;                               /* hidden on desktop */
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent;
  border:1px solid var(--hair);
  background: var(--card);
  color: var(--text);
  border-radius:12px;
  padding:15px;                               /* 40px hit target total */
  line-height:0;
  cursor:pointer;
}

/* The 3 bars: one element + before/after (iOS-safe) */
.nav-toggle .burger,
.nav-toggle .burger::before,
.nav-toggle .burger::after{
  display:block;
  width:24px; height:2px;
  background: currentColor;                   /* follows button/text color */
  border-radius:2px;
  transition: transform .22s ease, opacity .2s ease, background .2s ease;
  position:relative;
}
.nav-toggle .burger::before,
.nav-toggle .burger::after{
  content:""; position:absolute; left:0;
}
.nav-toggle .burger::before{ top:-7px; }
.nav-toggle .burger::after{  top: 7px; }

/* Show toggle & collapse menu only on small screens */
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .nav .menu{
    position:absolute; left:0; right:0; top:100%;
    display:grid; gap:12px;
    background: var(--card);
    border-bottom:1px solid var(--hair);
    padding:12px 16px;
    box-shadow:0 10px 24px rgba(2,8,23,.08);
    max-height:0; overflow:hidden; opacity:0;
    transform-origin: top;
    transition:max-height .25s ease, opacity .2s ease;
  }
  .nav.open .menu{ max-height:60vh; opacity:1; }

  .nav .menu a{ padding:8px 4px; }
  .nav .menu .btn{ justify-content:center; }
}

/* Morph to “X” when open (no glitches on Safari) */
.nav.open .nav-toggle .burger{ background: transparent; }  /* hide center bar */
.nav.open .nav-toggle .burger::before{ transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle .burger::after{  transform: translateY(-7px) rotate(-45deg); }


.menu.only-desktop{ display:block; }
.ghost.only-mobile{ display:none; }

.checkboxes {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
}
.form-label {
  font-weight: 600;
}

@media (max-width:900px){
  .checkboxes {
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      padding: 10px 0px;
    }
    .whole_label {
      padding: 5px 0;
    }
  /* Panel visuals: match ghost button */
  .nav .menu{
    position:absolute; left:12px; right:12px; top:calc(100% + 8px);
    display:flex; flex-direction:column; gap:12px;
    text-align: center;
    background: var(--card);
    background-image: none !important;     /* kill any inherited bg image */
    border: 1px solid var(--hair);      /* same ring as ghost button */
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 10px 24px rgba(2,8,23,.08);

    max-height:0; overflow:hidden; opacity:0;
    transform-origin:top;
    transition:max-height .25s ease, opacity .2s ease;
    z-index:60;
  }
  .nav.open .menu{ max-height:70vh; opacity:1; }

  /* Comfortable tap targets */
  .nav .menu a{ padding:10px 6px; border-radius:10px; }
  .nav .menu .btn{ justify-content:center; }

  /* Remove desktop Kontakt */
  .menu.only-desktop{ display:none; }
  .ghost.only-mobile{ display:inline-flex; }
}

/* Dark mode: ghost button look = transparent panel + neutral border */
@media (prefers-color-scheme:dark){
  @media (max-width:900px){
    .nav .menu{
      
      border-color: #475569;
      background-image: none !important;
    }
  }
}
:root[data-theme="dark"] .nav .menu{
  background: transparent;
  border-color: #475569;
  background-image: none !important;
}

/* show the grid only on desktop (adjust breakpoint as needed) */
  @media (min-width: 1024px) {
    .form_fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    
  }