/* ==========================================================================
   CRO WATER — Unterrubrik (ergänzt css/style.css, nutzt dessen Variablen)
   Wasserblau als Zweitakzent neben Mainhattan-Gold
   ========================================================================== */
:root{
  --cw:#5fb4f0;
  --cw-soft:#a9dcff;
  --cw-deep:#1f4f9c;
  --cw-red:#d42a2f;
  --cw-line:rgba(95,180,240,.22);
}
body[data-page="crowater"] .site-bg .aurora.a1{background:radial-gradient(circle,rgba(40,110,190,.34),transparent 62%)}
body[data-page="crowater"] .site-bg .aurora.a3{background:radial-gradient(circle,rgba(60,140,210,.2),transparent 62%)}

.cw-eyebrow{color:var(--cw-soft)}
.cw-accent{color:var(--cw-soft);font-style:italic}

/* Unter-Navigation der Rubrik */
.cw-subnav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:30px}
.cw-subnav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--cw-line);border-radius:40px;color:var(--grey-600);transition:.3s var(--ease);background:rgba(10,16,30,.45)}
.cw-subnav a:hover{color:#fff;border-color:var(--cw)}
.cw-subnav a.on{background:var(--cw-deep);border-color:var(--cw);color:#fff}

/* Hero */
.cw-hero{padding:160px 0 90px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.cw-hero::before{content:"";position:absolute;inset:0;background:url(../assets/crowater/vrboska.jpg) center 60%/cover;opacity:.18;z-index:-1;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 95%);mask-image:linear-gradient(180deg,#000 0%,transparent 95%)}
.cw-hero .split{align-items:center}
.cw-hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.04;margin:16px 0 22px}
.cw-hero h1 .it{display:block;color:var(--cw-soft);font-style:italic}
.cw-hero .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn.cw{background:var(--cw-deep);border-color:var(--cw);color:#fff}
.btn.cw:hover{background:var(--cw);color:#06101f}
.cw-brandcard{position:relative;background:linear-gradient(160deg,#ffffff 0%,#eaf4fd 100%);border-radius:10px;padding:clamp(30px,4vw,48px);box-shadow:var(--shadow);text-align:center;color:#0b2a55}
.cw-brandcard::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;border-radius:0 0 10px 10px;background:linear-gradient(90deg,var(--cw-deep),var(--cw),var(--gold))}
.cw-brandcard .lg{width:min(320px,80%);margin:0 auto}
.cw-brandcard .of{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#6c7684;margin-top:26px}
.cw-brandcard .mh{width:170px;margin:10px auto 0}
.cw-brandcard .note{font-size:.86rem;color:#33445e;margin-top:18px;line-height:1.5}

/* Feature-Grid (4 Spalten) */
.cw-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cw-line);border:1px solid var(--cw-line);border-radius:5px;overflow:hidden;margin-top:54px}
.cw-feat .feature .ico{color:var(--cw)}
.cw-feat .feature h3{font-size:1.3rem}

/* Film */
.cw-films{display:flex;justify-content:center;gap:clamp(24px,5vw,70px);flex-wrap:wrap;margin-top:54px}
.cw-phone{width:min(300px,80vw);text-align:center}
.cw-phone .frame{position:relative;border-radius:34px;padding:10px;background:linear-gradient(160deg,#2a3448,#0b0f19);box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.08)}
.cw-phone video{width:100%;aspect-ratio:9/16;border-radius:26px;display:block;background:#000;object-fit:cover}
.cw-phone .cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-600);margin-top:16px}

/* Produkt-Teaser */
.cw-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px}
.cw-prod{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:.45s var(--ease);display:flex;flex-direction:column}
.cw-prod:hover{transform:translateY(-6px);border-color:var(--cw);box-shadow:var(--shadow)}
.cw-prod .im{aspect-ratio:4/3;background:#fff;overflow:hidden}
.cw-prod .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cw-prod:hover .im img{transform:scale(1.05)}
.cw-prod .tx{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.cw-prod .tnum{font-family:var(--serif);color:var(--cw-soft);letter-spacing:.1em;font-size:.95rem}
.cw-prod h3{font-size:1.3rem}
.cw-prod p{font-size:.9rem;color:var(--grey-600)}
.cw-prod .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* Schadstoffe + Temperaturen */
.cw-clean{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:start}
.cw-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:26px}
.cw-list li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--ink)}
.cw-list li svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px;color:var(--cw)}
.cw-temps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.cw-temp{background:var(--surface);border:1px solid var(--cw-line);border-radius:6px;padding:20px 22px}
.cw-temp .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-400)}
.cw-temp .v{font-family:var(--serif);font-size:1.9rem;color:#fff;margin-top:4px}
.cw-temp.ice .v{color:#bfe6ff}.cw-temp.cold .v{color:var(--cw-soft)}.cw-temp.hot .v{color:#ffb38a}
.cw-small{font-size:.82rem;color:var(--grey-400);margin-top:14px}

/* Für wen */
.cw-for{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px}
.cw-for div{border-top:2px solid var(--cw);padding-top:20px}
.cw-for h4{font-size:1.25rem;margin-bottom:6px}
.cw-for p{font-size:.92rem}

/* Systeme-Detailseite */
.cw-sys{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center;padding:clamp(40px,6vw,70px) 0;border-bottom:1px solid var(--line-soft)}
.cw-sys:last-of-type{border-bottom:0}
.cw-sys.rev .cw-sys-img{order:2}
.cw-sys-img{position:relative;border-radius:8px;overflow:hidden;background:#fff;box-shadow:var(--shadow);aspect-ratio:4/3.4}
.cw-sys-img img{width:100%;height:100%;object-fit:cover}
.cw-sys-img .badge{position:absolute;left:16px;top:16px;background:rgba(6,16,31,.82);color:var(--cw-soft);font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;padding:8px 12px;border-radius:30px;backdrop-filter:blur(6px)}
.cw-sys h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:10px 0 6px}
.cw-sys .sub{font-family:var(--serif);font-style:italic;color:var(--cw-soft);font-size:1.15rem;margin-bottom:16px}
.cw-sys ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:22px 0 28px}
.cw-sys ul li{display:flex;gap:12px;font-size:.96rem;color:var(--ink)}
.cw-sys ul li svg{width:18px;height:18px;color:var(--cw);flex:0 0 auto;margin-top:3px}

/* Medien */
.cw-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.cw-flyer{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cw);border-radius:6px;padding:clamp(26px,4vw,40px)}
.cw-flyer img{border-radius:6px;box-shadow:var(--shadow);margin-bottom:24px}
.cw-flyer h3{font-size:1.6rem;margin-bottom:8px}
.cw-flyer .btn{margin-top:22px}
.cw-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.cw-gal a{display:block;border-radius:6px;overflow:hidden;aspect-ratio:9/14;border:1px solid var(--line);transition:.4s var(--ease)}
.cw-gal a:hover{border-color:var(--cw);transform:translateY(-4px)}
.cw-gal img{width:100%;height:100%;object-fit:cover}

@media(max-width:960px){
  .cw-feat,.cw-for{grid-template-columns:repeat(2,1fr)}
  .cw-prod-grid{grid-template-columns:repeat(2,1fr)}
  .cw-clean,.cw-sys,.cw-media{grid-template-columns:1fr}
  .cw-sys.rev .cw-sys-img{order:0}
  .cw-gal{grid-template-columns:repeat(2,1fr)}
  .cw-hero{padding-top:130px}
}
@media(max-width:560px){
  .cw-feat,.cw-for,.cw-prod-grid,.cw-list{grid-template-columns:1fr}
}