/* ProDynamic Consulting — Versicherungsberatung. Farben/Schriften aus der ProDynamic-Marke. */

@font-face { font-family:'DM Sans'; font-weight:400 700; font-display:swap; src:url(fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'DM Sans'; font-weight:400 700; font-display:swap; src:url(fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Outfit'; font-weight:200 800; font-display:swap; src:url(fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Outfit'; font-weight:200 800; font-display:swap; src:url(fonts/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --navy:#181D4E;
  --navy-deep:#10133A;
  --accent:#5BC0B4;
  --accent-ink:#1C6B66;     /* Akzent für Text auf hellem Grund (Kontrast ≥ 4.5:1) */
  --accent-soft:#E3F2F0;
  --bg:#F6F8F9;
  --surface:#FFFFFF;
  --line:#E2E7EA;
  --text:#1E2240;
  --muted:#5F6276;
  --radius:16px;
  --shadow:0 1px 2px rgba(24,29,78,.04), 0 8px 24px rgba(24,29,78,.06);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ margin:0; background:var(--bg); color:var(--text); font:400 17px/1.65 'DM Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ font-family:'Outfit',system-ui,sans-serif; color:var(--navy); line-height:1.15; margin:0; letter-spacing:-.01em; }
h1{ font-size:clamp(2.3rem,5vw,3.6rem); font-weight:500; }
h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:500; }
h3{ font-size:1.2rem; font-weight:600; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(1160px, 100% - 40px); margin-inline:auto; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:12px; z-index:100; background:#fff; padding:8px 14px; }

.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:600; font-size:.98rem; text-decoration:none; white-space:nowrap; transition:background .2s, color .2s, border-color .2s, transform .2s; border:1px solid transparent; }
.btn:hover{ transform:translateY(-1px); }
.btn-accent{ background:var(--accent); color:var(--navy-deep); }
.btn-accent:hover{ background:#7FD0C6; }
.btn-ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover{ border-color:#fff; }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-deep); }
.btn-sm{ padding:10px 20px; font-size:.9rem; gap:.28em; }

/* ---------- Header ---------- */
header.top{ position:sticky; top:0; z-index:50; background:rgba(246,248,249,.9); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand span{ font-family:'Outfit',sans-serif; font-size:1.15rem; font-weight:600; color:var(--navy); line-height:1.1; }
.brand small{ display:block; font-family:'DM Sans',sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink); }
.top nav{ display:flex; align-items:center; gap:34px; }
.top nav a{ text-decoration:none; font-size:.95rem; color:var(--muted); transition:color .2s; }
.top nav a:hover{ color:var(--navy); }
/* ponytail: kein Burger-Menü — One-Pager, mobil reicht Logo + Termin-Button */
@media (max-width:860px){ .top nav{ display:none; } }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:96px 0 104px; }
.hero::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(900px 500px at 85% 10%, rgba(91,192,180,.18), transparent 60%),
  radial-gradient(700px 500px at 0% 100%, rgba(255,255,255,.06), transparent 60%); }
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; }
.hero .eyebrow{ color:var(--accent); }
.hero h1{ color:#fff; margin:20px 0 22px; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero-lead{ font-size:1.15rem; color:rgba(255,255,255,.78); max-width:34em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero-note{ margin-top:28px; font-size:.9rem; color:rgba(255,255,255,.6); }

.check-card{ background:var(--surface); color:var(--text); border-radius:20px; padding:34px; box-shadow:0 30px 60px rgba(0,0,0,.25); }

.check-card > p{ color:var(--muted); font-size:.95rem; margin:10px 0 22px; }
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem; }
.checks li::before{ content:""; flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C6B66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat; }
.check-card .btn{ width:100%; justify-content:center; margin-top:28px; }

/* ---------- Sections ---------- */
.sec{ padding:104px 0; }
.sec-alt{ background:var(--surface); border-block:1px solid var(--line); }
.sec-head{ max-width:640px; margin-bottom:56px; }
.sec-head h2{ margin-top:16px; }
.sec-head p{ margin-top:18px; color:var(--muted); font-size:1.08rem; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow::after{ content:""; width:28px; height:1px; background:currentColor; }

/* Leistungen */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#C9DEDB; }
.icon{ width:52px; height:52px; border-radius:14px; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; margin-bottom:22px; }
.icon svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.card p{ color:var(--muted); margin-top:10px; font-size:.98rem; }
.card ul{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.card li{ font-size:.8rem; padding:4px 11px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); }

/* Ablauf */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:step; list-style:none; margin:0; padding:0; }
.steps li{ position:relative; padding-top:64px; }
.steps li::before{ counter-increment:step; content:"0" counter(step); position:absolute; top:0; left:0; font-family:'Outfit',sans-serif; font-size:2.4rem; font-weight:300; color:var(--accent); line-height:1; }
.steps li::after{ content:""; position:absolute; top:20px; left:70px; right:-14px; height:1px; background:var(--line); }
.steps li:last-child::after{ display:none; }
.steps p{ color:var(--muted); margin-top:10px; font-size:.98rem; }

/* Über uns */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.about-text p{ color:var(--muted); margin-top:18px; font-size:1.05rem; }
.about-text h2{ margin-top:16px; }
.values{ display:grid; gap:16px; }
.value{ display:flex; gap:20px; padding:26px 28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.value b{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--accent); display:grid; place-items:center; font-family:'Outfit',sans-serif; font-weight:500; }
.value p{ color:var(--muted); margin-top:4px; font-size:.96rem; }

/* FAQ */
.faq{ max-width:820px; margin-inline:auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 4px; font-family:'Outfit',sans-serif; font-size:1.15rem; font-weight:500; color:var(--navy); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-weight:300; font-size:1.3rem; color:var(--accent-ink); transition:transform .25s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 4px 26px; color:var(--muted); max-width:680px; }

/* Kontakt */
.contact{ background:var(--navy); color:#fff; border-radius:28px; padding:72px; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; position:relative; overflow:hidden; }
.contact::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 400px at 100% 0%, rgba(91,192,180,.2), transparent 60%); }
.contact > *{ position:relative; }
.contact .eyebrow{ color:var(--accent); }
.contact h2{ color:#fff; margin:16px 0 18px; }
.contact p{ color:rgba(255,255,255,.75); }
.contact .btn{ margin-top:32px; }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; align-content:center; }
.contact-list li{ display:flex; gap:16px; align-items:center; padding:18px 22px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.contact-list svg{ flex:none; width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.contact-list small{ display:block; font-size:.78rem; color:rgba(255,255,255,.55); letter-spacing:.04em; }
.contact-list a{ text-decoration:none; }
.contact-list a:hover{ color:var(--accent); }

#kontakt{ padding-bottom:0; }

/* Footer */
footer.foot{ padding:48px 0 40px; color:var(--muted); font-size:.9rem; }
.foot .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; }
.foot nav{ display:flex; flex-wrap:wrap; gap:26px; }
.foot nav a{ text-decoration:none; }
.foot nav a:hover{ color:var(--navy); }

/* Rechtstexte */
.legal{ padding:80px 0 104px; }
.legal .wrap{ max-width:780px; }
.legal h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:32px; }
.legal h2{ font-size:1.3rem; margin:40px 0 12px; }
.legal p{ color:var(--muted); margin-bottom:12px; }
.legal a{ color:var(--navy); }
.placeholder{ padding:22px 26px; border:1px dashed #A9D2CC; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero .wrap, .about, .contact{ grid-template-columns:1fr; }
  .hero .wrap{ gap:48px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .steps li::after{ display:none; }
  .about{ gap:40px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ width:calc(100% - 32px); }
  .hero{ padding:64px 0 72px; }
  .sec{ padding:72px 0; }
  .sec-head{ margin-bottom:40px; }
  .cards, .steps{ grid-template-columns:1fr; }
  .check-card{ padding:26px; }
  .contact{ padding:40px 24px; border-radius:20px; }
  .brand small, .hide-sm{ display:none; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }