/* FILE GUIDE:
   - Globale Styles (Farben, Layout, Typo, Komponenten wie Header, Buttons, Cards, Footer).
   - Wenn du Abstände/Look ändern willst: meistens hier.
*/

/* ===============================
   JC‑Haberle — Clean Tech System (v6 Header Controls)
   =============================== */

:root {
  /* --- LIGHT THEME DEFAULTS (Base) --- */
  --primary: #00D4FF;
  --bg: #F4F7F9;
  --surface: #FFFFFF;
  --header-bg: rgba(255,255,255,0.98);
  --text-main: #0B1114;
  --text-muted: #6C7A80;
  --line: rgba(0,0,0,0.08);
  --icon-bg: rgba(255,255,255,0.75);
  --icon-border: rgba(0,0,0,0.1);
  --card-bg: #F4F7F9;
  --card-shadow: rgba(0,0,0,0.03);
  
  --font-main: 'Helvetica Neue', 'Inter', Arial, sans-serif;
  --font-tech: 'Courier New', Courier, monospace;

  /* Spacing scale (consistent vertical rhythm) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;
  --space-2xl: 6rem;
}

/* --- THEME LOGIC (Crucial Fix) --- */

/* 1. Force Dark Mode (Class based - highest priority) */
body.dark-mode,
html.dark-mode {
  --bg: #0B1114;
  --surface: #161C20;
  --header-bg: rgba(11, 17, 20, 0.95);
  --text-main: #F4F7F9;
  --text-muted: #8FA2AB;
  --line: rgba(255,255,255,0.1);
  --icon-bg: rgba(255,255,255,0.05);
  --icon-border: rgba(255,255,255,0.1);
  --card-bg: #111619;
  --card-shadow: none;
}

/* 2. Force Light Mode (Class based - explicit override for dark systems) */
body.light-mode,
html.light-mode {
  --bg: #F4F7F9;
  --surface: #FFFFFF;
  --header-bg: rgba(255,255,255,0.98);
  --text-main: #0B1114;
  --text-muted: #6C7A80;
  --line: rgba(0,0,0,0.08);
  --icon-bg: rgba(255,255,255,0.75);
  --icon-border: rgba(0,0,0,0.1);
  --card-bg: #F4F7F9;
  --card-shadow: rgba(0,0,0,0.03);
}

/* 3. System Auto Dark (Only applies if NO class is present) */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) {
    --bg: #0B1114;
    --surface: #161C20;
    --header-bg: rgba(11, 17, 20, 0.95);
    --text-main: #F4F7F9;
    --text-muted: #8FA2AB;
    --line: rgba(255,255,255,0.1);
    --icon-bg: rgba(255,255,255,0.05);
    --icon-border: rgba(255,255,255,0.1);
    --card-bg: #111619;
    --card-shadow: none;
  }
}

/* --- BASE STYLES --- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  overflow-x:hidden; color:var(--text-main); font-family:var(--font-main);
  line-height:1.5; background:var(--bg); transition: background 0.3s, color 0.3s;
}

/* Background Grid */
body::after{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:50px 50px; z-index:-1; opacity:.5; pointer-events: none;
}

.container{
  max-width:1200px; margin:0 auto; background:var(--surface); min-height:100vh;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  box-shadow:0 0 50px var(--card-shadow); transition: background 0.3s, border-color 0.3s;
}

/* Typography & Links */

