/* =======================================================
   Web3Kiste – Global Styles (konkret & konfliktarm)
   ======================================================= */

/* 0) Reset & Tokens */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

:root{
  /* Farben */
  --wk-bg:#111;
  --wk-elev:#161616;
  --wk-text:#f0f0f0;
  --wk-muted:#cfcfcf;
  --wk-brand:#ff8c00;
  --wk-link:#ff9b2a;

  /* Effekte */
  --wk-border: .24;
  --wk-saum:   .12;
  --wk-shadow: .50;

  /* Modal-Schatten */
  --wk-popup-shadow: 0 10px 40px rgba(0,0,0,.8);
}

/* 1) Body-Layout */
body{
  font-family: Arial, Helvetica, sans-serif;
  background: var(--wk-bg);
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 100px; /* Platz für fixen Header */
  line-height: 1.7;
}

/* 3) Content-Karte (global) */
main.content, .content{
  position: relative;
  width: min(960px, 100% - 2rem);
  margin: 2rem auto;
  padding: 2rem;
  background: var(--wk-elev);
  color:#ddd;
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;

  border: 1px solid rgba(255,140,0, var(--wk-border));
  border-radius: 14px;
  box-shadow:
    0 12px 30px rgba(0,0,0, var(--wk-shadow)),
    0 0 14px rgba(255,140,0, var(--wk-saum));
}
@media (hover:hover){
  main.content:hover, .content:hover{
    box-shadow:
      0 16px 34px rgba(0,0,0,.65),
      0 0 18px rgba(255,140,0,.18);
  }
}

