/* =====================================================================
   Draken Designsystem – Ebene über site-pages.css (2026-09-26)
   Übernommen aus "draken-komplette-website": Hero-Ring, Einblendungen,
   schwarze Oberkanten an Listen, Nummerierung, CTA mit rotem Versatz.
   Schriften bleiben unsere (--serif / --sans aus site-pages.css).
   Inhalte werden nicht verändert – alles hängt an bestehenden Klassen.
   ===================================================================== */
:root{--paper-deep:#ebe5d9;--paper-light:#f8f5ee;--ease-out:cubic-bezier(.2,.75,.25,1)}

/* ---------- Hero: Ring + Wasserzeichen ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:37vw;aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-14vw;top:17%;pointer-events:none}
.hero::after{content:"01";position:absolute;right:4vw;bottom:-6rem;color:rgba(255,255,255,.025);font:400 24rem/1 var(--serif);pointer-events:none}
.hero-inner{position:relative;z-index:1}

/* ---------- Listen: schwarze Oberkante, Hover-Einzug ---------- */
.ledger{border-top:1px solid var(--ink)}
.ledger-row{transition:padding .25s ease}
@media(hover:hover) and (min-width:901px){.ledger-row:hover{padding-left:1.25rem;padding-right:1.25rem}}

/* Merkmalslisten: Nummern statt Strich */
.speclist{counter-reset:spec}
.speclist li{counter-increment:spec;padding-left:34px}
.speclist li::before{content:counter(spec,decimal-leading-zero);width:auto;height:auto;background:none;top:12px;color:var(--red);font:600 10px/1.9 var(--sans);letter-spacing:.12em}

/* ---------- FAQ als eigene Fläche ---------- */
.faq{position:relative;margin-top:90px;padding:90px 0;background:var(--paper-deep);box-shadow:0 0 0 100vmax var(--paper-deep);clip-path:inset(0 -100vmax)}
.faq details:first-of-type{border-top:1px solid var(--ink)}
.faq summary{position:relative;padding-right:48px}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--red);font:400 24px/1 var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- CTA mit rotem Versatz ---------- */
.cta{box-shadow:18px 18px 0 var(--red);margin-right:18px;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
@media(hover:hover){.cta:hover{transform:translate(-4px,-4px);box-shadow:24px 24px 0 var(--red)}}
.cta .btn{transition:background .2s ease,color .2s ease}
.cta .btn:hover,.cta .btn:focus-visible{background:#fff;color:var(--ink)}
.faq + .cta{margin-top:90px}

/* Dunkle Kennzahlen-Box: Wasserzeichen wie im Angebotsblock */
.metric-box{position:relative;overflow:hidden}
.metric-box > *{position:relative;z-index:1}

/* ---------- Preise (pp-*) an das System angleichen ---------- */
.pp-table,.pp-list,.pp-faq-list{border-top-color:var(--ink)}
.pp-table article{transition:padding .25s ease}
@media(hover:hover) and (min-width:1001px){.pp-table article:hover{padding-left:1.25rem;padding-right:1.25rem}}
.pp-list{counter-reset:ppf}
.pp-list li{counter-increment:ppf}
.pp-list li::before{content:counter(ppf,decimal-leading-zero);width:auto;height:auto;background:none;top:30px;color:var(--red);font:600 10px/1.4 var(--sans);letter-spacing:.12em}
.pp-offers{position:relative;overflow:hidden}
.pp-offers::before{content:"DREI";position:absolute;left:-3rem;bottom:-7rem;color:rgba(255,255,255,.025);font:400 23rem/1 var(--serif);pointer-events:none}
.pp-offers > *{position:relative;z-index:1}
.pp-offer h3{transition:transform .25s ease,color .25s ease;color:#e9e4da}
@media(hover:hover){.pp-offer:hover h3{color:#fff;transform:translateX(6px)}}
.pp-cta{box-shadow:18px 18px 0 var(--red);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
@media(hover:hover){.pp-cta:hover{transform:translate(-4px,-4px);box-shadow:24px 24px 0 var(--red)}}
.pp-faq{background:var(--paper-deep);box-shadow:0 0 0 100vmax var(--paper-deep);clip-path:inset(0 -100vmax);padding-bottom:110px}
.pp-sec:nth-of-type(3){background:var(--paper-light);box-shadow:0 0 0 100vmax var(--paper-light);clip-path:inset(0 -100vmax)}

/* ---------- Bewegung: nur mit JavaScript, sonst sofort sichtbar ---------- */
.js .site-header{animation:dk-down .8s .05s var(--ease-out) both}
.js .hero .eyebrow,.js .hero h1,.js .hero .lead,.js .hero-meta{animation:dk-up .9s var(--ease-out) both}
.js .hero .eyebrow{animation-delay:.18s}
.js .hero h1{animation-delay:.26s}
.js .hero .lead{animation-delay:.4s}
.js .hero-meta{animation-delay:.54s}
.js .hero::before{animation:dk-ring 9s ease-in-out infinite alternate}
.js .reveal{opacity:0;transform:translateY(46px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal-row{opacity:0;transform:translateX(28px);transition:opacity .65s var(--reveal-delay,0ms) ease,transform .75s var(--reveal-delay,0ms) var(--ease-out),padding .25s ease}
.js .reveal-row.is-visible{opacity:1;transform:none}
.js details[open] > :not(summary){animation:dk-answer .35s ease both}

@keyframes dk-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes dk-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes dk-ring{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2.5vw,2vh,0) scale(1.06)}}
@keyframes dk-answer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .hero::before{width:70vw;right:-35vw}
  .hero::after{font-size:14rem;bottom:-3.5rem}
  .faq{margin-top:70px;padding:70px 0}
  .cta,.pp-cta{box-shadow:8px 8px 0 var(--red);margin-right:8px}
  .pp-offers::before{font-size:12rem;bottom:-3rem}
}
@media(prefers-reduced-motion:reduce){
  .js .site-header,.js .hero .eyebrow,.js .hero h1,.js .hero .lead,.js .hero-meta,.js .hero::before,.js details[open] > :not(summary){animation:none}
  .js .reveal,.js .reveal-row{opacity:1;transform:none;transition:none}
  .cta,.pp-cta,.ledger-row,.pp-table article,.pp-offer h3{transition:none}
}

/* ---------- SPALTEN 43/57 wie im Designsystem ----------
   Die alte .78fr/1.22fr-Spalte mit 9vw Abstand war für lange Komposita
   ('Jahrespauschale', 'Agenturfließband') zu schmal - sie wurden hart abgeschnitten. */
.split{grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:4vw}
.split h2,.block h2{font-size:clamp(40px,4.3vw,68px)}
.hero h1{max-width:min(100%,17ch)}
@media(max-width:800px){.split{grid-template-columns:1fr;gap:25px}}
/* Folgeabsätze in .split gehören in die rechte Spalte (rutschten sonst unter die Überschrift) */
@media(min-width:801px){.split{row-gap:22px}.split > :not(h2){grid-column:2}.split:has(> :nth-child(3)) > h2{grid-row:span 2}.split:has(> :nth-child(4)) > h2{grid-row:span 3}.split:has(> :nth-child(5)) > h2{grid-row:span 4}}