/* Unified hover motion (consistent feel across icons/links/buttons) */
a, button { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease; }
h1,h2,h3{font-weight:900;letter-spacing:-1px;text-transform:uppercase;}
.tech-label{font-family:var(--font-tech);font-size:.75rem;color:var(--primary);letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:14px;}
a { text-decoration-skip-ink: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* Header */
header{
  display:flex; justify-content:space-between; align-items:center; padding:20px 40px;
  background:var(--header-bg); backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:100; border-bottom:2px solid var(--primary); transition: background 0.3s;
}
.brand-link{display:inline-flex;align-items:flex-start;text-decoration:none;color:inherit;}
.brand-link:hover .logo{color:var(--text-main);} 
.brand-col{display:flex;flex-direction:column;min-width:0;}
.logo{font-weight:900;font-size:1.1rem;letter-spacing:-.5px;text-transform:uppercase;line-height:1;}
.brand-sub{font-family:var(--font-tech);font-size:.75rem;color:var(--primary);letter-spacing:1px;font-weight:800;margin-top:5px;}

/* Header Right Side (Icons + Actions + Controls) */
.header-left{display:flex;align-items:center;gap:18px;min-width:0;}
.header-left .header-socials{margin-left:6px;}
.header-right {
  display: flex; align-items: center; gap: 20px;
}
.header-socials{display:flex;gap:14px;align-items:center;}
.header-icon{color:var(--text-main);transition:.22s;width:18px;height:18px;display:block;}
.header-icon:hover{color:var(--primary);transform:translateY(-2px);}
.header-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* CTA Button */
.header-btn, .cta-btn{
  font-family:var(--font-tech);font-size:.82rem;font-weight:900;text-decoration:none;
  color:#fff; background:#000; padding:12px 18px; border:1px solid #000; transition:.22s; white-space:nowrap;
}
.header-btn:hover, .cta-btn:hover{background:var(--primary);border-color:var(--primary);color:#000;transform:translateY(-1px);}

/* Invert Buttons in Dark Mode */
body.dark-mode .header-btn, body.dark-mode .cta-btn,
@media (prefers-color-scheme: dark) { body:not(.light-mode) .header-btn, body:not(.light-mode) .cta-btn {
    background: #fff; color: #000; border-color: #fff;
}}
body.dark-mode .header-btn:hover, body.dark-mode .cta-btn:hover,
@media (prefers-color-scheme: dark) { body:not(.light-mode) .header-btn:hover, body:not(.light-mode) .cta-btn:hover {
    background: var(--primary); border-color: var(--primary);
}}

/* Header Separator */
.header-sep {
  width: 1px; height: 24px; background: var(--line); display: block; margin: 0 4px;
}

/* Header Controls (Flag + Theme) - now in Header */
.header-controls {
  display: flex; gap: 8px; align-items: center;
}
.ctrl-btn {
  background: transparent; border: 1px solid transparent;
  width: 34px; height: 34px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: .2s; color: var(--text-main); padding: 0;
}
.ctrl-btn:hover { background: var(--card-bg); border-color: var(--line); color: var(--primary); }
.flag-svg { width: 20px; height: 20px; border-radius: 50%; display: block; object-fit: cover; }
.theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* Hero */
.hero{padding:var(--space-xl) 40px var(--space-md);border-bottom:1px solid var(--line);}
.hero-statement{font-size:clamp(2rem,5vw,3.3rem);font-weight:900;line-height:1.08;margin-bottom:14px;border-left:5px solid var(--primary);padding-left:26px;text-transform:uppercase;}
.sub-hero{color:var(--text-muted);max-width:920px;font-size:1.06rem;line-height:1.85;margin-left:26px;}

/* Switch */
.switch-container{margin-top:26px;display:flex;justify-content:center;}
.switch-box{
  display:inline-flex; border:1px solid rgba(0,212,255,0.65); background:var(--card-bg);
  border-radius:12px; padding:6px; box-shadow:0 0 0 4px rgba(0,212,255,0.10);
}
.switch-btn{
  padding:12px 26px; font-family:var(--font-tech); font-weight:900; font-size:.9rem;
  border:none; cursor:pointer; background:transparent; color:var(--text-muted); border-radius:8px; transition:.18s;
}
.switch-btn:hover{color:var(--text-main);}
.switch-btn.active{background:var(--text-main); color:var(--surface); box-shadow:0 10px 22px rgba(0,0,0,.10);}

/* Dynamic & Grid */
.dynamic-wrapper{border-bottom:1px solid var(--line);}
.dynamic-content{display:none;animation:fadeIn .32s ease;}
.dynamic-content.visible{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

.content-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);}
.grid-col{padding:var(--space-lg) 40px;border-right:1px solid var(--line);background:var(--surface);}
.grid-col:last-child{border-right:none;}

/* Icon Cards */
.icon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.icon-card{
  border:1px solid var(--line);
  background: radial-gradient(circle at 18% 18%, rgba(0,212,255,0.12), transparent 48%), var(--card-bg);
  border-radius:16px; padding:14px; transition:.2s; box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset;
}
.icon-card:hover{
  border-color:rgba(0,212,255,0.65); transform:translateY(-2px);
  background: radial-gradient(circle at 18% 18%, rgba(0,212,255,0.22), transparent 48%), var(--surface);
}
.icon-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.icon-badge{
  width:36px;height:36px; border-radius:12px; border:1px solid var(--icon-border);
  display:flex;align-items:center;justify-content:center; background:var(--icon-bg);
}
.icon-badge svg{width:18px;height:18px; stroke:var(--text-main); fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; transition:.2s;}
.icon-card:hover .icon-badge{border-color:rgba(0,212,255,0.40);}
.icon-card:hover .icon-badge svg{stroke:var(--primary);}
.icon-title{font-family:var(--font-tech);font-weight:900;letter-spacing:.7px;font-size:.95rem;}
.icon-sub{color:var(--text-muted);font-size:.92rem;line-height:1.5;}

/* Sections & Cards */
.section{padding:var(--space-lg) 40px;border-bottom:1px solid var(--line);background:var(--surface);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
.section-title{font-size:2rem;margin-bottom:var(--space-sm);}
.card{
  border:1px solid var(--line); border-radius:16px;
  background: radial-gradient(circle at 18% 18%, rgba(0,212,255,0.10), transparent 48%), var(--card-bg);
  padding:18px;
}
.muted{color:var(--text-muted);line-height:1.8;}

/* KPIs */
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;}
.kpi{
  border:1px solid var(--line); border-radius:16px; background:var(--icon-bg);
  padding:14px; position:relative; overflow:hidden;
}
.kpi .k{font-family:var(--font-tech);font-weight:900;letter-spacing:.6px;font-size:.78rem;color:var(--text-muted);}
.kpi .v{font-size:1.55rem;font-weight:900;margin-top:6px;}
.kpi .spark{height:8px;border-radius:999px;background:rgba(0,0,0,0.06);overflow:hidden;margin-top:10px;}
.kpi .spark span{display:block;height:100%;width:70%;background:linear-gradient(90deg,var(--primary),rgba(0,212,255,0.22));}
.kpi .mini{
  margin-top:10px; height:34px; border-radius:12px; border:1px solid var(--icon-border);
  background: var(--surface); overflow:hidden; position:relative;
}
.kpi .mini svg{width:100%;height:100%;display:block;}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
.step{display:flex;gap:12px;align-items:flex-start;}
.dot{width:12px;height:12px;border-radius:99px;background:var(--primary);margin-top:6px;box-shadow:0 0 0 4px rgba(0,212,255,0.12);flex:0 0 12px;}
.step-title{font-weight:900;text-transform:uppercase;letter-spacing:.3px;}

/* Graph Panel */
.graph-panel{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card-bg);}
.graph-head{
  padding:14px; display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.graph-head .left{font-family:var(--font-tech);font-weight:900;letter-spacing:1px;font-size:.78rem;color:var(--text-muted);}
.graph-head .right{font-family:var(--font-tech);font-weight:900;font-size:.78rem;color:var(--primary);}
.grid-bg{
  padding:12px; height:260px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:34px 34px; position:relative;
}
.grid-bg svg{width:100%;height:100%;display:block;}

/* About */
.about-section{display:grid;grid-template-columns:0.42fr 0.58fr;border-bottom:1px solid var(--line);max-width:1200px;}
.about-image{height:560px;position:relative;border-right:1px solid var(--line);background:#111;overflow:hidden;}
.about-image img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(100%) contrast(1.1);transition:.7s ease;display:block;}
.about-image:hover img{filter:grayscale(0%) contrast(1.0);transform:scale(1.02);}
.about-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0B1114;color:#fff;z-index:2;}
.pf-title{font-family:var(--font-tech);color:var(--primary);letter-spacing:1px;font-weight:900;margin-bottom:10px;}
.pf-lines{font-family:var(--font-tech);font-size:.78rem;color:rgba(255,255,255,0.75);line-height:1.7;}
.about-text{padding:64px 40px;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.about-desc{font-size:1.12rem;color:var(--text-muted);line-height:1.75;margin-bottom:18px;}
.strong-point{font-weight:900;color:var(--text-main);border-left:2px solid var(--primary);padding:14px 14px 14px 16px;margin:10px 0 18px;background:var(--card-bg);}

/* Footer */
.footer{position:relative;padding:32px 40px 28px;background:var(--surface);}
.footer-accent{height:2px;background:var(--primary);width:100%;opacity:1;margin:18px 0 14px;}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:stretch;}
.footer h2{font-size:2.4rem;margin-bottom:10px;}
.footer-copy{color:var(--text-muted);max-width:520px;margin-top:6px;}
.cta-btn{display:inline-block; margin-top:18px;width:fit-content;}

/* Language Utilities */
.lang-en { display: none !important; }
body.lang-english .lang-de,
html.lang-english .lang-de { display: none !important; }
body.lang-english .lang-en,
html.lang-english .lang-en { display: inline-block !important; }
body.lang-english p.lang-en,
html.lang-english p.lang-en, body.lang-english div.lang-en, body.lang-english h1.lang-en, body.lang-english h2.lang-en, body.lang-english a.lang-en { display: block !important; }

/* Footer Bottom */
.footer-bottom{margin-top:16px;padding-top:12px;border-top:none;}
.footer-legal{font-family:var(--font-tech);font-size:.75rem;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
.legal-links a{color:var(--text-muted);text-decoration:none;margin-left:18px;transition:.2s;}
.legal-links a:hover{color:var(--primary);}

/* Responsive */
@media (max-width:900px){
  header,.hero,.grid-col,.section,.about-text,.footer{padding-left:20px;padding-right:20px;}
  .container{border:none;}
  .header-socials{display:none;}
  .content-grid,.two-col,.about-section,.footer-grid{grid-template-columns:1fr;}
  .grid-col{border-right:none;}
  .about-image{height:420px;border-right:none;border-bottom:1px solid var(--line);}
  .hero-statement{font-size:1.85rem;}
  .icon-grid,.kpi-grid{grid-template-columns:1fr;}
  .footer-legal{flex-direction:column;align-items:flex-start;}
  .legal-links a{margin-left:0;margin-right:18px;}
  
  /* Mobile: Header Right adjustments */
  .header-right { gap: 10px; }
  .header-btn { padding: 10px 14px; font-size: 0.75rem; }
  .header-sep { margin: 0 2px; }
}


/* Slide-down Nav Bar */
.nav-bar{
  position: sticky;
  top: var(--header-h, 72px);
  z-index: 90;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  padding: 10px 40px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
}
.nav-bar.open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-bar a{
  font-family: var(--font-tech);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-main);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.nav-bar a:hover{
  border-color: var(--primary);
  background: var(--card-bg);
  box-shadow: 0 0 0 2px rgba(0,212,255,0.18);
  color: var(--primary);
}
.nav-bar a:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* Nav CTA inside slide-down bar (mobile-friendly) */
.nav-bar .nav-cta{
  margin-right:auto;
  font-family: var(--font-tech);
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #000;
  background:#000;
  color:#fff;
  white-space:nowrap;
  transition:.18s ease;
}
.nav-bar .nav-cta:hover{
  background: var(--primary);
  border-color: var(--primary);
  color:#000;
}
/* keep bar usable on small screens */
@media (max-width:900px){
  .nav-bar{padding: 10px 18px; gap: 12px; overflow-x:auto;}
  .nav-bar a{white-space:nowrap;}
}

/* Header Back Button */
.header-back{background:transparent;color:var(--text-main);border:1px solid var(--line);} 
.header-back:hover{background:var(--primary);border-color:var(--primary);color:#000;}

.footer-accent--top{margin-top:0;}


/* =========================
   BOOKING PAGE EXTRAS
   ========================= */

/* Zurück-Link oberhalb des Titels */
.booking-back{
  margin-bottom: 10px;
}
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.65);
}
html.dark .back-link, body.dark .back-link{
  border-color: rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
}
.back-link:hover{
  transform: translateY(-1px);
}

/* Minimaler Footer (nur Legal) für booking.html */
/* Auf der Booking-Seite blenden wir nur den großen Footer-Content (04//CONNECT) aus,
   aber der blaue Divider (footer-accent) soll sichtbar bleiben – wie auf allen anderen Seiten. */
.footer-mini .footer-grid{
  display: none !important;
}

/* =========================
   HUMAN ↔ CORPORATE SWITCH
   =========================
   Für Laien: Das sind die zwei „Pills“ unter dem Hero (und nochmal in den Details),
   mit denen man zwischen human.html und corporate.html wechseln kann.
*/

.page-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin: 14px auto 0;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.55);
  width: fit-content;
}

