/* Nur für /optionen/abdeckung/coverseal/ – andere Seiten bleiben unberührt. */
.csn{
  --csn-blue:#122E4D;
  --csn-blue70:#596D82;
  --csn-blue50:#8896A6;
  --csn-terra:#D86F53;
  --csn-pearl:#F9F7F2;
  --csn-line:#DDD8CC;
  background:var(--csn-pearl);
  color:var(--csn-blue);
  font-family:Figtree,system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
}
.csn a{color:var(--csn-blue)}
.csn img,.csn video{display:block;max-width:100%}
.csn .csn-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.csn .csn-sec{padding:112px 0}
.csn .csn-white{background:#fff}
.csn h2,.csn h3,.csn .csn-disp{
  font-family:Satoshi,Figtree,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0;
}
.csn h2{font-size:clamp(34px,4vw,52px);line-height:1.08;color:var(--csn-blue)}
.csn h3{margin:0;font-size:20px;font-weight:700;color:var(--csn-blue)}
.csn p{margin:0}
.csn .csn-muted{color:var(--csn-blue70)}
.csn .csn-eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:13px;font-weight:600;letter-spacing:.12em;
  color:var(--csn-blue70);margin-bottom:16px;
}
.csn .csn-eyebrow::before{content:"";width:28px;height:2px;background:var(--csn-terra)}
.csn .csn-btn{
  display:inline-flex;align-items:center;min-height:52px;padding:0 28px;
  border-radius:999px;text-decoration:none;font-weight:700;border:0;cursor:pointer;
  font-family:inherit;
}
.csn .csn-btn-dark{background:var(--csn-blue);color:var(--csn-pearl)}
.csn .csn-btn-light{background:var(--csn-pearl);color:var(--csn-blue)}
.csn .csn-textlink{
  display:inline-flex;align-items:center;min-height:52px;
  font-weight:600;text-underline-offset:6px;
}
.csn .csn-row{display:flex;flex-wrap:wrap}
.csn .csn-photo{
  width:100%;height:100%;object-fit:cover;border-radius:32px;background:var(--csn-blue70);
}
.csn .csn-pic{overflow:hidden}
.csn .csn-pic picture,.csn .csn-pic img.csn-photo{width:100%;height:100%}

/* Hero: same card as live /aufruesten/, /optionen/abdeckung/ and /poolbau/
   (helle-hero + v83c): cream rgba(246,241,232,.38), blur 3px, no border.
   Typography and buttons follow the site hero, not the 1113 glass pills. */
.csn-hero.hero{color:#122E4D}
.csn-hero .hero-bild video.csn-hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;max-width:none;
}
.csn-hero .csn-shade{display:none}
.csn-hero .csn-bar{display:none}
.csn-hero .hero-verlauf,.csn-hero .hero-verlauf-links{display:none}
.csn-hero .hero-inhalt::before{display:none}

html body #kopf.hero.csn-hero .hero-inhalt{
  background:rgba(246,241,232,.38)!important;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  color:#122E4D!important;
  border-radius:16px;
  border:0;
  box-shadow:0 14px 44px rgba(18,46,77,.22);
  z-index:2;
}
html body #kopf.hero.csn-hero .hero-inhalt :is(h1,h2,p,span,.hero-claim,.hero-unter,.brotkrume,.brotkrume a,.tl,.tl-hell){
  color:#122E4D!important;
  text-shadow:none!important;
}
html body #kopf.hero.csn-hero .hero-inhalt .akzent{color:#A3421D!important}
html body #kopf.hero.csn-hero .hero-unter{margin:24px 0 0}

