/* Startseite: Hero, Messprotokoll, Sektionen */

.topnav{display:flex;align-items:center;gap:24px}
.topnav a{font-size:14px;font-weight:500;color:var(--mute);text-decoration:none}
.topnav a:hover{color:var(--ink)}
.topnav a.nav-link{display:none}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.topnav .btn-ghost.btn-sm{color:var(--ink)}
.topnav .btn-primary.btn-sm{color:#151617}
.topnav .btn-primary.btn-sm:hover{color:#151617}
.plan .btn{margin-top:4px}
/* 900 statt 840 seit dem 29.08.2026. Mit dem sechsten Verweis "Musterbefund"
   blieben bei 840 Pixeln nur 16 Pixel zwischen Wortmarke und erstem Verweis.
   Ueberlappt hat nichts, eng war es trotzdem. */
@media(min-width:900px){.topnav a.nav-link{display:inline}}

/* ---------- Hero ---------- */
.hero{padding-top:72px;padding-bottom:var(--s-sec);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% 0 auto -10%;height:520px;pointer-events:none;
  background:radial-gradient(60% 60% at 20% 30%,rgba(52,213,154,.09),transparent 70%);
}
.hero-grid{position:relative;display:grid;gap:48px;align-items:start}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.02fr .98fr;gap:56px}}
.hero-copy .eyebrow{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lede{margin-top:20px}

/* ---------- Messprotokoll ---------- */
.scope{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);
  overflow:hidden;position:relative
}
.scope-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hairline);background:var(--graphite);font-family:var(--mono)}
.scope-dot{width:8px;height:8px;border-radius:999px;background:var(--fund);box-shadow:0 0 0 3px var(--fund-soft)}
.scope-title{font-size:12px;color:var(--mute);letter-spacing:.06em}
.scope-rows{display:flex;flex-direction:column}
.row{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--hairline-soft);font-size:13px
}
@media(min-width:520px){.row{grid-template-columns:1fr auto auto}}
.row .host{color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .ms{color:var(--ash);font-variant-numeric:tabular-nums;text-align:right}
.row .verdict{font-size:12px;padding:2px 8px;border-radius:var(--r-xs);white-space:nowrap}
.row-fund .verdict{background:var(--fund-soft);color:var(--fund)}
.row-fund .host{color:var(--ink)}
.row-ok .verdict{background:var(--ok-soft);color:var(--ok)}
.row-ok .host,.row-ok .ms{color:var(--ash)}
.scope-foot{padding:14px 16px;font-size:12px;line-height:1.5;color:var(--ash);background:var(--canvas)}

/* ---------- Formular ---------- */
.scanform{margin-top:28px}
.scanrow{display:flex;flex-wrap:wrap;gap:8px}
.scanform input[type=text],.scanform input[type=email]{
  flex:1 1 200px;min-width:0;height:46px;padding:0 14px;
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--elevated);border:1px solid var(--hairline);border-radius:var(--r-md)
}
.scanform input::placeholder{color:var(--ash)}
.scanform input:focus{border-color:var(--hairline-strong);outline:none}
.scanform input:focus-visible{outline:2px solid var(--info);outline-offset:1px}
.scanhint{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ash);max-width:62ch}
.scanhint a{color:var(--mute)}
.scanmsg{margin:10px 0 0;font-size:15px;min-height:1px}
.scanmsg.ok{color:var(--ok)}
.scanmsg.fehler{color:var(--fund)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:560px){.scanform button{width:100%}}

