/* ═══════════════════════════════════════════
   BookedoutDentist – Webdesign für Zahnärzte
   EMD Content Page
   Min body text: 16px / Optimized for 42–60 age group
   ═══════════════════════════════════════════ */

:root{
  --primary:#052E26;
  --cta:#0DCCA9;
  --cta-hover:#0ab492;
  --cta-btn:#F1615A;
  --cta-btn-hover:#e04e47;
  --bg-white:#FFFFFF;
  --bg-light:#F9FAFA;
  --bg-mint:#F5FFFD;
  --bg-dark:#052E26;
  --border:#ECEFEF;
  --text-muted:#4d6e68;
  --star:#F5B731;
  --radius:16px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  font-family:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.75;color:var(--primary);background:var(--bg-light);
  overflow-x:hidden;max-width:100vw;margin:0;padding:0;
}
img,svg,video,iframe{max-width:100%;height:auto}
a{color:var(--cta);text-decoration:none;transition:color .2s}
a:hover{color:var(--cta-hover)}
strong{color:var(--primary)}

/* ─── Layout ─── */
.w{max-width:900px;margin:0 auto;padding:0 1.5rem;width:100%}
.w-wide{max-width:1180px;margin:0 auto;padding:0 2.5rem;width:100%}
.w-ultra{max-width:min(1320px,95vw);margin:0 auto;padding:0 2rem;width:100%}
.w-narrow{max-width:780px}

/* ─── Header ─── */
.hdr{padding:.75rem 0;background:var(--bg-white);border-bottom:1px solid var(--border)}
.hdr .w-wide{display:flex;align-items:center;justify-content:center}
.hdr svg{height:22px;width:auto}

/* ─── Hero ─── */
.hero{padding:3rem 0;background:var(--bg-white)}
.hero .w{display:flex;flex-direction:column;align-items:center;text-align:center}

.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:var(--primary);background:var(--bg-light);border:1px solid var(--border);
  padding:.35rem .85rem;border-radius:50px;margin-bottom:1.25rem;
}

h1{
  font-size:clamp(1.625rem,3.2vw,2.75rem);font-weight:700;line-height:1.2;
  margin-bottom:1rem;color:var(--primary);max-width:720px;
}

.hero-sub{
  font-size:1.05rem;line-height:1.85;color:var(--primary);
  margin-bottom:1.5rem;max-width:640px;
}

.hero-author{
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:1.5rem;text-align:left;
}
.hero-author-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
.hero-author-name{display:block;font-weight:700;font-size:.95rem;color:var(--primary);line-height:1.3}
.hero-author-role{display:block;font-size:.8rem;color:var(--text-muted);line-height:1.3}

.hero-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero-cta-sub{font-size:.8rem;color:var(--text-muted);letter-spacing:.02em}
.hero-cta-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}

/* ─── Buttons ─── */
.btn-solid{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1rem 2rem;background:var(--cta-btn);color:#fff;
  font-weight:700;font-size:1.05rem;text-decoration:none;
  border:none;border-radius:12px;transition:all .2s;cursor:pointer;
}
.btn-solid:hover{background:var(--cta-btn-hover);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px rgba(241,97,90,.3)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1rem 1.5rem;background:transparent;color:var(--primary);
  font-weight:600;font-size:1rem;text-decoration:none;
  border:1px solid var(--border);border-radius:12px;transition:all .2s;
}
.btn-ghost:hover{border-color:var(--cta-btn);color:var(--cta-btn)}

/* ─── TOC ─── */
.toc-sec{background:var(--bg-light);padding:2rem 0}
.toc{
  background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem 2rem;
}
.toc-title{
  font-size:1rem;font-weight:700;color:var(--primary);
  margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;
}
.toc-title i{color:var(--cta);font-size:1.1rem}
.toc-list{
  list-style:none;counter-reset:toc;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.4rem;
}
.toc-list li{counter-increment:toc}
.toc-list li a{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:1rem;color:var(--primary);text-decoration:none;
  padding:.35rem .5rem;border-radius:8px;transition:background .2s;
}
.toc-list li a::before{
  content:counter(toc)'.';font-weight:700;color:var(--cta);
  min-width:1.5rem;
}
.toc-list li a:hover{background:var(--bg-light);color:var(--primary)}

