:root{
  --bg:#0b1220; --bg-elev:#0f172a; --card:#111827; --border:#1f2937;
  --text:#e5e7eb; --muted:#9ca3af; --brand:#60a5fa; --brand-2:#34d399;
  --link:#9bd1ff; --link-underline:rgba(96,165,250,.35)
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,Segoe UI,Roboto,Ubuntu;color:var(--text);background:var(--bg)}
.container{max-width:1140px;margin:0 auto;padding:20px}
.nowrap{white-space:nowrap}

/* Header/Nav */
.site-header{position:sticky;top:0;z-index:20;background:rgba(11,18,32,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.logo{font-weight:800;letter-spacing:.3px;color:#fff;text-decoration:none}
.nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;opacity:.9}
.nav a:hover{background:rgba(96,165,250,.12);opacity:1}

/* HERO masthead with bg image */
.masthead{position:relative;isolation:isolate}
.masthead .hero{
  position:relative;overflow:hidden;border-radius:18px;
  background:linear-gradient(180deg, rgba(7,12,26,.6), rgba(7,12,26,.85)),
             url('/img/header-hero.webp') center/cover no-repeat;
  border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:60px 28px; min-height:280px; display:flex; flex-direction:column; justify-content:center
}
.masthead .eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:rgba(17,24,39,.6);border:1px solid var(--border);border-radius:999px;padding:6px 10px
}
.masthead h1{margin:14px 0 10px;font-size:36px;line-height:1.2}
.masthead p{max-width:720px;color:#d1d5db}

/* Links (sichtbar & hübsch) */
a{color:var(--link);text-decoration:none}
.prose a,.link{
  color:var(--link); background:
  linear-gradient(var(--link-underline),var(--link-underline)) 0 100%/100% 2px no-repeat;
  transition:background-size .25s ease, color .2s ease
}
.prose a:hover,.link:hover{background-size:0 2px;color:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:12px;font-weight:700;text-decoration:none;
  background:linear-gradient(135deg,var(--brand),#3b82f6); color:#001a38; border:0; box-shadow:0 8px 24px rgba(96,165,250,.25)
}
.btn:hover{transform:translateY(-1px)}
.btn.outline{background:transparent;color:var(--text);border:1px solid var(--brand)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.small{padding:7px 12px;font-size:14px}

/* Cards / Grid */
.card{background:linear-gradient(180deg,rgba(17,24,39,.92),rgba(17,24,39,.85));
  border:1px solid var(--border);border-radius:16px;padding:18px;margin:18px 0;
  transition:transform .2s ease, box-shadow .2s ease
}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.list{padding-left:18px;margin:10px 0}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:24px;color:var(--muted)}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0}
.footer-links a{color:var(--muted);margin-left:12px}
.footer-links a:hover{color:#fff}

/* Ad wrappers (CLS safe) */
.ad-top{display:flex;justify-content:center;align-items:center;min-height:90px;margin:8px 0}
.ad-inarticle{min-height:250px;margin:16px 0}
.ad-sticky{position:fixed;left:0;right:0;bottom:0;background:rgba(11,18,32,.96);
  border-top:1px solid var(--border);padding:8px 12px;display:flex;justify-content:center;align-items:center;z-index:50}
.ad-close{position:absolute;right:8px;top:6px;border:0;background:#334155;color:#e5e7eb;width:28px;height:28px;border-radius:50%;cursor:pointer}

/* Responsive */
@media (max-width:900px){
  .grid-two{grid-template-columns:1fr}
  .masthead h1{font-size:30px}
  .ad-top{min-height:60px}
}
/* Font & Typo */
body{font-family: Inter, system-ui, Segoe UI, Roboto, Ubuntu, sans-serif}
h1,h2{letter-spacing:.2px}
h1{font-weight:800}
h2{font-weight:700}

/* Link-Hover Highlight (sichtbarer) */
.prose a,.link{
  text-decoration:none;
  background:linear-gradient(var(--link-underline),var(--link-underline)) 0 100%/100% 2px no-repeat;
}
.prose a:hover,.link:hover{
  background-size:0 2px;
  text-shadow:0 0 1px rgba(155,209,255,.6);
  filter:saturate(120%);
}

/* Scroll-Reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1; transform:none}

/* A11y helper */
.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* Language dropdown */
.language-select select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:rgba(17,24,39,.6) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center/14px;
  color:var(--text); border:1px solid var(--border); border-radius:10px;
  padding:8px 34px 8px 12px; font-weight:600; cursor:pointer
}
.language-select select:hover{border-color:#2b3b52}
.language-select{display:flex;align-items:center}
@media (max-width:700px){ .language-select{margin-left:auto} }

/* Homepage-Banner zentrieren (robust) */
.banner-frame { padding:0; margin-top:14px; }
.banner-img {
  display:block;
  margin:0 auto;           /* zentriert horizontal */
  width:1080px;            /* deine feste Breite */
  max-width:100%;          /* responsiv auf kleineren Screens */
  height:auto;
  border-radius:16px;
}

/* =========================================================
   WN8.info – Section “welcome”, Explainer & Pricing
   (append this block to your existing style.css)
   ========================================================= */

/* Utility */
.muted{color:var(--muted)}
.tiny{font-size:.85rem}

/* Generic “welcome” section container (shared look & feel) */
.welcome{
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(96,165,250,.06), rgba(96,165,250,0) 160px);
  background-color: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding: clamp(16px, 3vw, 28px);
  margin: clamp(16px, 3vw, 32px) auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  max-width: 1100px;
}
.welcome .welcome-title{
  color:var(--brand);
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.2;
  margin:0 0 .6rem;
  font-size:clamp(1.35rem,2.4vw,2rem);
  text-wrap:balance;
}
.welcome h3{
  color:var(--brand);
  font-weight:700;
  margin:1.2rem 0 .45rem;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  position:relative;
  padding-left:.75rem;
}
.welcome h3::before{
  content:"";
  position:absolute; left:0; top:.15rem; bottom:.15rem;
  width:3px; border-radius:2px;
  background:linear-gradient(180deg, var(--brand), rgba(96,165,250,.55));
}
.welcome p{line-height:1.65; margin:.6rem 0}
.welcome ul{margin:.5rem 0 .9rem 0; padding:0; list-style:none}
.welcome ul li{position:relative; padding-left:1.25rem; margin:.35rem 0}
.welcome ul li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 3px rgba(96,165,250,.14);
}
.welcome code{
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;
  background: rgba(96,165,250,.08);
  padding:.1rem .35rem;
  border-radius:6px;
  border:1px solid rgba(96,165,250,.15);
}
.welcome hr{
  border:0; height:1px;
  background:linear-gradient(90deg, rgba(96,165,250,.25), transparent 70%);
  margin:1.1rem 0;
}

/* ---------------------------------------------------------
   WoT WN8 Explainer (scoped accent – darker blue headline)
   --------------------------------------------------------- */
#wot-wn8-explainer{ --accent:#0b3d91 }           /* dunkles Blau für Headlines */
#wot-wn8-explainer .welcome-title{ color:var(--accent) }
#wot-wn8-explainer h3{ color:var(--accent) }
#wot-wn8-explainer h3::before{
  background:linear-gradient(180deg, var(--accent), rgba(11,61,145,.55));
}
#wot-wn8-explainer ul li::before{
  background:var(--accent); box-shadow:0 0 0 3px rgba(11,61,145,.14);
}
#wot-wn8-explainer code{
  background:rgba(11,61,145,.10); border-color:rgba(11,61,145,.28);
}

