/* ============================================
   Netas24 – Magazin Startseite
   Dark + Emerald Brand Look
   ============================================ */

/* Brand-Basis aus deiner Index-Seite */
:root{
  --primary-color: #0fc947;   /* Emerald hell */
  --primary-dark:  #009A63;   /* mittleres Smaragd */
  --primary-light: #26F0A2;   /* leuchtendes Highlight */

  --secondary-color: #000000;

  --text-dark: #FFFFFF;
  --text-light: #FFFFFF;
  --text-gray: #D1D5DB;

  --bg-light: #0A0A0A;
  --bg-white: #141414;        /* Content-Flächen */
  --bg-dark:  #000000;

  --border-color: #2A2A2A;

  --shadow-sm: 0 2px 8px rgba(0, 211, 137, 0.20);
  --shadow-md: 0 6px 22px rgba(0, 211, 137, 0.28);
  --shadow-lg: 0 12px 48px rgba(0, 211, 137, 0.35);

  --transition: all 0.22s ease-out;

  --metallic-gradient: linear-gradient(
    135deg,
    #00D389 0%,
    #00B06D 25%,
    #26F0A2 50%,
    #00A565 75%,
    #00D389 100%
  );

  /* Magazin-spezifische Ableitung */
  --bg: #050606;
  --bg-soft: #0c0f14;
  --card: #111722;
  --text: var(--text-light);
  --muted: var(--text-gray);
  --brand: var(--primary-light);
  --accent: #31c6ff;                 /* leichter Kontrast-Akzent */
  --ring: rgba(38, 240, 162, .45);
  --radius: 18px;
  --maxw: 1180px;
}

/* Basis / Reset */

*{box-sizing:border-box}

html,body{
  margin:0;
  background:
    radial-gradient(circle at top,
      rgba(38,240,162,0.14) 0,
      rgba(5,6,6,1) 52%,
      #000 100%);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
}

a{
  color:var(--brand);
  text-decoration:none;
  transition:color 0.18s ease-out, text-decoration-color 0.18s ease-out;
}
a:hover{
  text-decoration:underline;
}

/* Layout-Wrapper */

.wrapper{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24px 20px 40px;
}

/* Header / Navigation */

header.site{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0 4px;
}

header.site .logo{
  display:flex;
  align-items:center;
  gap:10px;
}

header.site .logo img{
  height:40px;
  width:auto;
  display:block;
}

header.site .logo span{
  font-size:0.8rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
}

header.site nav a{
  margin-left:16px;
  color:var(--muted);
  font-size:0.95rem;
}
header.site nav a[aria-current="page"]{
  color:var(--text);
}

/* Hero-Bereich Magazin */

.hero-magazin{
  background:
    radial-gradient(circle at top left,
      rgba(38,240,162,0.16) 0,
      transparent 55%),
    linear-gradient(180deg,
      rgba(15,23,42,.85),
      rgba(15,23,42,.96));
  border:1px solid rgba(255,255,255,.05);
  border-radius:calc(var(--radius)*1.4);
  padding:32px 26px 28px;
  margin-top:80px;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}

/* kleiner „Magazin“-Badge oben */

.hero-magazin::before{
  content:"Netas24 Magazin";
  position:absolute;
  top:18px;
  right:26px;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(0,0,0,0.7);
  border:1px solid rgba(38,240,162,0.45);
}

/* Glow-Kante */

.hero-magazin::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border-top:1px solid rgba(38,240,162,0.35);
  pointer-events:none;
}

.hero-magazin h1{
  margin:0 0 4px 0;
  font-size:34px;
  letter-spacing:.3px;
}
.hero-magazin p{
  margin:8px 0 0 0;
  color:var(--muted);
}

/* Filter / Controls */

.controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:22px 0 4px;
}

/* Chips für Kategorien / Filter */

.chip{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
  font-size:0.9rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:
    background 0.18s ease-out,
    color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    transform 0.12s ease-out;
}
.chip:hover{
  border-color:rgba(38,240,162,0.55);
  color:var(--text);
  transform:translateY(-1px);
}
.chip::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(148,163,184,0.6);
}
.chip.active{
  background:rgba(15,23,42,0.9);
  border-color:var(--ring);
  box-shadow:0 0 0 1px rgba(15,23,42,1), 0 0 0 3px var(--ring);
  color:var(--text);
}
.chip.active::before{
  background:var(--metallic-gradient);
}

/* Suche */

.search{
  flex:1;
  min-width:220px;
}

.search input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#05080c;
  color:var(--text);
  font-size:0.95rem;
  box-shadow:var(--shadow-sm);
  transition:border-color 0.18s ease-out, box-shadow 0.18s ease-out, background 0.18s ease-out;
}
.search input::placeholder{
  color:rgba(148,163,184,0.75);
}
.search input:focus-visible{
  outline:none;
  border-color:var(--primary-light);
  box-shadow:0 0 0 1px rgba(15,23,42,1),0 0 0 3px var(--ring);
  background:#05080c;
}

/* Featured-Bereich – große aktuelle Ausgabe */

.feature{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px;
  margin:28px 0;
}
@media(max-width:900px){
  .feature{
    grid-template-columns:1fr;
  }
}

/* Karten */

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(38,240,162,0.55);
}

.card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#0a0f15;
}

.card .pad{
  padding:16px 16px 18px;
}

.card h3{
  margin:0 0 6px 0;
  font-size:20px;
}

.meta{
  color:var(--muted);
  font-size:14px;
  margin-bottom:6px;
}

.lead{
  color:var(--text);
  font-size:0.96rem;
}

/* Grid der weiteren Ausgaben */

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:18px;
}
@media(max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr;}
}

/* CTA-Bereich Newsletter / Abo */

.cta{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:
    radial-gradient(circle at top left,
      rgba(38,240,162,0.16) 0,
      transparent 55%),
    linear-gradient(180deg,
      rgba(10,10,10,0.96),
      rgba(15,23,42,0.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:20px 18px;
  margin:28px 0;
  box-shadow:var(--shadow-md);
}
.cta h2{
  margin:0;
}
.cta p{
  margin:4px 0 0 0;
  color:var(--muted);
  font-size:0.95rem;
}
.cta .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}
.cta input{
  flex:1;
  min-width:220px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#05080c;
  color:var(--text);
  font-size:0.95rem;
}
.cta input::placeholder{
  color:rgba(148,163,184,0.8);
}

/* Button */

.btn{
  display:inline-block;
  background:var(--metallic-gradient);
  color:#020617;
  border-radius:12px;
  padding:10px 16px;
  border:0;
  font-weight:600;
  font-size:0.96rem;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
}
.btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
}
.btn:active{
  transform:translateY(0);
  box-shadow:var(--shadow-sm);
}

/* Autor-Karte (z.B. Marco) */

.author{
  display:flex;
  gap:14px;
  align-items:center;
  background:var(--bg-soft);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:16px;
}
.author img{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  background:#0a0f15;
  box-shadow:var(--shadow-sm);
}
.author .name{
  font-weight:600;
}
.author .role{
  font-size:0.9rem;
  color:var(--muted);
}

/* Footer */

footer.site{
  color:var(--muted);
  padding:26px 0 10px;
  font-size:0.9rem;
  border-top:1px solid rgba(255,255,255,0.05);
  margin-top:32px;
}

/* Screenreader Only */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Mobile Feintuning */

@media(max-width:768px){
  .hero-magazin{
    margin-top:100px;
    padding:24px 18px 22px;
  }
  .hero-magazin::before{
    top:14px;
    right:18px;
  }
}