/* ---------- Anfrage fuer den bezahlten Check ---------- */
.anfrage-grid{display:grid;gap:16px;align-items:start}
@media(min-width:900px){.anfrage-grid{grid-template-columns:1.25fr 1fr}}
.anfrage-karte{background:var(--elevated);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);padding:28px;position:relative}
.anfrage-karte::after{content:"";position:absolute;left:28px;right:28px;top:-1px;height:2px;background:linear-gradient(90deg,var(--brand) 50%,transparent 50%);background-size:8px 2px}
.anfrageform{margin-top:0}
.anfrage-felder{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.anfrage-felder{grid-template-columns:1fr 1fr}.feld.weit{grid-column:1 / -1}}
.feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.feld label{font-size:13px;color:var(--mute);letter-spacing:-.2px}
.feld label .opt{color:var(--ash)}
.anfrageform input[type=text],.anfrageform input[type=email],.anfrageform select,.anfrageform textarea{
  width:100%;min-width:0;height:46px;padding:0 14px;
  font-family:var(--sans);font-size:15px;color:var(--ink);letter-spacing:-.43px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md)
}
.anfrageform textarea{height:auto;min-height:92px;padding:12px 14px;line-height:1.5;resize:vertical}
.anfrageform select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23797d86' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center
}
.anfrageform input::placeholder,.anfrageform textarea::placeholder{color:var(--ash)}
.anfrageform input:focus,.anfrageform select:focus,.anfrageform textarea:focus{border-color:var(--hairline-strong);outline:none}
.anfrageform input:focus-visible,.anfrageform select:focus-visible,.anfrageform textarea:focus-visible{outline:2px solid var(--info);outline-offset:1px}
.anfrageform button{margin-top:18px}
@media(max-width:560px){.anfrageform button{width:100%}}
.anfrage-neben{display:flex;flex-direction:column;gap:16px}
.anfrage-neben .card{padding:22px}
.anfrage-preis{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--ink);letter-spacing:-.52px}
.anfrage-preis small{display:block;margin-top:4px;font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:0;color:var(--ash)}

/* ---------- Zahlenstreifen ---------- */
.strip{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--surface);padding:40px 0}
.stat-num{font-size:26px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.stat-label{margin-top:6px;font-size:13px;line-height:1.5;color:var(--mute);max-width:34ch}

/* ---------- Vergleich ---------- */
.cmp h3{margin-top:6px}
.cmp-strong{border-color:var(--hairline-strong)}
.rows{margin:20px 0 0;display:flex;flex-direction:column}
.rows>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--hairline-soft)}
.rows dt{color:var(--mute);font-size:15px;margin:0}
.rows dd{margin:0;color:var(--ink);font-size:14px;text-align:right}
.bigprice{display:flex;align-items:baseline;gap:12px;margin:20px 0 4px;flex-wrap:wrap}
.bigprice span{font-size:40px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.bigprice small{font-size:13px;color:var(--ash)}
ul.plain{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.plain li{padding-left:20px;position:relative;font-size:15px;color:var(--body)}
ul.plain li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--ok)}
.cmp .fine{margin-top:18px}

.note-block{margin-top:16px;background:var(--surface);border:1px solid var(--hairline);border-left:2px solid var(--brand);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:14px}

/* ---------- Fundkarten ---------- */
.fund-card h3{margin-top:14px}
.fund-card p{margin-top:10px;font-size:15px}

/* ---------- Zitat ---------- */
.pull{
  margin:40px 0 0;padding:32px;border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--elevated);border-left:2px solid var(--brand);
  font-size:clamp(19px,2.2vw,24px);line-height:1.45;color:var(--ink);font-weight:500;text-wrap:balance
}
.pull span{display:block;margin-top:14px;font-size:14px;font-weight:400;color:var(--mute)}

/* ---------- Zweispalter ---------- */
.two{display:grid;gap:32px}
@media(min-width:900px){.two{grid-template-columns:.9fr 1.1fr;gap:56px}}
.two p+p{margin-top:14px}

ul.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
ul.checks li{padding-left:22px;position:relative;font-size:15px;line-height:1.6}
ul.checks li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--brand)}
ul.checks strong{color:var(--ink);font-weight:500}

/* ---------- Schritte ---------- */
ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:900px){ol.steps{grid-template-columns:repeat(4,1fr)}}
ol.steps li{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:10px}
.step-meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
ol.steps h3{font-size:18px}
ol.steps p{font-size:15px;color:var(--body)}
ol.mini{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--body);font-size:15px}
ol.mini::marker,ol.mini li::marker{color:var(--ash)}