/* ---------------------------------------------------------
   Pricing Section (External WN8) – grid, cards, price, FAQ
   --------------------------------------------------------- */
#external-wn8-pricing{ --accent: var(--brand) }
#external-wn8-pricing .welcome-title{ color:var(--accent) }

#external-wn8-pricing .lead{ font-size:clamp(1rem,1.2vw,1.06rem); line-height:1.65; margin-bottom:1rem }

#external-wn8-pricing .pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(260px,1fr));
  gap: clamp(12px,2vw,18px);
  margin:1rem 0 1.2rem;
}

/* Reuse .card baseline; add section-specific polish */
#external-wn8-pricing .card{
  background:linear-gradient(180deg,rgba(17,24,39,.96),rgba(17,24,39,.88));
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 16px 18px;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
#external-wn8-pricing .card-h h3{
  color:var(--accent); margin:0 0 .2rem; font-size:1.15rem; font-weight:800
}
#external-wn8-pricing .muted{ color:var(--muted) }

#external-wn8-pricing .price-wrap{ margin:.3rem 0 .6rem }
#external-wn8-pricing .price{
  display:flex; align-items:baseline; gap:.25rem; font-weight:800
}
#external-wn8-pricing .price .currency{ font-size:1rem }
#external-wn8-pricing .price .amount{ font-size:1.8rem; letter-spacing:.2px; color:var(--accent) }
#external-wn8-pricing .price .per{ font-size:.95rem; color:var(--muted) }
#external-wn8-pricing .note{ margin:.35rem 0 0; line-height:1.55 }

