/* ===========================================================
   PKV Germany — pkvgermany.de
   Statischer Nachbau der onepage-Seite, Stand 08/2026
   =========================================================== */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face{font-family:'Onest';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/onest-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/onest-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/onest-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/onest-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/onest-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/gabarito-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/gabarito-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/gabarito-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/gabarito-latin-700-normal.woff2') format('woff2')}

/* ---------- Grundwerte ---------- */
:root{
  --dark:#121212;
  --light:#F3F3F3;
  --grey-card:#F2F2F2;
  --white:#fff;
  --gold:#EFCE84;
  --gold-deep:#D4A436;
  --red:#D0181F;
  --whatsapp:#25D366;
  --whatsapp-ink:#12A150;
  --whatsapp-soft:#E9F9EF;
  --whatsapp-soft-hover:#DDF5E6;
  --radius:16px;
  --font-text:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Gabarito','Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wide:1464px;
  --narrow:1250px;
  --gutter:32px;
  --gold-bg:
    radial-gradient(circle at 23% 26%, #D4A436 0%, rgba(0,0,0,0) 70%),
    radial-gradient(circle at 45% 55%, #F7DB8E 0%, rgba(0,0,0,0) 70%),
    radial-gradient(circle at 31% 78%, #FFE4AB 0%, rgba(0,0,0,0) 70%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;background:var(--white);color:var(--dark);
  font-family:var(--font-text);font-size:16px;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:calc(1250px + 2*var(--gutter))}
.band--light{background:var(--light)}
.pad-xxl{padding:100px 0}
.pad-xl{padding:50px 0}
.pad-m{padding:40px 0}
.pad-xs{padding:0}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* Abschnitt mit Bild neben Text.
   Überschrift, Bild und Fließtext sind eigene Felder — damit auf dem Handy
   die Reihenfolge Überschrift, Bild, Text, Knopf entsteht. */
.split-grid{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:56px;row-gap:0;
  grid-template-rows:1fr auto auto 1fr
}
.split-grid--media-right{
  grid-template-areas:". media" "head media" "body media" ". media"
}
.split-grid--media-left{
  grid-template-areas:"media ." "media head" "media body" "media ."
}
.s-head{grid-area:head}
.s-body{grid-area:body}
.s-media{grid-area:media;align-self:center}

/* ---------- Typografie ---------- */
.eyebrow{
  font-size:14px;font-weight:300;line-height:20px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--dark);margin:0 0 14px
}
.h-xl{
  font-family:var(--font-text);font-weight:400;
  font-size:clamp(30px,5.2vw,48px);line-height:1.08;letter-spacing:-.4px;
  margin:0 0 24px;color:var(--dark)
}
.h-xl b,.h-xl strong{font-weight:700}
.h-l{
  font-family:var(--font-text);font-weight:700;
  font-size:clamp(24px,3.4vw,32px);line-height:1.1;letter-spacing:-.4px;margin:0 0 14px
}
.h-m{
  font-family:var(--font-head);font-weight:600;
  font-size:32px;line-height:1.1;letter-spacing:-.4px;margin:0 0 18px
}
.lead{font-size:18px;font-weight:300;line-height:1.5;margin:0 0 18px}
.lead b,.lead strong{font-weight:700}
.body-16{font-size:16px;font-weight:300;line-height:1.5;margin:0 0 16px}
.muted-8{color:rgba(18,18,18,.8)}
.center{text-align:center}
.h-xl--912{max-width:912px;margin-left:auto;margin-right:auto}
.h-xl--732{max-width:732px;margin-left:auto;margin-right:auto}

/* ---------- Knopf ---------- */
.btn{
  display:inline-flex;align-items:center;gap:20px;width:max-content;max-width:100%;
  padding:14px 36px;border-radius:var(--radius);
  background-color:var(--gold);background-image:var(--gold-bg);
  color:#010101;text-decoration:none;
  box-shadow:0 1px 2px rgba(18,18,18,.10);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(18,18,18,.16);filter:saturate(1.06)}
.btn:focus-visible{outline:3px solid var(--dark);outline-offset:3px}
.btn__icon{flex:0 0 auto;width:26px;height:26px}
.btn__text{display:flex;flex-direction:column;line-height:1.2}
.btn__main{font-size:18px;font-weight:600;line-height:1.5}
.btn__sub{font-size:14.4px;font-weight:400;letter-spacing:.5px;line-height:1.5;opacity:.72}
.btn--single .btn__main{line-height:1.5}

/* WhatsApp-Variante — zartgrüne Fläche, grünes Zeichen, dunkle Schrift.
   Das Grün ist erkennbar, nimmt dem goldenen Knopf aber nicht die Führung. */
.btn--whatsapp{
  background-color:var(--whatsapp-soft);background-image:none;color:#0B1F17;
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.45), 0 1px 2px rgba(18,18,18,.06)
}
.btn--whatsapp .btn__icon{color:var(--whatsapp-ink)}
.btn--whatsapp:hover{
  background-color:var(--whatsapp-soft-hover);
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.7), 0 6px 18px rgba(18,140,80,.16);
  filter:none
}
.btn--whatsapp .btn__sub{opacity:.68}
.btn--whatsapp:focus-visible{outline-color:var(--whatsapp-ink)}

/* Zwei Knöpfe nebeneinander */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.btn-row .btn{margin:0}

/* ---------- Merkmalsliste mit Haken ---------- */
.checks{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start}
.checks .ico{width:24px;height:24px;margin-top:1px}
.checks span{font-size:16.8px;font-weight:600;line-height:1.5}

/* ---------- Kopfzeile ---------- */
.skip{
  position:absolute;left:24px;top:-60px;z-index:200;
  background:#000;color:#fff;padding:8px 16px;border-radius:0 0 4px 4px;
  font-size:14px;font-weight:600;text-decoration:none
}
.skip:focus{top:0}
.site-header{
  position:sticky;top:0;z-index:100;background:var(--white);
  border-bottom:1px solid rgba(18,18,18,.06)
}
.site-header .wrap{max-width:1440px;padding:0 24px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:58px}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:34px}
.nav a{font-size:15.2px;font-weight:400;text-decoration:none;color:var(--dark);position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--dark);transition:right .25s ease}
.nav a:hover::after{right:0}
.header-contact{display:flex;align-items:center;gap:26px}
.contact-item{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--dark)}
.contact-item svg{flex:0 0 auto}
.contact-item .l1{display:block;font-size:14px;font-weight:500;line-height:1.3}
.contact-item .l2{display:block;font-size:11.2px;font-weight:400;letter-spacing:.5px;line-height:1.5;opacity:.75}
.contact-item.mail .l1{font-size:11.2px;font-weight:400;letter-spacing:.5px;opacity:.85}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--dark)}
.mobile-nav{display:none}