.dark-mode .page-switch,
html.dark .page-switch,
body.dark .page-switch{
  background: rgba(255,255,255,0.06);
}

.page-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-family: var(--font-tech);
  letter-spacing: .1em;
  font-size: .75rem;
  color: var(--text);
  border: 1px solid transparent;
  background: transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.page-pill:hover{
  transform: translateY(-1px);
  border-color: var(--line);
  background: rgba(0,0,0,0.03);
}

.dark-mode .page-pill:hover,
html.dark .page-pill:hover,
body.dark .page-pill:hover{
  background: rgba(255,255,255,0.06);
}

.page-pill.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #000;
}

/* Compact version used inside the details section */
.page-switch--compact{
  margin: 0 0 14px;
}

@media (max-width: 520px){
  .page-switch{width: 100%; justify-content:space-between;}
  .page-pill{flex:1;}

  /* Mobile Header Fix */
  header{padding-left:16px;padding-right:16px;}
  .brand-sub{display:none;}
  .logo{font-size:1.0rem;}
  .header-btn{display:none;}
  .header-right{gap:8px;}
  .ctrl-btn{width:32px;height:32px;border-radius:10px;}

}


/* Mobile Social Dock (mobile-only) */

@media (max-width:900px){
  
  .mobile-socialdock .header-icon{width:20px;height:20px;}
  body{padding-bottom:96px;}
}



/* --- Mobile Social Dock Accent --- */
@media (max-width: 900px){
  
}


/* --- Mobile Social Dock (subtle, integrated) --- */
@media (max-width: 900px){
  .mobile-socialdock{
    display:flex;
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    justify-content:space-around;
    padding:12px 10px;
    border-radius:16px;
    background:rgba(255,255,255,.68);
    backdrop-filter: blur(12px);
    border:1px solid rgba(80,140,255,.28); /* subtle accent */
    z-index:9999;
  }
}