/* Versicherungen mit Kopf: BU-Checkliste
   Designsystem 1:1 uebernommen von bu.versicherungenmitkopf.de */

@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Lato';src:url('/assets/fonts/Lato-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Lato';src:url('/assets/fonts/Lato-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --gold:#F8B526; --gold-dark:#E0A115; --navy:#242A39;
  --petrol1:#0981B0; --petrol2:#075F83;
  --blue-light:#E8F4F8; --cream:#FEF7E4;
  --body:#5C6770; --white:#fff; --red:#D9534F; --green:#2E9E5B;
  --radius:10px; --radius-card:14px;
  --shadow:0 4px 24px rgba(36,42,57,.10);
  --shadow-lg:0 18px 50px rgba(7,95,131,.22);
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Lato',Arial,sans-serif;font-size:18px;line-height:1.65;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--petrol1)}
h1,h2,h3,h4{font-family:'Poppins',Arial,sans-serif;font-weight:700;color:var(--navy);line-height:1.25;margin:0 0 16px}
h1{font-size:40px;letter-spacing:-.4px}
h2{font-size:31px}
h3{font-size:21px}
p{margin:0 0 16px}
.hl{color:var(--gold)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sec{padding:72px 0}
.sec-light{background:var(--blue-light)}
.sec-cream{background:var(--cream)}
.sec-dark{background:var(--navy);color:#C2CAD3}
.sec-dark h2,.sec-dark h3{color:#fff}
.center{text-align:center}
.lead{font-size:20px}
.eyebrow{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);margin:0 0 14px}

/* Kopfbereich */
.trust-ribbon{background:var(--navy);color:#fff;text-align:center;font-size:14px;padding:9px 16px;font-family:'Lato',Arial,sans-serif}
.ribbon-stars{color:var(--gold);letter-spacing:2px;margin-right:10px}
.brand-bar{background:#fff;border-bottom:1px solid #E6ECF0}
.brand-bar-inner{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px}
.brand-lockup{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-icon{width:42px;height:auto;flex:0 0 auto}
.brand-name{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:17px;color:var(--navy);line-height:1.15}
.brand-claim{font-size:13px;color:#8A949C;line-height:1.3}

/* Hero */
.hero{background-image:linear-gradient(135deg,#0981B0 0%,#075F83 100%);color:#fff;padding:64px 0 76px}
.hero h1,.hero h2,.hero p{color:#fff}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:"copy form" "proof form" "badges form";
  grid-template-rows:auto auto 1fr;
  column-gap:56px;row-gap:0
}
.hero-copy{grid-area:copy}
.hero-grid .card-form{grid-area:form;align-self:start}
.hero-grid .hero-proof{grid-area:proof}
.hero-grid .hero-badges{grid-area:badges;align-self:end}

/* Cover und Fragen nebeneinander, das fuellt die linke Spalte */
.hero-proof{display:flex;align-items:center;gap:30px;margin-top:8px}
.hero-proof .cover-shot{flex:0 0 auto;width:178px;max-width:178px;margin:0;border-radius:6px;box-shadow:0 14px 34px rgba(9,40,60,.34)}
.hero-proof .pains{margin:0}
.hero-sub{font-size:19px;color:#DCEAF2;margin-bottom:26px}
.pains{list-style:none;padding:0;margin:0 0 30px}
.pains li{position:relative;padding-left:40px;margin-bottom:16px;color:#EAF3F8;font-size:18px;line-height:1.5}
.pains li::before{content:"\00d7";position:absolute;left:0;top:-2px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:17px;font-weight:700;line-height:24px;text-align:center}

/* Formularkarte */
.card-form{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:30px 28px 26px}
.card-form h2{font-size:23px;margin-bottom:6px}
.card-form .sub{font-size:15px;color:#7C868E;margin-bottom:20px}
.cover-shot{max-width:190px;margin:0 auto 20px;border-radius:6px;box-shadow:0 10px 28px rgba(36,42,57,.24)}
label{display:block;font-family:'Poppins',Arial,sans-serif;font-weight:500;font-size:14px;color:var(--navy);margin-bottom:6px}
input[type=text],input[type=email]{width:100%;padding:14px 16px;font-family:'Lato',Arial,sans-serif;font-size:17px;color:var(--navy);border:1.5px solid #D6DEE4;border-radius:var(--radius);background:#fff;margin-bottom:16px}
input[type=text]:focus,input[type=email]:focus{outline:none;border-color:var(--petrol1);box-shadow:0 0 0 3px rgba(9,129,176,.14)}
.btn{display:inline-block;background:var(--gold);color:var(--navy);font-family:'Lato',Arial,sans-serif;font-weight:700;font-size:18px;padding:16px 40px;border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;text-align:center;transition:background .15s ease,transform .15s ease}
.btn:hover{background:var(--gold-dark);transform:translateY(-1px)}
.btn-block{display:block;width:100%}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.microcopy{font-size:13.5px;color:#8A949C;line-height:1.55;margin:14px 0 0;text-align:center}
.consent{font-size:12.5px;color:#8A949C;line-height:1.5;margin:14px 0 0}
.consent a{color:#7C868E}
.form-msg{display:none;margin:14px 0 0;padding:12px 14px;border-radius:var(--radius);font-size:15px}
.form-msg.err{display:block;background:#FDECEA;color:#A23F3B}

/* Die Formularkarte steht auf farbigem Grund: Textfarben zurueckholen */
.hero .card-form h2,.cta-final .card-form h2{color:var(--navy)}
.hero .card-form p,.cta-final .card-form p{color:var(--body)}
.hero .card-form .sub,.cta-final .card-form .sub,
.hero .card-form .microcopy,.cta-final .card-form .microcopy,
.hero .card-form .consent,.cta-final .card-form .consent{color:#8A949C}
.hero .card-form .form-msg.err,.cta-final .card-form .form-msg.err{color:#A23F3B}

/* Badges im Hero, wie auf bu.versicherungenmitkopf.de */
.hero-badges{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin:34px 0 0}
.hero-badges img{height:104px;width:auto;border-radius:8px}

/* Beweisleiste, Aufbau wie die trustbar auf bu.versicherungenmitkopf.de */
.trustbar{background:#fff;padding:22px 0;border-bottom:1px solid #EDF2F5}
.trustbar .wrap{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:16px 56px;text-align:center}
.trustitem{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:17px;color:var(--navy);line-height:1.3}
.trustitem .stars{color:var(--gold);letter-spacing:1px;font-size:14px;display:block;margin-bottom:2px}
.trustitem small{display:block;font-family:'Lato',Arial,sans-serif;font-weight:400;font-size:13.5px;color:#8A9199;margin-top:3px}

/* Kapitelliste, nur Titel, kein Inhalt */
.chapters{list-style:none;padding:0;margin:32px auto 0;max-width:840px;text-align:left;
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.chapters li{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow);padding:22px 24px;margin:0;font-family:'Poppins',Arial,sans-serif;font-weight:500;font-size:18px;color:var(--navy);border-left:4px solid var(--gold)}
.chapters li span{flex:0 0 auto;font-weight:700;font-size:22px;color:var(--gold);line-height:1}

/* Inhalt der Checkliste */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px}
.cat{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow);padding:26px 26px 22px;border-top:4px solid var(--gold)}
.cat .num{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:1.6px;color:var(--petrol1);text-transform:uppercase;margin-bottom:8px}
.cat ul{list-style:none;padding:0;margin:12px 0 0}
.cat li{position:relative;padding-left:28px;margin-bottom:9px;font-size:16px;line-height:1.5}
.cat li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:6px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}

.teaser{background:#fff;border-left:5px solid var(--gold);border-radius:var(--radius-card);box-shadow:var(--shadow);padding:28px 30px;margin-top:38px}
.teaser h3{margin-bottom:8px}

/* Bastian */
.quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center}
.quote-photo{border-radius:var(--radius-card);box-shadow:var(--shadow);width:100%}
.quote-card blockquote{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:26px;line-height:1.35;color:var(--navy);margin:0 0 16px}
.quote-card cite{font-style:normal;font-size:16px;color:#8A949C}

/* Zahlen */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.stat{text-align:center;padding:26px 18px;background:rgba(255,255,255,.05);border-radius:var(--radius-card)}
.stat .big{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:42px;color:var(--gold);line-height:1.1;display:block;margin-bottom:8px}

/* Stimmen */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.review{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow);padding:26px}
.review .stars{color:var(--gold);letter-spacing:2px;margin-bottom:12px}
.review p{font-size:16px;line-height:1.6}
.review .who{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:15px;color:var(--navy);margin:0}
.review .role{font-size:13.5px;color:#9AA3AA}

/* Badges und Presse */
.badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 40px;margin-top:30px}
.badges img{height:92px;width:auto}
.press{display:flex;flex-wrap:wrap;align-items:center;gap:26px 40px;margin-top:30px}
.press img{height:44px;width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.85}
.sec .press img,.sec-light .press img{filter:grayscale(1);opacity:.6}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.step{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow);padding:26px}
.step .n{display:inline-flex;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy);font-family:'Poppins',Arial,sans-serif;font-weight:700;align-items:center;justify-content:center;margin-bottom:14px}

/* FAQ */
.faq{max-width:760px;margin:30px auto 0;text-align:left}
.faq details{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;margin-bottom:12px}
.faq summary{font-family:'Poppins',Arial,sans-serif;font-weight:500;color:var(--navy);cursor:pointer;font-size:17px}
.faq p{margin:12px 0 0;font-size:16px}

/* Abschluss-CTA */
.cta-final{background-image:linear-gradient(135deg,#0981B0 0%,#075F83 100%);color:#fff;padding:72px 0}
.cta-final h2,.cta-final p{color:#fff}
.cta-grid{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center}

/* Danke / Bestaetigt */
.hero-slim{padding:56px 0 48px}
.panel{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:38px 36px;max-width:720px;margin:0 auto}
.icon-circle{width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 20px;font-family:'Poppins',Arial,sans-serif;font-weight:700}
.mailbox-steps{list-style:none;padding:0;margin:24px 0 0;text-align:left}
.mailbox-steps li{position:relative;padding-left:40px;margin-bottom:16px;font-size:17px}
.mailbox-steps li span{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--blue-light);color:var(--petrol2);font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.hint{background:var(--cream);border-radius:var(--radius);padding:16px 18px;font-size:15.5px;margin-top:24px}
.soft-link{display:inline-block;margin-top:8px;font-size:15px;color:#DCEAF2;text-decoration:underline}
.download-row{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;justify-content:center;margin-top:8px}
.download-row .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}

/* Download, verbindender Satz, BU-Check: untereinander, mittig */
.choice{display:flex;flex-direction:column;align-items:center;max-width:560px;margin:0 auto}
.choice .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.choice-hint{margin:18px 0;font-size:16px;line-height:1.6;color:#DCEAF2;text-align:center}

/* Der BU-Check ist das eigentliche Ziel, deshalb in Gruen */
.btn-check{background:#2E9E5B;color:#fff;box-shadow:0 6px 20px rgba(46,158,91,.32)}
.btn-check:hover{background:#268A4D}

/* Aufmerksamkeit: ruhiges Pulsieren, dazu alle sieben Sekunden ein kurzer Stupser */
@keyframes vmkGlow{
  0%,100%{box-shadow:0 6px 20px rgba(46,158,91,.32)}
  50%{box-shadow:0 8px 30px rgba(46,158,91,.62), 0 0 0 7px rgba(46,158,91,.15)}
}
@keyframes vmkNudge{
  0%,86%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  88%{transform:translate3d(0,-2px,0) rotate(-.9deg)}
  91%{transform:translate3d(0,-2px,0) rotate(.9deg)}
  94%{transform:translate3d(0,-1px,0) rotate(-.5deg)}
  97%{transform:translate3d(0,0,0) rotate(.3deg)}
}
.choice .btn-check{
  animation:vmkGlow 2.6s ease-in-out infinite, vmkNudge 7s ease-in-out infinite;
  will-change:box-shadow,transform
}
.choice .btn-check:hover{animation-play-state:paused;transform:translateY(-1px)}

/* Wer Bewegung im System abgeschaltet hat, bekommt keine */
@media (prefers-reduced-motion:reduce){
  .choice .btn-check{animation:none}
}
.checkbenefits{list-style:none;padding:0;margin:20px 0 26px}
.checkbenefits li{position:relative;padding-left:32px;margin-bottom:11px;font-size:17px}
.checkbenefits li::before{content:"";position:absolute;left:3px;top:9px;width:12px;height:7px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}

/* Consent-Leiste */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--navy);color:#C2CAD3;box-shadow:0 -6px 24px rgba(36,42,57,.28)}
.consent-inner{max-width:var(--max);margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:20px}
.consent-inner p{margin:0;font-size:14.5px;line-height:1.5}
.consent-inner a{color:#fff;text-decoration:underline}
.consent-actions{display:flex;gap:10px;flex:0 0 auto}
.consent-bar .btn{font-size:15px;padding:11px 20px}
.btn-consent-no{background:transparent;color:#C2CAD3;border:1.5px solid rgba(255,255,255,.35)}
.btn-consent-no:hover{background:rgba(255,255,255,.1)}

/* Fuss */
.site-footer{background:var(--navy);color:#8C97A3;padding:38px 0;font-size:14.5px;text-align:center}
.site-footer a{color:#C2CAD3;text-decoration:none;margin:0 12px}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-links{margin-bottom:14px}

@media (max-width:960px){
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "form" "proof" "badges";
    grid-template-rows:auto auto auto auto;
    row-gap:28px
  }
  .hero-sub{margin-bottom:0}
  .pains{margin:0}
  .hero-proof{flex-direction:column;align-items:center;gap:22px;margin-top:0}
  .hero-proof .cover-shot{width:150px;max-width:150px}
  .quote-grid,.cta-grid{grid-template-columns:1fr;gap:34px}
  .cats,.stats,.reviews,.steps{grid-template-columns:1fr}
  h1{font-size:30px}
  h2{font-size:25px}
  body{font-size:17px}
  .sec{padding:52px 0}
  .hero{padding:44px 0 54px}
  .btn{display:block;width:100%;padding:17px 20px}
  .quote-card blockquote{font-size:22px}
  .badges img{height:72px}
  .hero-badges{gap:12px 14px;margin-top:26px;justify-content:center}
  .hero-badges img{height:64px}
  .trustbar .wrap{gap:18px 20px}
  .trustitem{font-size:15.5px;flex:1 1 40%}
  .chapters{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .chapters li{font-size:16px;padding:16px 18px;gap:12px}
  .chapters li span{font-size:19px}
  .press{justify-content:center;gap:18px 24px}
  .press img{height:32px}
  .card-form{padding:24px 20px 22px}
  .cover-shot{max-width:118px;margin-bottom:14px}
  .card-form h2{font-size:20px}
  .stat .big{font-size:36px}
  .panel{padding:28px 22px}
  .brand-claim{display:none}
  .consent-inner{flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px}
  .consent-inner p{font-size:13.5px;line-height:1.45}
  .consent-actions{flex-direction:row;gap:8px}
  .consent-bar .btn{width:50%;padding:10px 8px;font-size:14.5px}
}