/* ---------- Deckblatt ---------- */
.deckblatt .split-grid{column-gap:56px}
.hero-copy .lead{max-width:34em}
.video-card{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/9;background:#d9d9d9;cursor:pointer;border:0;padding:0;width:100%;
}
.video-card img{width:100%;height:100%;object-fit:cover}
.video-card__play{
  position:absolute;left:13%;top:76%;transform:translate(-50%,-50%);
  width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.28);backdrop-filter:blur(2px);
  display:grid;place-items:center;transition:background .2s ease,transform .2s ease
}
.video-card:hover .video-card__play{background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(1.06)}
.video-card__play svg{margin-left:4px}

/* Vimeo-Fenster */
.video-modal{
  position:fixed;inset:0;z-index:300;display:none;
  background:rgba(0,0,0,.82);padding:24px;
}
.video-modal[open],.video-modal.is-open{display:grid;place-items:center}
.video-modal__inner{width:min(1000px,100%);aspect-ratio:16/9;position:relative}
.video-modal iframe{width:100%;height:100%;border:0;border-radius:var(--radius)}
.video-modal__close{
  position:absolute;right:0;top:-46px;background:none;border:0;color:#fff;
  font-size:30px;line-height:1;cursor:pointer;padding:4px 8px
}

/* ---------- Über ---------- */
.portrait img{border-radius:var(--radius)}
.rule{height:1px;background:rgba(18,18,18,.12);border:0;margin:56px 0 0}
.signature{width:200px;margin:8px 0 10px}
.sig-name{font-size:20px;font-weight:700;letter-spacing:-.4px;line-height:1.1;margin:0 0 26px}

