/* === Nav Cards – konsolidiert =========================================
   - Deko oben/unten via ::before/::after
   - Equal Height nur wo nötig
   - Lastpost: Bleed-Bild + Excerpt + stabiler CTA (ohne Springen)
   - Discord: moderner Block, Titel zentriert, Stats untereinander
   ==================================================================== */

/* ===== Variablen ===================================================== */
:root{
  --sk-gold:#F0C43A;
  --nav-radius:18px;

  --nav-deco-top-h:36px;
  --nav-deco-bottom-h:28px;
  --nav-deco-opacity:.85;

  --nav-inner-pad:2px;
}

/* ===== Grundkarte ===================================================== */
.nav-card{
  position:relative;
  border-radius:var(--nav-radius);
  background:rgba(15,20,28,.55);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
  overflow:hidden;
}

/* Deko-Layer */
.nav-card::before,
.nav-card::after{
  content:"";
  position:absolute; left:0; right:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  pointer-events:none;
  opacity:var(--nav-deco-opacity);
  z-index:0;
}
.nav-card::before{
  top:0; height:var(--nav-deco-top-h);
  background-image:var(--nav-deco-top, url('../img/ui/nav-deco-top.svg'));
  filter:saturate(112%);
}
.nav-card::after{
  bottom:0; height:var(--nav-deco-bottom-h);
  background-image:var(--nav-deco-bottom, url('../img/ui/nav-deco-bottom.svg'));
  filter:saturate(108%);
}

/* Inhaltsebene */
.nav-card__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  min-height:0; overflow:visible;
  padding:var(--nav-inner-pad);
  /*  padding-top:calc(var(--nav-inner-pad) + var(--nav-deco-top-h)); */
  padding-bottom:calc(var(--nav-inner-pad) + var(--nav-deco-bottom-h));
}

/* Headings/Listen */
.nav-card__title{
  margin:0; width:100%;
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.05rem, 1.3vw, 1.2rem);
  color:#E7EDF6; text-shadow:0 1px 2px rgba(0,0,0,.28);
  text-align:center;
}
.nav-card__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.55rem; flex:1; min-height:0;
}
.nav-card__list a{
  display:block; padding:.55rem .8rem;
  border-radius:12px;
  color:rgba(231,237,246,.9);
  text-decoration:none;
}
.nav-card__list a:hover{ background:rgba(255,255,255,.06); color:#fff; }

/* ===== Quicknav (Equal Height kontrolliert) ========================== */
.sk-quicknav.sk-quicknav--cols .sk-quicknavcols{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.10fr);
  gap:clamp(12px, 1.8vw, 22px);
  align-items:start; /* NICHT alles stretchen */
}
.sk-quicknavcols .sk-qcol{ min-width:0; display:grid; }
.sk-quicknavcols .sk-qcol > .nav-card{ height:auto; }
.sk-quicknavcols .sk-qcol--lastpost > .nav-card{ height:100%; }

/* ===== Lastpost ======================================================= */
.sk-qcol > .nav-card.nav-card--lastpost{
  display:grid; grid-template-rows:auto 1fr; height:100%;
}
.nav-card--lastpost{
  --nav-deco-top:url('../img/ui/nav-deco-top.svg');
  --nav-deco-bottom:url('../img/ui/nav-deco-bottom.svg');
}
.nav-card--lastpost:hover{
  transform:none; /* kein Lift */
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}

/* Bleed-Bild */
.nav-card--lastpost .nav-card__bleed-top{
  position:relative; display:block; width:100%;
  height:0; padding-top:56.25%;
  background:var(--thumb) center/cover no-repeat;
  border-radius:14px;
  margin-top:calc(var(--nav-deco-top-h, 28px) - 4px);
  margin-bottom:.4rem;
  z-index:1;
}
@supports (aspect-ratio: 16 / 9){
  .nav-card--lastpost .nav-card__bleed-top{ padding-top:0; height:auto; aspect-ratio:16/9; }
}