@media (min-width:768px){
  html body #kopf.hero.csn-hero .hero-inhalt{
    left:48px!important;
    right:auto!important;
    top:auto!important;
    bottom:44px!important;
    width:auto!important;
    max-width:680px!important;
    margin:0!important;
    padding:28px 36px!important;
    position:absolute!important;
  }
}
@media (max-width:767px){
  html body #kopf.hero.csn-hero{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    background:#F6F1E8!important;
    overflow:visible!important;
  }
  html body #kopf.hero.csn-hero .hero-bild{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:min(118vw,560px)!important;
  }
  html body #kopf.hero.csn-hero .hero-inhalt{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:24px 24px 32px!important;
    border-radius:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  html body #kopf.hero.csn-hero .hero-unter{margin:16px 0 0}
  .csn-hero .csn-hero-video{display:none}
}

/* Stats */
.csn .csn-stats{background:#fff;border-bottom:1px solid var(--csn-line)}
.csn .csn-stats .csn-row>div{flex:1 1 260px;padding:36px 24px 36px 0}
.csn .csn-stats .csn-num{font-size:36px;line-height:1.1}

/* Split / list */
.csn .csn-split{gap:48px 64px;align-items:center}
.csn .csn-split>*{flex:1 1 440px;min-width:0}
.csn .csn-split .csn-pic{height:480px}
.csn .csn-list>div{padding:20px 0;border-top:1px solid var(--csn-line)}
.csn .csn-list>div:last-child{border-bottom:1px solid var(--csn-line)}
.csn .csn-num-dot{
  flex:none;width:36px;height:36px;border-radius:999px;background:var(--csn-blue);
  color:var(--csn-pearl);display:flex;align-items:center;justify-content:center;font-weight:700;
}

/* Cards */
.csn .csn-cards{gap:40px 24px}
.csn .csn-cards article{flex:1 1 250px;min-width:0;display:flex;flex-direction:column;gap:14px}
.csn .csn-cards .csn-pic{height:320px}
.csn .csn-cards h3{font-size:22px}

/* Gallery */
.csn .csn-gallery{gap:24px}
.csn .csn-gallery .csn-big{flex:2 1 520px;min-width:0;height:520px}
.csn .csn-gallery .csn-side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:24px}
.csn .csn-gallery .csn-side .csn-pic{height:248px}

/* Models */
.csn .csn-models{gap:24px}
.csn .csn-models article{
  flex:1 1 300px;min-width:0;background:#fff;border:1px solid var(--csn-line);
  border-radius:32px;padding:36px;display:flex;flex-direction:column;gap:12px;
}
.csn .csn-models article.csn-top{background:var(--csn-blue);color:var(--csn-pearl);border-color:var(--csn-blue)}
.csn .csn-models .csn-kind{font-size:15px;font-weight:600;letter-spacing:.08em}
.csn .csn-models h3{font-size:30px;font-weight:800;line-height:1.15}
.csn .csn-tag{
  align-self:flex-start;padding:4px 12px;border-radius:999px;
  background:var(--csn-pearl);color:var(--csn-blue);font-size:13px;font-weight:700;
}

/* Color picker */
.csn .csn-picker{
  margin-top:48px;background:#fff;border:1px solid var(--csn-line);
  border-radius:32px;padding:40px;gap:40px 56px;align-items:center;
}
.csn .csn-pool{
  flex:3 1 420px;min-width:0;position:relative;aspect-ratio:16/10;
  background:#E4DFD3;border-radius:16px;overflow:hidden;
}
.csn .csn-pool i{position:absolute;display:block}
.csn .csn-picker .csn-side{flex:2 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px}
.csn .csn-swatches{display:flex;flex-wrap:wrap;gap:12px}
.csn .csn-swatches button{
  width:48px;height:48px;border-radius:999px;border:1px solid var(--csn-blue50);
  cursor:pointer;padding:0;outline-offset:3px;
}
.csn .csn-swatches button[aria-pressed="true"]{outline:3px solid var(--csn-blue)}

