:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#475569; --line:#e2e8f0;
  --brand:#0ea5e9; --radius:16px;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* HEADER */
header.mast{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);}
.mast .bar{max-width:1100px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:center;position:relative;}
.btn-back{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  text-decoration:none;border:1px solid var(--line);border-radius:9999px;padding:6px 12px;color:var(--fg);}
.btn-back:hover{border-color:var(--brand);}
.logo{height:36px;display:block}

/* AUSWAHL – kompakt, kein großer Weißraum */
.selector h2{font-size:1rem;font-weight:600;margin:4px 0 6px}
.grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 6px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;gap:8px;align-items:center;padding:8px;cursor:pointer;transition:transform .08s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(2,6,23,.06)}
.thumb{width:64px;height:48px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.thumb-empty{width:64px;height:48px;border-radius:8px;border:1px solid var(--line);background:#f8fafc;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--muted)}
.card .title{font-weight:650;margin:0 0 2px;line-height:1.25;font-size:.98rem}
.card .meta{font-size:.85rem;color:var(--muted)}
.card.active{outline:2px solid var(--brand);outline-offset:2px}

/* HERO & ARTICLE */
.hero{margin:4px 0}
.title-xl{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15;margin:4px 0}
.meta-row{display:flex;align-items:center;gap:12px;color:var(--muted)}
.avatar{width:40px;height:40px;border-radius:9999px;object-fit:cover;border:1px solid var(--line)}
.cover{margin:16px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.cover img{width:100%;height:auto;display:block}
.content-wrap{max-width:800px;margin:0 auto}
article{max-width:800px;margin:0 auto 60px}
article p{font-size:1.05rem}
article h2{margin-top:1.8rem;margin-bottom:.5rem;font-size:clamp(1.2rem,2vw,1.6rem)}
article h3{margin-top:1.2rem;margin-bottom:.3rem}
article blockquote{margin:1.2rem 0;padding:1rem 1.2rem;border-left:3px solid var(--brand);background:#f0f9ff;border-radius:0 10px 10px 0}
.article-footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:24px;padding-top:14px;border-top:1px solid var(--line)}
.tag{padding:6px 10px;border:1px solid var(--line);border-radius:9999px;font-size:.85rem;color:var(--muted)}
#category.label{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);border-radius:9999px;font-size:.85rem;color:var(--muted)}

/* TOC / FUNNEL / TABLES */
.toc-simple{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;margin:10px 0 18px}
.callout{border:1px solid var(--line);background:#eef6ff;padding:12px 14px;border-radius:12px}
.figure{border:1px solid var(--line);border-radius:12px;padding:10px}
.table{width:100%;border-collapse:collapse;margin:10px 0}
.table th,.table td{border:1px solid var(--line);padding:8px;text-align:left}

/* CSS-FUNNEL */
.funnel{max-width:520px;margin:12px auto 16px}
.funnel .layer{text-align:center;padding:14px 8px;margin:10px auto;border:1px solid var(--line);border-radius:10px;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.funnel .awareness{background:#bae6fd}
.funnel .consideration{background:#fde68a;width:86%}
.funnel .conversion{background:#f9a8d4;width:72%}
.funnel .loyalty{background:#ddd6fe;width:58%}

/* FOOTER */
footer.site{border-top:1px solid var(--line);margin-top:30px;padding:16px 0;background:#fff}
footer.site nav{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:8px}
footer.site a{text-decoration:none;color:var(--muted)}
footer.site a:hover{color:var(--brand)}

/* Hinweis, wenn kein Beitrag ausgewählt ist */
.empty-notice{ text-align:center; margin:40px 0 24px; }
.empty-notice h1{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

/* ===== Stil für den Budget-Rechner-Button ===== */
a.label {
  display: inline-block;
  background: var(--brand);
  color: #fff !important;
  border: none;
  border-radius: 9999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(14,165,233,0.25);
  transition: all 0.2s ease;
}
a.label:hover {
  background: #0284c7;
  box-shadow: 0 4px 10px rgba(14,165,233,0.35);
  transform: translateY(-1px);
}
a.label:active {
  background: #0369a1;
  transform: translateY(0);
}

/* ===== Nach oben Button ===== */
#toTopBtn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  background: var(--brand);
  color: #fff;
  border: none;
  outline: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
  display: none; /* versteckt bis man scrollt */
}
#toTopBtn:hover {
  background: #0284c7;
  transform: translateY(-2px);
}

/* =========================
   Blog Artikel – Enhanced Design (Post 1)
   Design-only: Inhalt bleibt 1:1 gleich
   ========================= */

:root{
  --card:#ffffff;
  --soft:#f8fafc;
  --soft2:#f1f5f9;
  --ink:#0f172a;
  --ink2:#334155;
  --glow: rgba(14,165,233,.18);
  --shadow: 0 10px 24px rgba(2,6,23,.06);
  --shadow2: 0 16px 40px rgba(2,6,23,.08);
}

/* Artikel-Fläche etwas “magaziniger” */
#postContent{
  margin-top: 12px;
}

/* ---------- Fancy TOC Card ---------- */
.toc-fancy{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(1200px 400px at 10% 0%, var(--glow), transparent 60%),
              linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 10px 0 18px;
}

.toc-fancy .toc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px 8px;
}

.toc-fancy .toc-title{
  margin:0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .2px;
}

.toc-fancy .toc-sub{
  margin:4px 0 0;
  color: var(--ink2);
  font-size: .92rem;
}

.toc-fancy .toc-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink2);
  font-size: .85rem;
  white-space: nowrap;
}

.toc-fancy .toc-body{
  padding: 6px 14px 14px;
}

.toc-fancy ol{
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.toc-fancy li{
  padding: 10px 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink2);
  list-style-position: outside;
}

/* dezente Deko-Linien */
.toc-fancy:before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(14,165,233,.22), transparent 65%);
  filter: blur(0px);
}
.toc-fancy:after{
  content:"";
  position:absolute;
  left:-60px;
  top:-60px;
  width:160px;
  height:160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.20), transparent 60%);
}

/* ---------- Abschnitts-Karten ---------- */
.article-section{
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px 14px;
  margin: 14px 0;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.article-section:hover{
  box-shadow: var(--shadow2);
}

.article-section .sec-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.sec-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.sec-num{
  width:34px;
  height:34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(135deg, var(--brand), #38bdf8);
  box-shadow: 0 10px 22px rgba(14,165,233,.20);
}

.sec-chip{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink2);
  font-size: .85rem;
}

/* Überschriften im Abschnitt */
.article-section h2{
  margin: 2px 0 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.2;
}

/* kleine “Glow”-Akzente pro Abschnitt */
.article-section .sec-glow{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-90px;
  width:220px;
  height:220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,.16), transparent 70%);
  pointer-events:none;
}