#external-wn8-pricing .features{ list-style:none; margin:.6rem 0 0; padding:0 }
#external-wn8-pricing .features li{
  position:relative; padding-left:1.25rem; margin:.35rem 0
}
#external-wn8-pricing .features li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(96,165,250,.14);
}

/* Examples */
#external-wn8-pricing .examples{ margin-top:.6rem }
#external-wn8-pricing .examples h3{
  color:var(--accent); font-size:1.05rem; margin:.8rem 0 .4rem
}
#external-wn8-pricing .ex-grid{
  display:grid; gap:10px; grid-template-columns:repeat(3,minmax(200px,1fr))
}
#external-wn8-pricing .ex{
  border:1px dashed var(--border);
  border-radius:12px; padding:10px 12px;
  background:linear-gradient(180deg,rgba(17,24,39,.75),rgba(17,24,39,.6));
}
#external-wn8-pricing .ex-h{ font-weight:700; margin-bottom:.2rem }
#external-wn8-pricing .ex-b{ line-height:1.5 }
#external-wn8-pricing .total{ display:inline-block; margin-top:.15rem }

/* FAQ */
#external-wn8-pricing .faq h3{
  color:var(--accent); font-size:1.05rem; margin:1rem 0 .4rem
}
#external-wn8-pricing details{
  border:1px solid var(--border);
  border-radius:10px; padding:.5rem .7rem; margin:.45rem 0;
  background:rgba(96,165,250,.06)
}
#external-wn8-pricing summary{
  cursor:pointer; font-weight:700; color:var(--text)
}
#external-wn8-pricing details p{ margin:.4rem 0 0 }

/* CTAs (nutzt deine .btn-Basis) */
#external-wn8-pricing .cta-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:.9rem
}
#external-wn8-pricing .btn.primary{
  background:linear-gradient(135deg,var(--brand),#3b82f6);
  color:#001a38; border:0; box-shadow:0 8px 24px rgba(96,165,250,.25)
}
#external-wn8-pricing .btn.ghost{ background:transparent; color:var(--brand); border:1px solid var(--border) }
#external-wn8-pricing .btn.ghost:hover{ background:rgba(96,165,250,.10) }

/* Responsive tweaks */
@media (max-width: 860px){
  #external-wn8-pricing .pricing-grid{ grid-template-columns:1fr }
  #external-wn8-pricing .ex-grid{ grid-template-columns:1fr }
}
/* Fancy footer */
/* --- Footer layout fix --- */
.site-footer .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr .9fr;gap:22px;align-items:start}
@media (max-width:1024px){.site-footer .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.site-footer .footer-grid{grid-template-columns:1fr}}

.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:6px 0}
.site-footer h4{margin:0 0 8px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer .footer-topline{height:2px;margin:0 0 18px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),transparent 35%,var(--brand-2) 70%,transparent)}
.site-footer .social-row{display:flex;gap:10px;margin-top:6px}
.site-footer .social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;border:1px solid var(--border);background:rgba(17,24,39,.6);color:var(--text);opacity:.9;
  transition:transform .15s ease,opacity .15s ease,background .15s ease}
.site-footer .social:hover{opacity:1;transform:translateY(-1px);background:rgba(96,165,250,.12)}
.site-footer .foot-bottom{border-top:1px solid var(--border);margin-top:18px;padding:12px 0 20px;color:var(--muted);text-align:center}