:root{
  --bg:#000;
  --fg:#eaeaea;
  --muted:rgba(234,234,234,.72);
  --card:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.14);
  --max:980px;
  --accent:#39ff14;
}
*{box-sizing:border-box}
html,body{height:100%; background:var(--bg);}
body{
  margin:0;
  color:var(--fg);
  font-family:"Courier New", Courier, monospace;
  font-weight:700;
  line-height:1.5;
}
a{color:var(--fg); text-decoration:none}
a:hover{opacity:.92; text-decoration:underline}
.wrap{max-width:var(--max); margin:0 auto; padding:36px 18px 92px;}

/* TASK 2: Abstand Header vergrößert */
.header{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-bottom:48px;}

.logo{width:132px; height:auto; display:block}
.logo-link{display:inline-flex; border:0}
.kicker{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-family:"Montserrat","Avenir Next","Futura",sans-serif; font-weight:600}
.kicker a{color:var(--muted); text-decoration:none}
h1{margin:6px 0 10px; font-size:34px; font-family:"Montserrat","Avenir Next","Futura",sans-serif; font-weight:600}
.lead{margin:0; max-width:760px; color:var(--muted); font-weight:700}
.grid{display:grid; gap:16px; grid-template-columns:1fr;}
@media(min-width:900px){ .grid{grid-template-columns:1fr 1fr;} .header{flex-wrap:nowrap;} }
.card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px 16px 14px;}
.card h2{margin:0 0 10px; font-size:18px; font-family:"Montserrat","Avenir Next","Futura",sans-serif; font-weight:600}
.h2-accent{color:var(--accent)}
.card p{margin:0 0 10px; color:var(--muted); font-weight:700}
.card p:last-child{margin-bottom:0}
ul{margin:8px 0 0 18px; padding:0; color:var(--muted); font-weight:700}
li{margin:6px 0}
.links-list{list-style:disc}
.links-list .label{color:var(--muted)}
.label{color:var(--muted)}
.mt{margin-top:12px}
.social{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.social li{margin:0; display:flex; align-items:center; gap:10px;}

/* TASK 1: Icons sichtbar gemacht */
.icon{width:18px; height:18px; flex:0 0 auto; opacity:.95; filter: invert(1);}

.social a{color:var(--fg)}
.footer{
  position:fixed;
  right:14px;
  bottom:14px;
  background:rgba(0,0,0,.55);
  border:1px solid var(--border);
  border-radius:14px;
  padding:8px 10px;
  backdrop-filter: blur(6px);
}
.nav{display:flex; gap:10px; flex-wrap:wrap; font-size:12px;}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--fg); text-decoration:none; opacity:1}

/* TASK 5: Updates Layout (Neu) */
.updates-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-horizontal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.update-media {
  width: 100%;
}

.update-content {
  width: 100%;
}

/* Ab 700px Breite: Bild links, Text rechts */
@media(min-width: 700px){
  .card-horizontal {
    flex-direction: row;
    align-items: flex-start;
  }
  .update-media {
    flex: 0 0 35%; /* Bild nimmt 35% der Breite ein */
    max-width: 300px;
  }
  .update-content {
    flex: 1; /* Text nimmt den Rest ein */
  }
}