/* -------------------------------------------------
   VARIABLES – THEMING SYSTEM
   ------------------------------------------------- */
:root {
  /* --- DEFAULT (DARK MODE) --- */
  --bg-color: #030304;
  --card-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.08);
  --pill-bg: rgba(10, 10, 12, 0.8);

  /* Typography */
  --text-main: #f4f4f5;
  --text-muted: #888890;
  --text-inverse: #000; 

  /* Accents & Aurora */
  --primary: #fff;
  --accent: #8b5cf6;
  --aurora-1: rgba(139, 92, 246, 0.08); /* Violet Blob */
  --aurora-2: rgba(59, 130, 246, 0.08); /* Blue Blob */
  --input-bg: rgba(255, 255, 255, 0.03);

  /* Fonts & Layout */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --container-width: 1000px;
  --section-padding: clamp(80px, 10vh, 120px) 0;
}

/* --- LIGHT MODE OVERRIDES --- */
[data-theme="light"] {
  --bg-color: #f2f2f5; 
  --card-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(0, 0, 0, 0.06);
  --pill-bg: rgba(255, 255, 255, 0.85);

  /* Typography */
  --text-main: #18181b; 
  --text-muted: #52525b; 
  --text-inverse: #fff;

  /* Accents */
  --primary: #000;
  --accent: #7c3aed;
  --aurora-1: rgba(139, 92, 246, 0.15); 
  --aurora-2: rgba(59, 130, 246, 0.15);
  --input-bg: rgba(0, 0, 0, 0.04);
}

/* -------------------------------------------------
   RESET & BASE
   ------------------------------------------------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* FIX: Mobile Background Transition */
html {
  background-color: var(--bg-color);
  transition: background-color 0.5s ease;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: transparent; 
  color: var(--text-main);
  font: 1rem/1.6 var(--font-body);
  position: relative;
  transition: color 0.3s ease;
}

/* Typography */
h1, h2, h3 { font-family:var(--font-heading); color:var(--text-main); letter-spacing:-.02em; }
p { font-weight:300; }
a { color:inherit; text-decoration:none; transition:.2s ease; cursor: pointer; }
ul { list-style:none; }
button { cursor: pointer; }

/* -------------------------------------------------
   BACKGROUND (Grain + Aurora)
   ------------------------------------------------- */
/* Grain */
body::before {
  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none; z-index: -1;
  mix-blend-mode: overlay; 
  transform: translateZ(0); /* Hardware Accel */
  transition: opacity 0.5s ease;
}

/* Blob 1 */
body::after {
  content: ""; position: fixed; top: -20%; left: -10%; width: 70vw; height: 70vw;
  background: radial-gradient(circle, var(--aurora-1), transparent 70%);
  border-radius: 50%;
  animation: floatAurora 20s infinite alternate ease-in-out;
  z-index: -2; pointer-events: none;
  transition: background 0.5s ease;
  transform: translateZ(0);
}

/* Blob 2 */
html::after {
  content: ""; position: fixed; bottom: -20%; right: -10%; width: 60vw; height: 60vw;
  background: radial-gradient(circle, var(--aurora-2), transparent 70%);
  border-radius: 50%;
  animation: floatAurora 25s infinite alternate-reverse ease-in-out;
  z-index: -2; pointer-events: none;
  transition: background 0.5s ease;
  transform: translateZ(0);
}

@keyframes floatAurora {
  0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  100% { transform: translate(50px, 50px) scale(1.1); opacity: 1; }
}

/* -------------------------------------------------
   HEADER
   ------------------------------------------------- */
.header{
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  width:90%; max-width:900px; height:60px;
  background:var(--pill-bg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); border-radius:100px;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 8px 0 24px; z-index:1000;
  transition: background 0.3s;
}
.logo{font:600 1.1rem var(--font-heading); color:var(--text-main);}
.navbar{
  display:flex; gap:4px; background:var(--card-bg); padding:4px; border-radius:50px;
}
.nav-link{
  font-size:.85rem; color:var(--text-muted); padding:6px 16px; border-radius:50px; transition:color .2s;
}
.nav-link:hover{ color:var(--text-main); background:rgba(125,125,125,.1); }