/* ─── Section System ─── */
.section-label{
  text-transform:uppercase;font-size:.875rem;font-weight:700;letter-spacing:1.5px;
  color:var(--cta);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;
}
.section-label i{font-size:1rem}
.section-label-center{justify-content:center}
.section-title{
  font-size:1.6rem;font-weight:700;margin-bottom:1.5rem;color:var(--primary);
}
.section-title-center{text-align:center}
h2{font-size:1.4rem;font-weight:700;line-height:1.35;margin-bottom:.75rem;color:var(--primary)}

/* ─── Content Sections ─── */
.content-sec{padding:3rem 0;background:var(--bg-white)}
.content-sec-alt{background:var(--bg-light)}

/* Kontrast-Regeln: bg-light Boxen auf bg-light Sections → weiß */
.content-sec-alt .highlight-box{background:var(--bg-white)}
.content-sec-alt .quote-block{background:var(--bg-white)}
.content-sec-alt .compare-table th{background:var(--bg-white)}
.content-sec-alt .proof-callout{background:var(--bg-white)}

/* Kontrast-Regeln: bg-white Boxen auf bg-white Sections → light */
.content-sec:not(.content-sec-alt):not(.content-sec-dark) .inline-cta{background:var(--bg-light)}

.content-body{font-size:1rem;line-height:1.85;color:var(--primary)}
.content-body p{margin-bottom:1rem}
.content-body p:last-child{margin-bottom:0}
.content-body ul,.content-body ol{padding-left:1.25rem;margin-bottom:1rem}
.content-body li{margin-bottom:.4rem}
.content-body em{font-style:italic}
.content-body h3{font-size:1.15rem;font-weight:700;margin:1.5rem 0 .75rem;color:var(--primary)}

/* ─── Highlight Box ─── */
.highlight-box{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--bg-light);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.25rem 1.5rem;margin:1.5rem 0;
  font-size:1rem;line-height:1.7;
}
.highlight-icon{
  width:36px;height:36px;border-radius:8px;
  background:var(--border);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:1.1rem;
}
/* ─── Two-Column Cards ─── */
.two-col-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.info-card{
  background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.25rem 1.5rem;
}
.content-sec-alt .info-card{background:var(--bg-white)}
.info-card-header{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;
}
.info-card-icon{
  width:36px;height:36px;border-radius:10px;background:rgba(13,204,169,.15);
  display:flex;align-items:center;justify-content:center;color:var(--cta);
  font-size:1.1rem;flex-shrink:0;
}
.info-card h3{font-size:1.05rem;font-weight:700;color:var(--primary);margin:0}
.info-card p{font-size:1rem;line-height:1.7;color:var(--primary);margin:0 0 .75rem}
.info-card p:last-child{margin-bottom:0}
.info-card ul{list-style:none;padding:0;margin:.5rem 0 0}
.info-card li{
  padding:.4rem 0 .4rem 1.25rem;position:relative;
  font-size:1rem;line-height:1.6;color:var(--primary);
}
.info-card-pro li::before{content:'✓';position:absolute;left:0;color:var(--cta);font-weight:700}
.info-card-con li::before{content:'✗';position:absolute;left:0;color:var(--cta-btn);font-weight:700}

/* ─── Compare Table ─── */
.compare-table-wrap{overflow-x:auto;margin:1.5rem 0;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-white)}
.compare-table{width:100%;border-collapse:collapse;font-size:.9rem}
.compare-table th,.compare-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.compare-table th{background:var(--bg-light);font-weight:700;font-size:.85rem;color:var(--primary);white-space:nowrap}
.compare-table th i{color:var(--cta);margin-right:.3rem}
.compare-table td:first-child{font-size:.85rem;color:var(--text-muted);white-space:nowrap}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tbody tr:hover{background:var(--bg-light)}


