/* ==========================================================================
   Inhaltsseiten: Referenzen, Über mich, Webdesign Plauen, Ratgeber, Statistik
   ========================================================================== */
.h-mono{font:600 .8rem var(--mono);color:var(--accent-ink);letter-spacing:0;margin-bottom:.7rem}
.panel-plain{background:var(--bg-elev);border:1px solid var(--line);border-radius:18px;padding:clamp(1.1rem,2.4vw,1.6rem)}
.mt2{margin-top:1.6rem}
.small{font-size:.84rem}

/* ---------- Über mich ---------- */
.about-head{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4rem);align-items:center}
.about-photo{width:clamp(180px,22vw,280px);aspect-ratio:1;border-radius:28px;overflow:hidden;border:1px solid var(--line-strong);background:radial-gradient(circle at 30% 20%,var(--accent-soft),transparent 70%),var(--bg-elev);display:grid;place-items:center;box-shadow:var(--shadow);rotate:2deg}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo span{font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--accent-ink);letter-spacing:-.04em}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.principle{background:var(--bg-elev);border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.6rem 1.7rem;transition:border-color .3s}
.principle:hover{border-color:var(--accent-line)}
.principle svg{width:28px;height:28px;color:var(--accent);margin-bottom:.9rem}
.principle h3{margin-bottom:.45rem}
.principle p{color:var(--dim);font-size:.96rem}
.timeline{list-style:none;padding:0;display:grid;gap:0;border-left:2px solid var(--line);margin-left:.4rem}
.timeline li{position:relative;padding:0 0 1.8rem 1.6rem}
.timeline li::before{content:"";position:absolute;left:-7px;top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--bg);border:3px solid var(--accent)}
.timeline span{font-size:.8rem;color:var(--accent-ink)}
.timeline p{color:var(--text-2)}
.stack-col p{font-size:.95rem}

/* ---------- Referenzen ---------- */
.cases{display:grid;gap:1.6rem}
.case{display:block;text-decoration:none;background:var(--bg-elev);border:1px solid var(--line);border-radius:24px;padding:clamp(1.4rem,3.4vw,2.6rem);transition:border-color .3s}
.case-head h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:.4rem 0 1rem}
.case-body{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.4rem,4vw,3rem);margin-top:2rem}
.case-body p,.ticks li{color:var(--text-2);font-size:.97rem}
.ticks{list-style:none;padding:0;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.6rem}
.ticks li::before{content:"+";position:absolute;left:0;font:700 1rem var(--mono);color:var(--ok)}
.case-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:2rem}
.case-results div{background:var(--bg-sunk);padding:1.2rem 1.3rem;display:grid;gap:.3rem;align-content:start}
.case-results strong{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.03em;width:fit-content}
.case-results span{color:var(--dim);font-size:.86rem}
.case-cta{margin-top:1.6rem}
.case-next{border-style:dashed;border-color:var(--line-strong);background:none}
.case-next:hover{border-color:var(--accent)}
.case-next h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:.4rem 0 .6rem}
.case-next p{color:var(--dim);max-width:60ch}
.case-next .tc-go{margin-top:1rem}
.case-next:hover .tc-go i{transform:translateX(5px)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.6rem}
.faq details{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;padding:1rem 3rem 1rem 1.2rem;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:50%;translate:0 -50%;font:500 1.3rem var(--mono);color:var(--accent-ink);transition:rotate .25s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq p{padding:0 1.2rem 1.2rem;color:var(--text-2);font-size:.97rem}

/* ---------- Ratgeber ---------- */
.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.article-card{display:flex;flex-direction:column;gap:.7rem;text-decoration:none;background:var(--bg-elev);border:1px solid var(--line);border-radius:18px;padding:1.6rem;transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.article-card:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:var(--shadow)}
.article-card>p{color:var(--dim);font-size:.93rem}
.article-card>p.mono{font-size:.74rem}
.article-card .tag{align-self:flex-start;margin-top:auto}
.article-card:hover .tc-go i{transform:translateX(5px)}
.article-h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.eyebrow a{text-decoration:none}
.eyebrow a:hover{text-decoration:underline}
.prose{font-size:1.05rem}
.prose>p,.prose>ul,.prose>ol{color:var(--text-2);margin-bottom:1.2rem}
.prose>h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin:2.6rem 0 .9rem}
.prose ul,.prose ol{padding-left:1.4rem;display:grid;gap:.5rem}
.prose li::marker{color:var(--accent-ink)}
.prose b{color:var(--text);font-weight:600}
.prose code{font:500 .88em var(--mono);background:var(--bg-sunk);border:1px solid var(--line);border-radius:6px;padding:.1em .4em;color:var(--accent-ink)}
.prose-tool{margin:3rem 0 2rem;border:1px solid var(--accent-line);border-radius:20px;padding:clamp(1.3rem,3vw,2rem);background:radial-gradient(500px circle at 100% 0%,var(--accent-soft),transparent 60%),var(--bg-elev);display:grid;gap:.6rem;justify-items:start}
.prose-tool h2{font-size:1.5rem}
.prose-tool p{color:var(--text-2);font-size:.97rem}
.prose-tool .btn{margin-top:.6rem}