.contact-btn-header{
  background:var(--text-main); color:var(--bg-color);
  padding:8px 20px; border-radius:50px; font-size:.85rem; font-weight:500;
}
.contact-btn-header:hover{ opacity: 0.8; }

/* Controls Group (Dark Mode + Lang + Burger) */
.controls-group {
    display: flex; align-items: center; gap: 10px;
}

/* Theme Toggle Button */
.theme-toggle {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 1.1rem; padding: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.3s, transform 0.2s;
    cursor: pointer;
}
.theme-toggle:hover { color: var(--text-main); transform: rotate(15deg); }

/* Language Switcher */
.lang-switch {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0 5px;
}
.lang-switch:hover { color: var(--text-main); }

.hamburger{ display:none; padding:10px; margin-right:5px; cursor: pointer;}
.bar{ display:block; width:20px; height:2px; margin:4px auto; background:var(--text-main); }

/* -------------------------------------------------
   HERO
   ------------------------------------------------- */
.hero{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:120px 20px 80px; text-align:center; }
.tagline{
  display:inline-block; font-size:.8rem; color:var(--text-muted);
  border:1px solid var(--glass-border); padding:6px 14px; border-radius:50px; margin-bottom:30px;
  background: var(--card-bg);
}

/* --- FIX: Spacing & Overlap --- */
h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  
  /* Increased line-height so letters don't touch */
  line-height: 1.2; 
  
  /* Increased margin to push paragraph down */
  margin-bottom: 40px; 
  
  /* Added padding so descenders (g, y, p) aren't cut off */
  padding-bottom: 10px; 

  background: linear-gradient(to bottom, var(--text-main) 30%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  display: block; 
  min-height: 2.2em; 
}

.hero p{ font-size:1.1rem; color:var(--text-muted); margin:0 auto 40px; max-width:500px; }

/* --- CURSOR ANIMATION --- */
.txt-type {
  color: var(--text-main);
  border-right: 0.08em solid var(--accent); 
  padding-right: 5px;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent); }
}

.hero-btns{ display:flex; gap:12px; justify-content:center; }
.btn{ padding:12px 30px; border-radius:10px; font-size:.95rem; font-weight:500; border:1px solid transparent; transition:.2s; cursor: pointer; }
.btn-primary{ background:var(--text-main); color:var(--bg-color); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.btn-secondary{ background:var(--card-bg); color:var(--text-main); border-color:var(--glass-border); }
.btn-secondary:hover{ border-color:var(--text-muted); }

/* -------------------------------------------------
   SECTIONS & GRIDS
   ------------------------------------------------- */
.container{ max-width:var(--container-width); margin:0 auto; padding:0 24px; }
.section-title{ font-size:2.5rem; margin-bottom:50px; text-align:center; }
.about-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }
.services-grid, .portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }

/* Glass cards */
.glass{
  background:var(--card-bg); border:1px solid var(--glass-border); border-radius:16px;
  transition:transform .3s ease, background .3s, box-shadow .3s;
}
.glass:hover{
  transform:translateY(-4px); background:var(--card-bg);
  border-color:var(--text-muted); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.about-card, .stat-box, .service-card{ padding:35px; }

.service-card i{ font-size:1.8rem; color:var(--text-main); margin-bottom:20px; }

.project-card{ overflow:hidden; }
.project-img{ height:260px; width:100%; position:relative; overflow:hidden; }
.project-info{ padding:25px; }
.link-arrow{ display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--text-main); }

.tech-stack{ margin-top:25px; display:flex; flex-wrap:wrap; gap:10px; }
.tech-stack span{
  background:var(--input-bg); padding:5px 12px; border-radius:50px; font-size:.8rem; color:var(--text-muted); border:1px solid var(--glass-border);
}

.about-stats{ display:flex; flex-direction:column; gap:24px; }
.stat-box{ text-align:center; display:flex; flex-direction:column; justify-content:center; height:100%; }
.stat-box h3{ font-size:3rem; margin-bottom:5px; color:var(--text-main); }

/* -------------------------------------------------
   CONTACT FORM
   ------------------------------------------------- */
#contact{ margin-top:clamp(140px,20vh,200px); padding-bottom:0; }
.contact-container{ display:flex; justify-content:center; }
.contact-form{ width:100%; display:flex; flex-direction:column; gap:18px; }