/* 4) Typografie in Karten */
.content h1{ color:var(--wk-brand); text-align:center; margin-bottom:1.5rem; }
.content h2{ color:var(--wk-brand); margin:2rem 0 .6rem; }
.content h3{ color:var(--wk-brand); margin:1.2rem 0 .4rem; }
.content p { margin-bottom:1rem; color:#ccc; }
.content a { color:var(--wk-link); text-decoration:underline; text-underline-offset:2px; }
.content a:hover { text-decoration:none; }

/* 5) Startseite – Intro */
body.home .intro{
  max-width: 800px;
  margin: 0 auto 1rem;
  text-align: center;
}
body.home .intro h1{
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: .6rem;
}
body.home .intro p{ margin: .25rem 0; }

/* 6) Kachel-Grid (Start/Übersichten) */
.kachel-container{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.5rem;
  padding: 2rem 0;
  max-width: 1200px;
  margin: 0 auto;
}
.kachel{
  position: relative;
  background:#1f1f1f;
  border:1px solid rgba(255,140,0,0.35);
  border-radius:12px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    inset 0 0 10px rgba(255,140,0,0.08);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.kachel:hover{
  transform:translateY(-6px);
  border-color: rgba(255,140,0,0.45);
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    0 0 22px rgba(255,140,0,0.35),
    inset 0 0 12px rgba(255,140,0,0.12);
}
.kachel img{ width:100%; height:160px; object-fit:cover; border-top-left-radius:12px; border-top-right-radius:12px; }
.kachel h3{ margin:.8rem 0 .3rem; color:var(--wk-brand); text-decoration: none; }
.kachel p { font-size:.9rem; padding:0 1rem 1rem; color:#ccc; text-decoration: none; }

/* Kachel „bald verfügbar“ */
.kachel.soon { opacity: .9; pointer-events: none; }
.kachel .soon-label{
  display:inline-block; font-size:.9rem; color:#ffb566; opacity:.85; margin-left:4px; font-weight:500;
}
.kachel.soon img{ filter: grayscale(15%); }

/* 7) Info-Abschnitt */
.info-abschnitt{ max-width:900px; margin: 1rem auto 0; color:#ccc; text-align:left; }
.info-abschnitt p{ margin:.6rem 0; }

/* 8) Tabellen (Börsen/Anbieter) */
.table-container{
  max-width:1200px;
  margin: 2rem auto;
  overflow-x: auto;
  padding: 0 1rem;
}
table{ width:100%; border-collapse:collapse; color:#ddd; font-size:.95rem; }
th, td{ border:1px solid rgba(255,255,255,.1); padding:.75rem 1rem; text-align:left; }
th{ background:#1f1f1f; color:var(--wk-brand); }
tr:nth-child(even){ background:#181818; }
tr:hover td{ background:rgba(255,140,0,.10); }
.ok{ color:#4caf50; font-weight:bold; }
.no{ color:#f44336; font-weight:bold; }

/* 10) Buttons – einheitlich */
.wk-btn{
  background: var(--wk-brand);
  border: none;
  color:#111;
  font-weight:700;
  padding:.7rem 1.4rem;
  border-radius:8px;
  cursor:pointer;
  transition: all .2s ease;
}
.wk-btn:hover{ filter:brightness(1.1); }
.wk-btn--ghost{
  background:transparent;
  border:1px solid var(--wk-brand);
  color:var(--wk-brand);
}
.wk-btn--ghost:hover{ background:rgba(255,140,0,.1); }

/* Buttons in Tabellen (Affiliate/Direkt – Pill) */
.btn-affiliate, .btn-direct{
  display:inline-block; padding:7px 14px; border-radius:999px;
  font-size:.9rem; font-weight:800; text-decoration:none; text-align:center; white-space:nowrap;
  transition: all .18s ease-in-out; line-height:1;
}
.btn-affiliate{
  background: rgba(255,140,0,.12);
  border: 1px solid rgba(255,140,0,.45);
  color:#ffb14a; box-shadow: inset 0 0 10px rgba(255,140,0,.08);
}
.btn-affiliate:hover{
  background: rgba(255,140,0,.22); color:#fff;
  box-shadow: 0 0 12px rgba(255,140,0,.25), inset 0 0 12px rgba(255,140,0,.10);
  transform: translateY(-1px);
}
.btn-direct{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  color:#e0e0e0;
}
.btn-direct:hover{
  background: rgba(255,255,255,.14); color:#fff; transform: translateY(-1px);
}

/* Lesekarten „Jetzt lesen“ */
.btn-read{
  display:inline-block; padding: 8px 12px; border-radius: 999px;
  border:1px solid rgba(255,140,0,.45);
  background: rgba(255,140,0,.10);
  color:#ffb566; font-weight:700; text-decoration:none;
  transition: all .18s ease-in-out;
}
.btn-read:hover{ background: rgba(255,140,0,.18); color:#fff; transform: translateY(-1px); }

/* Sekundär-Button */
.btn-secondary{
  border:1px solid rgba(255,140,0,.38);
  background: rgba(255,140,0,.08);
  color:#ffb566;
}
.btn-secondary:hover{ background: rgba(255,140,0,.14); }

/* 11) Modal / Popup */
.wk-modal{ position:fixed; inset:0; z-index:2000; display:none; overflow-y:auto; backdrop-filter: blur(4px); }
.wk-modal[aria-hidden="false"], .wk-modal.is-open, .wk-modal.open{ display:block; }
.wk-modal__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.7); }

body.modal-open{ overflow:hidden; }

.wk-modal__dialog{
  position:relative;
  max-width:700px;
  margin:6vh auto;
  background: linear-gradient(145deg, #121212, #1a1a1a);
  border:1px solid rgba(255,140,0,.35);
  border-radius:16px;
  color:#eee; padding:2rem 2.2rem;
  box-shadow: 0 0 25px rgba(255,140,0,.25), var(--wk-popup-shadow);
  animation: wkFadeIn .35s ease forwards;
}
@keyframes wkFadeIn{ from{ transform: translateY(-8px); opacity:0; } to{ transform: translateY(0); opacity:1; } }

.wk-modal__close{
  position:absolute; top:.6rem; right:.8rem;
  font-size:1.8rem; color:#ff9b2a; background:transparent; border:0; cursor:pointer;
}
.wk-modal__close:hover{ transform: rotate(90deg); transition:.25s ease; }

.wk-modal h2{
  color:#ff9b2a; font-size:1.7rem; text-align:center; margin-bottom:1rem;
  text-shadow: 0 0 12px rgba(255,140,0,.4);
}
.wk-modal p{ margin:.8rem 0; color:#ddd; line-height:1.7; }
.wk-modal ul{ margin:.6rem 0 1rem 1.2rem; }
.wk-modal__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:1.6rem; }

/* 12) Hinweis-/Info-Boxen (Artikel) */
body.page-article .hinweis-box,
body.page-article .fakten-box,
body.page-article .risiko-box,
body.page-article .def-box{
  border-radius:10px; padding:12px 14px; margin:16px 0;
  color:#e6e6e6; font-size:.98rem; background:#171717;
  border:1px solid rgba(255,140,0,.28);
}
body.page-article .def-box { border:1px solid #6fb8ff; background:#0f151b; box-shadow:0 0 20px rgba(111,184,255,.25); color:#e2eafc; }
body.page-article .fakten-box { border:1px solid #26c36c; background:#102015; box-shadow:0 0 20px rgba(38,195,108,.25); color:#d5f5df; }
body.page-article .risiko-box { border:1px solid #ff6a3c; background:#1b1110; box-shadow:0 0 20px rgba(255,106,60,.25); color:#ffdcd2; }
body.page-article .hinweis-box { border:1px solid #ffb84d; background:#141008; box-shadow:0 0 20px rgba(255,184,77,.25); color:#fff0cc; }

/* 13) Artikel-Theme (page-article) */
body.page-article{ background: var(--wk-bg); }
body.page-article main.content{
  border-color: rgba(255,140,0, calc(var(--wk-border) + .04));
  box-shadow:
    0 12px 30px rgba(0,0,0, calc(var(--wk-shadow) + .04)),
    0 0 16px rgba(255,140,0, calc(var(--wk-saum) + .03));
}
body.page-article h1{ color:#ff9430; text-align:center; margin:0 0 1.4rem; }
body.page-article h2{ color:#ff8c00; margin:2rem 0 .6rem; }
body.page-article h3{ color:#ff9b2a; margin:1.1rem 0 .4rem; }
body.page-article p { color:#cfcfcf; margin:0 0 1.05rem; }

body.page-article .breadcrumb{ color:#b9b9b9; font-size:.92rem; margin:-.4rem 0 1.1rem; }
body.page-article .breadcrumb a{ color:var(--wk-link); text-decoration:none; }
body.page-article .breadcrumb a:hover{ text-decoration:underline; }

body.page-article .toc{
  background:#151515;
  border: 1px solid rgba(255,140,0,0.4);
  border-radius: 12px;
  padding: 1rem 1.4rem;
  margin: 1.6rem 0 2rem;
  box-shadow: inset 0 0 12px rgba(255,140,0,0.15), 0 0 20px rgba(255,140,0,0.15);
}
body.page-article .toc strong{
  display:block; color:#ff9b2a; font-weight:700; margin-bottom:.5rem;
  text-shadow: 0 0 8px rgba(255,140,0,0.4);
}
body.page-article .toc ol{ margin:.6rem 0 0 1.1rem; list-style:decimal; color:#ddd; }
body.page-article .toc li{ padding:.3rem 0; transition: transform .15s ease; }
body.page-article .toc li:hover{ transform: translateX(4px); }
body.page-article .toc a{ color:#ffb566; text-decoration:none; line-height:1.6; display:inline-block; }
body.page-article .toc a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

body.page-article .btn-back{
  display:inline-block; margin-top:20px; padding:10px 14px;
  border:1px solid rgba(255,140,0,.30); border-radius:8px;
  color:#ff9b2a; text-decoration:none; background:rgba(255,140,0,.06);
}
body.page-article .btn-back:hover{ background:rgba(255,140,0,.12); }

body.page-article main.content img{
  display:block; max-width:100%; height:auto; margin:1rem auto;
  border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.40);
}
body.page-article .media-cover{
  width:100%; height:260px; overflow:hidden;
  border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.40); margin:1.2rem 0;
}
body.page-article .media-cover img{ width:100%; height:100%; object-fit:cover; object-position:center; }
body.page-article .media-inline{ text-align:center; }
body.page-article .media-inline img{ display:inline-block; max-width:min(100%, 720px); height:auto; }

/* 14) Home – Hero/CTA */
.hero { text-align:center; margin-bottom: 1.6rem; }
.hero h1 { margin: 0 0 .6rem; }
.hero-sub { color:#cfcfcf; margin: 0 0 1rem; }
.btn-news{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,140,0,.45);
  background: rgba(255,140,0,.10);
  color:#ffb566; font-weight:600;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 8px rgba(255,140,0,.08);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-news:hover{
  background: rgba(255,140,0,.16);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 10px rgba(255,140,0,.10);
}

/* 15) Home – allgemeine Karten */
.cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:1.2rem; margin: 1rem 0 1.8rem;
}
.card{
  background:#1a1a1a; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,140,0,.20);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 10px rgba(255,140,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 14px rgba(255,140,0,.10); }
.card img{ width:100%; height:180px; object-fit:cover; display:block; }
.card-body{ padding: .9rem 1rem 1.1rem; }
.card-body h3{ margin: 0 0 .35rem; color:#ff9b2a; }
.card-body h3 a{ color:inherit; text-decoration:none; }
.card-body h3 a:hover{ text-decoration:underline; }
.card-body p{ margin:0; color:#cfcfcf; }

/* 16) Home – „Sicher starten“ & Transparenz & CTA */
.start-safe{ margin: .2rem 0 1.6rem; }
.start-safe h2{ margin: 0 0 .6rem; }
.start-list{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.start-list li{
  background:#171717; border:1px solid rgba(255,140,0,.18);
  border-radius:10px; padding:.7rem .9rem;
}
.start-list a{ color:#ffb566; text-decoration:underline; }
.start-list span{ display:block; color:#bbb; font-size:.95rem; }

.transparency{
  background:#141414; border:1px solid rgba(255,140,0,.18);
  border-radius:10px; padding: .9rem 1rem; margin: 0 0 1.6rem; color:#d6d6d6; text-align:center;
}

.cta{ text-align:center; margin: .2rem 0 0; }
.cta h2{ margin: 0 0 .4rem; }
.cta p{ margin: 0 0 .9rem; color:#cfcfcf; }
.cta-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* 17) Affiliate-/Transparenz-Hinweis (Box) */
.affiliate-hinweis{
  position: relative;
  max-width: 1100px;
  margin: 1.4rem auto 1.2rem;
  padding: 14px 18px 14px 54px;
  background: linear-gradient(180deg,#191919 0%, #141414 100%);
  border: 1px solid rgba(255,140,0,0.42);
  border-radius: 12px;
  color: #eaeaea;
  font-size: 0.97rem;
  line-height: 1.65;
  box-shadow:
    0 10px 28px rgba(0,0,0,.55),
    0 0 16px rgba(255,140,0,0.10),
    inset 0 0 10px rgba(255,140,0,0.06);
}
.affiliate-hinweis::before{
  content:""; position:absolute; left:16px; top:14px; bottom:14px; width:6px;
  border-radius:10px; background: linear-gradient(180deg,#ffb14a 0%, #ff8c00 100%);
  box-shadow: 0 0 12px rgba(255,140,0,.35);
}
.affiliate-hinweis .ah-title{
  display:block; font-weight:800; color:#ff9b2a; margin:0 0 .25rem; letter-spacing:.2px;
}
.badge-affiliate{
  display:inline-flex; align-items:center; padding:2px 8px;
  font-size:.82rem; font-weight:800; letter-spacing:.2px;
  color:#ffb14a; background:rgba(255,140,0,.12);
  border:1px solid rgba(255,140,0,.45); border-radius:999px;
}
.affiliate-hinweis a{ color:#ffb566; text-decoration:underline; text-underline-offset:2px; }
.affiliate-hinweis a:hover{ text-decoration:none; color:#ff8c00; }

/* 18) Börsen-Seite: volle Breite + Hero + Pill-Infos */
.content.content--wide{
  max-width: 1500px !important;
  width: min(96vw, 1500px) !important;
  margin: 2rem auto !important;
  padding: 2rem !important;
}
.content.content--wide > p{ max-width: 1100px; margin-left:auto; margin-right:auto; }

.content--wide .table-container{ max-width:none !important; padding:0 0 1rem !important; overflow-x: visible !important; }
.content--wide .table-container > table{ width:100% !important; min-width:1280px; table-layout:auto; margin:0; }
@media (min-width:1200px){
  .content.content--wide table th, .content.content--wide table td{ padding:.65rem .9rem; }
}
@media (max-width:1024px){
  .content.content--wide{ max-width:100% !important; width: calc(100% - 2rem) !important; padding: 1.2rem !important; }
  .content--wide .table-container{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .content--wide .table-container > table{ min-width:900px; }
}

.content--wide .ex-hero{ text-align:center; margin:.25rem auto 1.25rem; max-width:1100px; }
.content--wide .ex-hero h1{
  margin: 0 0 .35rem; font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  color: var(--wk-brand); text-shadow: 0 0 10px rgba(255,140,0,.25);
}
.content--wide .ex-hero .ex-sub{ color:#d4d4d4; max-width:920px; margin: 0 auto .9rem; }
.content--wide .ex-pills{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.content--wide .ex-pills .pill{
  padding:7px 12px; border-radius:999px; font-size:.88rem; font-weight:700; letter-spacing:.2px;
  color:#ffb566; background: rgba(255,140,0,.10); border:1px solid rgba(255,140,0,.35);
  box-shadow: inset 0 0 10px rgba(255,140,0,.08);
}

/* „ex-note“ – edler Hinweis für die Börsenseite */
.content--wide .affiliate-hinweis.ex-note{ margin: 1.1rem auto 1.4rem; }
.content--wide .affiliate-hinweis.ex-note::before{ left:16px; top:14px; bottom:14px; }

/* 19) „Neu & lesenswert“ – strukturierte Mini-Karten */
.mini-cards{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; margin-top: 1rem;
}
@media (max-width: 960px){ .mini-cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .mini-cards{ grid-template-columns: 1fr; } }

.mini-card{
  display:flex; flex-direction:column;
  min-height: 220px;
  padding: 16px 16px 14px;
  background:#171717;
  border:1px solid rgba(255,140,0,.22);
  border-radius:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 10px rgba(255,140,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mini-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 14px rgba(255,140,0,.10);
}
.mini-card__title{
  margin: 2px 0 8px; font-weight: 800; color: #ff9b2a; line-height: 1.25;
}
.mini-card__excerpt{
  color:#cfcfcf; font-size:.95rem; line-height:1.6; margin-bottom: 12px; flex:1;
}
.mini-card__actions{ margin-top:auto; display:flex; align-items:center; gap:.6rem; }

@media (max-width: 600px){
  main.content, .content{ width: min(960px, 100% - 1rem); padding: 1.2rem; }
  body.page-article .content{ padding: 1.25rem; }
  body.page-article h1{ font-size: 1.8rem; }
  body.page-article h2{ font-size: 1.25rem; }
  body.page-article .media-cover{ height: 200px; }
}
/* ===========================
   COMPAT PATCH – Alias & Fixes
   (unten anfügen)
   =========================== */

/* 1) Buttons: alte Klassen auf neue mappen */
.wk2-btn{
  background: var(--wk-brand);
  border: none;
  color:#111;
  font-weight:700;
  padding:.7rem 1.4rem;
  border-radius:8px;
  cursor:pointer;
  transition: all .2s ease;
}
.wk2-btn:hover{ filter:brightness(1.1); }
.wk2-btn--ghost{
  background:transparent;
  border:1px solid var(--wk-brand);
  color:var(--wk-brand);
}
.wk2-btn--ghost:hover{ background:rgba(255,140,0,.1); }

/* 2) Kachel-Container: alter Name */
.kachel-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }

/* 3) Mini-Karten: alter Name .mini-grid benutzen */
.mini-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.mini-grid .mini-card{ /* falls alte Struktur im Einsatz */
  display:flex; flex-direction:column; min-height:220px;
  padding:16px; background:#171717; border:1px solid rgba(255,140,0,.22);
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 10px rgba(255,140,0,.06);
}
.mini-grid .mini-card .btn-read{ margin-top:auto; } /* Button unten rechts halten */

/* 4) „Neu & lesenswert“ Karten – Fallback, falls _ohne_ .mini-card__actions markiert */
.mini-card .btn-read{ margin-top:auto; }

/* 5) Tabellen-Sterne (EU-Sicherheitsskala) */
.col-rating .rating{
  color:#ffcc66;
  letter-spacing:.5px;
  text-shadow:0 0 6px rgba(255,204,102,.25);
  font-weight:800;
  white-space:nowrap;
}

/* 6) Tabelle: letzte Spalte Button vertikal mittig (falls überschrieben) */
.table-container td:last-child{ vertical-align: middle; }

/* 7) „Bald verfügbar“-Kachel wirklich nicht klickbar */
.kachel.soon{ pointer-events:none; }

/* 8) News-Button Alias (falls HTML noch .news-btn nutzt) */
.news-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,140,0,.45);
  background: rgba(255,140,0,.10);
  color:#ffb566; font-weight:600;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 8px rgba(255,140,0,.08);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.news-btn:hover{
  background: rgba(255,140,0,.16);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 10px rgba(255,140,0,.10);
}

/* 9) Kleinigkeit: Affiliate-Hinweis-Links etwas deutlicher */
.affiliate-hinweis a{ color:#ffb566; text-decoration:underline; text-underline-offset:2px; }
.affiliate-hinweis a:hover{ color:#ff8c00; text-decoration:none; 
}
/* =======================
   Neu & lesenswert – Karten
   ======================= */
.wk-reads{
  margin-top:28px; padding:18px 16px;
  border:1px solid rgba(255,140,0,.18);
  border-radius:14px;
  background: radial-gradient(1200px 300px at 50% -120px, rgba(255,140,0,.08), transparent 55%),
              linear-gradient(180deg,#181818 0%, #151515 100%);
  box-shadow:0 12px 28px rgba(0,0,0,.45), 0 0 12px rgba(255,140,0,.08) inset;
}
.wk-reads__title{
  display:flex; align-items:center; gap:.55rem;
  margin:0 0 1rem; color:#ff9b2a; font-weight:800;
}
.wk-reads__title::after{
  content:""; flex:1; height:1px; margin-left:.6rem;
  background:linear-gradient(90deg, rgba(255,140,0,.35), rgba(255,140,0,0));
}

.wk-cards{
  display:grid; gap:18px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:980px){ .wk-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .wk-cards{ grid-template-columns:1fr; } }

.wk-card{
  display:flex; flex-direction:column;
  min-height:220px; padding:18px;
  border-radius:12px; position:relative; overflow:hidden;
  border:1px solid rgba(255,140,0,.20);
  background:linear-gradient(180deg,#1a1a1a 0%, #161616 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 10px rgba(255,140,0,.06);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.wk-card::after{
  content:""; position:absolute; top:-60px; right:-60px;
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(70px 70px at 70% 70%, rgba(255,140,0,.18), transparent 70%);
  pointer-events:none;
}
.wk-card:hover, .wk-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(255,140,0,.35);
  box-shadow:0 14px 30px rgba(0,0,0,.55), 0 0 14px rgba(255,140,0,.10);
}

.wk-card__title {
  margin: 0 0 .5rem;
  font-weight: 800;
  color: #ffb14a;
  line-height: 1.25;
}

.wk-card__excerpt {
  margin: 0 0 1rem;
  color: #d6d6d6;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4; /* ✅ Standard-Eigenschaft ergänzt */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wk-card__actions {
  margin-top: auto;
}

/* Button-Stil */
.wk-btn-read{
  display:inline-block; padding:10px 16px; border-radius:999px;
  border:1px solid rgba(255,140,0,.45);
  background:rgba(255,140,0,.10);
  color:#ffb566; font-weight:800; text-decoration:none;
  box-shadow:inset 0 0 10px rgba(255,140,0,.08);
  transition:background .18s, transform .18s, box-shadow .18s, color .18s;
}
.wk-btn-read:hover{
  background:rgba(255,140,0,.18); color:#fff; transform:translateY(-1px);
  box-shadow:0 0 12px rgba(255,140,0,.22), inset 0 0 12px rgba(255,140,0,.10);
}

/* =======================
   Floating Button (unten rechts)
   ======================= */
.floating-btn{
  position:fixed; right:18px; bottom:22px; z-index:1200;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,140,0,.45);
  background:rgba(255,140,0,.10);
  color:#ffb566; text-decoration:none; font-weight:800;
  box-shadow:0 10px 22px rgba(0,0,0,.45), inset 0 0 10px rgba(255,140,0,.08);
  transition:transform .15s, box-shadow .15s, background .15s, color .15s;
}
.floating-btn:hover{
  background:rgba(255,140,0,.18); color:#fff; transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.55), inset 0 0 12px rgba(255,140,0,.10);
}
@media (max-width:520px){
  .floating-btn{ right:12px; bottom:14px; padding:8px 12px;}
}
/* Alias für alte Button-Klasse (Startseite-Button) */
.wk2-btn{
  background: var(--wk-brand);
  border: none;
  color:#111;
  font-weight:700;
  padding:.7rem 1.4rem;
  border-radius:8px;
  cursor:pointer;
  transition: all .2s ease;
}
.wk2-btn:hover{ filter:brightness(1.1); }

.wk2-btn--ghost{
  background:transparent;
  border:1px solid var(--wk-brand);
  color:var(--wk-brand);
}
.wk2-btn--ghost:hover{ background:rgba(255,140,0,.1); 
}
/* ==============================
   Neu & lesenswert – Feinschliff
   ============================== */

/* Rahmen & Innenabstand des Wrappers etwas ruhiger */
.wk-reads{
  padding: 22px 18px;
  border-color: rgba(255,140,0,.16);
  background:
    radial-gradient(1000px 240px at 50% -140px, rgba(255,140,0,.06), transparent 60%),
    linear-gradient(180deg,#1a1a1a 0%, #151515 100%);
}

/* Grid: klare Breakpoints */
.wk-cards{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 980px){ .wk-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .wk-cards{ grid-template-columns: 1fr; } }

/* Karten: gleiche Höhe & ruhiger Glow */
.wk-card{
  min-height: 230px;
  border-color: rgba(255,140,0,.18);
  background: linear-gradient(180deg,#1a1a1a 0%, #171717 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 8px rgba(255,140,0,.05);
}
.wk-card::after{
  top: -72px; right: -72px; width: 160px; height: 160px;
  background: radial-gradient(80px 80px at 70% 70%, rgba(255,140,0,.16), transparent 70%);
}
.wk-card:hover,
.wk-card:focus-within{
  transform: translateY(-3px);
  border-color: rgba(255,140,0,.30);
  box-shadow: 0 16px 30px rgba(0,0,0,.55), 0 0 12px rgba(255,140,0,.10);
}

/* Typo: Überschrift etwas präsenter, Copy minimal heller */
.wk-card__title{
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: .1px;
  color: #ffad44;
}
.wk-card__excerpt{
  color: #d9d9d9;
  font-size: .97rem;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* CTA unten immer bündig und einheitlich groß */
.wk-card__actions{
  margin-top: auto;
  display: flex;
}
.wk-btn-read{
  padding: 10px 16px;
  min-width: 150px;
  text-align: center;
}

/* Tastaturbedienung sichtbar */
.wk-btn-read:focus-visible,
.floating-btn:focus-visible,
.kachel:focus-visible,
.wk-card:focus-within{
  outline: 2px solid rgba(255,140,0,.65);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255,140,0,.15), 0 12px 28px rgba(0,0,0,.55);
}

/* Überschriftslinie gleichmäßig */
.wk-reads__title{
  font-size: 1.15rem;
}
.wk-reads__title::after{
  opacity: .6;
}

/* Floating-Button: Safe-Area & nicht über Footer hängen */
.floating-btn{
  right: max(16px, env(safe-area-inset-right));
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
}
@media (max-width: 520px){
  .floating-btn{ bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); }
}
footer:hover + .floating-btn,
footer:focus-within + .floating-btn{ opacity:.95; }

/* Weniger Bewegtbild, wenn Nutzer das wünscht */
@media (prefers-reduced-motion: reduce){
  .wk-card,
  .wk-btn-read,
  .floating-btn,
  .kachel{
    transition: none !important;
    transform: none !important;
  }
}
/* ==============================
   Neu & lesenswert – Minimal-Style
   ============================== */

/* 1) Wrapper ohne Kachel-Look */
.wk-reads{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  margin-top: 28px;
}

/* Überschrift mit schlanker Akzentlinie */
.wk-reads__title{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 .8rem; color:#ffd08a; font-weight:800; letter-spacing:.2px;
}
.wk-reads__title::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#ff8c00; box-shadow:0 0 10px rgba(255,140,0,.6);
}
.wk-reads__title::after{
  content:""; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,140,0,.65), rgba(255,140,0,0));
  opacity:.85;
}

/* 2) Grid enger */
.wk-cards{ gap:16px; }

/* 3) Karten flach + feiner Top-Akzent statt Glow */
.wk-card{
  min-height: 230px;
  background:#141414;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
  position:relative; overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.wk-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,#ff8c00,#ffb14a 60%, transparent 100%);
  opacity:.9;
}
.wk-card:hover,
.wk-card:focus-within{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 38px rgba(0,0,0,.55), 0 0 18px rgba(255,140,0,.10);
}

/* Typografie klarer */
.wk-card__title{ color:#fff; font-weight:750; line-height:1.25; }
.wk-card__excerpt{ color:#bdbdbd; font-size:.97rem; }

/* 4) CTAs kompakt – keine wuchtigen Pills mehr */
.wk-btn-read{
  padding: 6px 10px;
  border-radius: 10px;
  border:1px solid rgba(255,140,0,.35);
  background: transparent;
  color:#ffb566;
  font-weight:700;
  text-decoration:none;
  box-shadow:none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.wk-btn-read:hover{ background: rgba(255,140,0,.09); color:#fff; transform: translateY(-1px); }

/* Alternative: ganz schlanker Link-CTA */
.btn-link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:700; color:#ffb566; text-decoration:none;
  border-bottom:1px solid rgba(255,140,0,.35);
  padding-bottom:2px;
}
.btn-link:hover{ color:#fff; border-bottom-color:#ff8c00; }
.btn-link .chev{ transition: transform .15s ease; }
.btn-link:hover .chev{ transform: translateX(3px); }

/* Accessibility */
.wk-btn-read:focus-visible,
.btn-link:focus-visible,
.wk-card:focus-within{
  outline:2px solid rgba(255,140,0,.65);
  outline-offset:3px;
}

/* reduzierter Motion-Wunsch respektieren */
@media (prefers-reduced-motion: reduce){
  .wk-card, .wk-btn-read, .btn-link{ transition: none !important; transform:none !important; }
}
/* ===========================
   Neu & lesenswert – Air-Look
   =========================== */

/* Wrapper neutral (kein Kachel-Look) */
.wk-reads{ padding:0; border:0; background:transparent; box-shadow:none; }

/* Überschrift: kleine Kugel + feine Linie */
.wk-reads__title{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 .8rem; color:#ffd08a; font-weight:800; letter-spacing:.2px;
}
.wk-reads__title::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#ff8c00; box-shadow:0 0 12px rgba(255,140,0,.6);
}
.wk-reads__title::after{
  content:""; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,140,0,.55), rgba(255,140,0,0));
}

/* Grid etwas dichter */
.wk-cards{ gap:14px; }

/* Karten: flach, sehr dezente Kontur, feine Top-Bar */
.wk-card{
  background:linear-gradient(180deg,#141414 0%, #121212 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  box-shadow:none;
  position:relative; overflow:hidden;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  min-height:210px;
}
.wk-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,#ff8c00,#ffb14a 65%, transparent);
  opacity:.9;
}
.wk-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 32px rgba(0,0,0,.45);
}

/* Typo klarer */
.wk-card__title{ color:#fff; font-weight:750; line-height:1.25; margin:0 0 .45rem; }
.wk-card__excerpt{ color:#c9c9c9; font-size:.96rem; line-height:1.55; margin:0 0 .9rem; }

/* CTA: Link-Style (klein & „leicht“) */
.wk-btn-read{
  padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  color:#ffb566; font-weight:800; text-decoration:none;
  border-bottom:1px solid rgba(255,140,0,.35);
}
.wk-btn-read:hover{ color:#fff; border-bottom-color:#ff8c00; 
}/* ============================================
   🔸 Neu & lesenswert – kompakter & moderner
   ============================================ */

/* Container */
.wk-reads {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  margin-top: 1.8rem;
}

/* Überschrift */
.wk-reads__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  color: #ffb14a;
  font-weight: 800;
  letter-spacing: .2px;
}
.wk-reads__title::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff8c00;
  box-shadow: 0 0 8px rgba(255,140,0,.6);
}
.wk-reads__title::after {
  content: "";
  flex: 1;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,140,0,.45), rgba(255,140,0,0));
}

/* Grid enger */
.wk-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 980px) { .wk-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .wk-cards { grid-template-columns: 1fr; } }

/* Karten kompakter */
.wk-card {
  background: #151515;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 1rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .16s ease, border-color .16s ease;
  min-height: 160px;                 /* deutlich flacher als vorher */
}
.wk-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,140,0,.35);
}

/* kleine Top-Leiste */
.wk-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #ff8c00, #ffb14a 70%, transparent);
}

/* Typografie reduziert */
.wk-card__title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 .4rem;
  color: #ffb566;
}
.wk-card__excerpt {
  color: #cfcfcf;
  font-size: .9rem;
  line-height: 1.4;
  margin-bottom: .8rem;
}

/* CTA schlank */
.wk-btn-read {
  align-self: flex-start;
  font-size: .9rem;
  font-weight: 700;
  color: #ffb566;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,140,0,.3);
  padding-bottom: 1px;
  transition: all .15s ease;
}
.wk-btn-read:hover {
  color: #fff;
  border-bottom-color: #ff8c00;
}

/* Responsive: Text etwas größer auf kleineren Screens */
@media (max-width: 600px) {
  .wk-card { min-height: 150px; padding: .9rem 1rem; }
  .wk-card__title { font-size: .98rem; }
  .wk-card__excerpt { font-size: .9rem; }
}
/* ============================================================
   🧭 Neu & lesenswert – finale, kompakte & balancierte Version
   ============================================================ */

.wk-reads {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  margin-top: 1.8rem;
}

/* Titelzeile */
.wk-reads__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  color: #ffb14a;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.1rem;
}
.wk-reads__title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8c00;
  box-shadow: 0 0 8px rgba(255,140,0,.6);
}
.wk-reads__title::after {
  content: "";
  flex: 1;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,140,0,.45), rgba(255,140,0,0));
}

/* Karten-Layout */
.wk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: .8rem;
}

/* Karte */
.wk-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #141414;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 1rem 1.2rem 0.8rem;
  min-height: 160px;
  transition: transform .15s ease, border-color .15s ease;
}
.wk-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,140,0,.35);
}
.wk-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #ff8c00, #ffb14a 70%, transparent);
}

/* Titel & Text */
.wk-card__title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 .45rem;
  color: #ffb566;
}
.wk-card__excerpt {
  color: #cfcfcf;
  font-size: .92rem;
  line-height: 1.4;
  flex: 1;
  margin-bottom: .8rem;
}

/* CTA unten immer bündig */
.wk-card__actions {
  margin-top: auto;
  padding-top: .2rem;
}

/* Button-Link kompakt & modern */
.wk-btn-read {
  font-size: .9rem;
  font-weight: 700;
  color: #ffb566;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,140,0,.35);
  padding-bottom: 2px;
  transition: all .15s ease;
}
.wk-btn-read:hover {
  color: #fff;
  border-bottom-color: #ff8c00;
}

/* Responsive */
@media (max-width: 600px) {
  .wk-card {
    min-height: 150px;
    padding: .9rem 1rem .7rem;
  }
  .wk-card__title {
    font-size: .95rem;
  }
  .wk-card__excerpt {
    font-size: .9rem;
  }
}
/* Badge oben im Dialog */
.status-badge{
  display:inline-block;
  margin: .2rem 0 .6rem;
  padding: 4px 10px;
  font-size: .85rem;
  font-weight: 800;
  color: #ffcb7a;
  border: 1px solid rgba(255,140,0,.45);
  border-radius: 999px;
  background: rgba(255,140,0,.10);
  box-shadow: inset 0 0 8px rgba(255,140,0,.08);
}

/* weicher Hinweis-Block */
.hint-soft{
  border: 1px solid rgba(255,184,77,.45);
  background: #141008;
  color: #ffe9c7;
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: .8rem 0 1rem;
  box-shadow: 0 0 18px rgba(255,184,77,.18);
}

/* Liste im Modal kompakter */
.modal-list{
  margin: .4rem 0 1rem 1.1rem;
  line-height: 1.55;
}
.modal-list li{ margin: .25rem 0; 
}
/* --- Modal: Pill-Link wie Kachel-Buttons --- */
.link-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,140,0,.45);
  background:rgba(255,140,0,.10);
  color:#ffb566; font-weight:700; text-decoration:none;
  box-shadow:inset 0 0 8px rgba(255,140,0,.08);
  transition:all .18s ease-in-out;
}
.link-chip:hover{ background:rgba(255,140,0,.18); color:#fff; transform:translateY(-1px); }

/* --- Modal: „Im Aufbau“-Badge dezent --- */
.status-badge{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:8px;
  background:rgba(255,184,77,.12);
  border:1px solid rgba(255,184,77,.45);
  color:#ffcf83; font-weight:700; margin-bottom:.6rem;
}

/* --- Modal: Quote-Box für das Zitat --- */
.quote-box{
  margin:1rem 0 0;
  border-radius:12px;
  padding:12px 14px;
  background:linear-gradient(180deg,#141414 0%, #171717 100%);
  border:1px solid rgba(111,184,255,.35);
  box-shadow:0 0 18px rgba(111,184,255,.20);
  position:relative;
}
.quote-box::before{
  content:"";
  position:absolute; left:10px; top:10px; bottom:10px; width:4px;
  border-radius:6px;
  background:linear-gradient(180deg,#6fb8ff,#2e89ff);
  box-shadow:0 0 10px rgba(111,184,255,.35);
}
.quote-box blockquote{
  margin:0; padding-left:18px;
  color:#e6efff; font-style:italic; line-height:1.6;
}

/* Kleiner Feinschliff für Listen im Modal */
.modal-list{ margin:.6rem 0 1rem 1.2rem; }
.modal-list li{ padding:.2rem 0; 
}
/* --- Orange Quote-Box über Buttons --- */
.quote-box {
  margin: 1.2rem 0 1rem;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
  border: 1px solid rgba(255,140,0,0.45);
  box-shadow: 0 0 18px rgba(255,140,0,0.20);
  position: relative;
}
.quote-box::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffb14a, #ff8c00);
  box-shadow: 0 0 10px rgba(255,140,0,0.4);
}
.quote-box blockquote {
  margin: 0;
  padding-left: 18px;
  color: #ffe8c0;
  font-style: italic;
  line-height: 1.6;
}

/* --- Über-uns-Button im Mini-Kachel-Stil --- */
.btn-mini-orange {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,140,0,0.45);
  background: rgba(255,140,0,0.10);
  color: #ffb566;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s ease-in-out;
  box-shadow: inset 0 0 10px rgba(255,140,0,0.08);
}
.btn-mini-orange:hover {
  background: rgba(255,140,0,0.18);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(255,140,0,0.25), inset 0 0 12px rgba(255,140,0,0.10);
}
.actions-lead {
  margin: 0.8rem 0 0.4rem;
  color: #ffb566;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255,140,0,0.25);
}

/* Button-Container */
.hero-pill-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.4rem 0 2.2rem;
}


/* Basis Button */
.hero-pill,
.hero-pill:link,
.hero-pill:visited {
  display: inline-flex;
  align-items: center;
  gap: .55rem;

  padding: .75rem 1.4rem;
  border-radius: 999px;

  font-size: .9rem;
  font-weight: 600;

  background: rgba(30, 22, 10, 0.7); /* dunkler als der aktuelle Button */
  border: 1px solid rgba(255, 140, 0, .35);

  color: #ffbd7a;
  text-decoration: none;

  box-shadow:
    0 4px 12px rgba(0,0,0,.55),
    inset 0 0 12px rgba(255,140,0,.08);

  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;

  cursor: pointer;
  appearance: none;
}


/* Hover */
.hero-pill:hover {
  background: rgba(255, 140, 0, .16);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.6),
    0 0 12px rgba(255,140,0,.20),
    inset 0 0 16px rgba(255,140,0,.12);
}
dt[id] {
  scroll-margin-top: 260px;
}
a, a:visited, a:hover, a:active {
  text-decoration: none !important;
}

/* ==================================================== */
/* 99) WISSEN-SEITE PATCH & NEUE LAYOUTS (Patch-Bereich) */
/* ==================================================== */

/* 1. ZENTRIERUNG FIX (Höhere Spezifität) */
/* Überschreibt die Regel in Sektion 7) .info-abschnitt{ text-align:left; } */
.content .info-abschnitt {
  text-align: center !important; 
  /* Füge eine leichte Unterschrift hinzu, damit es sich als Intro abhebt */
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 140, 0, 0.15); 
  margin-bottom: 2rem;
}

/* 2. NEUE REGELN FÜR KOMPAKTE BOX-LISTENANSICHT (kachel-mini) */
/* Nutzt die Farben deines dunklen Themes */

.kachel-mini-container {
    display: grid;
    /* Nutzt das gleiche Grid-Schema wie deine Kachel-Container */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 1.5rem;
    padding: 1rem 0 2rem;
}

.kachel-mini {
    display: block;
    padding: 20px;
    background: var(--wk-elev); /* Hintergrund wie Haupt-Content */
    border: 1px solid rgba(255, 140, 0, 0.35); /* Dezenter Brand-Rand */
    border-radius: 12px;
    /* Übernimmt den Kachel-Schatten-Stil deines Themes */
    box-shadow:
        0 6px 18px rgba(0,0,0,.45),
        inset 0 0 10px rgba(255,140,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-decoration: none;
    color: var(--wk-text); /* Standard Textfarbe */
}

.kachel-mini:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 140, 0, 0.45);
    box-shadow:
        0 10px 26px rgba(0,0,0,.55),
        0 0 22px rgba(255,140,0,0.35),
        inset 0 0 12px rgba(255,140,0,0.12);
}

.kachel-mini h3 {
    margin-top: 0;
    margin-bottom: 0.3rem;
    font-size: 1.3em;
    color: var(--wk-brand); /* Nutzt deine Markenfarbe (Orange) */
}

.kachel-mini p {
    font-size: 0.9em;
    color: var(--wk-muted); /* Gedämpfte Farbe */
    margin-bottom: 1rem;
}

.read-more {
    display: block;
    font-size: 0.95em;
    font-weight: bold;
    color: var(--wk-link); /* Link-Farbe (Orange) */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.read-more:hover {
    text-decoration: none;
}


/* 3. SKALIERBARE ARTIKELLISTE (start-list) STYLED FÜR DUNKLES THEME */
/* Die Liste in wissen.html wird auf diesen Stil umgestellt. */

.article-index {
    margin-top: 2rem;
}

.start-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 140, 0, 0.2); /* Feine Linie oben */
}

.start-list li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 140, 0, 0.2); /* Feine Trennlinie */
    transition: background-color 0.15s ease;
}

.start-list li:hover {
    background-color: rgba(255, 140, 0, 0.05); /* Dezenter Hover-Effekt */
}

.start-list li a {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--wk-link); /* Linkfarbe (Orange) */
    margin-bottom: 5px;
    text-decoration: none;
}

.start-list li a:hover {
    color: var(--wk-brand); /* Markenfarbe beim Hover */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.start-list li span {
    display: block;
    font-size: 0.9em;
    color: var(--wk-muted); /* Gedämpfte Farbe */
}
.article-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.article-nav .btn-back {
  text-decoration: none;
  font-size: 1.05rem;
  color: #ff8c00;
  font-weight: 500;
}

.article-nav .btn-back:hover {
  text-decoration: underline;
}
.article-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.article-nav a {
  text-decoration: none;
  color: #ff8c00;
  font-weight: 500;
  font-size: 1.05rem;
}

.article-nav a:hover {
  text-decoration: underline;
}
/* ========================================================
   [NEU] Korrekturen & Artikel-Spezifische Styles (Final Patch)
   ======================================================== */

/* FIX 1: Stellt sicher, dass fetter Text auf dunklem Hintergrund weiß ist (löst das "Schwarz-auf-Schwarz"-Problem) */
.content strong, .content b, .content p strong, .content li strong {
    color: #FFFFFF !important; 
}
/* FIX 2: Überschreibt eine externe Regel, die den Text auf Grossbuchstaben zwingt. */
.content p, .content ul, .content li, .content a {
    text-transform: none !important;
}

/* Tabellen-Optimierung (Basis für 3-Generationen-Tabelle) */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    color: var(--wk-text);
    border: 1px solid var(--wk-link); 
}
.content th, .content td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.content th {
    background-color: var(--wk-elev);
    font-weight: bold;
}
.content tbody tr:nth-child(odd) {
    background-color: #1a1a1a;
}
.content tbody tr:nth-child(even) {
    background-color: #202020;
}

/* Stil für die Risiko-Box */
.risiko-box {
  border: 1px solid var(--wk-link);
  padding: 15px;
  margin: 1.5rem 0;
  border-radius: 8px;
  background-color: #2a2a2a;
}

/* Akzent-Navigation Styling */
.btn-nav-accent {
    background-color: #ffb14a !important; /* Orange Akzent */
    color: #1a1a1a !important; /* Dunkle Schrift */
    border: none !important;
    padding: 10px 18px !important;
}
.btn-nav-accent:hover {
    background-color: #e6a234 !important; /* Dunklerer Orange-Ton beim Hover */
}


/* NEU: Feste Navigation (Buttons unten links/rechts) */
.fixed-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 15px 30px;
    background-color: #111; /* Dunkler Hintergrund */
    border-top: 1px solid #444;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}

.nav-button {
    text-decoration: none;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    background-color: #333;
    white-space: nowrap;
}

.nav-button:hover {
    background-color: var(--wk-link); /* Akzentfarbe */
    color: #1a1a1a;
}

/* Die restlichen kleinen Korrekturen aus dem HTML-Block */
.schluss-appell {
    border-top: 3px solid var(--wk-link);
    padding-top: 1rem;
    margin-top: 2rem;
}
.hero-pill-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.4rem 0 2.2rem;
}
/* ========================================================
   [NEU] Korrekturen & Artikel-Spezifische Styles (Final Patch)
   ======================================================== */

