/* praevention-schutz.de – Stylesheet (mobile first, keine externen Ressourcen) */
@font-face{font-family:"Source Serif";src:url("../fonts/source-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif";src:url("../fonts/source-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif";src:url("../fonts/source-serif-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans";src:url("../fonts/source-sans-3-var.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --ink:#292725;--dark:#3b3a39;--dark-2:#2f2d2b;--greige:#f3efe9;--sand:#d9d1c5;--sand-2:#e7dfd5;
  --red:#b23a2e;--red-dark:#962f25;--pink:#f6e4df;--muted:#6c6660;--white:#fff;
  --serif:"Source Serif",Georgia,"Times New Roman",serif;
  --sans:"Source Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:68rem;--radius:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--serif);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dark);text-underline-offset:.18em}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3,.eyebrow,.btn,.site-header,.site-footer,summary,.facts,.card h3{font-family:var(--sans)}
h1,h2,h3{color:var(--dark);line-height:1.2;margin:0 0 .6em}
h2{font-size:clamp(1.6rem,4.5vw,2.25rem);font-weight:650;letter-spacing:-.01em}
h3{font-size:1.2rem;font-weight:650}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px;top:0;background:var(--dark);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.eyebrow{display:block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.75rem}
.lead{font-size:1.15rem;color:#46413c}

/* Header */
.site-header{background:var(--dark);color:#fff;border-top:5px solid var(--red)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.6rem}
.brand{color:#fff;text-decoration:none;font-weight:650;letter-spacing:.02em}
.brand:hover{color:var(--sand-2)}
.site-header nav a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem}
.site-header nav a:hover{text-decoration:underline;color:#fff}

/* Buttons */
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:700;font-size:1.1rem;padding:.85rem 1.6rem;border-radius:var(--radius);border:2px solid var(--red);transition:background .15s}
.btn:hover,.btn:focus-visible{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-note{font-family:var(--sans);font-size:.92rem;color:var(--muted);margin:.7rem 0 0}

/* Hero */
.hero{background:var(--greige);padding:2.5rem 0 3rem;border-bottom:1px solid var(--sand)}
.hero .wrap{display:grid;gap:2.25rem}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,7vw,3.4rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:.5em}
.hero .sub{font-family:var(--sans);font-size:1.2rem;line-height:1.45;color:#46413c;margin-bottom:1.1rem}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0 0 1.6rem}
.facts li{background:#fff;border:1px solid var(--sand);border-radius:99px;padding:.3rem .85rem;font-size:.95rem;font-weight:600;color:var(--dark)}
.cover{justify-self:center;max-width:15rem;width:100%}
.cover img{box-shadow:0 18px 40px rgba(41,39,37,.25),0 2px 6px rgba(41,39,37,.15);border-radius:3px}

/* Sections */
.section{padding:3.5rem 0}
.section.alt{background:var(--greige);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.section-head{max-width:44rem;margin-bottom:2rem}
.grid{display:grid;gap:1rem}
.card{background:#fff;border:1px solid var(--sand);border-left:5px solid var(--dark);border-radius:var(--radius);padding:1.25rem 1.3rem}
.card.accent{border-left-color:var(--red)}
.card h3{margin-bottom:.35em}
.card p{margin:0;font-size:1rem}
.pattern{margin-top:2rem;background:var(--pink);border-left:5px solid var(--red);border-radius:var(--radius);padding:1.2rem 1.3rem}
.pattern p{margin:0}

.checks{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.checks li{position:relative;padding-left:2.4rem;font-size:1.05rem}
.checks li::before{content:"";position:absolute;left:0;top:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--dark)}
.checks li::after{content:"";position:absolute;left:.5rem;top:.48rem;width:.42rem;height:.75rem;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.checks strong{font-family:var(--sans);color:var(--dark)}
.samples{display:grid;gap:1.25rem;margin-top:2.5rem}
.samples figure{margin:0 auto;max-width:18rem;width:100%}
.samples img{border:1px solid var(--sand);border-radius:3px;box-shadow:0 8px 22px rgba(41,39,37,.12);background:#fff}
.samples figcaption{font-family:var(--sans);font-size:.92rem;color:var(--muted);margin-top:.6rem}

.who{display:grid;gap:1.5rem}
.quote{font-style:italic;font-size:1.15rem;background:var(--greige);border-left:5px solid var(--sand);padding:1.2rem 1.4rem;border-radius:var(--radius);margin:0}

/* FAQ */
.faq details,.faq .lead{max-width:48rem}
.faq details{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);margin-bottom:.75rem}
.faq summary{cursor:pointer;font-weight:650;font-size:1.08rem;color:var(--dark);padding:1rem 3rem 1rem 1.2rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:.75rem;font-size:1.5rem;color:var(--red);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 1.2rem 1rem}
.faq details>div p:last-child{margin:0}

/* CTA */
.cta{background:var(--dark);color:#fff;text-align:center;padding:3.5rem 0}
.cta h2{color:#fff}
.cta p{color:var(--sand-2);max-width:36rem;margin-left:auto;margin-right:auto}
.cta .btn-note{color:var(--sand)}

/* Footer */
.site-footer{background:var(--dark-2);color:var(--sand-2);padding:2rem 0;font-size:.95rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.site-footer a{color:#fff}
.site-footer nav{display:flex;gap:1.5rem}
.site-footer p{margin:0}

/* Legal pages */
.legal{padding:2.5rem 0 4rem}
.legal .wrap{max-width:46rem}
.legal h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,6vw,2.6rem);margin-bottom:.8em}
.legal h2{font-size:1.35rem;margin-top:2em}
.legal h3{font-size:1.1rem;margin-top:1.5em}
.legal address{font-style:normal;margin:0 0 1em}
.legal ul{padding-left:1.2rem}
.legal li{margin-bottom:.4em}
.notice{background:var(--pink);border-left:5px solid var(--red);padding:1rem 1.2rem;border-radius:var(--radius);font-family:var(--sans)}
.small{font-size:.92rem;color:var(--muted)}

@media (min-width:48rem){
  .hero{padding:4rem 0 4.5rem}
  .hero .wrap{grid-template-columns:1.25fr .85fr;align-items:center;gap:3.5rem}
  .cover{max-width:22rem}
  .grid{grid-template-columns:1fr 1fr}
  .samples{grid-template-columns:repeat(3,1fr)}
  .samples figure{max-width:none}
  .who{grid-template-columns:1.2fr 1fr;align-items:center}
  .section{padding:4.5rem 0}
}
@media print{.site-header nav,.btn,.cta{display:none}}