/* ================================
   CROX Modern Pro Styles (2026)
   File: styles.css
   ================================ */

/* ---------- Design Tokens ---------- */
:root{
  /* PRIMARY – Hero + Footer (teget) */
  --bg-primary: #0b1020;

  /* SECONDARY – ostatak sajta (mirniji teget) */
  --bg-secondary: #0e152b;

  /* Surfaces */
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.08);
  --card: rgba(255,255,255,.07);
  --stroke: rgba(255,255,255,.12);

  /* Text */
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted-2: rgba(255,255,255,.56);

  /* ONE brand color */
  --brand: #4da3ff;
  --danger:#ff4d6d;

  /* Effects */
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow-soft: 0 12px 30px rgba(0,0,0,.25);

  /* Radius */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  /* Layout */
  --container: 1180px;
  --nav-h: 80px;
}

/* ---------- Base / Reset ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg-secondary);
  overflow-x:hidden;
}

/* ---------- Default sections ---------- */
section{
  background: var(--bg-secondary);
}

/* ---------- Cards & blocks ---------- */
.service-card,
.portfolio-item,
.stat-card,
.info-card,
.faq-item,
.contact-form-wrapper{
  background: var(--card);
  border: 1px solid var(--stroke);
}

/* ---------- HERO Sektion mit funktionierender Textebene ---------- */
.hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 30px);
  padding-bottom: 70px;
  background: var(--bg-primary); 
  overflow: hidden;
}

/* Das Video wird absolut fixiert und füllt den Raum ohne zu verzerren */
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  z-index: 0;        
  pointer-events: none; 
}

/* Das farbige Overlay kommt über das Video, aber unter den Text */
.hero-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 15% 30%, rgba(77,163,255,.20), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(124,92,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(8, 16, 37, 0.45) 0%, rgba(14, 21, 43, 0.85) 100%);
  pointer-events: none;
  z-index: 1; 
}

/* Der Container mit dem Text und der Karte kommt ganz nach oben */
.hero .container {
  position: relative;
  z-index: 2; 
}

/* ---------- FOOTER (PRIMARY TEGET) ---------- */
footer{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(77,163,255,.15), transparent 65%),
    linear-gradient(180deg, var(--bg-primary) 0%, #081025 100%);
}

/* ---------- Accents ---------- */
.section-divider{
  background: var(--brand);
}

a{
  color: inherit;
  text-decoration: none;
}
a:hover{
  color: var(--brand);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing:.2px;
  border: 1px solid transparent;
  transition: .22s ease;
  position:relative;
  isolation:isolate;
}

.btn-primary{
  background: linear-gradient(135deg, rgba(77,163,255,1), rgba(124,92,255,1));
  color: #081022;
  box-shadow: 0 14px 40px rgba(77,163,255,.25);
}
.btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.btn-outline{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.btn-outline:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
}

img{
  max-width:100%;
  display:block;
}

p{ color: var(--muted); line-height:1.7; margin:0; }
h1,h2,h3,h4{ margin:0; font-family:"Montserrat", "Poppins", sans-serif; letter-spacing:.2px; }
h1{ font-size: clamp(2.0rem, 4vw, 3.3rem); line-height:1.05; }
h2{ font-size: clamp(1.65rem, 3vw, 2.4rem); line-height:1.15; }
h3{ font-size: 1.15rem; }
h4{ font-size: 1.0rem; }

.container{
  width: min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

/* =========================================================
   SICHERSYSTEM FÜR DREISPRACHIGKEIT (Hardcoded Fix)
========================================================= */
/* Alle Sprachklassen standardmäßig ausblenden */
.content-en, .content-de, .content-sk {
  display: none !important;
}

/* Aktivierung der jeweiligen Sprache basierend auf dem Radio-Button */
#lang-en:checked ~ * .content-en { display: initial !important; }
#lang-de:checked ~ * .content-de { display: initial !important; }
#lang-sk:checked ~ * .content-sk { display: initial !important; }

/* Block-Elemente müssen im Layout Blöcke bleiben */
#lang-en:checked ~ * div.content-en, #lang-en:checked ~ * p.content-en, #lang-en:checked ~ * h1.content-en, #lang-en:checked ~ * h2.content-en, #lang-en:checked ~ * h3.content-en { display: block !important; }
#lang-de:checked ~ * div.content-de, #lang-de:checked ~ * p.content-de, #lang-de:checked ~ * h1.content-de, #lang-de:checked ~ * h2.content-de, #lang-de:checked ~ * h3.content-de { display: block !important; }
#lang-sk:checked ~ * div.content-sk, #lang-sk:checked ~ * p.content-sk, #lang-sk:checked ~ * h1.content-sk, #lang-sk:checked ~ * h2.content-sk, #lang-sk:checked ~ * h3.content-sk { display: block !important; }

/* Active labels im Switcher */
#lang-en:checked ~ * .lang-en-label,
#lang-de:checked ~ * .lang-de-label,
#lang-sk:checked ~ * .lang-sk-label {
  opacity: 1;
  font-weight: 700;
  transform: translateY(-1px);
}