/* ---------- Beitragsgrafik ---------- */
.chart .split-grid{column-gap:32px}
.chart img{border-radius:var(--radius)}

/* ---------- Zeitstrahl ---------- */
.timeline{position:relative;margin-top:8px}
.timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:rgba(18,18,18,.1);transform:translateX(-50%)
}
.step{position:relative;display:grid;grid-template-columns:1fr 168px 1fr;align-items:start;
  column-gap:0;padding-bottom:70px}
.step__badge{
  grid-column:2;justify-self:center;
  width:56px;height:56px;border-radius:12px;background:var(--dark);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-head);font-size:22.4px;font-weight:600;line-height:1;
  position:relative;z-index:2
}
.step__card{max-width:548px;width:100%}
.step--right .step__card{grid-column:3;justify-self:start}
.step--left  .step__card{grid-column:1;justify-self:end}
.step--left .step__badge{grid-row:1}
.step__card img{border-radius:var(--radius);margin-bottom:26px;aspect-ratio:2/1;object-fit:cover;width:100%}
.step__card .h-l{margin-bottom:12px}
.step__card .body-16{margin-bottom:22px}
.step__card .checks{margin-bottom:0;gap:12px}
.step__card .checks span{font-size:15.2px}

/* ---------- Nutzen-Vergleich ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.compare__card{border-radius:var(--radius);padding:48px}
.compare__card--risk{background-image:linear-gradient(0deg,#666 39%,rgba(24,24,24,.91) 87%);color:#fff}
.compare__card--good{background-image:linear-gradient(0deg,#D2D284 28%,#D4A436 100%);color:#010101}
.compare__card h3{font-size:32px;font-weight:700;letter-spacing:-.4px;line-height:1.1;margin:0 0 26px}
.compare__list{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.compare__list li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
.compare__list .ico{width:22px;height:22px;margin-top:2px}
.compare__list span{font-size:16.8px;font-weight:300;line-height:1.5}

/* ---------- Dunkler Aufruf ---------- */
.cta-panel{
  border-radius:var(--radius);padding:70px 40px;text-align:center;color:#fff;
  background-image:linear-gradient(0deg,#3A3A3A 0%,#000 100%)
}
.cta-panel .eyebrow{color:#fff}
.cta-panel .h-xl{color:#fff;max-width:807px;margin-left:auto;margin-right:auto}
.cta-panel .btn{margin:0 auto}
.cta-panel p{font-size:18px;font-weight:400;line-height:1.5;margin:0 0 30px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.faq-list{display:grid;gap:14px;margin-top:26px}
.faq-item{background:var(--grey-card);border-radius:var(--radius);overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;padding:24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--font-head);font-size:20px;font-weight:600;letter-spacing:-.4px;line-height:1.11
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:#fff;
  display:grid;place-items:center;transition:transform .2s ease
}
.faq-item[open] .plus{transform:rotate(45deg)}
.faq-item .answer{padding:0 24px 24px;font-size:14px;line-height:1.5;color:rgba(18,18,18,.48);margin:0}
.faq-visual{position:relative;border-radius:var(--radius);overflow:hidden;min-height:580px}
.faq-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faq-visual .btn{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);max-width:calc(100% - 40px)}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--light);text-align:center}
.site-footer .logo img{height:34px;margin:0 auto}
.site-footer p{font-size:16px;font-weight:300;margin:22px 0 12px}
.footer-links{display:flex;gap:26px;justify-content:center}
.footer-links a{font-size:15.2px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(18,18,18,.25);padding-bottom:3px}
.footer-links a:hover{border-bottom-color:var(--dark)}