/* FIX 1: Stellt sicher, dass fetter Text auf dunklem Hintergrund weiß ist (löst das "Schwarz-auf-Schwarz"-Problem) */
.content strong, .content b, .content p strong, .content li strong {
    color: #FFFFFF !important; 
}
/* FIX 2: Überschreibt eine externe Regel, die den Text auf Grossbuchstaben zwingt. */
.content p, .content ul, .content li, .content a {
    text-transform: none !important;
}

/* Tabellen-Optimierung (Basis für 3-Generationen-Tabelle) */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    color: var(--wk-text);
    border: 1px solid var(--wk-link); 
}
.content th, .content td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.content th {
    background-color: var(--wk-elev);
    font-weight: bold;
}
.content tbody tr:nth-child(odd) {
    background-color: #1a1a1a;
}
.content tbody tr:nth-child(even) {
    background-color: #202020;
}

/* Stil für die Risiko-Box */
.risiko-box {
  border: 1px solid var(--wk-link);
  padding: 15px;
  margin: 1.5rem 0;
  border-radius: 8px;
  background-color: #2a2a2a;
}

/* Stil für die DEF-BOX (z.B. Bitcoin-Knappheit, Web3-Definition) */
.def-box {
    border: 1px solid #6fb8ff; 
    background: #0f151b; 
    box-shadow: 0 0 20px rgba(111,184,255,.25);
    color: #e2eafc;
}

