/* =====================================================================
   DSP Blog — Navigation + WordPress-Block-Styling auf Basis des
   gemeinsamen Design-Systems (site.css der Hauptseite, via functions.php
   eingebunden). Die :root-Token-Fallbacks unten machen diese Datei auch
   im Block-Editor bzw. falls site.css mal fehlt lauffähig.
   ===================================================================== */

:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --bg:#ffffff; --bg-muted:#f5f5f7; --text:#1d1d1f; --text-2:#6e6e73;
  --line:rgba(0,0,0,.10); --bg-dark:#0b1020; --on-dark:#f5f5f7; --on-dark-2:#9aa6bd;
  --line-dark:rgba(255,255,255,.12);
  --accent:#2563eb; --accent-hover:#1d4ed8; --accent-light:#60a5fa;
  --radius:20px; --radius-sm:14px; --pill:980px; --maxw:1120px; --nav-h:52px;
}

/* ------------------------------------------------------------------ */
/* Fixe, frostige Navigation (1:1 aus assets/menu.js übernommen)       */
/* ------------------------------------------------------------------ */
.dsp-nav{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(11,16,32,.72);-webkit-backdrop-filter:saturate(170%) blur(18px);
  backdrop-filter:saturate(170%) blur(18px);border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--font);}
.dsp-nav__inner{max-width:1120px;margin:0 auto;height:var(--nav-h,52px);display:flex;
  align-items:center;gap:18px;padding:0 22px;}
.dsp-nav__brand{display:flex;align-items:center;gap:10px;color:#f5f5f7;text-decoration:none;
  font-weight:600;font-size:.98rem;letter-spacing:-.01em;white-space:nowrap;}
.dsp-nav__brand img{width:26px;height:26px;border-radius:22%;}
.dsp-nav__links{display:flex;align-items:center;gap:2px;margin-left:auto;}
.dsp-nav__links a{color:#c4cddd;text-decoration:none;font-size:.9rem;padding:8px 12px;
  border-radius:9px;transition:background .15s,color .15s;white-space:nowrap;}
