/* styles.css */
:root{
  --bg:#0b0c10; --panel:#101217; --text:#d7dce5; --muted:#94a3b8;
  --brand:#00e5a8; --brand-2:#6cf3cf; --stroke:#1b1f2a; --card:#0f1117;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.container{width:min(1100px,90vw); margin-inline:auto}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(11,12,16,.95), rgba(11,12,16,.65) 60%, transparent); border-bottom:1px solid rgba(255,255,255,.04); backdrop-filter:saturate(140%) blur(8px)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:.7rem; font-weight:700; letter-spacing:.2px}
.logo .og{opacity:.7; font-weight:600}
.nav nav{display:flex; gap:1rem; align-items:center}
.nav-link{padding:.5rem .75rem; opacity:.9}
.nav-link:hover{opacity:1}

/* Buttons */
.btn{display:inline-block; padding:.8rem 1rem; border-radius:14px; border:1px solid var(--stroke); box-shadow:var(--shadow); transform:translateZ(0); transition:transform .2s ease, background .3s ease, border-color .3s ease}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#071a14; border-color:transparent; font-weight:700}
.btn-ghost{background:rgba(255,255,255,.03)}
.btn:hover{transform:translateY(-2px)}

/* Hero */
.hero{position:relative; min-height:92svh; display:grid; place-items:center; overflow:clip}
.hero-inner{padding:8svh 0 14svh; text-align:center}
.hero h1{font-size:clamp(2.2rem, 6vw, 4rem); line-height:1.05; margin:0 0 1rem}
.lead{color:var(--muted); margin:0 auto 1.25rem; width:min(70ch, 90%)}
.hero-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin:1rem 0 1.5rem}
.pillbar{display:flex; gap:.5rem; justify-content:center; padding:0; list-style:none; margin:0}
.pillbar li{padding:.4rem .7rem; border:1px solid var(--stroke); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.02)}
.pillbar_About_us{display:flex; gap:.5rem; justify-content:center; padding:0; list-style:none; margin:0}
.pillbar_About_us li{padding:.4rem .7rem; border:1px solid var(--stroke); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.02)}