/* FAQ */
.csn .csn-faq{gap:40px 64px}
.csn .csn-faq .csn-intro{flex:1 1 300px;min-width:0}
.csn .csn-faq .csn-items{flex:2 1 520px;min-width:0;border-bottom:1px solid var(--csn-line)}
.csn .csn-faq details{border-top:1px solid var(--csn-line)}
.csn .csn-faq summary{
  list-style:none;cursor:pointer;min-height:72px;padding:16px 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-size:20px;font-weight:700;font-family:Satoshi,Figtree,sans-serif;color:var(--csn-blue);
}
.csn .csn-faq summary::-webkit-details-marker{display:none}
.csn .csn-faq summary::after{content:"+";font-size:26px;font-weight:400}
.csn .csn-faq details[open] summary::after{content:"−"}
.csn .csn-faq details p{padding:0 48px 24px 0;color:var(--csn-blue70)}

/* CTA */
.csn .csn-cta{background:var(--csn-blue);color:var(--csn-pearl)}
.csn .csn-cta a{color:var(--csn-pearl)}
.csn .csn-cta h2{font-size:clamp(38px,5vw,68px);line-height:1.05;color:var(--csn-pearl)}
.csn .csn-cta .csn-bar{width:64px;height:4px;background:var(--csn-terra);margin-bottom:24px}

/* Schema + Dornbirn + YouTube, scoped so they fit the new look */
.csn .csn-schema{
  margin-top:48px;background:#FBF8F2;border:1px solid var(--csn-line);
  border-radius:32px;padding:24px 24px 8px;overflow:hidden;
}
.csn .csn-schema svg{display:block;width:100%;height:auto}
.csn .csn-schema-fuss{font-size:13px;color:var(--csn-blue70);padding:8px 8px 16px}

.csn .csn-dornbirn{margin-top:64px}
.csn .csn-dornbirn .vn{margin-top:32px;border-radius:32px;overflow:hidden}
.csn .csn-dornbirn .vn.an{border-radius:32px}
.csn .csn-unter{font-size:15px;color:var(--csn-blue70);margin-top:16px}

.csn .csn-sicher{margin-top:48px;gap:40px 64px;align-items:center}
.csn .csn-sicher .csn-yt-box{flex:1 1 280px;min-width:0;max-width:360px}
.csn .csn-yt{
  position:relative;display:block;width:100%;aspect-ratio:9/16;
  border:0;padding:0;border-radius:32px;overflow:hidden;background:#0c2036;cursor:pointer;
}
.csn .csn-yt picture,.csn .csn-yt img{display:block;width:100%;height:100%;object-fit:cover}
.csn .csn-yt .csn-yt-knopf{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;background:rgba(246,241,232,.92);
  color:#122E4D;display:flex;align-items:center;justify-content:center;font-size:26px;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
.csn .csn-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:767px){
  .csn .csn-sec{padding:72px 0}
  .csn .csn-split .csn-pic{height:320px}
  .csn .csn-gallery .csn-big{height:280px}
  .csn .csn-gallery .csn-side .csn-pic{height:200px}
  .csn .csn-cards .csn-pic{height:240px}
  .csn .csn-picker{padding:24px}
  .csn .csn-yt{aspect-ratio:9/16;max-width:280px}
}
@media (prefers-reduced-motion:reduce){
  .csn-hero .csn-hero-video{display:none}
}


/* CTA light button: do not inherit pearl link color (text would vanish on the pearl pill). */
.csn .csn-cta .csn-btn-light{color:var(--csn-blue)!important;background:var(--csn-pearl)!important}


/* CTA: pearl button needs navy text (else it inherits the section's pearl). */
.csn .csn-cta a.csn-btn-light{color:var(--csn-blue)!important;background:var(--csn-pearl)!important}

/* YouTube poster fills the frame */
.csn .csn-yt picture,.csn .csn-yt img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;
}

/* Pictures always fill their rounded frame */
.csn .csn-pic{position:relative;overflow:hidden;border-radius:32px;background:#C9C4B8}
.csn .csn-pic picture{display:block;width:100%;height:100%}
.csn .csn-pic img.csn-photo{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:32px;
}