/* ---------- Statistik ---------- */
.st-chart{width:100%;height:auto}
.st-chart rect{fill:var(--accent);opacity:.85}
.st-chart rect:hover{opacity:1}
.st-axis{display:flex;justify-content:space-between;font-size:.74rem;color:var(--dim);margin-top:.5rem}
.st-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.2rem}
.st-table{width:100%;border-collapse:collapse;font-size:.9rem}
.st-table td{padding:.45rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.st-table td:last-child{text-align:right;padding-left:1rem;width:1%}
.st-table a{text-decoration:none}
.st-table a:hover{color:var(--accent-ink)}
.st-bar{display:block;width:100%;height:4px;margin-top:.35rem;border-radius:2px;background:var(--bg-sunk)}
.st-bar rect{fill:var(--accent)}

@media (max-width:960px){
  .articles{grid-template-columns:1fr 1fr}
  .case-body{grid-template-columns:1fr}
}
@media (max-width:640px){
  .about-head,.principles,.articles,.case-results,.st-cols{grid-template-columns:1fr}
  .about-photo{width:160px;border-radius:22px}
}
.st-tools th{text-align:right;font:500 .72rem var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;padding:.3rem 0 .5rem 1rem;border-bottom:1px solid var(--line)}
.st-tools th:first-child{text-align:left;padding-left:0}
.st-tools td+td{text-align:right;padding-left:1rem;width:1%;white-space:nowrap}

/* ---------- Preise & Pakete ---------- */
.aktion{margin-top:1.4rem;display:inline-block;padding:.7rem 1.1rem;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft);color:var(--text-2);font-size:.92rem;max-width:70ch}
.dots{list-style:none;padding:0;display:grid;gap:.5rem;color:var(--text-2);font-size:.95rem}
.dots li{position:relative;padding-left:1.2rem}
.dots li::before{content:"·";position:absolute;left:.25rem;font-weight:700;color:var(--accent)}
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:stretch}
.paket{position:relative;display:flex;flex-direction:column;gap:.7rem;background:var(--bg-elev);border:1px solid var(--line);border-radius:20px;padding:1.8rem 1.6rem;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.paket:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--shadow)}
.paket-top{border-color:var(--accent-line);background:radial-gradient(460px circle at 100% 0%,var(--accent-soft),transparent 65%),var(--bg-elev)}
.paket-top::before{content:"meistgewählt";position:absolute;top:-.7rem;left:1.5rem;font:600 .68rem var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:.2rem .6rem;border-radius:99px;background:var(--accent);color:var(--on-accent)}
.paket-kicker{font-size:.75rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.paket h2{font-size:1.6rem;letter-spacing:-.02em}
.paket-preis{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.paket-preis b{font-size:2.1rem;letter-spacing:-.04em}
.paket-text{color:var(--text-2);font-size:.95rem}
.paket .ticks{margin-bottom:auto}
.paket .ticks li{font-size:.92rem}
.paket-dauer{padding-top:.8rem;border-top:1px dashed var(--line)}
.paket .btn{align-self:flex-start}

.abo{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;background:var(--bg-elev);border:1px solid var(--line);border-radius:24px;padding:clamp(1.6rem,4vw,2.8rem)}
.abo h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.abo-card{background:var(--bg-sunk);border:1px solid var(--line-strong);border-radius:18px;padding:1.6rem;display:grid;gap:.6rem;justify-items:start}
.abo-preis{display:flex;align-items:baseline;gap:.4rem}
.abo-preis b{font-size:clamp(2.2rem,5vw,3rem);letter-spacing:-.04em}
.abo-vergleich{color:var(--dim);padding-top:.7rem;border-top:1px dashed var(--line);width:100%}
.svc-fix{display:flex;flex-direction:column;gap:.5rem}
.svc-fix h3{font-size:1.15rem}
.svc-fix p{color:var(--dim);font-size:.93rem}
.svc-preis{margin-top:auto;font-size:1.3rem;font-weight:700;color:var(--text);letter-spacing:-.02em}
.svc-links a{color:var(--accent-ink);text-decoration:none}
.svc-links a:hover{text-decoration:underline}
.pflege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.pflege-preis{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;margin:.4rem 0 .6rem}
@media (max-width:980px){.pakete{grid-template-columns:minmax(0,1fr)}.abo{grid-template-columns:minmax(0,1fr)}.pflege{grid-template-columns:minmax(0,1fr)}}