/* ─── Statistics ─── */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0}
.stat-card{
  background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem;text-align:center;
}
.stat-val{font-size:2.5rem;font-weight:800;color:var(--cta);line-height:1}
.stat-label{font-size:1rem;font-weight:600;color:var(--primary);margin-top:.5rem;line-height:1.4}
.stat-source{font-size:.7rem;color:var(--text-muted);margin-top:.5rem;font-style:italic}
.stat-source a{color:var(--cta);font-style:normal}
.stat-source a:hover{text-decoration:underline}


/* ─── ROI Calculator ─── */
.roi-calc{
  margin-top:2rem;
  background:var(--bg-white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.75rem;
}
.roi-inputs{
  display:flex;flex-direction:column;gap:1rem;
  margin-bottom:1.75rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);
}
.roi-input-row{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.roi-input-row label{
  font-size:1rem;font-weight:600;color:var(--primary);
  min-width:220px;
}
.roi-input-row input[type="range"]{
  flex:1;min-width:120px;height:8px;
  -webkit-appearance:none;appearance:none;
  background:var(--border);border-radius:4px;
}
.roi-input-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;
  background:var(--cta);border-radius:50%;cursor:pointer;
}
.roi-input-val{
  font-weight:700;color:var(--cta);min-width:3rem;text-align:right;
}
.roi-chart-wrap{margin-bottom:1.5rem}
.roi-chart-legend{
  display:flex;gap:1.25rem;margin-bottom:.75rem;
  font-size:.8rem;color:var(--text-muted);
}
.roi-legend-item{display:flex;align-items:center;gap:.4rem}
.roi-legend-revenue i{width:12px;height:12px;background:rgba(13,204,169,.5);border-radius:2px}
.roi-legend-profit i{width:12px;height:12px;background:var(--cta);border-radius:2px}
.roi-chart-area{
  display:flex;gap:.75rem;align-items:stretch;height:220px;
}
.roi-chart-yaxis{
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:.7rem;font-weight:600;color:var(--text-muted);
  padding:.25rem 0;min-width:52px;height:180px;
}
.roi-chart-ytick{flex-shrink:0}
.roi-chart{
  flex:1;display:flex;align-items:flex-end;gap:.5rem;
  padding:0 .5rem;border-left:1px solid var(--border);
}
.roi-chart-bar-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;
}
.roi-chart-bar-group{
  display:flex;flex-direction:row;gap:3px;width:100%;justify-content:center;align-items:flex-end;
  height:180px;min-height:180px;
}
.roi-chart-bar{
  flex:1;min-width:10px;border-radius:4px 4px 0 0;min-height:6px;
  align-self:flex-end;transition:height .2s;
}
.roi-chart-bar-revenue{background:rgba(13,204,169,.4)}
.roi-chart-bar-profit{background:var(--cta)}
.roi-chart-bar-val{
  font-size:.7rem;font-weight:700;color:var(--primary);margin-bottom:.1rem;
}
.roi-chart-year{
  font-size:.7rem;font-weight:600;color:var(--text-muted);
}
.roi-totals{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-bottom:1rem;
}
.roi-total-card{
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:12px;padding:1rem 1.25rem;
}
.roi-total-label{font-size:.85rem;color:var(--text-muted);display:block}
.roi-total-val{font-size:1.5rem;font-weight:800;color:var(--cta)}
.roi-total-profit{color:var(--primary)}
.roi-note{
  font-size:1rem;line-height:1.65;color:var(--primary);
  margin:0;padding-top:1rem;border-top:1px solid var(--border);
}
@media (max-width:600px){
  .roi-totals{grid-template-columns:1fr}
  .roi-input-row{flex-direction:column;align-items:stretch}
}

