:root{
  --bg: #0b0d10;
  --bg-2:#11151a;
  --text:#e6e6e6;
  --muted:#a7b0bb;
  --brand:#ffd100; /* Rockstar-ähnlicher Akzent */
  --card:#161a21;
  --border:#232a33;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --radius: 14px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.5 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* Helpers */
a{ color:inherit; text-decoration:none }
img{ display:block; width:100%; height:auto }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

/* Layout */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(to bottom, rgba(11,13,16,.9), rgba(11,13,16,.4), transparent);
  backdrop-filter: blur(8px);
}
.navbar{
  max-width:1240px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:24px;
}
.brand{ font-weight:800; letter-spacing:.5px }
.nav-links{ list-style:none; margin:0; padding:0; display:flex; gap:16px }
.nav-links a{ padding:8px 10px; border-radius:10px }
.nav-links a.active,
.nav-links a:hover{ background:rgba(255,255,255,.06) }

.nav-actions{ margin-left:auto; display:flex; gap:12px }
.nav-inline-form select{
  background:var(--card); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:6px 10px;
}

/* Hero */
.hero{
  position:relative; min-height:62vh;
  display:grid; place-items:center;
  background: var(--bg) no-repeat center/cover;
  background-image: var(--hero-img), radial-gradient(1200px 600px at 70% 0%, rgba(255,209,0,.12), transparent 60%);
}
.hero__overlay{
  position:absolute; inset:0;
  background: radial-gradient(800px 400px at 25% 0%, rgba(255,255,255,.05), transparent 70%),
              linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.7));
}
.hero__content{ position:relative; text-align:center; padding:40px 20px }
.hero h1{
  margin:0 0 16px; font-size: clamp(28px, 4vw, 48px);
  text-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); box-shadow:var(--shadow);
}
.btn-primary{ background:var(--brand); color:#111; border-color:#000; font-weight:700 }

/* Sections */
.section--padded{ padding:48px 20px }
.section__header{
  max-width:1240px; margin:0 auto 18px; display:flex; align-items:flex-end; justify-content:space-between;
}
.section__header h2{ margin:0; font-size:clamp(20px, 3vw, 28px) }
.link-more{ opacity:.8 }
.link-more:hover{ opacity:1 }

/* Cards */
.card-grid{
  max-width:1240px; margin:0 auto; display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 12;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow) }
@media (min-width:700px){
  .card{ grid-column: span 6 }
}
@media (min-width:1024px){
  .card{ grid-column: span 4 }
}
.card__media{ aspect-ratio: 16 / 9; overflow:hidden }
.card__body{ padding:14px 14px 16px }
.card__body h3{ margin:0 0 6px; font-size:18px }

/* Footer */
.footer-inner{
  max-width:1240px; margin:0 auto; padding:22px 20px;
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
}

.footer-right{
  display:flex; align-items:center; gap:20px;
  flex-wrap:wrap; justify-content:flex-end;
}

.footer-links{
  display:flex; gap:16px; list-style:none; margin:0; padding:0;
}
.footer-links a{ opacity:.85; transition:opacity .2s }
.footer-links a:hover{ opacity:1 }

/* Language dropdown */
.footer-lang select{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 10px;
  font-size:14px;
  cursor:pointer;
}
.footer-lang select:hover{
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand);
}

/* Navbar */
.navbar{
  max-width:1440px; margin:0 auto; padding:16px 30px;
  display:flex; align-items:center;
}
.nav-side{ width:180px; display:flex; justify-content:flex-end; }
.nav-left{ justify-content:flex-start; }
.nav-center{
  margin:0 auto; padding:0; list-style:none;
  display:flex; gap:28px; align-items:center; justify-content:center;
}
.brand-logo{ height:32px; width:auto; filter:brightness(1.2); transition:opacity .2s; }
.brand-logo:hover{ opacity:.85; }

/* Dropdown */
.dropdown{ position:relative; }
.dropbtn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; color:#fff; cursor:pointer;
  font:600 15px/1 Inter, system-ui, sans-serif; text-transform:uppercase; letter-spacing:.4px;
  padding:8px 10px; border-radius:10px;
}
.dropbtn:hover{ background:rgba(255,255,255,.06); }
.caret{ opacity:.75; transition:transform .18s ease; }
.dropdown[aria-expanded="true"] .caret,
.dropbtn[aria-expanded="true"] .caret{ transform:rotate(180deg); }