/* Stil für den Finanzierungshinweis (ruhig, aber mit Korrektem Orange-Rand) */
.content .hinweis-box {
    border: 1px solid #ffb84d; 
    background: #141008; 
    box-shadow: 0 0 20px rgba(255,184,77,.25); 
    color: #fff0cc; 
}

/* Akzent-Navigation Styling */
.btn-nav-accent {
    background-color: #ffb14a !important; /* Orange Akzent */
    color: #1a1a1a !important; /* Dunkle Schrift */
    border: none !important;
    padding: 10px 18px !important;
}
.btn-nav-accent:hover {
    background-color: #e6a234 !important; /* Dunklerer Orange-Ton beim Hover */
    color: #1a1a1a !important;
}

/* MEXC CTA Box Styling */
.cta-box-mexc {
    background: #151515;
    border: 2px solid #ffb14a;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin-top: 2rem;
}
.cta-box-mexc h3 { color: #ffb14a; margin-top: 0; }
.cta-box-mexc p.bold-code-text { font-weight: bold; }
.cta-box-mexc .accent-color-code { color: #ff6a3c; } /* Für den Code-Block */
.cta-box-mexc .cta-button {
    display: inline-block;
    background-color: #ffb14a;
    color: #1a1a1a;
    font-weight: 800;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.cta-box-mexc .cta-button:hover { background-color: #e6a234; }

/* Die restlichen kleinen Korrekturen aus dem HTML-Block */
.schluss-appell {
    border-top: 3px solid var(--wk-link);
    padding-top: 1rem;
    margin-top: 2rem;
}

/* Stil für den Footer, falls die Buttons keine Button-Tags sind, sondern Divs */
.wk-footer-pro .wk-footer-pro__pill {
    /* Stellt sicher, dass das Layout der Pills auch ohne JS-Funktionalität gut aussieht */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.wk-footer-pro .wk-footer-pro__support {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 1rem;
}