/* ─── Proof Callout (inline social proof) ─── */
.proof-callout{
  margin:2rem 0;padding:1.5rem;
  background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);
}
.proof-callout-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.proof-callout-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0}
.proof-callout-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.proof-callout-name{font-size:1rem;font-weight:700;color:var(--primary);line-height:1.2}
.proof-callout-sub{font-size:.85rem;color:var(--text-muted)}
.proof-callout-stats{display:flex;gap:1rem;margin-bottom:1rem}
.proof-callout-stat{
  flex:1;background:var(--bg-light);border:1px solid var(--border);border-radius:10px;
  padding:.75rem;text-align:center;
}
.proof-callout-stat strong{display:block;font-size:1.1rem;color:var(--cta);line-height:1.2}
.proof-callout-stat span{font-size:.8rem;color:var(--text-muted)}
.proof-callout-text{font-size:1rem;line-height:1.6;color:var(--primary);margin:0;font-style:italic}
@media(max-width:600px){
  .proof-callout-stats{flex-direction:column;gap:.5rem}
}

/* ─── Ranking Factors ─── */
.factor-list{display:flex;flex-direction:column;gap:.75rem;margin:1.5rem 0}
.factor{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.25rem 1.5rem;
}
.content-sec:not(.content-sec-alt) .factor{background:var(--bg-light)}
.content-sec-dark .factor{background:var(--bg-white)}
.factor-rank{
  width:36px;height:36px;border-radius:50%;
  background:var(--cta);color:#fff;font-weight:800;font-size:1rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.factor-content h3{font-size:1.05rem;font-weight:700;color:var(--primary);margin:0 0 .25rem}
.factor-content p{font-size:1rem;line-height:1.65;color:var(--primary);margin:0 0 .75rem}
.factor-content p:last-child{margin-bottom:0}

/* ─── Mid-CTA ─── */
/* ─── Inline CTA (zwischen Kapiteln) ─── */
.inline-cta{
  margin:2.5rem 0;padding:1.25rem 1.5rem;background:var(--bg-white);
  border:1px solid var(--border);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;
}
.inline-cta-text{font-size:1rem;font-weight:600;color:var(--primary);margin:0}
.inline-cta-note{font-size:.8rem;color:var(--text-muted);margin:0}
.highlight-box + .inline-cta{margin-top:2rem}

.mid-cta-sec{
  background:var(--bg-light);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:3rem 0;
}
.mid-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem}
.mid-cta-text{font-size:1.25rem;font-weight:700;color:var(--primary);line-height:1.4;max-width:500px;margin:0}
.mid-cta-trust{font-size:.875rem;color:var(--text-muted);margin:0}

/* ─── Cases / Mini Grid ─── */
.cases-sec{padding:3rem 0;background:var(--bg-white)}
.cases-sec-sub{text-align:center;color:var(--text-muted);font-size:1rem;max-width:540px;margin:0 auto 2rem}

.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.mini{
  background:var(--bg-white);border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;
}
.cases-sec .mini{background:var(--bg-light)}
.mini-avatar{
  width:44px;height:44px;border-radius:50%;background:var(--bg-light);
  flex-shrink:0;overflow:hidden;
}
.mini-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.mini-info{min-width:0}
.mini-name{font-size:1rem;font-weight:700;color:var(--primary)}
.mini-name span{font-weight:400;color:var(--text-muted)}
.mini-stat{font-size:14px}
.mini-stat strong{color:var(--cta);font-weight:700}
.mini-stat span{color:var(--text-muted)}

/* Cases Quote */
.cases-quote{margin-top:2rem}

/* ─── Quote ─── */
.quote-block{
  margin:2rem 0;padding:1.75rem;text-align:left;
  background:var(--bg-light);border-radius:var(--radius);border:1px solid var(--border);
}
.quote-avatar{
  width:44px;height:44px;border-radius:50%;background:var(--bg-mint);
  flex-shrink:0;overflow:hidden;
}
.quote-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.quote-block-text{
  font-size:1.2rem;line-height:1.9;font-style:italic;color:var(--primary);margin-bottom:1.25rem;
}
.quote-block-author{
  display:flex;align-items:center;gap:.75rem;font-size:.95rem;color:var(--text-muted);
  padding-top:1rem;border-top:1px solid var(--border);
}
.quote-block-author cite,.quote-block-author strong{color:var(--primary);font-style:normal}

