:root {
  --bg:#0e0e10; --card-bg:#1b1b1e; --text:#eaeaea; --accent:#4c8dff;
  --radius:14px; --shadow:0 0 18px rgba(0,0,0,.4); --hover:#27272b;
}
*{box-sizing:border-box;font-family:system-ui,sans-serif}
html,body{min-height:100vh;margin:0;background:var(--bg);color:var(--text);display:flex;flex-direction:column}

/* ===== Banner ===== */
header{
  position:relative;height:400px;width:100%;
  background:url("/assets/banner.png") center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  border-bottom-left-radius:22px;border-bottom-right-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.4)
}
header::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(1px)}
header h1,header h3{position:relative;z-index:1;margin:0}
header h1{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:800;color:#fff}
header h3{margin-top:.6rem;font-size:clamp(1rem,2vw,1.4rem);letter-spacing:2px;text-transform:uppercase;color:#d6e2ff}

main{flex:1;display:flex;flex-direction:column;align-items:center;padding:3rem 1rem}
.content{width:100%;max-width:1000px}

/* ===== Kartenliste ===== */
.card{
  width:100%;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.5rem 2rem;margin-bottom:1.2rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer
}
.card:hover{background:var(--hover);transform:translateY(-2px);box-shadow:0 0 25px rgba(76,141,255,.25)}
.card-content{display:flex;align-items:center;gap:1rem}
.card-content i{color:var(--accent);font-size:1.3rem}
.card-title{font-weight:600}

/* ===== Detailseite ===== */
.back-btn{display:inline-block;margin-bottom:1.2rem;color:var(--accent);cursor:pointer}
#product-title{font-size:2rem;font-weight:700;margin:0 0 1.5rem;color:var(--accent)}
.info-card{
  background:var(--card-bg);border-radius:var(--radius);box-shadow:0 0 25px rgba(0,0,0,.4);
  padding:2rem;margin-bottom:2rem
}
.info-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding:.45rem 0;color:#d1d5db}
.info-row strong{color:var(--accent)}
.info-desc{margin-top:1rem;color:#b5b5b5}
.support-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.hidden{display:none}

/* ===== Footer ===== */
footer{text-align:center;padding:2rem 1rem;background:var(--bg);color:#c9d1d9;margin-top:auto}
.social-icons{font-size:1.5rem;margin-bottom:1rem}
.social-icons a{margin:0 .6rem;color:#c9d1d9;transition:transform .3s,color .3s}
.social-icons a:hover{color:#58a6ff;transform:scale(1.2)}
footer p{color:#8b949e;margin-top:1rem;font-size:.95rem}

/* === Beta-Banner (zweizeilig mit linker Spalte) === */
.beta-banner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(90deg, #ff9a00, #ff5e62, #a445b2);
  color: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 20px rgba(255, 94, 98, 0.3);
  font-weight: 500;
  animation: fadeIn 0.6s ease;
  gap: 1.2rem;
}

/* Linker BETA-Block */
.beta-left {
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 1.1rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Vertikaler Divider */
.beta-divider {
  width: 2px;
  height: 3.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
}

/* Textblock rechts */
.beta-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  line-height: 1.4;
  font-size: 0.95rem;
}

/* Linkstil */
.beta-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}
.beta-link:hover {
  color: #ffe2c9;
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.legal-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: 0.25s;
}

.legal-card:hover {
  background: var(--hover);
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(76,141,255,0.25);
}

.legal-card i {
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

.legal-card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.assistance-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--accent);
  text-align: center;
}

.legal-text{
  white-space: pre-wrap;
  line-height: 1.55;
}

/* Fade-In Animation */
/*@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}*/