/* Inhalt/Body */
.nav-card--lastpost .nav-card__inner{
  z-index:2; display:flex; flex-direction:column;
  min-height:0; height:100%;
  padding-top:var(--nav-inner-pad);
  padding-bottom:calc(var(--nav-inner-pad) + var(--nav-deco-bottom-h));
}
.nav-card--lastpost .sk-lastpost{
  display:grid; grid-template-rows:auto 1fr auto; row-gap:.45rem;
  flex:1 1 auto; min-height:0;
}
/* legacy compatibility (pre-flatten markup) */
.nav-card--lastpost .sk-lastpost__body{ display:contents; }
.nav-card--lastpost .sk-lastpost__title{ margin:0 0 .25rem; }
.nav-card--lastpost .sk-lastpost__excerpt{
  margin:.25rem 0 .35rem;
  color:rgba(231,237,246,.88);
  font-size:clamp(.95rem, 1.02vw, 1rem);
  line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.nav-card--lastpost .sk-lastpost__date{ margin-top:.15rem; }

/* CTA stabil (ohne absolute/Transform) */
.nav-card--lastpost .sk-lastpost__cta{
  position:static !important;
  justify-self:center; align-self:center;
  margin:0; min-height:42px;
  line-height:1; padding:.55rem 1rem;
  border:1px solid rgba(240,196,58,.70);
  transform:none !important; translate:0 !important; scale:1 !important;
  transition: box-shadow .18s ease, background .18s ease, filter .18s ease;
}
.nav-card--lastpost .sk-lastpost__cta.is-bottom{
  position:static !important; left:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important; margin:0 !important; margin-top:10px !important;
}

/* Buttons in Nav-Cards: niemals transformieren */
.nav-card .sk-btn--cta,
.nav-card .sk-btn--cta:hover,
.nav-card .sk-btn--cta:focus{
  transform:none !important; translate:0 !important; scale:1 !important;
}

/* ===== Quicknav kompakter (optional) ================================= */
.sk-quicknav .nav-card{
  --nav-deco-top-h:28px;
  --nav-deco-bottom-h:20px;
  --nav-inner-pad:14px;
}
.sk-quicknav .nav-card__list a,
.sk-quicknav .sk-qmenu a{ padding:.45rem .70rem; }
.sk-quicknav .nav-card__title{ margin:0 0 .4rem; }

/* ===== Discord – modern, stacked, zentrierter Titel ================== */


.nav-card--discord{
  --nav-deco-top: url('../img/ui/nav-deco-top-steps-C.svg');
  --nav-deco-bottom: url('../img/ui/nav-deco-bottom-steps-C.svg');
  --nav-deco-top-h: 250px;        /* Höhe kannst du frei drehen */
  --nav-deco-bottom-h: 250px;



  --dc-accent:#5865F2;
  --dc-ink:#E9EFF7;
  --dc-chip:rgba(255,255,255,.06);
  --dc-chip-brd:rgba(255,255,255,.05);

  box-shadow:0 20px 50px rgba(0,0,0,.40);
}
.nav-card--discord .nav-card__inner{ position:relative; overflow:visible; }

/* Head: nur zentrierter Titel; Icon/Badge aus */
.nav-card--discord .dcw-head{
  display:flex; align-items:center; justify-content:center;
  margin:0 0 .6rem;
}
.nav-card--discord .dcw-brand,
.nav-card--discord .dcw-icon,
.nav-card--discord .dcw-badge{ display:none !important; }
.nav-card--discord .dcw-title{
  margin:0; width:100%;
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.05rem, 1.3vw, 1.2rem);
  color:#E7EDF6; text-shadow:0 1px 2px rgba(0,0,0,.28);
  text-align:center;
}

