:root{
  --bg: #0b0b0d;
  --bg-elev: #111114;
  --text: #e7e7ea;
  --muted: #a3a3ad;
  --link: #2997ff;
  --pill: #1c1c1f;
  --light: #f5f5f7;
  --dark: #000;
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
.container{width:min(1200px, 92vw); margin-inline:auto}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(0,0,0,.7); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-wrap{display:flex; align-items:center; gap:16px; height:52px}
.brand{color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.3px}
.nav{margin-left:auto}
.nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0}
.nav a{color:var(--text); text-decoration:none; font-weight:500; font-size:.95rem; opacity:.9}
.nav a:hover{opacity:1}
.nav-actions{display:flex; gap:10px; margin-left:8px}
.icon-btn{background:transparent; border:0; color:var(--text); padding:6px; border-radius:10px; cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.nav-toggle{display:none; background:transparent; border:0; color:var(--text); padding:8px; border-radius:10px; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:4px 0}
.searchbar{display:flex; padding:10px 0}
.searchbar input{width:100%; background:#1a1a1e; color:var(--text); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px 14px}

/* Hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.hero-track{position:relative}
.hero-slide{min-height:68vh; display:none; align-items:center}
.hero-slide.is-active{display:flex}
.hero-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; align-items:center; padding:48px 0}
.hero-copy h1,.hero-copy h2{font-size: clamp(2rem, 4vw + .5rem, 3.5rem); line-height:1.1; margin:.2em 0}
.hero-copy p{color:var(--muted); font-size:1.05rem; max-width:52ch}
.cta{margin-top:18px; display:flex; gap:12px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.16); color:var(--text); text-decoration:none; background:transparent}
.btn:hover{background:rgba(255,255,255,.08)}
.btn-primary{background: var(--link); color:white; border-color: transparent}
.btn-primary:hover{filter:brightness(1.1)}

.hero-art{display:flex; justify-content:center}
.device{width:min(480px, 70vw); aspect-ratio: 9/19; border-radius:36px; position:relative; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 40px 120px -20px var(--accent, #0071e3)}
.device::before{content:""; position:absolute; inset:10px; border-radius:30px; background: radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.2), rgba(255,255,255,.04) 40%, rgba(0,0,0,.4) 70%), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.5)); mask: radial-gradient(120% 180% at 0% 0%, #000 60%, transparent 61%)}
.device-phone{--accent:#0071e3}
.device-watch{--accent:#00b06b; border-radius:30px; aspect-ratio: 1/1; width:min(360px, 60vw)}
.device-watch.small{width:min(300px, 54vw)}
.device-tablet{--accent:#b000e8; aspect-ratio: 3/2; border-radius:28px}
.device-laptop{--accent:#00a2ff; aspect-ratio: 16/10; border-radius:22px}
.device-buds{--accent:#ff7a00; aspect-ratio: 4/3; border-radius:24px}

.hero-controls{display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 0 28px}
.pill{background:var(--pill); color:var(--text); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:8px 12px; cursor:pointer}
.pill:hover{border-color:rgba(255,255,255,.16)}
.dots{display:flex; gap:8px}
.dots button{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); border:0}
.dots button[aria-current="true"]{background:var(--text)}

/* Promos */
.promos{display:grid; grid-template-columns: repeat(2, 1fr); gap:18px; padding:28px 0}
.tile{position:relative; overflow:hidden; border-radius:20px; text-decoration:none; color:inherit; border:1px solid rgba(255,255,255,.08); min-height:260px; display:grid; grid-template-columns: 1.1fr .9fr; align-items:center}
.tile-light{background: linear-gradient(180deg, #f5f5f7, #ececf1); color:#111}
.tile-dark{background: linear-gradient(180deg, #111, #0d0d12); color:#eee}
.tile-copy{padding:28px}
.tile-copy h3{font-size:1.8rem; margin:.2em 0}
.tile-copy p{opacity:.85; margin:0}
.tile-art{display:flex; justify-content:center; padding:18px}
.tile .device{width:min(360px, 50vw)}

/* Info Cards */
.info{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; padding:24px 0 56px}
.info-card{background:var(--bg-elev); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}
.info-card h4{margin:.2em 0 0.3em}
.info-card p{margin:0; color:var(--muted)}

/* Footer */
.site-footer{background:#0a0a0c; border-top:1px solid rgba(255,255,255,.06); color:#bdbdc6}
.footer-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; padding:24px 0}
.site-footer h5{margin:.2em 0 .6em; color:#e3e3ea}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer a{color:inherit; text-decoration:none}
.site-footer a:hover{color:#fff}
.footnote{border-top:1px solid rgba(255,255,255,.06); padding:14px 0; font-size:.9rem}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; text-align:center}
  .tile{grid-template-columns:1fr}
}
@media (max-width: 860px){
  .nav-toggle{display:inline-block}
  .nav{position:fixed; inset:52px 0 auto 0; background:rgba(0,0,0,.9); border-bottom:1px solid rgba(255,255,255,.06); display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column; padding:12px 20px}
}
@media (max-width: 720px){
  .promos{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
/* === Interaktive Hover/Fokus Effekte === */
/* Smooth transitions */
a, .btn, .pill, .nav a, .brand, .tile, .device, .icon-btn, .dots button{
  transition: color .2s ease, background .2s ease, border-color .25s ease,
              transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1),
              opacity .2s ease, filter .35s ease;
}

/* Input focus */
.searchbar input:focus{outline:none; border-color:rgba(255,255,255,.24); box-shadow:0 0 0 3px rgba(41,151,255,.25)}

/* Accessible focus styles */
:focus-visible{outline:2px solid var(--link); outline-offset:2px; border-radius:8px}
.nav a:focus-visible::after{transform:scaleX(1); opacity:1}

/* Enhanced hover effects for pointer devices */
@media (hover: hover) and (pointer: fine){
  /* Nav underline reveal */
  .nav a{position:relative}
  .nav a::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:currentColor;
    opacity:.4; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s}
  .nav a:hover::after{transform:scaleX(1); opacity:.8}
  .brand:hover{color:#fff; text-shadow:0 0 12px rgba(255,255,255,.18)}

  /* Buttons */
  .btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.18) inset}
  .btn:active{transform:translateY(0)}
  .btn-primary:hover{box-shadow:0 10px 28px -12px rgba(41,151,255,.55)}

  .icon-btn:hover{transform:translateY(-1px)}
  .icon-btn:active{transform:translateY(0)}

  /* Hero controls & dots */
  .pill:hover{transform:translateY(-1px); background:#242428}
  .pill:active{transform:translateY(0)}
  .dots button:hover{transform:scale(1.2); background:#fff}

  /* Tiles & device cards */
  .tile:hover{transform:translateY(-4px); box-shadow:0 30px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14) inset; border-color:rgba(255,255,255,.18)}
  .tile-dark:hover{filter:brightness(1.03)}
  .tile-light:hover{filter:brightness(0.98)}
  .tile:hover .device{transform:translateY(-4px) scale(1.03); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1), 0 50px 140px -20px var(--accent, #0071e3)}

  /* Footer */
  .site-footer a:hover{text-decoration:underline}
}

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