/* =========================
   APTOS – Clean & Elegant
   Akzente gezielt: #0A6B6B + #FFD08A
   ========================= */

:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;

  --surface:#f3f4f6;         /* graue Kästen */
  --surface-2:#f8fafc;       /* soft */
  --border:#e5e7eb;

  --brand:#0A6B6B;           /* dunkelgrün */
  --brand-hover:#074b4b;
  --accent:#FFD08A;          /* Gold */
  --accent-soft:#fff4df;     /* sehr helles Gold */
}

/* Reset/Grundlage */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  line-height:1.6;
}

img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{color:var(--brand-hover)}
a:focus{outline:3px solid var(--accent);outline-offset:2px}

/* Skip link */
.skip{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{
  left:16px;top:16px;width:auto;height:auto;overflow:visible;
  background:#fff;border:1px solid var(--border);padding:10px 12px;border-radius:10px;
}

/* Container */
.wrap{max-width:1120px;margin:0 auto;padding:20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand__name{font-weight:800;color:var(--brand);letter-spacing:.2px}
.brand__sub{font-size:.95rem}
.nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.nav a{color:var(--brand);text-decoration:none;font-weight:700;padding:6px 10px;border-radius:10px}
.nav a:hover{background:var(--surface-2)}
.nav__cta{
  border:1px solid var(--border);
  background:var(--surface-2);
}

/* Hero */
.hero{
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(800px 300px at 15% 10%, rgba(255,208,138,.30), transparent 60%),
    radial-gradient(800px 300px at 85% 20%, rgba(10,107,107,.10), transparent 55%),
    #fff;
}
.hero-grid{display:grid;grid-template-columns: 1.2fr .8fr;gap:18px;align-items:start}
.hero-main{padding:8px 0}
.kicker{
  display:inline-block;
  background:var(--accent);
  color:#1f2937;
  font-weight:800;
  padding:4px 12px;
  border-radius:999px;
  font-size:.9rem;
  margin-bottom:10px;
}
h1{margin:0 0 10px;font-size:2.1rem;line-height:1.15}
.lead{font-size:1.05rem;color:#374151}

.tl-dr{
  background:var(--accent-soft);
  border:1px solid rgba(255,208,138,.9);
  border-radius:14px;
  padding:12px 14px;
  margin:10px 0 12px;
}

/* CTA */
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 10px}
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  border:2px solid var(--brand);
  background:var(--brand);
  color:#fff;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover,.btn:focus-visible{
  background:var(--brand-hover);
  border-color:var(--brand-hover);
  box-shadow:0 10px 24px rgba(10,107,107,.18);
  transform:translateY(-1px);
}
.btn--outline{
  background:transparent;
  color:var(--brand);
}
.btn--outline:hover,.btn--outline:focus-visible{
  background:var(--brand);
  color:#fff;
}
.btn--ghost{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--brand);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  background:#fff;
  border-color:rgba(255,208,138,.9);
  color:var(--brand-hover);
}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badge{
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  font-size:.92rem;
  color:#0f172a;
}

/* Sections */
.section{padding:26px 0}
.section--soft{background:linear-gradient(180deg, var(--surface-2), #fff)}
.section-head{margin-bottom:14px}
.section-head h2{margin:0 0 6px;font-size:1.65rem;line-height:1.2}
.h2-small{margin:0 0 8px;font-size:1.2rem}
.small{font-size:.92rem}
.muted{color:var(--muted)}

/* Grid & columns */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 16px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.card--quiet{background:var(--surface-2)}
/* Akzent nur für “wichtige” Karte, dezent */
.card--accent{
  background:linear-gradient(180deg, rgba(255,208,138,.18), var(--surface-2));
  border-color:rgba(255,208,138,.7);
}

/* Checklist */
ul.check{list-style:none;padding:0;margin:10px 0}
ul.check li{position:relative;padding-left:26px;margin:6px 0}
ul.check li::before{
  content:"✓";
  position:absolute;left:0;top:.1rem;
  color:var(--brand);
  font-weight:900;
}

/* Steps */
.step{position:relative}
.step__no{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);
  border:1px solid rgba(255,208,138,.8);
  font-weight:900;color:#92400e;
  margin-bottom:8px;
}

/* Callout */
.callout{
  margin-top:16px;
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(255,208,138,.8);
}
.callout__icon{
  width:28px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);
  font-weight:900;
}

/* Quotes */
.quote__text{margin:0 0 10px;font-size:1.02rem}
.quote__meta{margin:0;color:var(--muted)}

/* FAQ */
.faq details{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  margin:10px 0;
}
.faq summary{cursor:pointer;font-weight:800;color:#0f172a}
.faq p{margin:10px 0 0;color:#374151}

/* Evidence accordion */
.evidence-toggle{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.evidence-toggle__btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:var(--surface-2);
  border:0;
  cursor:pointer;
  font-weight:900;
  color:#0f172a;
}
.evidence-toggle__btn:hover{background:var(--accent-soft)}
.evidence-content{padding:12px 14px;border-top:1px solid var(--border)}
.evidence-list{margin:0;padding-left:18px}
.evidence-list li{margin:10px 0}

/* Lists */
ul.list{margin:10px 0;padding-left:18px}
ul.list li{margin:6px 0}

/* Share buttons */
.share{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.share__btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,208,138,.8);
  background:var(--accent-soft);
  color:var(--brand);
  text-decoration:none;
  font-weight:800;
}
.share__btn:hover{background:rgba(255,208,138,.45)}

/* Footer */
.footer{border-top:1px solid var(--border);padding:18px 0;margin-top:18px}
.footer-inner{color:var(--muted);text-align:center}
.sep{padding:0 6px;color:#c0c7d1}

/* Responsive */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .col-4,.col-6,.col-8{grid-column:span 12}
  h1{font-size:1.75rem}
  .nav{gap:6px}
  .nav a{padding:6px 8px}
}