/* Mind my review – gemeinsames Stylesheet für index.php und howto.php */

:root{
  --bg:#f4f6f8; --card:#ffffff; --ink:#16202b; --muted:#5d6b7a; --line:#e3e8ee;
  --accent:#0f7f6c; --accent-ink:#0b6153; --accent-soft:#e6f4f1;
  --shadow:0 1px 2px rgba(16,32,48,.05),0 12px 32px -18px rgba(16,32,48,.35);
  --shadow-lg:0 2px 4px rgba(16,32,48,.05),0 28px 60px -30px rgba(16,32,48,.45);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#11161c; --card:#1a2028; --ink:#e8edf3; --muted:#9aa8b6; --line:#2a323c;
    --accent:#4ecbb2; --accent-ink:#4ecbb2; --accent-soft:#16302c;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -22px rgba(0,0,0,.8);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 30px 70px -34px rgba(0,0,0,.9);
  }
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:760px; margin:0 auto; padding:0 20px; width:100%}
.wrap-wide{max-width:1080px}
main{flex:1 0 auto}

/* ------------------------------------------------------------------ Kopf/Fuß */
.site-header{border-bottom:1px solid var(--line); background:var(--card)}
.site-header .wrap{display:flex; align-items:center; gap:18px; height:64px}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.mark .logo{display:block; flex:none; border-radius:10px}
.wordmark{font-size:18px; font-weight:700; letter-spacing:-.025em; white-space:nowrap}
.wordmark-my{font-weight:400; color:var(--muted)}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:22px; font-size:14.5px}
.site-nav a{color:var(--muted); text-decoration:none; white-space:nowrap}
.site-nav a:hover{color:var(--ink)}
.site-nav .btn{color:#fff}
@media (max-width:720px){ .site-nav .hide-sm{display:none} }

.site-footer{border-top:1px solid var(--line); padding:26px 0 40px; font-size:13.5px; color:var(--muted); background:var(--card)}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center}
.footer-links{display:flex; flex-wrap:wrap; gap:8px 20px}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* ------------------------------------------------------------- Buttons/Basics */
.btn{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer; border:1px solid transparent; border-radius:9px; padding:11px 18px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px -10px var(--accent)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-light{background:#fff; color:#0b6153}
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent-ink); font-size:13px; font-weight:600; letter-spacing:.01em;
}
@media (prefers-color-scheme:dark){ .eyebrow{color:var(--accent)} }

/* ------------------------------------------------------------ Bewertungsseite */
.crumbs{font-size:13px; color:var(--muted); margin:0 0 18px}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0}
.crumbs li+li::before{content:"/"; margin-right:6px; color:var(--line)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.review{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:28px 30px 30px;
}
.review-head{display:flex; align-items:center; gap:14px}
.avatar{
  flex:none; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; font-weight:650; font-size:18px; letter-spacing:.02em;
  color:hsl(var(--h) 60% 28%); background:hsl(var(--h) 62% 90%);
}
@media (prefers-color-scheme:dark){ .avatar{color:hsl(var(--h) 70% 86%); background:hsl(var(--h) 40% 26%)} }
.who{min-width:0}
.who .name{margin:0; font-size:18px; font-weight:650; letter-spacing:-.01em; line-height:1.3}
.who .meta{margin:2px 0 0; font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.dot{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5}
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:600;
}
.badge svg{display:block}
.review-title{margin:22px 0 0; font-size:21px; line-height:1.35; letter-spacing:-.015em; font-weight:650}
.review-body{margin:16px 0 0; position:relative; font-size:17px}
.review-body p{margin:0 0 14px; overflow-wrap:break-word}
.review-body p:last-child{margin-bottom:0}
.review-body::before{
  content:"\201C"; position:absolute; left:-16px; top:-26px; font-size:74px; line-height:1;
  font-family:Georgia,"Times New Roman",serif; color:var(--accent); opacity:.16; pointer-events:none;
}
.review-foot{margin-top:24px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
main.wrap{padding-top:32px; padding-bottom:56px}

/* --------------------------------------------------------------- Landingpage */
.hero{padding:76px 0 64px; text-align:center; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-40% 20% auto; height:420px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  pointer-events:none;
}
.hero > *{position:relative}
.hero h1{
  margin:20px auto 0; max-width:15ch; font-size:clamp(34px,5.4vw,54px); line-height:1.08;
  letter-spacing:-.035em; font-weight:750;
}
.hero h1 .hl{color:var(--accent)}
.lede{margin:20px auto 0; max-width:60ch; font-size:clamp(17px,2vw,19px); color:var(--muted)}
.cta-row{margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.hero-note{margin:16px 0 0; font-size:13.5px; color:var(--muted)}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:8px 0 0;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.stat{background:var(--card); padding:22px 18px; text-align:center}
.stat-num{font-size:clamp(22px,3vw,30px); font-weight:750; letter-spacing:-.03em; color:var(--accent)}
.stat-label{margin-top:4px; font-size:13.5px; color:var(--muted)}
@media (max-width:720px){ .stats{grid-template-columns:repeat(2,1fr)} }

.section{padding:64px 0}
.section-alt{background:var(--card); border-block:1px solid var(--line)}
.section-head{max-width:62ch; margin:0 auto 38px; text-align:center}
.section-head h2{margin:14px 0 0; font-size:clamp(26px,3.4vw,34px); line-height:1.2; letter-spacing:-.03em; font-weight:720}
.section-head p{margin:14px 0 0; color:var(--muted); font-size:17px}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step}
.step{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 24px; box-shadow:var(--shadow);
}
.section-alt .step{background:var(--bg)}
.step-num{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:15px;
}
@media (prefers-color-scheme:dark){ .step-num{color:var(--accent)} }
.step h3{margin:16px 0 0; font-size:18px; letter-spacing:-.015em}
.step p{margin:8px 0 0; color:var(--muted); font-size:15.5px}
.step-line{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px; color:var(--accent); font-weight:600}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feature{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow);
}
.section-alt .feature{background:var(--bg)}
.feature-icon{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink);
}
@media (prefers-color-scheme:dark){ .feature-icon{color:var(--accent)} }
.feature h3{margin:15px 0 0; font-size:17px; letter-spacing:-.015em}
.feature p{margin:7px 0 0; color:var(--muted); font-size:15.5px}
@media (max-width:860px){ .steps,.features{grid-template-columns:1fr} }