/* Stats: einspaltig, edge-to-edge Look ohne „abgeschnitten“ */
.nav-card--discord .nav-card__inner{ --pad: var(--nav-inner-pad, 16px); }
.nav-card--discord .dcw-stats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:.7rem;
  margin-left:calc(-1 * var(--pad) + 8px);
  margin-right:calc(-1 * var(--pad) + 8px);
  padding:0 calc(var(--pad) - 8px);
}
.nav-card--discord .dcw-stats li{
  display:flex; flex-direction:column; justify-content:center;
  min-height:56px; padding:.95rem 1rem; border-radius:12px;
  background:linear-gradient(180deg, var(--dc-chip), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px var(--dc-chip-brd), 0 3px 10px rgba(0,0,0,.12);
}
.nav-card--discord .dcw-stats .v{
  font-variant-numeric:tabular-nums;
  font-weight:900; letter-spacing:-.01em;
  font-size:clamp(1rem, 1.6vw, 1.12rem);
  line-height:1.1; color:var(--dc-ink);
}
.nav-card--discord .dcw-stats .l{ margin-top:.1rem; font-size:.85rem; opacity:.9; }

/* CTA: volle Breite, ohne Transform */
.nav-card--discord .dcw-stats + .dcw-cta{ margin-top:.9rem; }
.nav-card--discord .dcw-cta{
  display:block; width:100%; text-align:center;
  margin-left:calc(-1 * var(--pad) + 8px);
  margin-right:calc(-1 * var(--pad) + 8px);
  padding:.9rem calc(var(--pad) - 8px);
  border-radius:12px; color:#fff; text-decoration:none;
  background:linear-gradient(180deg, #5865F2, #4856D8);
  border:1px solid rgba(88,101,242,.65);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 12px 28px rgba(88,101,242,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transform:none !important;
  transition: box-shadow .18s ease, background .18s ease, filter .18s ease;
}
.nav-card--discord .dcw-cta:hover{
  box-shadow:0 16px 38px rgba(88,101,242,.42);
}

/* Leichter Card-Hover, ohne Layoutänderung */
.nav-card--discord:hover{ transform:translateY(-1px); box-shadow:0 20px 50px rgba(0,0,0,.40); }

/* Mobile Tweaks */
@media (max-width:980px){
  .nav-card--discord .nav-card__inner{ --pad:14px; }
  .nav-card--discord .dcw-title{ font-size:clamp(1rem, 3.8vw, 1.1rem); }
}
@media (max-width:420px){
  .nav-card--discord .dcw-cta{ width:100%; }
}

/* Motion-Respect */
@media (prefers-reduced-motion:reduce){
  .nav-card--discord .dcw-cta{ transition:none; }
}





/* Höhere Deco-Höhen (anpassbar) */
.sk-quicknav .nav-card{
  --nav-deco-top-h: 56px !important;
  --nav-deco-bottom-h: 46px !important;
}

/* Gold-Variante */
.nav-card{
  --nav-deco-top: url('../img/ui/nav-deco-top-rect-ellipse-gold.svg') !important;
  --nav-deco-bottom: url('../img/ui/nav-deco-bottom-rect-ellipse-gold.svg') !important;
}

/* Optional: Discord-Box mit Blau */
.nav-card--discord{
  --nav-deco-top: url('../img/ui/nav-deco-top-rect-ellipse-blue.svg') !important;
  --nav-deco-bottom: url('../img/ui/nav-deco-bottom-rect-ellipse-blue.svg') !important;
  --nav-deco-top-h: 50px !important;
  --nav-deco-bottom-h: 40px !important;
}





/* === HOMEPAGE: Kompakt-Layout für Lastpost + Discord ================= */

/* Lastpost kompakter: weniger Deko/Pad, Bild flacher, Text enger */
.home .sk-qcol--lastpost > .nav-card.nav-card--lastpost{
  --nav-deco-top-h: 40px !important;
  --nav-deco-bottom-h: 28px !important;
  --nav-inner-pad: 12px !important;
}
.home .nav-card--lastpost .nav-card__bleed-top{
  aspect-ratio: 5 / 3 !important;                   /* flacher als 16:9 */
  max-height: clamp(140px, 22vh, 180px) !important; /* Deckel drauf */
  margin-bottom: .35rem !important;
}
.home .nav-card--lastpost .sk-lastpost__title{ margin: 0 0 .20rem !important; }
.home .nav-card--lastpost .sk-lastpost__excerpt{
  -webkit-line-clamp: 2 !important;                 /* 2 Zeilen statt 3 */
  margin: .20rem 0 .25rem !important;
}
.home .nav-card--lastpost .sk-lastpost__date{ margin-top: .12rem !important; }
.home .nav-card--lastpost .sk-lastpost__cta{
  min-height: 40px !important;
  padding: .50rem .90rem !important;
}

/* Discord kompakter: weniger Deko/Pad, kleinere Tiles, CTA niedriger */
.home .sk-qcol--right > .nav-card.nav-card--discord{
  --nav-deco-top-h: 44px !important;
  --nav-deco-bottom-h: 34px !important;
  --nav-inner-pad: 2px !important;
}
.home .nav-card--discord .dcw-head{ margin-bottom: .50rem !important; }
.home .nav-card--discord .dcw-stats{ gap: .50rem !important; }
.home .nav-card--discord .dcw-stats li{
  min-height: 48px !important;
  padding: .70rem .85rem !important;
}
.home .nav-card--discord .dcw-cta{
  height: 44px !important;
  padding: .75rem 1rem !important;
  margin-top: .60rem !important;
}

/* Falls die gesamte rechte Aside (Discord) noch zu hoch wirkt,
   Deko-Höhe dort zusätzlich zügeln: */
.home .sk-qcol--right > .nav-card{
  --nav-deco-top-h: 44px !important;
  --nav-deco-bottom-h: 34px !important;
}