:root{
  --bg:#060a16; --bg2:#0b1126; --glass:rgba(255,255,255,.06);
  --border:#1f2b4a; --muted:#a6b0d1; --text:#e8ecff;
  --pill:#1c2a55; --pill-border:#2a3a68;
  --shadow:0 12px 36px rgba(0,0,0,.45);
  --container: 1400px;
  --pad: 24px;
  --edgeDesktop: 16px;
  --gap: 18px;
  --cardW: 280px;
}
*{box-sizing:border-box}

/* Basis-Hintergrund */
html, body {
  min-height: 100%;
  background-color: var(--bg2);
}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);

  /* sanfter Verlauf von oben nach unten */
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;

  overflow-x:hidden;
  color-scheme:dark;

  position: relative;
  z-index: 0;
}
/* Radial-Highlights als fixes Overlay */
body::before{
  content:"";
  position: fixed;
  inset: -40vh -40vw;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(1200px 800px at 10% -10%, #0d1330 0, transparent 70%),
    radial-gradient(1200px 800px at 110% 0%, #061227 0, transparent 70%);
  background-repeat: no-repeat, no-repeat;
}

::selection{background:#243158;color:#fff}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:28px var(--pad)}

/* Header (full-bleed auf Desktop, container auf Mobile) */
.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(8,12,24,.88), rgba(8,12,24,.5) 60%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.header .container{max-width:none;padding-left:var(--edgeDesktop);padding-right:var(--edgeDesktop)}
@media (max-width: 768px){
  .header .container{max-width:var(--container);padding-left:var(--pad);padding-right:var(--pad)}
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0
}
.header-left{flex:1;display:flex;align-items:center}
.logo{height:40px;width:auto}

/* Zentrierte Titel-Gruppe */
.header-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.title{font-weight:800;font-size:clamp(20px,5vw,34px); line-height:1.1}
.subtitle{color:var(--muted);font-size:clamp(12px,2.6vw,14px); margin-top:4px}

/* Mobile: nur Logo sichtbar, Titelgruppe ausblenden */
@media (max-width: 560px){
  .header-center{ display:none; }
}

.header-right{flex:1;display:flex;justify-content:flex-end}
.input{
  background:var(--glass);border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:10px 12px;width:360px;max-width:38vw
}
@media (max-width: 560px){ .input{width:200px;max-width:60vw;min-width:160px} }

/* Hero */
.hero{border:1px solid var(--border);border-radius:16px;padding:14px;background:linear-gradient(180deg,#0a0f1f,#070b18)}
.hero h1{margin:.2em 0;font-size:clamp(18px,5vw,24px)}
.hero p{color:var(--muted);margin:6px 0 0;font-size:clamp(12px,3.4vw,14px)}

/* Toolbar */
.toolbar{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.tagbar{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--glass);border:1px solid var(--border);border-radius:999px;color:var(--text);padding:8px 12px;cursor:pointer;font-size:14px}
.btn.active{outline:2px solid rgba(108,240,255,.25);border-color:#2a3a68}
.count-pill{
  margin-left:auto;background:var(--pill);border:1px solid var(--pill-border);border-radius:999px;
  padding:8px 12px;font-weight:700;letter-spacing:.2px;box-shadow:var(--shadow);font-size:14px;
  white-space:nowrap;flex-shrink:0
}

/* ==== Layout: 4 pro Reihe (Desktop), zentriert bei <4; 2 pro Reihe (Mobil) ==== */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  margin-top: 14px;
  max-width: calc(var(--cardW) * 4 + var(--gap) * 3);
  margin-left: auto;
  margin-right: auto;
}

/* Kachel */
.card {
  width: var(--cardW);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden; /* runde Ecken clippen */
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-2px); border-color: #2a3a68; }

@media (max-width: 639px) {
  .grid { max-width: none; }
  .card { width: calc((100% - var(--gap)) / 2); }
}

/* Cover */
.cover{aspect-ratio:16/10;background:#0b1226}
@media (max-width: 560px){ .cover{aspect-ratio:16/9} }
.cover img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}

/* Body – unten/rechts genug Platz für Datum reservieren */
.card-body{
  padding: 12px 20px 46px 12px;   /* rechts & unten extra Luft */
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;             /* Bezugspunkt fürs absolute Datum */
  /* overflow: visible;  bleibt Standard – NICHT verstecken, sonst clippt Text im Body */
}
.card-title{font-weight:800;font-size:clamp(16px,2.2vw,18px);margin:0}
.card-desc{
  color:var(--muted);font-size:14px;line-height:1.6;margin:0;
  height:3.2em;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
.card-tags{display:flex;gap:6px;flex-wrap:wrap}
.badge{padding:5px 9px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.05);font-size:12px}

/* Datum – robust: unten rechts, ohne Clipping (auch kursiv) */
.date-italics{
  position: absolute;
  bottom: 10px;

  /* volle Innenbreite und rechtsbündig → kein Überstand wird abgeschnitten */
  left: 12px;
  right: 16px;
  text-align: right;

  font-style: italic;
  font-variant-numeric: tabular-nums; /* stabile Ziffernbreite */
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;

  /* Safari/WebKit Anti-Clipping */
  transform: translateX(-0.5px);
}

@media (max-width: 639px){
  .card-body{
    padding-right: 24px;          /* noch etwas mehr Luft rechts */
    padding-bottom: 48px;         /* sicherer Abstand nach unten */
  }
  .date-italics{
    right: 18px;
    font-size: 11px;              /* minimal kleiner, falls der Text „hinzugefügt am …“ lang ist */
  }
}

/* Footer */
.site-footer {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  background: #0a0f1f;
  border-top: 1px solid var(--border);
}