/* ---------- Pakete ---------- */
.plan{display:flex;flex-direction:column;gap:12px}
.plan-name{font-size:14px;font-weight:500;color:var(--ink)}
.plan-price{font-size:32px;font-weight:500;color:var(--ink);letter-spacing:-.02em;display:flex;flex-direction:column;gap:4px}
.plan-price small{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--ash);letter-spacing:0}
.plan p{font-size:14px;line-height:1.6}
.plan-note{margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline-soft);font-size:12px;color:var(--mute)}
.plan-featured{background:var(--elevated);border-color:var(--hairline-strong);position:relative}
.plan-featured::after{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;background:linear-gradient(90deg,var(--brand) 50%,transparent 50%);background-size:8px 2px}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 32px 20px 0;position:relative;
  font-size:17px;font-weight:500;color:var(--ink)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:19px;font-family:var(--mono);
  font-size:18px;color:var(--ash);transition:transform .15s ease
}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 22px;font-size:15px;color:var(--body);max-width:70ch}

/* ---------- Abschluss ---------- */
.final{border-top:1px solid var(--hairline);background:var(--surface)}
.final h2{margin-top:12px}
.final .lede{margin-top:16px}

.footlinks{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:14px}

/* ---------- Mobil-Feinschliff ---------- */
@media(max-width:560px){
  .mark span{display:none}
  .rows>div{flex-direction:column;gap:2px;padding:10px 0}
  .rows dd{text-align:left}
}

/* ---------- Rollenteilung ---------- */
.rolle{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.rolle>*{width:100%}
.rolle>.tag{width:auto}
.rolle h3{margin-top:14px}
.rolle ul{margin-top:16px}
.rolle .fine{margin-top:auto;padding-top:18px}
.rolle-stark{border-color:var(--hairline-strong);position:relative}
.rolle-stark::after{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:2px;background:var(--brand)}
ul.neutral{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
ul.neutral li{padding-left:22px;position:relative;font-size:15px;line-height:1.6;color:var(--mute)}
ul.neutral li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--ash)}

/* ---------- Kundenstimme ---------- */
.stimme{display:flex;flex-direction:column;gap:0;border-color:var(--hairline-strong)}
.stimme blockquote{
  margin:16px 0 0;font-size:18px;line-height:1.5;color:var(--ink);font-weight:500;text-wrap:pretty
}
.stimme blockquote::before{content:"„"}
.stimme blockquote::after{content:"“"}
.stimme-fuss{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--hairline-soft)}
.stimme blockquote{margin-bottom:18px}
.stimme-name{font-size:15px;font-weight:500;color:var(--ink)}
.stimme .fine:last-child{margin-top:14px}

/* ---------- Neon-Feinschliff ---------- */
.scope{border-radius:var(--r-lg)}
.scope-dot{box-shadow:0 0 0 3px var(--fund-soft),0 0 12px rgba(255,54,33,.5)}
.row .host{font-family:var(--mono)}
.row .ms,.row .verdict{font-family:var(--mono)}
.stat-num{font-family:var(--mono);font-size:32px;font-weight:500;letter-spacing:-.64px}
.bigprice span{font-family:var(--mono);font-size:48px;letter-spacing:-1.2px}
.plan-price{font-family:var(--mono);font-size:32px;letter-spacing:-.64px}
.rows dd{font-family:var(--mono);font-size:13px}
.tt-num,.trip{font-family:var(--mono)}
.faq summary::after{font-family:var(--mono)}
.scanform button{white-space:nowrap}
.hero .btn-primary{font-size:16px}

/* ---------- Unterschied, nummerierte Liste ---------- */
ol.usp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
ol.usp li{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:24px 0;border-top:1px solid var(--hairline)
}
ol.usp li:last-child{border-bottom:1px solid var(--hairline)}
.usp-num{font-size:12px;font-weight:500;color:var(--brand);letter-spacing:.08em;padding-top:5px;min-width:28px}
ol.usp h4{color:var(--ink)}
ol.usp p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--body);max-width:72ch}
@media(min-width:900px){
  ol.usp li{grid-template-columns:80px 1fr;gap:32px}
}

/* ---------- Aufwandsstufen ---------- */
.stufe{display:flex;flex-direction:column;align-items:flex-start;gap:0;background:var(--canvas)}
.stufe .tag{margin:0}
.stufe-preis{font-size:28px;font-weight:500;color:var(--ink);letter-spacing:-.64px;margin-top:14px}
.stufe p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--body)}
.preis-spanne{font-size:24px;letter-spacing:-.24px}