/* VDR Pillar-Seiten: gemeinsames Stylesheet (on-brand, leicht)
   Spielwiese: Display-Serif Fraunces wie auf der neuen Startseite. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url("/fonts/hanken-latin.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/bricolage-latin.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/fraunces-roman-latin.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;src:url("/fonts/fraunces-italic-latin.woff2") format("woff2")}

:root{
  --bg:#fafaf7; --ink:#101510; --muted:#5a6058; --line:#e6e3da;
  /* Silber/Platin statt Gold - identisch zur Hauptseite (index.html), damit die Leistungs-Seiten
     denselben Standard tragen. --copper heisst weiter so (viele Regeln referenzieren es), traegt aber Zinn. */
  --green:#1a3d2e; --green-2:#244e3c; --copper:#8b9691; --copper-2:#6f7a74; --copper-ink:#626c67; --copper-on-green:#b2bcb7;
  --radius:14px; --shadow:0 1px 2px rgba(16,21,16,.04), 0 12px 32px -16px rgba(16,21,16,.18);
  --maxw:1180px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:560;letter-spacing:-.014em;margin:0;color:var(--green);text-wrap:balance}
a{color:inherit}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* Header liegt jetzt in assets/pillar-header.css (identisch zur Hauptseite). */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;font:600 .95rem/1 var(--font-body);text-decoration:none;transition:background .2s,transform .2s}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-2);transform:translateY(-1px)}
/* Conversion-Button auf der gruenen CTA-Band-Flaeche: helles Platin + dunkler Text,
   dieselbe "Button auf Dunkel = Platin"-Sprache wie der Header-CTA der Hauptseite. */
.btn-copper{background:linear-gradient(180deg,#eef1ef 0%,#d3dad6 100%);color:#101510;border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.btn-copper:hover{filter:brightness(1.03);transform:translateY(-1px)}
.arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

.hero{padding:clamp(48px,7vw,96px) 0 clamp(30px,4vw,52px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .78rem/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--copper-ink)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--copper)}
.hero h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08;margin:20px 0 0;max-width:18ch}
.hero .lede{margin:22px 0 0;font-size:1.14rem;line-height:1.6;color:var(--muted);max-width:60ch}
.hero-tags{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 0;color:var(--copper-ink);font-weight:600;font-size:.95rem}
.hero-tags li:not(:last-child)::after{content:"·";margin:0 14px;color:var(--copper)}
.hero-cta{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:14px}

.section{padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line)}
.section h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;max-width:20ch}
.section .body{margin-top:16px}
.section .body>*{max-width:70ch}
.section .body p{margin-top:14px;color:#2c322c}
.section .body p:first-child{margin-top:0}
.lead-num{display:block;font:600 .82rem/1 var(--font-body);letter-spacing:.16em;color:var(--copper-ink);margin-bottom:12px}
.callout{margin:22px 0 0;padding:22px 24px;border-radius:14px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--copper);box-shadow:0 1px 2px rgba(16,21,16,.04)}
.callout strong{color:var(--green)}
.facts{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.facts li{position:relative;padding-left:28px;color:#2c322c;line-height:1.55}
.facts li::before{content:"";position:absolute;left:0;top:.35em;width:15px;height:15px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626c67' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.facts li strong{color:var(--ink)}

.faq{display:grid;gap:0}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--green);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--copper-ink);font-size:1.4rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{margin-top:12px;color:#2c322c;line-height:1.6;max-width:68ch}

.cta-band{margin-top:clamp(30px,4vw,52px);background:var(--green);color:#fff;border-radius:20px;padding:clamp(32px,5vw,56px);text-align:center}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.16;max-width:26ch;margin:0 auto}
.cta-band p{margin:16px auto 0;color:#cdd4cc;max-width:56ch;line-height:1.6}
.cta-band .btn{margin-top:26px}

/* Interlinks (SEO-Backlinks zu den anderen Pillar-Seiten) */
.interlinks{margin-top:clamp(30px,4vw,52px)}
.interlinks h2{font-size:1.3rem;margin-bottom:18px}
.il-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.il-grid{grid-template-columns:1fr}}
.il-card{display:block;padding:20px 22px;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;box-shadow:0 1px 2px rgba(16,21,16,.04);transition:border-color .2s,box-shadow .2s,transform .2s}
.il-card:hover{border-color:var(--copper);box-shadow:0 12px 28px -18px rgba(16,21,16,.35);transform:translateY(-2px)}
.il-card strong{display:block;font-family:var(--font-display);font-weight:600;color:var(--green);font-size:1.05rem}
.il-card span{display:block;margin-top:6px;color:var(--muted);font-size:.9rem;line-height:1.5}
.il-card .il-go{display:inline-block;margin-top:12px;color:var(--copper-ink);font-weight:600;font-size:.9rem}

.sources{margin-top:30px;font-size:.9rem;color:var(--muted);line-height:1.6}
.sources a{color:var(--copper-ink)}
.disclaim{margin-top:14px;font-size:.82rem;color:var(--muted);line-height:1.55;max-width:74ch}
footer{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line);padding:34px 0}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--copper)}
.foot-links{display:flex;gap:22px}