/* ---------- Absatz-Typografie schöner ---------- */
.article-section p{
  color: var(--ink2);
  font-size: 1.06rem;
  line-height: 1.75;
  margin: 10px 0;
}

/* ---------- Listen als hübsche Elemente ---------- */
.article-section ul{
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.article-section ul li{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, var(--soft));
  border-radius: 14px;
  padding: 12px 12px;
  color: var(--ink2);
  position: relative;
}

.article-section ul li:before{
  content:"";
  position:absolute;
  left: 12px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #38bdf8);
  box-shadow: 0 0 0 4px rgba(14,165,233,.10);
}

.article-section ul li{
  padding-left: 32px;
}

.article-section ol{
  margin: 10px 0 0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color: var(--ink2);
}

.article-section ol li{
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,.6);
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
}

/* ---------- Callout als “Insight Panel” ---------- */
.callout{
  border: 1px solid rgba(14,165,233,.35);
  background: radial-gradient(700px 260px at 20% 0%, rgba(14,165,233,.18), transparent 60%),
              linear-gradient(180deg, #f0f9ff, #ffffff);
  border-radius: 18px;
  padding: 14px 14px;
  color: var(--ink2);
  box-shadow: 0 12px 26px rgba(14,165,233,.10);
  position: relative;
  overflow: hidden;
}

.callout:before{
  content:"Insight";
  position:absolute;
  top: 12px;
  right: 14px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .8px;
  color: rgba(2,132,199,.65);
  text-transform: uppercase;
  border: 1px solid rgba(14,165,233,.25);
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(255,255,255,.7);
}

/* ---------- Funnel modern (ohne neue Wörter) ---------- */
.funnel{
  max-width: 720px;
  margin: 14px auto 16px;
  display: grid;
  gap: 10px;
}

.funnel .layer{
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 14px 14px;
  font-weight: 900;
  letter-spacing: .6px;
  position: relative;
  overflow: hidden;
  text-align: left; /* wirkt moderner als center */
}

.funnel .layer:after{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:170px;
  height:170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.45), transparent 60%);
}