.dsp-nav__links a:hover{background:rgba(255,255,255,.08);color:#fff;}
.dsp-nav__links a.active{color:#fff;}
.dsp-nav__right{display:flex;align-items:center;gap:10px;margin-left:8px;}

/* DE/EN-Segment-Control */
.dsp-lang{display:flex;border:1px solid rgba(255,255,255,.16);border-radius:9px;overflow:hidden;}
.dsp-lang button{border:0;background:transparent;color:#9aa6bd;cursor:pointer;padding:6px 10px;
  font:600 12px var(--font);transition:background .15s,color .15s;}
.dsp-lang button:hover{color:#e2e8f0;}
.dsp-lang button.active{background:rgba(96,165,250,.24);color:#fff;}

/* Burger (nur mobil) */
.dsp-nav__burger{display:none;width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;padding:0;}
.dsp-nav__burger span{position:relative;display:block;width:17px;height:2px;border-radius:2px;
  background:#e2e8f0;transition:transform .2s,opacity .2s,background .2s;}
.dsp-nav__burger span::before,.dsp-nav__burger span::after{content:"";position:absolute;left:0;
  display:block;width:17px;height:2px;border-radius:2px;background:#e2e8f0;transition:transform .2s;}
.dsp-nav__burger span::before{top:-6px;}
.dsp-nav__burger span::after{top:6px;}
.dsp-nav__burger.open span{background:transparent;}
.dsp-nav__burger.open span::before{transform:translateY(6px) rotate(45deg);}
.dsp-nav__burger.open span::after{transform:translateY(-6px) rotate(-45deg);}

/* Mobiles Panel */
.dsp-nav__panel{display:none;position:fixed;top:var(--nav-h,52px);left:0;right:0;z-index:999;
  background:rgba(11,16,32,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);padding:8px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;}
.dsp-nav__panel.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.dsp-nav__panel a{display:block;color:#e2e8f0;text-decoration:none;font-size:1rem;
  padding:12px 16px;border-radius:10px;}
.dsp-nav__panel a:hover{background:rgba(96,165,250,.14);}
.dsp-nav__panel a.active{color:#60a5fa;}

@media (max-width:820px){
  .dsp-nav__links{display:none;}
  .dsp-nav__right{margin-left:auto;}
  .dsp-nav__burger{display:inline-flex;}
  .dsp-nav__panel{display:block;}
}

/* WordPress-Adminbar-Versatz (nur eingeloggt) */
.admin-bar .dsp-nav{top:32px;}
.admin-bar .dsp-nav__panel{top:calc(32px + var(--nav-h,52px));}
@media (max-width:782px){
  .admin-bar .dsp-nav{top:46px;}
  .admin-bar .dsp-nav__panel{top:calc(46px + var(--nav-h,52px));}
}

/* ------------------------------------------------------------------ */
/* Fixe Nav ist 52px hoch -> Hero jeder Vorlage bekommt Kopf-Abstand   */
/* ------------------------------------------------------------------ */
.section--dark.blog-hero{padding-top:calc(var(--nav-h,52px) + clamp(52px,8vh,104px));}

/* ------------------------------------------------------------------ */
/* Beitragsliste als DSP-Karten                                        */
/* ------------------------------------------------------------------ */
.blog-query .wp-block-post-template{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:clamp(20px,3vw,28px);}
.blog-query .wp-block-post-template > li{margin:0;}

.card.blog-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.card.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.28);}

.blog-card .wp-block-post-title{
  margin:0 0 8px;font-size:clamp(1.35rem,2.6vw,2.1rem);font-weight:600;
  line-height:1.12;letter-spacing:-.01em;}
.blog-card .wp-block-post-title a{color:var(--text);text-decoration:none;}
.blog-card .wp-block-post-title a:hover{color:var(--accent);}

.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;
  font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);}
.post-meta .wp-block-post-date,.post-meta .wp-block-post-terms{margin:0;font:inherit;color:inherit;}
.post-meta .wp-block-post-terms a{color:inherit;text-decoration:none;}
.section--dark .post-meta{color:var(--on-dark-2);}

.blog-card .wp-block-post-excerpt{margin:0;color:var(--text-2);font-size:1.02rem;}
.blog-card .wp-block-post-excerpt p{margin:0 0 .6em;}
.blog-card .wp-block-post-excerpt__more-link{
  display:inline-flex;align-items:center;gap:.35em;margin-top:14px;
  color:var(--accent);font-weight:600;text-decoration:none;font-size:1rem;}
.blog-card .wp-block-post-excerpt__more-link::after{content:"→";transition:transform .18s ease;}
.blog-card .wp-block-post-excerpt__more-link:hover::after{transform:translateX(4px);}

/* ------------------------------------------------------------------ */
/* Pagination (Pill-Look)                                              */
/* ------------------------------------------------------------------ */
.blog-query .wp-block-query-pagination{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vw,44px);align-items:center;}
.blog-query .wp-block-query-pagination a,
.blog-query .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:8px 14px;
  border:1px solid var(--line);border-radius:var(--pill);color:var(--text-2);text-decoration:none;
  font-size:.9rem;transition:background .15s,color .15s,border-color .15s;}
.blog-query .wp-block-query-pagination a:hover{border-color:rgba(37,99,235,.28);color:var(--accent);}
.blog-query .wp-block-query-pagination .page-numbers.current{
  background:var(--accent);color:#fff;border-color:var(--accent);}

/* ------------------------------------------------------------------ */
/* Einzelbeitrag                                                       */
/* ------------------------------------------------------------------ */
.blog-single .wp-block-post-content.prose{margin-top:8px;}
.blog-single .prose :where(img){border-radius:var(--radius-sm);border:1px solid var(--line);}
.blog-back{display:inline-flex;align-items:center;gap:.4em;margin-top:44px;
  color:var(--accent);font-weight:600;text-decoration:none;}
.blog-back:hover{color:var(--accent-hover);}