:root{
      --bg1:#0b1020; --bg2:#101a3a;
      --card: rgba(255,255,255,.08);
      --card2: rgba(255,255,255,.06);
      --text:#eaf0ff; --muted: rgba(234,240,255,.75);
      --stroke: rgba(255,255,255,.12);
      --shadow: 0 20px 60px rgba(0,0,0,.45);
      --radius: 18px;
      --accent:#ea33f7; --accent2:#00dbde;
    }
    body{
      margin:0; min-height:100vh;
      font-family: MontASPro, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 15% 10%, rgba(234,51,247,.18), transparent 60%),
        radial-gradient(900px 500px at 85% 15%, rgba(0,219,222,.16), transparent 55%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
    }

    .shell{min-height:100vh; padding:22px; display:flex; align-items:center; justify-content:center;}

	.card-glass{
	  width:min(980px, 100%);
      border-radius: var(--radius);
      background: linear-gradient(180deg, var(--card), var(--card2));
      border:1px solid var(--stroke);
      box-shadow: var(--shadow);
      overflow:hidden;
    }	

	.card-glass-stream{
	  width: min(1600px, 100%);
      border-radius: var(--radius);
      background: linear-gradient(180deg, var(--card), var(--card2));
      border:1px solid var(--stroke);
      box-shadow: var(--shadow);
      overflow:hidden;
    }



    .inner{padding:22px;}
    .brand-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
    .logos{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
    .logos img{height:150px; max-width:220px; object-fit:contain; filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));}
    .pill{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px; border:1px solid var(--stroke); background: rgba(0,0,0,.18);}
    .kicker{color:var(--muted); font-size:.95rem;}
    .title{font-family: MontASPro-SemiBold, MontASPro, sans-serif; font-size:1.6rem; margin:0;}
    .sub{color:var(--muted); margin:6px 0 0 0;}
    .hr-soft{height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); margin: 16px 0;}
	.btn-accent{
	  border:0;
	  border-radius: 12px;
	  padding: 12px 14px;
	  color:#081022;
	  background: #ff00ff;
	  font-family: MontASPro-SemiBold, MontASPro, sans-serif;
	  transition: background-color .2s ease, transform .15s ease;
	}

	/* Hover & Focus */
	.btn-accent:hover,
	.btn-accent:focus{
	  background: #0000ff;
	  color: #ffffff; /* bessere Lesbarkeit */
	  transform: translateY(-1px); /* optional, dezenter Lift */
	}
	.btn-accent:focus-visible{
	  outline: none;
	  box-shadow: 0 0 0 3px rgba(0,0,255,.35);
	}	
    .btn-ghost{
      border-radius:12px; border:1px solid var(--stroke);
      background: rgba(0,0,0,.14); color: var(--text);
      text-decoration:none; padding: 10px 12px;
      display:inline-flex; align-items:center; gap:8px;
    }
    .btn-ghost:hover{background: rgba(0,0,0,.22); color:var(--text);}
    .form-control{
      background: rgba(255,255,255,.08) !important;
      border:1px solid rgba(255,255,255,.14) !important;
      color: var(--text) !important;
      border-radius: 12px !important;
    }
    .form-control::placeholder{color: rgba(234,240,255,.55)}
    .form-control:focus{
      box-shadow: 0 0 0 .25rem rgba(234,51,247,.22) !important;
      border-color: rgba(234,51,247,.55) !important;
    }
    .footer-links{display:flex; gap:14px; flex-wrap:wrap; color: var(--muted); font-size:.95rem;}
    .footer-links a{color:var(--muted); text-decoration:none}
    .footer-links a:hover{color:var(--text); text-decoration:underline}
    .muted{color:var(--muted)}
	
	/* Rechter Content-Bereich darf wachsen */
.col-lg-8 {
  display: flex;
  flex-direction: column;
}

/* Video bekommt Priorität */
.embed-wrap {
  flex: 1;
  min-height: 420px;   /* Mobile/Tablet */
  aspect-ratio: 16 / 9;
}

/* Große Screens → noch mehr Höhe */
@media (min-width: 1200px) {
  .embed-wrap {
    min-height: 520px;
  }
}

@media (min-width: 1600px) {
  .embed-wrap {
    min-height: 620px;
  }
}

/* iframe IMMER vollflächig */
.embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}