.funnel .awareness{background: linear-gradient(135deg, #bae6fd, #e0f2fe);}
.funnel .consideration{background: linear-gradient(135deg, #fde68a, #fef3c7); width: 92%; justify-self: center;}
.funnel .conversion{background: linear-gradient(135deg, #f9a8d4, #fce7f3); width: 78%; justify-self: center;}
.funnel .loyalty{background: linear-gradient(135deg, #ddd6fe, #ede9fe); width: 64%; justify-self: center;}

.funnel .layer span.small{
  display:block;
  margin-top: 4px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(15,23,42,.75);
  font-size: .92rem;
}

/* ---------- Takeaways-Liste etwas “finaler” ---------- */
.takeaways ul li{
  border-style: solid;
}
.takeaways .sec-num{
  background: linear-gradient(135deg, #22c55e, #86efac);
}

/* Mobile spacing tuning */
@media (max-width: 540px){
  .article-section{padding: 16px 14px 12px;}
  .toc-fancy .toc-head{flex-direction:column; align-items:flex-start;}
  .toc-fancy .toc-badge{align-self:flex-start;}
}

/* =========================
   BLOG Look (dezent) + Pyramid Fix
   ========================= */

/* Fließtext typischer Blog: sauberer Rhythmus */
#postContent p{
  max-width: 72ch;
  margin: 0 0 14px;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #334155;
}
#postContent h2{
  max-width: 72ch;
  margin: 34px 0 10px;
  line-height: 1.18;
  position: relative;
}
#postContent h2:after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  border-radius: 9999px;
  background: rgba(14,165,233,.55);
}

/* TOC bleibt wie Blog-Box (dezent, nicht “Kachel”) */
.toc-blog{
  max-width: 72ch;
  margin: 12px 0 18px;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.toc-blog h3{
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 800;
}
.toc-blog ol{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.toc-blog li{
  color: #475569;
}

/* Callout schöner, aber nicht “Cardig” */
.callout-blog{
  max-width: 72ch;
  margin: 14px 0 18px;
  border-left: 4px solid var(--brand);
  background: #f0f9ff;
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
  color: #0284c7;   /* ← DAS HINZUFÜGEN */
}
.callout-blog{
  padding-left: 40px;
}

.callout-label{
  display: inline-block;
  background: #ffffff;
  border: 1px solid rgba(14,165,233,.35);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 6px;
}

/* sorgt dafür, dass der Text unter "Wichtig:" beginnt */
.callout-blog{
  line-height: 1.7;
}
.callout-label + *{
  display: block;
}

/* Header-Zeile im Callout */
.callout-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

/* Wichtig-Badge */
.callout-label{
  display:inline-block;
  background:#ffffff;
  border:1px solid rgba(14,165,233,.35);
  border-radius:999px;
  padding:4px 10px;
  font-weight:700;
  color:var(--brand);
}


/* Text darunter */
.callout-text{
  color:#334155;
  line-height:1.7;
}


/* Lists: dezent mit kleinen Punkten */
.blog-list{
  max-width: 72ch;
  margin: 0 0 16px;
  padding-left: 18px;
}
.blog-list li{
  margin: 8px 0;
  color:#334155;
}
.blog-steps{
  max-width: 72ch;
  margin: 0 0 16px;
}

/* =========================
   PYRAMID FUNNEL – ECHTE PYRAMIDE
   Zentriert + Text mittig + kein Abschneiden
   ========================= */

.funnel.pyramid{
  max-width: 72ch;
  margin: 18px 0 18px;
  display: grid;
  gap: 12px;
}

/* Wichtig: NICHT text-align left, sonst sieht es so aus wie bei dir */
.funnel.pyramid .layer{
  margin: 0 auto;             /* Zentriert */
  width: 100%;
  max-width: 680px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  overflow: hidden;
}

/* Innen: Text exakt mittig */
.funnel.pyramid .layer-inner{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 18px 16px;
}

/* Typo im Funnel */
.funnel.pyramid .layer-title{
  font-weight: 900;
  letter-spacing: .8px;
}
.funnel.pyramid .layer-sub{
  margin-top: 4px;
  font-weight: 700;
  color: rgba(15,23,42,.72);
}

/* Trapezform = “echte Pyramidenstufen” */
.funnel.pyramid .layer{
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
}

/* Stufenbreiten (oben schmal, unten breit) */
.funnel.pyramid .awareness{ width: 46%; background:#bae6fd; }
.funnel.pyramid .consideration{ width: 78%; background:#fde68a; }
.funnel.pyramid .conversion{ width: 86%; background:#f9a8d4; }
.funnel.pyramid .loyalty{ width: 94%; background:#ddd6fe; }

/* Mobile: nicht zu schmal */
@media (max-width: 520px){
  .funnel.pyramid .awareness{ width: 70%; }
  .funnel.pyramid .consideration{ width: 92%; }
  .funnel.pyramid .conversion{ width: 96%; }
  .funnel.pyramid .loyalty{ width: 100%; }
  .funnel.pyramid .layer-inner{ padding: 16px 12px; }
}

/* Takeaways als Boxen mit Key-Emoji */
#takeaways-3 + ul{
  list-style: none;
  padding: 0;
  margin: 12px 0 20px;
  display: grid;
  gap: 10px;
}

#takeaways-3 + ul li{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;   /* komplett rund */
  padding: 10px 16px 10px 42px;
  position: relative;
  box-shadow: 0 4px 10px rgba(2,6,23,.05);
}

/* Key Emoji */
#takeaways-3 + ul li:before{
  content: "🔑";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* Takeaways als Boxen mit Key-Emoji */
#takeaways-2 + ul{
  list-style: none;
  padding: 0;
  margin: 12px 0 20px;
  display: grid;
  gap: 10px;
}

#takeaways-2 + ul li{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;   /* komplett rund */
  padding: 10px 16px 10px 42px;
  position: relative;
  box-shadow: 0 4px 10px rgba(2,6,23,.05);
}

/* Key Emoji */
#takeaways-2 + ul li:before{
  content: "🔑";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* Takeaways als Boxen mit Key-Emoji */
#takeaways-1 + ul{
  list-style: none;
  padding: 0;
  margin: 12px 0 20px;
  display: grid;
  gap: 10px;
}

#takeaways-1 + ul li{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;   /* komplett rund */
  padding: 10px 16px 10px 42px;
  position: relative;
  box-shadow: 0 4px 10px rgba(2,6,23,.05);
}

/* Key Emoji */
#takeaways-1 + ul li:before{
  content: "🔑";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}

#takeaways-1 + ul li{
  margin: 0;
  line-height: 1.4;
}

/* Insight-Callout ohne "Wichtig" */
.callout-insight-only{
  position: relative;
  padding: 14px;
}

/* INSIGHT in eigener Zeile */
.insight-row{
  margin-bottom: 2px;
}

/* INSIGHT Badge */
.callout-insight{
  display: inline-block;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(14,165,233,.35);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #0284c7;
  font-size: .75rem;
}

/* Text darunter */
.callout-text{
  color:#334155;
  line-height:1.7;
}

/* wichtig: alte absolute INSIGHT-Regeln deaktivieren */
.callout-insight-only:before,
.callout-insight-only:after{
  content: none !important;
}

@media (max-width: 600px){
  .grid{
    gap: 6px;   /* vorher z. B. 10px */
  }

  .card{
    margin: 0;
  }
}

/* ===== Funnel (Centered, symmetric, responsive) ===== */

.funnel-pyramid{
  max-width: 720px;
  margin: 28px auto;
  padding: 0 14px;         /* verhindert "über den Rand" am Handy */
  display: grid;
  gap: 16px;
  justify-items: center;   /* garantiert Zentrierung */
}

/* gemeinsamer Stil */
.funnel-layer{
  text-align: center;
  padding: 22px 16px;
  border-radius: 14px;
  font-weight: 700;

  /* wichtig für Symmetrie */
  box-sizing: border-box;
  margin-inline: auto;
}

/* Text */
.funnel-layer strong{
  display:block;
  letter-spacing: 1px;
}
.funnel-layer span{
  display:block;
  margin-top: 6px;
  font-weight: 600;
  opacity: .85;
}

/* Größen + Farben (mit "Deckel" für Mobile) */
.awareness{
  width: min(100%, 720px);   /* nie breiter als Container */
  background: linear-gradient(180deg, #bfe0f1, #9fc9e0);
}

.consideration{
  width: min(80%, 720px);
  background: linear-gradient(180deg, #f2e19a, #e6cf72);
}

.conversion{
  width: min(60%, 720px);
  background: linear-gradient(180deg, #e6a6c4, #d98fb6);
}

.loyalty{
  width: min(40%, 720px);
  background: linear-gradient(180deg, #cfc8e6, #b8afd8);
}

/* Mobile: nicht zu schmal unten */
@media (max-width: 520px){
  .funnel-pyramid{ padding: 0 10px; }
  .consideration{ width: 92%; }
  .conversion{ width: 84%; }
  .loyalty{ width: 72%; }
}

/* ===== Clean Calculation Blocks ===== */

.calc{
  max-width: 72ch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  padding: 12px 12px;
  margin: 12px 0 18px;
}

.calc-kpis{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.kpi{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 10px;
  background: #ffffff;
  text-align: center;
}
.kpi span{
  display:block;
  font-size: .78rem;
  color: #64748b;
  font-weight: 700;
}
.kpi strong{
  display:block;
  margin-top: 2px;
  font-size: 1rem;
  color: #0f172a;
}

.calc-results{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.result{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
  display:flex;
  align-items:baseline;
  justify-content: space-between;
  gap: 10px;
}
.result span{
  color:#64748b;
  font-weight: 700;
  font-size: .85rem;
}
.result strong{
  color:#0f172a;
  font-weight: 900;
}
.result.highlight{
  border-color: rgba(14,165,233,.35);
  background: linear-gradient(180deg, #f0f9ff, #ffffff);
}

/* B2B Flow (Impressions → Klicks → ...) */
.calc-flow{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}

.flow{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 10px;
  background: #ffffff;
  text-align: center;
}
.flow strong{
  display:block;
  font-weight: 900;
  color:#0f172a;
  font-size: .9rem;
}
.flow span{
  display:block;
  margin-top: 2px;
  color:#334155;
  font-weight: 700;
  font-size: .88rem;
}
.arrow{
  color: #94a3b8;
  font-weight: 900;
}

/* Formel-Box cleaner */
.formula-clean{
  max-width: 72ch;
  margin: 10px 0 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border: 1px solid var(--line);
  padding: 12px 14px;
}
.formula-clean .formula-line{
  color:#334155;
  font-weight: 700;
  line-height: 1.6;
}
.formula-clean .formula-line + .formula-line{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148,163,184,.6);
}

/* Mobile: alles sauber umbrechen */
@media (max-width: 650px){
  .calc-kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .calc-results{
    grid-template-columns: 1fr;
  }
  .calc-flow{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .arrow{
    display:none;
  }
}

/* KPI Cards (Reporting Section) */
.kpi-grid{
  max-width: 72ch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0 18px;
}

.kpi-card{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 14px 12px;
  text-align: center;
}

/* Label */
.kpi-card div{
  font-size: .85rem;
  font-weight: 700;
  color: #64748b;
}

/* Wert */
.kpi-card strong{
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 900;
  color: #0f172a;
}

/* Mobile Layout */
@media (max-width: 600px){
  .kpi-grid{
    grid-template-columns: 1fr;
  }
}

/* Decision Rules Block */
.decision-box{
  max-width: 72ch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  padding: 14px;
  margin: 12px 0 18px;
}

.decision-title{
  font-weight: 900;
  margin-bottom: 10px;
  color: #0f172a;
}

/* Liste */
.decision-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.decision-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
}

.decision-icon{
  font-size: 1.1rem;
}

/* Text */
.decision-list strong{
  display: block;
  font-size: .92rem;
}

.decision-list span{
  font-size: .85rem;
  color: #475569;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 600px){
  .decision-list li{
    align-items: flex-start;
  }
}

.decision-footnote{
  margin-top: 10px;
  font-size: .85rem;
  color: #475569;
  font-weight: 600;
}

/* ===== Testing Framework Strip ===== */

.testing-framework{
  max-width: 72ch;
  margin: 14px 0 22px;
  display: grid;
  gap: 12px;
}

/* einzelne Zeile */
.test-row{
  display: grid;
  gap: 8px;
}

/* Überschrift links */
.test-label{
  font-weight: 900;
  font-size: .9rem;
  color: #0f172a;
}

/* Chips */
.test-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.test-chips span{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  background: #f8fafc;
  border: 1px solid var(--line);
  color: #334155;
}

/* dezente Nebeninfo */
.test-chips .muted{
  background: #fff;
  border-style: dashed;
  color: #64748b;
}

/* Footer / Prozess */
.testing-footer{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148,163,184,.6);
  font-size: .85rem;
  color: #475569;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 600px){
  .test-label{
    font-size: .95rem;
  }
}