/* ─── Reviews ─── */
.reviews-sec{padding:3rem 0;background:var(--bg-light)}
.reviews-sec .grating{display:flex;justify-content:center;margin-bottom:1rem}
.grating{display:inline-flex;align-items:center;gap:.625rem;text-decoration:none;color:var(--primary)}
.grating-faces{display:flex}
.grating-face{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-15px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.grating-face:first-child{margin-left:0}
.grating-info{display:flex;flex-direction:column;gap:0;line-height:1.1}
.grating-top{display:flex;align-items:center;gap:.375rem}
.grating-score{font-weight:700;font-size:1rem;color:var(--primary)}
.grating-top svg{height:14px;width:auto}
.grating-count{font-size:.75rem;color:var(--text-muted);white-space:nowrap}

.reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.review-card{background:var(--bg-white);border:1px solid var(--border);border-radius:12px;padding:1.25rem}
.review-head{display:flex;align-items:center;gap:.625rem;margin-bottom:.75rem}
.review-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.review-name{font-weight:700;font-size:.875rem;color:var(--primary);line-height:1.2}
.review-stars{margin-top:2px;color:#FBBC04;font-size:.75rem;letter-spacing:1px}
.review-text{font-size:.875rem;color:var(--text-muted);line-height:1.6;margin:0}

/* ─── Video (Pitch) ─── */
.hero-video{width:100%;max-width:680px;margin-top:2rem}
.vid{border-radius:var(--radius);overflow:hidden;cursor:pointer;border:1px solid var(--border);position:relative}
.vid-poster{
  aspect-ratio:16/9;background-size:cover;background-position:center;
  background-color:var(--bg-light);display:flex;align-items:center;justify-content:center;
}
.play{border:none;background:none;cursor:pointer;padding:0}
.play-c{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;background:var(--cta-btn);
  transition:transform .25s,box-shadow .25s;
  animation:play-pulse 2s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(241,97,90,.4);
}
.play-c svg{margin-left:3px}
.vid:hover .play-c{transform:scale(1.1);animation:none;box-shadow:0 8px 32px rgba(241,97,90,.4)}
@keyframes play-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(241,97,90,.4)}
  50%{transform:scale(1.08);box-shadow:0 0 0 16px rgba(241,97,90,0)}
}
.vid.is-playing{padding-bottom:56.25%;height:0;cursor:default;border:none}
.vid.is-playing iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.hero-video-info{margin-top:.75rem;text-align:center}
.hero-video-caption{
  font-size:1rem;color:var(--primary);line-height:1.5;margin-bottom:.35rem;
}
.hero-video-caption i{color:var(--cta);margin-right:.25rem}
.hero-video-author{
  font-size:.8rem;color:var(--text-muted);line-height:1.4;
}
.hero-video-author strong{color:var(--primary)}