/* Background visuals */
.hero-bg{position:absolute; inset:0; z-index:-1}
.blob{position:absolute; filter:blur(30px); opacity:.45; mix-blend:screen; animation:float 18s ease-in-out infinite}
.blob.b1{inset:auto auto 10% 5%; width:42vmax; height:42vmax; background:radial-gradient(60% 60% at 50% 50%, #00e5a8 0%, rgba(0,229,168,0) 70%)}
.blob.b2{inset:5% -10% auto auto; width:36vmax; height:36vmax; background:radial-gradient(60% 60% at 50% 50%, #6cf3cf 0%, rgba(108,243,207,0) 70%); animation-delay:-6s}
.blob.b3{inset:auto 10% 0% auto; width:30vmax; height:30vmax; background:radial-gradient(60% 60% at 50% 50%, #1dd6ff 0%, rgba(29,214,255,0) 70%); animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-2%,3%) scale(1.05)}}
.grid{position:absolute; inset:-10% -10% -10% -10%; background:linear-gradient(transparent 99%, rgba(255,255,255,.05) 100%) 0 0 / 20px 20px,
linear-gradient(90deg, transparent 99%, rgba(255,255,255,.05) 100%) 0 0 / 20px 20px; mask-image:radial-gradient(60% 60% at 50% 40%, #000 60%, transparent 100%); opacity:.35}

/* Sections */
.section{padding:9svh 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; flex-wrap:wrap}
.section-head h2{margin:0; font-size:clamp(1.6rem, 3.6vw, 2.4rem)}
.section-head p{margin:0; color:var(--muted)}
.subhead{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:2rem 0 1rem}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow); transform-style:preserve-3d; transform:perspective(800px) rotateX(0) rotateY(0); transition:transform .2s ease, border-color .3s ease, background .3s ease}
.card:hover{transform:perspective(800px) rotateX(4deg) rotateY(-4deg)}
.card .icon{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); margin-bottom:1rem; border:1px solid var(--stroke)}
.card h3{margin:.2rem 0 .5rem}
.card ul{margin:.5rem 0 0 1rem; color:var(--muted)}

/* Portfolio + Foto */
.grid-portfolio{display:grid; grid-template-columns:repeat(12, 1fr); gap:12px}
.port-card{
  grid-column:span 6; position:relative; border-radius:18px; overflow:hidden;
  border:1px solid var(--stroke); background:rgba(255,255,255,.02); box-shadow:var(--shadow); cursor:pointer;
  transform-style:preserve-3d; transform:var(--t, translateZ(0));
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}
.port-card.large{grid-column:span 12}
.port-card:hover{box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 0 1px color-mix(in oklab, var(--brand) 25%, transparent); border-color: color-mix(in oklab, var(--brand) 30%, var(--stroke)); filter:saturate(1.05)}
.port-media{aspect-ratio:16/10; background:#0e1117; position:relative; overflow:hidden}
.port-media > canvas, .port-media > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:translate3d(0,0,0) scale(var(--scale,1)); transition:transform .35s cubic-bezier(.2,.6,.2,1), filter .35s ease}
.port-card:hover .port-media > *{--scale:1.06; transform:translate3d(var(--px,0), var(--py,0), 0) scale(var(--scale)); filter:contrast(1.05) brightness(1.05)}
.port-media::before, .port-media::after{content:""; position:absolute; inset:0; pointer-events:none}
.port-media::before{background:radial-gradient(240px 140px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 60%), conic-gradient(from 0deg at var(--mx,50%) var(--my,50%), rgba(255,255,255,.0) 0 60deg, rgba(255,255,255,.12) 90deg, rgba(255,255,255,0) 160deg); mix-blend-mode:screen; opacity:0; transition:opacity .25s ease}
.port-card:hover .port-media::before{opacity:.8}
.port-media::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .08 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.15; mix-blend-mode:overlay; transition:opacity .25s ease}
.port-card:hover .port-media::after{opacity:.22}
.port-info{padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; transform:translateY(0); transition:transform .25s ease}
.port-card:hover .port-info{transform:translateY(-2px)}
.port-title{font-weight:700}
.port-tags{display:flex; gap:.4rem; flex-wrap:wrap}
.tag{font-size:.8rem; color:var(--muted); border:1px dashed var(--stroke); padding:.2rem .5rem; border-radius:999px; transition:transform .25s ease, border-color .25s ease}
.port-card:hover .tag{transform:translateY(-2px); border-color: color-mix(in oklab, var(--brand) 35%, var(--stroke))}

/* Hotspot halo — jetzt klickdurchlässig */
.port-card::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(140px 80px at var(--mx,50%) var(--my,50%), rgba(108,243,207,.18), transparent 70%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.port-card:hover::after{opacity:1}

/* Slider */
.slider{position:absolute; inset:0}
.slides{position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.slides::-webkit-scrollbar{display:none}
.slides img{flex:0 0 100%; height:100%; width:100%; object-fit:cover; scroll-snap-align:center}
.snav{position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--stroke); background:rgba(0,0,0,.35); backdrop-filter:blur(2px); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:var(--text); z-index:3; cursor:pointer}
.snav.prev{left:8px}
.snav.next{right:8px}
.dots{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:6px; z-index:3}
.dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer}
.dot.is-active{background:#fff}

/* Filter chips */
.filters{display:flex; gap:.4rem; flex-wrap:wrap}
.chip{border:1px solid var(--stroke); background:rgba(255,255,255,.02); color:var(--text); padding:.45rem .75rem; border-radius:999px; cursor:pointer}
.chip.is-active{border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 40%, transparent)}

/* Kontakt */
.contact{display:grid; grid-template-columns:1.2fr 1fr; gap:1.5rem}
.contact-form{background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:1rem}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
label{display:grid; gap:.4rem; font-size:.95rem}
input, textarea{background:#0b0e14; border:1px solid var(--stroke); color:var(--text); padding:.8rem .9rem; border-radius:12px; outline:none}
input:focus, textarea:focus{border-color:var(--brand)}
.form-actions{display:flex; align-items:center; gap:1rem; margin-top:.8rem}
.form-status{color:var(--muted)}

/* Footer */
.footer{border-top:1px solid var(--stroke); padding:2rem 0 3rem; margin-top:4svh; background:linear-gradient(0deg, rgba(255,255,255,.02), transparent)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem}
.foot-links{display:flex; gap:1rem; flex-wrap:wrap}
.muted{color:var(--muted)}

/* Progress + cursor */
.progress-bar{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--brand), var(--brand-2)); z-index:60}
.cursor{position:fixed; width:18px; height:18px; border-radius:50%; border:2px solid var(--brand); pointer-events:none; z-index:70; transform:translate(-50%,-50%); mix-blend:exclusion; opacity:.9}

/* Reveal + Split */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in-view{opacity:1; transform:none}
.split > span{display:inline-block; transform:translateY(110%); opacity:0}
.split.ready > span{animation:rise .9s cubic-bezier(.2,.6,.2,1) forwards; animation-delay:calc(var(--i)*40ms)}
.split{white-space:pre-wrap}
@keyframes rise{to{transform:none; opacity:1}}

/* Magnetic */
.magnet{position:relative; transition:transform .15s ease}

/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; z-index:80; pointer-events:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); opacity:0; transition:opacity .2s ease}
.modal-dialog{position:relative; background:var(--panel); border:1px solid var(--stroke); border-radius:16px; width:min(900px, 96vw); transform:translateY(10px); opacity:0; transition:transform .2s ease, opacity .2s ease; box-shadow:var(--shadow); padding:1rem}
.modal.open{pointer-events:auto}
.modal.open .modal-backdrop{opacity:1}
.modal.open .modal-dialog{opacity:1; transform:none}
.modal-close{position:absolute; top:.4rem; right:.6rem; border:1px solid var(--stroke); background:rgba(255,255,255,.04); border-radius:10px; width:34px; height:34px; font-size:20px; color:var(--text)}

/*Team*/



/* Responsive */
@media (max-width:960px){
  .cards{grid-template-columns:1fr}
  .grid-portfolio{grid-template-columns:repeat(6, 1fr)}
  .port-card, .port-card.large{grid-column:span 6}
  .contact{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

  /* Mobile Ansicht: nur "Über uns" in der Navbar anzeigen */
  @media (max-width: 768px) {
    .site-header nav .nav-link {
      display: none;
    }
    .site-header nav .nav-link[href*="Über"],
    .site-header nav .nav-link[href*="über"],
    .site-header nav .nav-link[href*="About_us.html"] {
      display: inline-block;
    }
    .site-header nav {
      justify-content: center;
    }

    .pillbar {
      display:none;
    }
  }

    /* --- Mobile Fixes --- */
  @media (max-width: 768px) {

    /* Allgemeine Container-Abstände */
    .section {
      padding: 2rem 1rem;
    }

    /* ABOUT-CARDS: Kein sticky, gestapeltes Layout */
    .about-cards {
      height: auto !important;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }

    .about-card {
      position: relative !important;
      top: 0 !important;
      width: 90vw !important;
      margin: 0 !important;
      z-index: 1 !important;
      transform: none !important;
    }

    /* Team Section mobil untereinander */
    #team > div {
      flex-direction: column !important;
      align-items: center !important;
      gap: 2rem !important;
    }

    .team-member {
      width: 90% !important;
      text-align: center;
    }

    /* Pillbar verkleinern und umbrechen */
    .pillbar_About_us {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .4rem;
      padding: 0;
      margin: .6rem 0 0 0;
      list-style: none;
    }

    .pillbar_About_us li {
      background: rgba(255,255,255,0.08);
      padding: .3rem .7rem;
      border-radius: 999px;
      font-size: 0.85rem;
      white-space: nowrap;
    }

    /* Hero und Überschriften kleiner */
    .hero-inner h1 {
      font-size: 1.8rem;
      line-height: 1.2;
    }
    .hero-inner p.lead {
      font-size: 1rem;
    }

    /* Fortschrittsbalken nicht verdecken */
    .progress-bar {
      height: 3px;
    }
  }