/* ---------- Rechtsseiten ---------- */
.legal{max-width:860px}
.legal h1{font-family:var(--font-text);font-weight:700;font-size:clamp(30px,5vw,48px);line-height:1.08;letter-spacing:-.4px;margin:0 0 12px}
.legal h2{font-family:var(--font-head);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.4px;margin:44px 0 12px}
.legal h3{font-family:var(--font-head);font-weight:600;font-size:19px;line-height:1.25;margin:28px 0 8px}
.legal p,.legal li{font-size:16px;font-weight:300;line-height:1.62}
.legal ul{padding-left:20px}
.legal address{font-style:normal;font-size:16px;font-weight:300;line-height:1.62}
.legal .intro{font-size:18px;font-weight:300;color:rgba(18,18,18,.8);margin-bottom:34px}
.legal a{color:var(--dark)}
.box{background:var(--light);border-radius:var(--radius);padding:26px 28px;margin:22px 0}

/* ---------- Kontaktseite ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0 0}
.contact-card{
  background:var(--light);border-radius:var(--radius);padding:34px 30px;
  text-decoration:none;color:var(--dark);display:block;
  transition:transform .18s ease, box-shadow .18s ease
}
.contact-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(18,18,18,.08)}
.contact-card .ico{width:34px;height:34px;margin-bottom:18px}
.contact-card h2{font-family:var(--font-head);font-size:22px;font-weight:600;letter-spacing:-.4px;margin:0 0 6px}
.contact-card p{margin:0;font-size:16px;font-weight:300;line-height:1.5}
.contact-card .big{font-size:19px;font-weight:600;line-height:1.4;display:block;margin-top:4px}

/* ---------- Mittelgroße Schirme ---------- */
@media (max-width:1100px){
  .nav{gap:24px}
  .header-contact{gap:18px}
  .contact-item.mail{display:none}
}

@media (max-width:992px){
  :root{--gutter:24px}
  .pad-xxl{padding:72px 0}
  .grid-2{gap:40px}
  .compare__card{padding:34px 28px}
  .compare__card h3{font-size:26px}
  .faq-grid{gap:40px}
  .faq-visual{min-height:460px}
  .step{grid-template-columns:1fr 120px 1fr}
  .step__card img{margin-bottom:20px}
}

/* ---------- Handy ---------- */
@media (max-width:768px){
  :root{--gutter:20px}
  .pad-xxl{padding:56px 0}
  .pad-xl{padding:36px 0}
  .pad-m{padding:28px 0}

  .nav,.header-contact{display:none}
  .burger{display:inline-flex}
  .header-inner{height:60px}
  .mobile-nav{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid rgba(18,18,18,.08);
    padding:8px var(--gutter) 22px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s ease
  }
  .mobile-nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .mobile-nav a{display:block;padding:13px 0;text-decoration:none;font-size:17px;font-weight:500;border-bottom:1px solid rgba(18,18,18,.07)}
  .mobile-nav .btn{margin-top:18px;width:100%;justify-content:center}

  .grid-2,.compare,.faq-grid,.contact-cards{grid-template-columns:1fr}
  .grid-2{gap:32px}

  /* Überschrift, dann Bild, dann Text mit Knopf */
  .split-grid,
  .deckblatt .split-grid,
  .chart .split-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:"head" "media" "body";
    column-gap:0
  }
  .s-media{margin:6px 0 30px}

  .btn{width:100%;max-width:none;justify-content:center;padding:14px 24px}
  .btn-row{flex-direction:column;gap:12px}
  .btn__text{align-items:flex-start}

  .timeline::before{left:27px}
  .step{grid-template-columns:56px 1fr;column-gap:20px;padding-bottom:44px}
  .step__badge{grid-column:1;grid-row:1;justify-self:start;width:54px;height:54px}
  .step--right .step__card,.step--left .step__card{grid-column:2;grid-row:1;justify-self:stretch;margin:0;max-width:none}
  .step__card img{margin-bottom:18px}

  .cta-panel{padding:44px 24px}
  .faq-visual{min-height:0;aspect-ratio:3/4}
  .faq-visual .btn{left:20px;right:20px;bottom:20px;transform:none;width:auto}
  .rule{margin-top:36px}
  .footer-links{gap:18px;flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}