/* ─── Dark Content Section ─── */
.content-sec-dark{
  background:linear-gradient(135deg, var(--bg-dark) 0%, #0a4a3e 100%);
  padding:3rem 0;
}
.section-label-light{color:var(--cta)}
.section-title-light{color:#fff}
.content-body-light{color:rgba(255,255,255,.85)}
.content-body-light p{margin-bottom:1rem;color:rgba(255,255,255,.85)}
.content-body-light h3{color:#fff;margin:1.5rem 0 .75rem}
.info-card-dark{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:1.5rem;
}
.info-card-dark h3{color:#fff;font-size:1.05rem;font-weight:700;margin-bottom:.75rem}
.info-card-dark p{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.75);margin:0 0 .75rem}
.info-card-dark p:last-child{margin-bottom:0}
.info-card-dark ul{list-style:none;padding:0;margin:0}
.info-card-dark li{
  padding:.4rem 0 .4rem 1.25rem;position:relative;
  font-size:1rem;line-height:1.6;color:rgba(255,255,255,.8);
}
.info-card-dark li::before{content:'→';position:absolute;left:0;color:#7ee8d9;font-weight:700}
.info-card-dark strong{color:rgba(255,255,255,.95)}
.content-sec-dark strong{color:rgba(255,255,255,.95)}
.content-sec-dark .factor-content h3{color:var(--primary);margin:0 0 .25rem}
.content-sec-dark .factor-content p{color:var(--primary)}
.content-sec-dark .factor-content strong{color:var(--primary)}
.content-sec-dark a{color:#7ee8d9}
.content-sec-dark a:hover{color:#9ef5e8}

/* ─── Problem Cards (vertical list, icon left) ─── */
.problem-grid{display:flex;flex-direction:column;gap:1.25rem;margin:1.5rem 0}
.problem-card{
  background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem 1.75rem;display:flex;align-items:flex-start;gap:1.25rem;text-align:left;
}
.problem-icon{
  width:48px;height:48px;min-width:48px;border-radius:12px;background:rgba(241,97,90,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--cta-btn);font-size:1.35rem;margin-top:.1rem;
}
.problem-card h3{font-size:1.1rem;font-weight:700;color:var(--primary);margin-bottom:.4rem}
.problem-card p{font-size:1rem;line-height:1.65;color:var(--text-muted);margin:0 0 .75rem}
.problem-card p:last-child{margin-bottom:0}

/* ─── Tool Embed ─── */
.tool-section{background:var(--bg-white);padding:3rem 0 4rem}
.tool-trust-inline{text-align:center;font-size:.875rem;font-weight:600;color:var(--text-muted);margin-bottom:1.5rem}
.tool-trust-inline i{color:var(--cta);margin-right:.2rem}
.tool-embed{
  max-width:720px;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);min-height:500px;transition:height .3s ease;
}
.tool-section .w{padding:0 0.75rem}

/* ─── FAQ ─── */
.faq-sec{padding:3rem 0;background:var(--bg-light)}
.faq-list{display:flex;flex-direction:column;gap:.5rem}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .2s;text-align:left}
.faq-item[open]{box-shadow:0 2px 12px rgba(15,23,42,.06)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;font-size:1rem;font-weight:600;color:var(--primary);
  cursor:pointer;list-style:none;line-height:1.5;gap:1rem;background:var(--bg-white);text-align:left;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{
  content:'＋';font-size:1.2rem;color:var(--cta);flex-shrink:0;font-weight:400;
  transition:transform .2s;display:inline-block;min-width:1.25em;text-align:center;
}
.faq-item[open] .faq-q::after{content:'−'}
.faq-item[open] .faq-q{border-bottom:1px solid var(--border)}
.faq-a{padding:1.25rem 1.5rem;background:var(--bg-white);text-align:left}
.faq-a p{font-size:1rem;color:var(--primary);line-height:1.75;margin-bottom:.75rem}
.faq-a p:last-child{margin-bottom:0}
.faq-a ul{list-style:none;padding:0;margin:.5rem 0 1rem}
.faq-a li{padding:.3rem 0 .3rem 1.25rem;position:relative;font-size:1rem;line-height:1.7}
.faq-a li::before{content:'→';position:absolute;left:0;color:var(--cta);font-weight:700}

/* ─── About / Author ─── */
.about-sec{padding:3rem 0;background:var(--bg-white)}
.about-avatar{
  width:88px;height:88px;border-radius:50%;object-fit:cover;
  border:3px solid var(--border);background:var(--bg-light);
}
.about-name{font-size:1rem;font-weight:700;color:var(--primary)}
.about-role{font-size:.875rem;color:var(--text-muted)}

.author-profile{display:flex;gap:2.5rem;align-items:flex-start;margin:2.5rem auto 0;max-width:880px}
.author-photo-wrap{flex:0 0 42%;min-width:0}
.author-photo{width:100%;height:auto;display:block;border-radius:12px;object-fit:cover;aspect-ratio:4/5;box-shadow:0 4px 20px rgba(5,46,38,.08)}
.author-info{flex:1;min-width:0}
.author-name{font-size:1.35rem;font-weight:800;color:var(--primary);margin-bottom:.2rem}
.author-role{font-size:1rem;color:var(--text-muted);margin-bottom:1.25rem}
.author-bio p{font-size:1rem;color:var(--primary);line-height:1.75;margin-bottom:1rem}
.author-bio p:last-child{margin-bottom:0}
.author-profile-cofounder{padding-top:2.5rem;border-top:1px solid var(--border);margin-top:0}

/* ─── Inline Visualizations ─── */
.pyramid-wrap{margin:1.5rem 0 2rem;text-align:center}
.pyramid-svg{max-width:520px;width:100%;height:auto;margin:0 auto;display:block}
.pyramid-caption{font-size:.875rem;color:rgba(255,255,255,.55);max-width:480px;margin:.75rem auto 0;line-height:1.6}

.viz-ladezeit{display:flex;align-items:stretch;gap:0;margin:1.5rem 0;border-radius:var(--radius);overflow:hidden;max-width:600px}
.viz-ladezeit-bar{padding:1rem 1.25rem;display:flex;flex-direction:column;justify-content:center}
.viz-ladezeit-ok{background:#e8faf6;flex:0 0 47%;border-right:3px solid var(--cta)}
.viz-ladezeit-bad{background:#fef2f2;flex:0 0 53%}
.viz-ladezeit-val{font-size:1.5rem;font-weight:800;line-height:1.2}
.viz-ladezeit-ok .viz-ladezeit-val{color:var(--cta)}
.viz-ladezeit-bad .viz-ladezeit-val{color:var(--cta-btn)}
.viz-ladezeit-label{font-size:.8rem;color:var(--text-muted);margin-top:.2rem}

.viz-timeline{display:flex;align-items:center;gap:0;margin:1.5rem 0;max-width:580px}
.viz-tl-step{text-align:center;flex:1;position:relative}
.viz-tl-val{font-size:1.4rem;font-weight:800;color:var(--primary)}
.viz-tl-label{font-size:.8rem;color:var(--text-muted);margin-top:.15rem}
.viz-tl-arrow{flex:0 0 40px;text-align:center;font-size:1.2rem;color:var(--cta);font-weight:700}
.viz-tl-step-final .viz-tl-val{color:var(--cta-btn)}

.viz-lokal{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;max-width:560px}
.viz-lokal-card{padding:1.25rem;border-radius:var(--radius);text-align:center}
.viz-lokal-bad{background:#fef2f2;border:1px solid #fecaca}
.viz-lokal-good{background:#e8faf6;border:1px solid #b2f0e0}
.viz-lokal-term{font-size:1rem;font-weight:700;color:var(--primary);margin-bottom:.35rem}
.viz-lokal-dots{font-size:1.3rem;letter-spacing:2px;margin-bottom:.35rem}
.viz-lokal-bad .viz-lokal-dots{color:var(--cta-btn)}
.viz-lokal-good .viz-lokal-dots{color:var(--cta)}
.viz-lokal-desc{font-size:.8rem;color:var(--text-muted);line-height:1.5}
.viz-lokal-verdict{font-size:.8rem;font-weight:700;margin-top:.35rem}
.viz-lokal-bad .viz-lokal-verdict{color:var(--cta-btn)}
.viz-lokal-good .viz-lokal-verdict{color:#0a7d6a}

.viz-effects{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0;max-width:560px}
.viz-effect-card{text-align:center;padding:1.25rem 1rem;border-radius:var(--radius);background:rgba(13,204,169,.08);border:1px solid rgba(13,204,169,.15)}
.viz-effect-icon{font-size:1.5rem;color:var(--cta);margin-bottom:.5rem}
.viz-effect-title{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:.25rem}
.viz-effect-desc{font-size:.8rem;color:rgba(255,255,255,.6);line-height:1.5}

@media(max-width:768px){
  .viz-lokal{grid-template-columns:1fr}
  .viz-effects{grid-template-columns:1fr}
  .viz-timeline{flex-wrap:wrap;gap:.5rem}
  .viz-tl-arrow{flex:0 0 30px}
}

/* ─── Final CTA ─── */
.final-cta-sec{
  padding:3rem 0;
  background:linear-gradient(135deg, var(--bg-dark) 0%, #0a4a3e 100%);
}
.final-cta{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;
}
.final-cta-title{color:#fff;font-size:1.6rem;margin:0}
.final-cta-text{color:rgba(255,255,255,.75);font-size:1.05rem;max-width:540px;margin:0;line-height:1.7}
.final-cta-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.final-cta-buttons .btn-ghost{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.2)}
.final-cta-buttons .btn-ghost:hover{border-color:var(--cta);color:var(--cta)}
.final-cta-author{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:rgba(255,255,255,.5);margin-top:.25rem;
}

/* ─── Partner Logos ─── */
.partner-logos-wrap{background:var(--bg-white);padding:2rem 1.5rem 0}
.partner-logos{
  display:flex;justify-content:center;align-items:center;gap:2.5rem;flex-wrap:wrap;
  margin:0 auto;max-width:600px;
  padding:1.25rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.partner-logo{height:38px;opacity:.35;transition:opacity .3s;filter:grayscale(100%)}
.partner-logo:hover{opacity:.7;filter:grayscale(0%)}


/* ─── Footer ─── */
.ftr{background:var(--primary);padding:2rem 0;text-align:center}
.ftr-inner{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.ftr-secondary-cta{font-size:.95rem;color:rgba(255,255,255,.7)}
.ftr-secondary-cta a{color:var(--cta);font-weight:600;text-decoration:none;transition:color .2s}
.ftr-secondary-cta a:hover{color:var(--cta-hover)}
.ftr-contact{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.ftr-contact span{font-size:.9rem;color:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:.3rem}
.ftr-contact a{color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s}
.ftr-contact a:hover{color:var(--cta)}
.ftr-address{font-size:.85rem;color:rgba(255,255,255,.4)}
.ftr-links{display:flex;justify-content:center;gap:2rem}
.ftr-links a{color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s}
.ftr-links a:hover{color:var(--cta)}
.ftr-copy{margin:0;font-size:.875rem;color:rgba(255,255,255,.4)}


/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media(max-width:768px){
  .w{padding:0 1.25rem}
  .w-wide,.w-ultra{padding:0 1.25rem}
  .hero{padding:1.5rem 0 2rem}
  h1{font-size:1.55rem}
  .section-title{font-size:1.25rem}
  .two-col-cards{grid-template-columns:1fr}
  .problem-card{flex-direction:row;gap:1rem}
  .stat-grid{grid-template-columns:1fr 1fr}
  .mini-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .compare-table{font-size:.8rem}
  .compare-table th,.compare-table td{padding:.6rem .75rem}
  .quote-block-text{font-size:1rem}
  .btn-ghost{width:100%;justify-content:center}
  .btn-solid{width:100%;justify-content:center}
  .mid-cta-text{font-size:1.1rem}
  .final-cta-title{font-size:1.3rem}
  .final-cta-buttons{flex-direction:column;width:100%;max-width:360px}
  .toc{padding:1.25rem 1.5rem}
  .factor{flex-direction:row;gap:.75rem}
  .partner-logos{gap:1.5rem}
  .author-profile{flex-direction:column;align-items:center;text-align:center}
  .author-photo-wrap{flex:0 0 auto;max-width:320px;margin:0 auto}
  .author-photo{aspect-ratio:4/5;max-height:360px}
}

@media(max-width:380px){
  h1{font-size:1.4rem}
  .stat-grid{grid-template-columns:1fr}
}