/* Hide Radio Buttons unsichtbar */
#lang-en, #lang-de, #lang-sk { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.lang-switch{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color: var(--muted);
  user-select:none;
}
.lang-label{
  cursor:pointer;
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  transition: .25s ease;
}
.lang-label:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* ---------- Navbar ---------- */
.navbar{
  position:fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 999;
  transition: .25s ease;
  background: rgba(6,10,20,.25);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.navbar.scrolled{
  background: rgba(6,10,20,.72);
  border-bottom-color: rgba(255,255,255,.12);
}
.navbar .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.logo{ display: flex; align-items: center; }
.logo img{
  height: 85px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.nav-menu{ list-style:none; display:flex; gap: 18px; padding:0; margin:0; align-items:center; }
.nav-menu a{ display:inline-flex; align-items:center; padding: 10px 12px; border-radius: 12px; color: rgba(255,255,255,.78); font-weight:600; transition: .22s ease; }
.nav-menu a:hover{ color: var(--text); background: rgba(255,255,255,.08); transform: translateY(-1px); }

.nav-menu .has-submenu{ position: relative; }
.nav-menu .has-submenu > a{ cursor: pointer; }
.nav-menu .submenu{
  display: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; padding: 10px; margin: 0; list-style: none; border-radius: var(--r-lg);
  background: rgba(6,10,20,.92); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); z-index: 1200;
}
.nav-menu .has-submenu:hover .submenu{ display: block; }
.nav-menu .submenu a{ width: 100%; display: flex; justify-content: flex-start; padding: 10px 12px; border-radius: 12px; }
.nav-menu .submenu a:hover{ background: rgba(255,255,255,.10); }

/* ---------- Hamburger Menu ---------- */
.hamburger{ width: 44px; height: 44px; display:none; align-items:center; justify-content:center; border-radius: 14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); cursor:pointer; transition: .2s ease; }
.hamburger:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.hamburger span{ position:absolute; width: 20px; height: 2px; background: rgba(255,255,255,.85); border-radius: 10px; transition: .2s ease; }
.hamburger span:nth-child(1){ transform: translateY(-6px); }
.hamburger span:nth-child(2){ transform: translateY(0px); }
.hamburger span:nth-child(3){ transform: translateY(6px); }
.hamburger.active span:nth-child(1){ transform: translateY(0) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translateY(0) rotate(-45deg); }

@media (max-width: 760px){
  .hamburger{ display:flex; position:relative; }
  .nav-menu{ position: fixed; top: var(--nav-h); right: 14px; left: 14px; display:none; flex-direction:column; gap: 6px; padding: 12px; border-radius: var(--r-xl); background: rgba(6,10,20,.82); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); box-shadow: var(--shadow); align-items: stretch; }
  .nav-menu.active{ display:flex; }
  .nav-menu a{ width:100%; justify-content:center; }
  .nav-menu .submenu{ position: static; min-width: unset; width: 100%; box-shadow: none; margin-top: 6px; padding: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); }
  .nav-menu .submenu a{ justify-content:center; }
}

/* ---------- Hero Content Layout ---------- */
.hero-content{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr .9fr;
  align-items:center;
  gap: 40px;
}
.hero-text p{ margin-top: 14px; max-width: 56ch; }
.hero-buttons{ margin-top: 22px; display:flex; flex-wrap:wrap; gap: 12px; }
.hero-image{ display:flex; justify-content:flex-end; }

.floating-card{
  width: min(380px, 100%);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
  overflow:hidden;
  animation: floaty 4.5s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.card-content{ padding: 22px; display:flex; gap: 16px; align-items:flex-start; }
.card-icon{ width: 46px; height: 46px; border-radius: 16px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(53,211,183,.22), rgba(77,163,255,.18)); border: 1px solid rgba(53,211,183,.25); }
.card-icon i{ font-size: 24px; color: var(--text); }
.card-text h3{ font-size: 1.15rem; }
.card-text p{ margin-top: 4px; color: var(--muted); }

.scroll-indicator{
  position:absolute;
  left:50%;
  bottom: 18px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.75);
  font-weight:600;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  z-index: 2;
}
.scroll-indicator i{ font-size: 18px; animation: bounce 1.2s infinite; }
@keyframes bounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }

