/* ============================================================
   Nabel Alsulaiman · Downloadportal — Design D (Brandboard)
   Gemeinsames Stylesheet für alle Portal-Seiten. Nur Hell-Modus.
   ============================================================ */
:root{
  --bg:#EDE0D2; --card:#FFFFFF; --ink:#121012; --muted:#6B5A5F;
  --gold:#E8B741; --gold-d:#B8860B; --pink:#E5A9B3; --mauve:#6E4550;
  --dot:rgba(110,69,80,.10);
  --card-border:rgba(232,183,65,.40); --card-glow:rgba(232,183,65,.20);
  --gold-glow:rgba(232,183,65,.16); --pink-glow:rgba(229,169,179,.25); --line:rgba(18,16,18,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:20px 20px;z-index:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:1}

/* NAV */
.nav{position:relative;z-index:2}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:24px 0}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}
.brand-logo{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2.5px solid var(--gold);box-shadow:0 0 16px var(--card-glow)}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-weight:800;font-size:1.12rem;letter-spacing:-.01em;line-height:1.15}
.brand-role{font-family:'Dancing Script',cursive;color:var(--gold-d);font-size:1.08rem;line-height:1}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}

/* Typo helpers */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);margin-bottom:22px}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--gold)}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:900;letter-spacing:-.02em;line-height:1.08}
.accent,.script{font-family:'Dancing Script',cursive;font-weight:700;color:var(--pink)}
.lead{color:var(--muted);font-size:1.06rem}

/* Buttons */
.btn{display:block;border:0;background:linear-gradient(180deg,#F0C84A,#E8B741);color:#121012;font-weight:800;font-size:1.02rem;padding:16px 22px;border-radius:999px;cursor:pointer;box-shadow:0 0 30px var(--card-glow);text-decoration:none;text-align:center;transition:.15s}
.btn:hover{filter:brightness(1.04)}

/* Zentrierte Box (Coming-Soon / Locked) */
.panel{position:relative;border-radius:24px;overflow:hidden;margin:40px 0;border:1.5px solid var(--card-border);
  background:radial-gradient(70% 90% at 82% 12%,var(--gold-glow),transparent 55%),radial-gradient(120% 140% at 30% 20%,#FFFDF9 0%,#FBF5EC 55%,#F7EFE9 100%);
  box-shadow:0 20px 60px rgba(80,60,20,.10),0 0 40px var(--card-glow)}
.locked{position:relative;z-index:1;text-align:center;padding:72px 40px;max-width:640px;margin:0 auto}
.locked h2{margin:4px 0 14px}

/* Downloads-Bibliothek */
.dl-head{text-align:center;max-width:640px;margin:26px auto 8px}
.dl-head h2{margin-bottom:8px}
.dl-head p{color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:26px 0}
.chip{border:1.5px solid var(--card-border);background:var(--card);color:var(--muted);border-radius:999px;padding:9px 16px;font-weight:600;font-size:.9rem;cursor:pointer;transition:.15s}
.chip:hover{color:var(--ink)}
.chip.active{background:linear-gradient(180deg,#F0C84A,#E8B741);color:#121012;border-color:transparent}
.search{margin-left:auto;min-width:200px;flex:1;max-width:280px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#FBF7F1;color:var(--ink);font-size:.92rem}
.dl-list{display:grid;gap:16px;margin:8px 0 60px}
.dl-item{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;background:var(--card);border:1.5px solid var(--card-border);border-radius:16px;padding:18px 20px;box-shadow:0 0 26px var(--card-glow),inset 0 0 18px rgba(255,255,255,.4)}
.dl-thumb{width:120px;height:74px;object-fit:cover;border-radius:10px;background:#F3E9DC}
.dl-title{font-weight:800;font-size:1.05rem;margin-bottom:6px}
.dl-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;color:var(--muted);font-size:.85rem}
.dl-meta .tag,.tag{background:rgba(232,183,65,.16);color:#7a5a10;font-weight:700;border-radius:999px;padding:3px 10px;font-size:.78rem}
.dl-video{color:var(--gold-d);font-weight:700;text-decoration:none;font-size:.85rem}
.dl-files{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.file-btn{border:1.5px solid var(--card-border);background:#FBF7F1;color:var(--ink);border-radius:10px;padding:9px 14px;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:.15s}
.file-btn:hover{background:linear-gradient(180deg,#F0C84A,#E8B741);border-color:transparent}

/* Footer */
.foot{border-top:1px solid var(--line);padding:26px 0;text-align:center;color:var(--muted);font-size:.85rem;position:relative;z-index:1}
.foot a{color:var(--muted);text-decoration:none;margin:0 6px}
.foot a:hover{color:var(--ink)}

@media(max-width:820px){
  .nav-links{gap:16px;font-size:.85rem}
  .dl-item{grid-template-columns:1fr;text-align:center}
  .dl-thumb{width:100%;height:150px}
  .search{margin:0 auto}
}
@media(max-width:600px){
  .wrap{padding:0 18px}
  .nav-inner{flex-wrap:wrap;gap:12px;padding:18px 0}
  .brand-logo{width:46px;height:46px}
  .brand-name{font-size:1rem}
  .brand-role{font-size:.95rem}
  .nav-links{width:100%;justify-content:center;gap:16px;font-size:.82rem;flex-wrap:wrap}
  .panel{margin:18px 0}
  .locked{padding:44px 20px}
  h2{font-size:clamp(1.55rem,6.5vw,2rem)}
  .lead{font-size:1rem}
  .dl-head{margin-top:16px}
  .filters{gap:8px;margin:20px 0}
  .chip{padding:8px 13px;font-size:.85rem}
  .search{margin:8px auto 0;max-width:none;width:100%}
  .dl-files{align-items:center}
  .btn{width:100%}
}