.showcase{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center}
.showcase pre{
  margin:0; padding:20px 22px; border-radius:14px; background:#0f1620; color:#d5e3ea; overflow-x:auto;
  border:1px solid var(--line); font:12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.showcase pre .k{color:#7fd7c4} .showcase pre .s{color:#e7c98a}
.showcase-note{margin:14px 0 0; font-size:14px; color:var(--muted)}
@media (max-width:860px){ .showcase{grid-template-columns:1fr} }

.trust-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.trust-item{
  display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border-radius:11px;
  background:var(--card); border:1px solid var(--line); font-size:14.5px; font-weight:600;
}
.section-alt .trust-item{background:var(--bg)}
.trust-item svg{color:var(--accent); flex:none}

.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.quote{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:16px;
}
.section-alt .quote{background:var(--bg)}
.quote p{margin:0; font-size:15.5px}
.quote figcaption{display:flex; align-items:center; gap:11px; margin-top:auto}
.quote .avatar{width:38px; height:38px; font-size:14px}
.quote .qn{font-size:14.5px; font-weight:650; line-height:1.3}
.quote .qr{font-size:13px; color:var(--muted)}
@media (max-width:860px){ .quotes{grid-template-columns:1fr} }

.faq{max-width:780px; margin:0 auto; display:grid; gap:12px}
.faq details{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:2px 20px;
}
.section-alt .faq details{background:var(--bg)}
.faq summary{
  cursor:pointer; list-style:none; padding:16px 0; font-weight:650; font-size:16.5px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:20px; font-weight:400; color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px; color:var(--muted); font-size:15.5px}

.cta-band{
  background:linear-gradient(135deg,#22b298,#0a6153); color:#fff; border-radius:18px;
  padding:48px 40px; text-align:center; box-shadow:var(--shadow-lg);
}
.cta-band h2{margin:0; font-size:clamp(25px,3.2vw,32px); letter-spacing:-.03em; font-weight:720}
.cta-band p{margin:12px auto 0; max-width:52ch; color:rgba(255,255,255,.85)}
.cta-band .cta-row{margin-top:26px}
.cta-band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.45)}
.cta-band .btn-ghost:hover{border-color:#fff}
@media (max-width:600px){ .cta-band{padding:36px 24px; border-radius:14px} }

/* ------------------------------------------------------------------- How-to */
.doc{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 30px; box-shadow:var(--shadow)}
.doc + .doc{margin-top:20px}
.doc h1{margin:0 0 10px; font-size:24px; letter-spacing:-.02em}
.doc h2{margin:0 0 14px; font-size:19px; letter-spacing:-.015em}
.doc p{margin:0 0 14px; color:var(--muted)}
.doc code{
  display:block; padding:12px 14px; border-radius:9px; background:var(--bg); border:1px solid var(--line);
  font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-x:auto; color:var(--ink);
}
.doc code.inline{display:inline; padding:1px 6px}
.doc dl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:18px 0 0; font-size:14.5px}
.doc dt{font-weight:600}
.doc dd{margin:0; color:var(--muted)}
.gen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px}
.gen .full{grid-column:1/-1}
.gen label{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600; color:var(--muted)}
.gen input,.gen textarea{
  font:inherit; font-size:15px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; resize:vertical;
}
.gen input:focus,.gen textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
#out{
  display:block; margin-top:16px; padding:12px 14px; border-radius:9px; background:var(--bg);
  border:1px solid var(--line); font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all; color:var(--ink); min-height:1.6em;
}
.gen-actions{margin:14px 0 0; display:flex; gap:10px; align-items:center}
@media (max-width:520px){
  .gen{grid-template-columns:1fr}
  .review{padding:22px 20px 24px; border-radius:12px}
  .review-body::before{left:-6px; top:-22px; font-size:60px}
  .doc{padding:22px 20px}
}