/* ---------- Restliche Sektionen & Grid-Systeme ---------- */
.about-section{ padding: 80px 0; }
.about-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items:center; }
.about-image{ position:relative; }
.image-frame{ border-radius: var(--r-xl); overflow:hidden; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); box-shadow: var(--shadow-soft); }
.image-frame img{ width:100%; height: 520px; object-fit: cover; transform: scale(1.02); }
.experience-badge{ position:absolute; left: 16px; bottom: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(6,10,20,.65); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); display:flex; gap:10px; align-items:center; }
.experience-badge span:first-child{ font-family:"Montserrat",sans-serif; font-weight:900; font-size: 1.4rem; color: var(--text); }
.about-description p{ margin-top: 12px; }
.about-stats{ margin-top: 22px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-item{ padding: 16px; border-radius: var(--r-md); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.stat-item h3{ font-size: 1.25rem; font-weight: 900; background: linear-gradient(135deg, rgba(77,163,255,1), rgba(124,92,255,1)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.services-section{ padding: 80px 0; }
.services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; justify-content: center; }
.service-card{ display: flex; flex-direction: column; height: 100%; padding: 20px 18px; border-radius: var(--r-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 34px rgba(0,0,0,.18); transition: .22s ease; overflow:hidden; }
.service-card::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(500px 220px at 20% 0%, rgba(77,163,255,.18), transparent 60%), radial-gradient(500px 220px at 80% 0%, rgba(124,92,255,.16), transparent 60%); opacity:0; transition:.25s ease; pointer-events:none; z-index: 0; }
.service-card > *{ position: relative; z-index: 1; }
.service-card:hover{ transform: translateY(-4px); border-color: rgba(77,163,255,.25); }
.service-card:hover::before{ opacity:1; }
.service-icon{ width: 48px; height: 48px; border-radius: 16px; display:grid; place-items:center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); margin-bottom: 12px; }
.service-icon i{ font-size: 24px; color: rgba(255,255,255,.9); }
.service-card h3{ margin-bottom: 8px; }
.service-description p{ margin-top: 8px; color: var(--muted); font-size: .95rem; }
.service-link{ margin-top: auto; align-self: flex-start; display:inline-flex; align-items:center; gap:8px; font-weight:800; color: rgba(77,163,255,.95); padding: 10px 0; }

.stats-section{ padding: 34px 0 80px; }
.stats-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; justify-content: center; }
.stat-card{ padding: 18px; border-radius: var(--r-lg); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; gap: 14px; align-items:center; transition:.22s ease; }
.stat-card:hover{ transform: translateY(-3px); border-color: rgba(53,211,183,.22); }
.stat-icon{ width: 48px; height: 48px; border-radius: 16px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(53,211,183,.18), rgba(77,163,255,.16)); border: 1px solid rgba(255,255,255,.14); }

.portfolio-section{ padding: 20px 0; }
.portfolio-filters{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; margin-bottom: 20px; }
.filter-btn{ cursor:pointer; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); padding: 10px 14px; border-radius: 999px; font-weight: 800; transition:.22s ease; }
.filter-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.filter-btn.active{ color:#081022; border-color: rgba(77,163,255,.35); background: linear-gradient(135deg, rgba(77,163,255,1), rgba(124,92,255,1)); }
.portfolio-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.portfolio-item{ border-radius: var(--r-xl); overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); box-shadow: 0 16px 40px rgba(0,0,0,.18); transition:.25s ease; }
.portfolio-image{ position: relative; display: block; width: 100%; height: 280px; overflow: hidden; }
.portfolio-image img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: .35s ease; filter: saturate(1.05) contrast(1.05); }
.portfolio-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(6,10,20,.86)); display: flex; align-items: flex-end; padding: 16px; opacity: 0; transition: .25s ease; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }

.contact-section{ padding: 80px 0; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items:start; }
.contact-form-wrapper{ border-radius: var(--r-xl); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 46px rgba(0,0,0,.18); overflow:hidden; }
.contact-form{ padding: 22px; display:grid; gap: 14px; }
.form-group{ display:grid; gap: 8px; }

.map-container{ border-radius: var(--r-xl); overflow:hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 46px rgba(0,0,0,.18); }
.map-container iframe{ display:block; width:100%; height: 420px; border:0; }

/* ---------- Cookie Banner Controls ---------- */
.cookie-banner[hidden], .cookie-backdrop[hidden], .cookie-banner[aria-hidden="true"], .cookie-backdrop[aria-hidden="true"] { display: none !important; }
.cookie-backdrop{ position: fixed; inset: 0; background: rgba(4, 15, 73, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 99998; }
.cookie-banner{ position: fixed; left: 0; right: 0; bottom: 18px; z-index: 99999; padding: 0 16px; isolation: isolate; }
.cookie-card{ max-width: 980px; margin: 0 auto; background: rgba(10, 14, 26, 0.94); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 16px 18px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.cookie-actions { display: flex; gap: 10px; }

/* ---------- Responsive Design Mappings ---------- */
@media (max-width: 900px){
  .hero-content, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .portfolio-grid, .footer-content, .about-stats { grid-template-columns: 1fr; }
  .cookie-card { flex-direction: column; align-items: stretch; }
  .scroll-indicator { display:none; }
}