.input-group{ display:flex; flex-direction:column; gap:8px; position:relative; }
.input-group label{ font-size:.85rem; color:var(--text-muted); font-weight:500; margin-left:2px; pointer-events:none; }

.input-group input, .input-group textarea, select{
  width:100%; padding:14px 16px;
  background:var(--input-bg); border:1px solid var(--glass-border); border-radius:10px;
  color:var(--text-main); font:1rem var(--font-body); outline:none; transition:.2s;
}
::placeholder{ color:var(--text-muted); opacity:0.6; }
.input-group textarea{ resize:vertical; min-height:120px; }

.input-group input:focus, .input-group textarea:focus, select:focus{
  background:var(--card-bg); border-color:var(--text-muted);
}

/* Dropdown Wrapper */
.select-wrapper { 
    position: relative; 
    width: 100%; 
}

/* The Select Button (Closed State) */
select { 
    appearance: none; 
    -webkit-appearance: none; 
    padding-right: 45px; 
    cursor: pointer; 
}

/* FIX: The Dropdown Options */
select option {
    background-color: var(--bg-color);
    color: var(--text-main);
    padding: 10px;
}
[data-theme="light"] select option {
    background-color: #ffffff;
    color: #000000;
}

.select-wrapper .arrow-icon {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%); 
    pointer-events: none; color: var(--text-muted); font-size: .8rem; line-height: 1;
}

/* -------------------------------------------------
   FOOTER
   ------------------------------------------------- */
footer{
  text-align:center; padding:100px 0 40px; color:var(--text-muted); font-size:.9rem;
  border-top:1px solid var(--glass-border); margin-top:80px;
}

/* -------------------------------------------------
   SOCIAL ICONS (Footer)
   ------------------------------------------------- */
.footer-socials {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-link {
  display: inline-block;
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.social-link:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.social-icon {
  width: 24px;
  height: 24px;
  display: block;
  /* STANDARD (DARK MODE): 
     Da dein SVG schwarz ist, invertieren wir es zu Weiß */
  filter: invert(1); 
  transition: filter 0.3s ease;
}

/* LIGHT MODE OVERRIDE */
[data-theme="light"] .social-icon {
  /* Im Light Mode soll das Icon schwarz bleiben (kein Invertieren) */
  filter: invert(0);
}

/* -------------------------------------------------
   ANIMATIONS
   ------------------------------------------------- */
.hidden{ opacity:0; transform:translateY(20px); transition:.6s ease; }
.show{ opacity:1; transform:translateY(0); }

/* -------------------------------------------------
   RESPONSIVE
   ------------------------------------------------- */
@media (max-width:800px){
  .header{ width:95%; top:10px; padding:0 10px 0 20px; }
  .navbar{ display:none; }
  .navbar.active{
    display:flex; flex-direction:column; position:fixed; top:80px; left:50%; transform:translateX(-50%);
    width:95%; background:var(--bg-color); border:1px solid var(--glass-border); padding:20px; border-radius:20px; z-index:999;
  }
  .hamburger{ display:block; }
  .about-grid{ grid-template-columns:1fr; }
  .about-stats{ display:grid; grid-template-columns:1fr 1fr; }

  /* FIX: Ensure mobile has enough height for 3 lines if text wraps */
  h1 { min-height: 3.5em; }
}

/* -------------------------------------------------
   SUCCESS POPUP
   ------------------------------------------------- */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
    z-index: 10000; display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.popup-overlay.active { opacity: 1; pointer-events: auto; }
.popup-card {
    background: var(--bg-color); border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); padding: 40px 60px; border-radius: 20px;
    text-align: center; transform: scale(0.9) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); max-width: 90%;
}
.popup-overlay.active .popup-card { transform: scale(1) translateY(0); }
.popup-icon { font-size: 3rem; color: #10b981; margin-bottom: 20px; display: inline-block; }
.popup-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--text-main); margin-bottom: 10px; }
.popup-text { color: var(--text-muted); font-size: 1rem; margin-bottom: 30px; }
.popup-btn {
    background: var(--text-main); color: var(--bg-color);
    padding: 10px 30px; border-radius: 50px; font-weight: 500; cursor: pointer; border: none; transition: 0.2s;
}
.popup-btn:hover { opacity: 0.8; transform: scale(1.05); }