.dropdown__menu{
  position:absolute; top:110%; left:50%; transform:translateX(-50%);
  min-width:260px; padding:8px;
  background:rgba(17,21,35,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  display:none; z-index:1050;
}
.dropdown__menu li{ list-style:none; }
.dropdown__menu a{
  display:block; padding:10px 12px; border-radius:8px; color:#e6e6e6; font-weight:600; letter-spacing:.2px;
}
.dropdown__menu a:hover{ background:rgba(255,255,255,.06); }

/* Sichtbarkeit bei Hover/Fokus */
.dropdown:where(:hover, :focus-within) .dropdown__menu{ display:block; }
/* Für Button-Variant setzen wir aria-expanded im JS → zusätzlich erlauben: */
.dropdown.open .dropdown__menu{ display:block; }

/* Optional: kleinere Screens Abstände etwas kompakter */
@media (max-width:920px){
  .nav-side{ width:120px; }
  .nav-center{ gap:20px; }
}

.brand-logo{
  height:32px; width:auto;
  filter:brightness(1.2);
  transition:opacity .2s ease;
}
.brand-logo:hover{ opacity:.8; }

/* Team-Container jetzt wie Cards begrenzen */
.team-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
@media (max-width:1200px){ .team-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:900px){  .team-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:600px){  .team-grid{ grid-template-columns: 1fr; } }

.team-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #11151a;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.team-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.45); }

.team-card__link { color: inherit; text-decoration: none; display: grid; grid-template-rows: auto 1fr; height: 100%; }

.team-card__media {
  position: relative;
  width: 100%;
  height: 320px; /* <– feste Höhe, verhindert Überzoom */
  background: #0d0f12;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.team-card__media img{
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .3s ease;
}
.team-card:hover .team-card__media img { transform: scale(1.05); }
.team-card.is-avatar .team-card__media {
  height: 260px;
  border-radius: 50%;
  background: #0b0d10;
}
.team-card.is-avatar .team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Rollen-Badge unten links */
.team-card__badge {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(0,0,0,.7); color: #fff; font-weight: 800; letter-spacing: .5px;
  padding: 6px 10px; border-radius: 10px; font-size: 12px; text-transform: uppercase;
  backdrop-filter: blur(6px);
}

/* Body */
.team-card__body {
  padding: 16px;
  text-align: center;
}
.team-card__title {
  margin: 10px 0 4px;
  font-size: 20px;
  font-weight: 700;
}
.team-card__desc {
  color: #a7b0bb;
  font-size: 14px;
  min-height: 1.5em;
}
.team-card__cta {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 16px;
  background: #2e2e38;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  transition: background .2s ease;
}
.team-card__cta:hover { background: #3a3a47; }

/* Badge unten links, falls du sie behalten willst */
.team-card__badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

/* === FULL-BLEED PRODUCT SECTION – Rockstar Style === */
.products--fullbleed { padding: 0; margin: 0; position: relative; }
.products--fullbleed .prod-viewport {
  position: relative;
  width: 100%;
  height: clamp(70vh, 82vh, 96vh);
  overflow: hidden;
  background: #000;
}

/* Slides */
.prod-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: 100%;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.prod-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Hintergrund-Bild oder -Video */
.prod-media { position: absolute; inset: 0; }
.prod-media img,
.prod-media .prod-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.5s ease;
}
.prod-slide:is(:hover,:focus-visible) .prod-media img { transform: scale(1.05); }
.prod-gradient {
  position: absolute;
  inset: 0;
  /* Oben leicht hell, unten deutlich dunkel für Übergang */
  background:
    linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.05) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Text unten */
.prod-copy {
  position: absolute;
  bottom: clamp(40px, 8vh, 100px);
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  max-width: 1240px;
  padding: 0 clamp(20px, 4vw, 60px);
  color: #fff;
  z-index: 5;
  text-shadow: 0 10px 25px rgba(0,0,0,.6);
  transition: transform .3s ease;
  will-change: transform;
}

/* Parallax scroll effect */
body:not(.no-parallax) .prod-copy {
  transform: translate(-50%, 5vh);
}
body.scrolled .prod-copy {
  transform: translate(-50%, -2vh);
}

/* Texttypografie */
.prod-tag {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .4px;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.prod-title {
  font-weight: 900;
  font-size: clamp(26px, 5vw, 52px);
  margin: 0 0 6px;
}
.prod-desc {
  font-size: 16px;
  opacity: .9;
  max-width: 64ch;
  margin: 0 0 18px;
}
.prod-cta {
  display: inline-block;
  background: #2e2e38;
  padding: 12px 18px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.1);
  transition: background .25s ease;
}
.prod-cta:hover { background: #3a3a47; }

/* Navigation */
.prod-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  z-index: 10;
  cursor: pointer;
}
.prod-nav.prev { left: 14px; }
.prod-nav.next { right: 14px; }
.prod-nav:hover { background: rgba(0,0,0,.7); }

.prod-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 9;
}
.prod-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  background: transparent;
  cursor: pointer;
}
.prod-dot[aria-selected="true"] { background: #fff; }

/* === Dunkler Übergang am Ende der Section === */
.products--fullbleed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(11,13,16,1) 100%);
  z-index: 8;
  pointer-events: none;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
  .prod-copy {
    bottom: clamp(20px, 8vh, 60px);
    text-align: center;
  }
  .prod-title { font-size: clamp(22px, 6vw, 36px); }
  .prod-desc  { font-size: 14px; }
}

/* AetherM Navbar auf Basis von Bootstrap */
.am-navbar {
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 20px;
}

/* Dark-Mode für Navbar-Background */
.navbar {
  background: transparent; /* site-header macht den Blur / Gradient */
}

/* Navbar-Texte */
.navbar-nav .nav-link {
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* Dark Dropdown auf dein Design trimmen */
.dropdown-menu-dark {
  background: rgba(17,21,35,.96);
  border: 1px solid rgba(255,255,255,.08);
}
.dropdown-menu-dark .dropdown-item {
  color: #e6e6e6;
}
.dropdown-menu-dark .dropdown-item:hover {
  background: rgba(255,255,255,.08);
}