/* ===== Lokale Schriften (self-hosted, DSGVO-konform) ===== */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:italic;font-weight:700;font-display:swap;src:url('/fonts/archivo-latin-700-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

  :root{
    --red:#E62634;         /* CKW */
    --red-d:#C21C28;
    --blue:#1C5FA5;        /* Carysan */
    --blue-d:#154C86;
    --ink:#23272B;
    --muted:#6C757D;
    --line:#E2E5E8;
    --soft:#F2F4F6;        /* graue Blöcke wie im Screenshot */
    --paper:#FFFFFF;
    --radius:5px;
    --wrap:1200px;
  }
  *{box-sizing:border-box}
  body{margin:0;color:var(--ink);background:var(--paper);
    font-family:"IBM Plex Sans",Arial,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:"Archivo",Arial,sans-serif;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
  h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:600}
  p{margin:0 0 1rem}
  a{color:var(--red);text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(12px,2.5vw,28px)}
  :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
  img{max-width:100%}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:"Archivo";font-weight:600;font-size:.95rem;
    padding:.7rem 1.3rem;border-radius:var(--radius);border:1.5px solid var(--red);background:var(--red);color:#fff;cursor:pointer}
  .btn:hover{background:var(--red-d);border-color:var(--red-d);text-decoration:none}
  .btn.blue{background:var(--blue);border-color:var(--blue)}
  .btn.blue:hover{background:var(--blue-d);border-color:var(--blue-d)}
  .btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
  .btn.ghost:hover{background:var(--soft)}

  /* ---------- Kopf ---------- */
  header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0}
  .brands{display:flex;align-items:center;gap:28px}
  .brand-ckw{display:flex;flex-direction:column;line-height:1;text-decoration:none}
  .brand-ckw .mark{font-family:"Archivo";font-style:italic;font-weight:700;font-size:2.5rem;color:var(--red);letter-spacing:-.03em}
  .brand-ckw .sub{font-size:.72rem;color:var(--muted);margin-top:.35rem;letter-spacing:.01em}
  .divider{width:1px;height:44px;background:var(--line)}
  .brand-carysan{font-family:"Archivo";font-weight:700;font-size:1.7rem;color:var(--blue);letter-spacing:.12em;text-decoration:none}
  .brand-carysan sup{font-size:.7rem;top:-.8em}
  .brand-carysan:hover{color:var(--blue-d);text-decoration:none}
  .toptools{display:flex;align-items:center;gap:12px}
  .search{display:flex;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
    padding:.5rem .8rem;min-width:230px}
  .search input{border:0;background:transparent;font:inherit;outline:none;width:100%}
  .kontaktbtn{background:var(--muted);color:#fff;border:0;border-radius:var(--radius);padding:.62rem 1.1rem;
    font-family:"Archivo";font-weight:600;font-size:.9rem;cursor:pointer}
  .kontaktbtn:hover{background:#565e66;text-decoration:none;color:#fff}

  nav.main{border-top:1px solid var(--line)}
  nav.main .row{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:2px 0}
  nav.main a{font-family:"Archivo";font-weight:600;font-size:1rem;color:var(--ink);padding:1rem .9rem;display:block;position:relative}
  nav.main a:hover{color:var(--red);text-decoration:none}
  nav.main a.active{color:var(--red)}
  nav.main a.active::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:0;height:3px;background:var(--red)}
  nav.main a.carysan{color:var(--blue)}
  .hasmenu{position:relative}
  .dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 14px 34px -14px rgba(0,0,0,.3);padding:.4rem;min-width:230px;display:none;z-index:60}
  .hasmenu:hover .dropdown,.hasmenu:focus-within .dropdown{display:block}
  .dropdown a{padding:.55rem .7rem;border-radius:3px;font-size:.93rem;font-weight:500}
  .dropdown a:hover{background:var(--soft);color:var(--red)}
  .menutoggle{display:none}

  /* ---------- Slideshow ---------- */
  .slider{position:relative;overflow:hidden;background:#0d2b46}
  .slides{display:flex;transition:transform .9s ease}
  .slide{min-width:100%;height:clamp(340px,46vw,520px);position:relative;display:flex;align-items:center}
  .slide .bg{position:absolute;inset:0}
  .s1 .bg{background:#235d92}
  .s2 .bg{background:#b0342a}
  .s3 .bg{background:#1a6d5a}
  .s4 .bg{background:#44707a}
  .slide .inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 48px;color:#fff;width:100%}
  .slide .eyebrow{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:.6rem}
  .slide h2{color:#fff;font-size:clamp(1.8rem,4vw,3rem);max-width:16ch;margin-bottom:.6rem}
  .slide p{max-width:44ch;color:#eef3f8;margin-bottom:1.4rem}
  .slide .art{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:min(34%,320px);opacity:.9}
  .slide .art svg{width:100%;height:auto;color:#fff;opacity:.85}
  .photo-hint{position:absolute;right:16px;bottom:12px;font-size:.72rem;color:rgba(255,255,255,.6)}
  .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:0;color:#fff;
    width:44px;height:44px;border-radius:50%;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .arrow:hover{background:rgba(255,255,255,.3)}
  .arrow.prev{left:16px}.arrow.next{right:16px}
  .dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
  .dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer}
  .dots button.on{background:#fff}

  /* ---------- Über uns kurz ---------- */
  .about{background:var(--soft);border-bottom:1px solid var(--line)}
  .about .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:56px 0}
  .about h2{color:var(--red)}
  .about .photo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);height:230px;
    display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;text-align:center}
  .iso{display:inline-block;margin-top:.4rem;font-size:.85rem;font-weight:600;color:var(--ink);
    border:1px solid var(--line);border-radius:99px;padding:.3rem .9rem;background:#fff}

  /* ---------- Produktgruppen-Kacheln ---------- */
  .groups{padding:60px 0}
  .groups h2{text-align:center;margin-bottom:.2rem}
  .groups .sub{text-align:center;color:var(--muted);margin-bottom:2.2rem}
  .tilegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .tile{border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center;display:block;
    color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s;background:#fff}
  .tile:hover{border-color:var(--red);box-shadow:0 12px 26px -18px rgba(0,0,0,.4);transform:translateY(-2px);text-decoration:none}
  .tile svg{width:64px;height:64px;color:var(--red);margin-bottom:.9rem}
  .tile.blue svg{color:var(--blue)}
  .tile:hover.blue{border-color:var(--blue)}
  .tile .n{font-family:"Archivo";font-weight:600;font-size:1.15rem}
  .tile .c{color:var(--muted);font-size:.85rem;margin-top:.2rem}

  /* ---------- Aktuelles ---------- */
  .news{background:var(--soft);border-top:1px solid var(--line);padding:44px 0}
  .news h2{color:var(--red);margin-bottom:1rem}
  .newsitem{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);
    border-left:4px solid var(--red);border-radius:var(--radius);padding:18px 22px}
  .newsitem .date{font-family:"Archivo";font-weight:700;color:var(--red);white-space:nowrap}
  .newsitem b{color:var(--ink)}

  footer{background:#23272B;color:#b8bec4;font-size:.9rem;padding:44px 0 24px}
  footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
  footer h5{font-family:"Archivo";color:#fff;font-size:.95rem;margin:0 0 .7rem}
  footer a{color:#cfd4d9;display:block;padding:.18rem 0}
  footer a:hover{color:#fff}
  footer .legal{border-top:1px solid #3a3f45;margin-top:28px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#8a9199}

  @media(max-width:900px){
    .topbar{flex-wrap:wrap}
    .about .grid,.tilegrid,footer .cols{grid-template-columns:1fr}
    .tilegrid{grid-template-columns:1fr 1fr}
    nav.main .row{justify-content:flex-start}
    .slide .art{display:none}
  }
  @media(max-width:600px){.tilegrid{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){.slides{transition:none}*{scroll-behavior:auto}}

/* ---- Echte Logos & Bilder ---- */
.logolink{display:flex;align-items:center;text-decoration:none}
.logo-ckw{height:56px;width:auto;display:block}
.logo-carysan{height:30px;width:auto;display:block}
.brands .divider{height:48px}
.footer-logo{width:190px;height:auto;background:#fff;padding:9px 12px;border-radius:4px;margin-bottom:1rem}
footer .cols>div p{color:#b8bec4;margin:.2rem 0}
@media(max-width:900px){.logo-ckw{height:46px}.logo-carysan{height:26px}}

/* Produktfoto in der Slideshow */
.slide .art.photo{width:min(40%,420px);border-radius:6px;overflow:hidden;box-shadow:0 20px 50px -20px rgba(0,0,0,.55)}
.slide .art.photo img{display:block;width:100%;height:auto}

/* Produktgruppen-Bild */
.figure{min-height:180px}
.figure img{max-width:100%;height:auto;border-radius:3px;display:block}

/* Produktfoto in Kacheln */
.tile .thumb{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.tile .thumb img{max-height:120px;max-width:100%;width:auto;border-radius:3px}

/* Tabelle: erste Spalte (Art.-Nr. bzw. Bezeichnung) hervorheben nur wenn Artikelnummer */
table.spec td:first-child{white-space:nowrap}

/* Carysan-Akzente in Übersichten */
.pagehead.carysan{background:var(--blue)}
.pagehead.carysan .crumb a{color:#cfe0f2}
.catcol.car h3{color:var(--blue)}
.minitag{font-family:"IBM Plex Mono";font-size:.62rem;background:var(--green-d);color:var(--blue);padding:.15rem .4rem;border-radius:3px;vertical-align:middle}
.catcols{grid-auto-rows:min-content}
.contactblock{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contactblock .card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff}
.dllist{list-style:none;padding:0;margin:0}
.dllist li{border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.dllist a{font-weight:600}
@media(max-width:900px){.contactblock{grid-template-columns:1fr}}

/* ===== Produkt-Matrix (Menke-Stil Kacheln) ===== */
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mtile{position:relative;display:block;overflow:hidden;border-radius:var(--radius);min-height:230px;
  color:#fff;text-decoration:none;background:#555;isolation:isolate}
.mtile .art{position:absolute;right:-6px;bottom:-6px;width:56%;max-height:78%;object-fit:contain;object-position:bottom right;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.mtile .txt{position:relative;z-index:2;padding:22px 22px 18px}
.mtile h3{color:#fff;font-family:"Archivo";font-weight:700;font-size:1.7rem;margin:0 0 .35rem;letter-spacing:-.01em;line-height:1.05}
.mtile p{color:rgba(255,255,255,.92);font-size:.86rem;margin:0;max-width:60%}
.mtile .count{position:absolute;left:22px;bottom:16px;z-index:2;font-family:"IBM Plex Mono";font-size:.72rem;
  color:rgba(255,255,255,.8);background:rgba(0,0,0,.18);padding:.2rem .5rem;border-radius:3px}
.mtile:hover{text-decoration:none}
.mtile:hover .art{transform:translateY(-3px);transition:transform .18s}
.mtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.18));z-index:0}
.mtile.feat{outline:2px solid rgba(255,255,255,.55);outline-offset:-2px}
.matrix .mtile.full{grid-column:1 / -1;min-height:210px}
.matrix .mtile.full .art{width:min(48%,600px);max-height:92%}
.matrix .mtile.full .txt{max-width:52%}
.matrix .mtile.full p{max-width:100%}
@media(max-width:900px){.matrix .mtile.full .art{width:52%}.matrix .mtile.full .txt{max-width:60%}}
.matrix .mtile.full .art2{position:absolute;right:-4px;bottom:-4px;z-index:1;width:min(54%,700px);display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.matrix .mtile.full .art2 img{max-height:175px;max-width:56%;object-fit:contain;object-position:bottom right}
.mtile:hover .art2{transform:translateY(-3px);transition:transform .18s}
@media(max-width:900px){.matrix .mtile.full .art2{width:60%}.matrix .mtile.full .art2 img{max-height:120px}}
@media(max-width:600px){.matrix .mtile.full .art2 img{max-height:92px}}

.introband{max-width:70ch;margin:0 0 2rem}
.introband p{color:var(--muted)}

/* Katalog-Banner (überall erreichbar) */
.katbanner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--radius);padding:16px 20px;margin:26px 0}
.katbanner .t{font-family:"Archivo";font-weight:600}
.katbanner .s{font-size:.85rem;color:var(--muted)}

/* Utility-Bar Katalog-Link */
.utility .wrap{gap:1.2rem}
.utility a.kat{color:#fff;font-weight:600}

/* ===== Kategorie-Unterseite ===== */
.kathero{color:#fff;padding:46px 0}
.kathero .crumb{font-size:.82rem;opacity:.85;margin-bottom:.6rem}
.kathero .crumb a{color:#fff}
.kathero h1{color:#fff;margin:0 0 .4rem}
.kathero p{color:rgba(255,255,255,.95);max-width:60ch;margin:0}
.grpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:36px 0}
.grpcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.grpcard:hover{border-color:var(--red);box-shadow:0 12px 26px -18px rgba(0,0,0,.4);transform:translateY(-2px);text-decoration:none}
.grpcard.car:hover{border-color:var(--blue)}
.grpcard .thumb{height:150px;display:flex;align-items:center;justify-content:center;background:var(--soft);padding:12px}
.grpcard .thumb img{max-height:130px;max-width:100%;width:auto}
.grpcard .thumb.ph{color:var(--muted);font-size:.8rem}
.grpcard .cap{padding:14px 16px;font-family:"Archivo";font-weight:600;font-size:1rem}
@media(max-width:900px){.matrix,.grpgrid{grid-template-columns:1fr 1fr}.mtile p{max-width:70%}}
@media(max-width:600px){.mtile .art{width:44%}}

/* ===== Karte / Anfahrt ===== */
.mapwrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:10px}
.mapwrap iframe{display:block;width:100%;height:360px;border:0}

/* ===== Seitenkopf (Gruppen & einfache Seiten) + Kontrastfix ===== */
.pagehead{position:relative;background:#2b333a;color:#fff;padding:44px 0;isolation:isolate}
.pagehead::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.24));z-index:0}
.pagehead .wrap{position:relative;z-index:1}
.pagehead h1{color:#fff;margin:0 0 .3rem}
.pagehead p{color:rgba(255,255,255,.95);max-width:62ch;margin:.3rem 0 0}
.pagehead .crumb{font-size:.82rem;color:rgba(255,255,255,.92);margin-bottom:.55rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.pagehead .crumb a{color:#fff}
.pagehead.carysan{background:#17558f}
.pagehead.carysan .crumb{color:#e6f0fb}
.pagehead.carysan .crumb a{color:#fff}

/* Kategorie-Kopf: dunkler Schleier + Textschatten für Kontrast */
.kathero{position:relative;isolation:isolate}
.kathero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.24));z-index:0}
.kathero .wrap{position:relative;z-index:1}
.kathero .crumb{opacity:1;color:rgba(255,255,255,.96);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.kathero h1{text-shadow:0 1px 3px rgba(0,0,0,.28)}
.kathero p{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28)}

/* ===== Produktgruppe: Detail, Tabelle, Aside ===== */
.detail{padding:40px 0 64px}
.detailgrid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.figure{border:1px solid var(--line);border-radius:var(--radius);background:var(--soft);padding:24px;display:flex;align-items:center;justify-content:center;min-height:180px}
.figure img{max-width:100%;height:auto;display:block}
.aside{border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 28px;position:sticky;top:96px}
.aside h4{font-family:"Archivo";font-size:.9rem;margin:0 0 .6rem;color:var(--muted);font-weight:600}
.dl{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.3rem}
.dl a{font-size:.9rem}
.aside .btn{margin-top:.4rem}
.badge{display:inline-block;background:var(--red);color:#fff;font-family:"IBM Plex Mono";font-size:.72rem;padding:.25rem .55rem;border-radius:3px}

.tabletools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:26px 0 10px}
.tabletools input{font:inherit;font-size:.9rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:var(--radius);min-width:260px}
.tabletools .count{font-size:.85rem;color:var(--muted)}
.tablescroll{border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
table.spec{border-collapse:collapse;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums}
table.spec thead th{position:sticky;top:0;background:#3a4149;color:#fff;font-family:"Archivo";font-weight:600;text-align:left;padding:.7rem .85rem;white-space:nowrap;font-size:.82rem;border-right:1px solid rgba(255,255,255,.09)}
table.spec tbody td{padding:.58rem .85rem;border-bottom:1px solid var(--line);white-space:nowrap}
table.spec tbody tr:nth-child(odd){background:#fff}
table.spec tbody tr:nth-child(even){background:#f2f4f6}
table.spec tbody tr:hover{background:#e8edf2}
table.spec tbody td:first-child{color:var(--ink);font-weight:600}
.notenote{font-size:.82rem;color:var(--muted);margin-top:.8rem}
.subtabtitel{font-family:"Archivo";font-weight:700;font-size:1.02rem;margin:1.6rem 0 .5rem;display:flex;align-items:center;gap:.5rem}
.subtabtitel:first-of-type{margin-top:.6rem}
.subtabtitel .num{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--red);color:#fff;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center}
.warnbox{margin-top:1.4rem;padding:.9rem 1.1rem;background:#fdf3f2;border:1px solid #f3cfcc;border-left:4px solid var(--red);border-radius:var(--radius)}
.warnbox h4{margin:0 0 .5rem;font-size:.95rem;color:var(--red)}
.warnbox ul{margin:0;padding-left:1.1rem}
.warnbox li{font-size:.88rem;color:var(--ink);margin:.25rem 0;line-height:1.45}
.infotables{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:2.2rem}
.infotables h3{font-family:"Archivo";font-size:1.05rem;margin:0 0 .3rem}
.infotables .infohint{font-size:.85rem;color:var(--muted);margin:0 0 .6rem}
@media(max-width:800px){.infotables{grid-template-columns:1fr;gap:22px}}
.fussnoten{margin-top:1rem;padding:.8rem 1rem;background:var(--soft);border-radius:var(--radius)}
.fussnoten p{font-size:.82rem;color:var(--muted);margin:.25rem 0;line-height:1.5}
/* Untertabelle mit Bild daneben (Fittings) */
.subtab.haspic{display:flex;gap:18px;align-items:flex-start;margin-bottom:.4rem}
.subtab.haspic .tablescroll{flex:1 1 auto;min-width:0}
.subtab.haspic .subtabpic{flex:0 0 170px;margin:0;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:8px;text-align:center}
.subtab.haspic .subtabpic img{max-width:100%;max-height:150px;object-fit:contain;cursor:zoom-in}
@media(max-width:700px){.subtab.haspic{flex-direction:column}.subtab.haspic .subtabpic{flex-basis:auto;align-self:center;width:60%}}
/* Lange Kurzbeschreibung umbrechen statt Tabelle breit zu ziehen */
table.spec.wrapdesc{table-layout:fixed}
table.spec.wrapdesc tbody td,table.spec.wrapdesc tbody td:first-child{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
table.spec.wrapdesc thead th{white-space:normal}
.bildcol{width:58px;text-align:center;padding:4px 6px!important}
img.rowimg{max-width:48px;max-height:48px;width:auto;height:auto;object-fit:contain;background:#fff;border-radius:4px;cursor:zoom-in;vertical-align:middle}
table.spec tbody td.bildcol{font-weight:400}

/* ===== Textseiten & Kontaktformular ===== */
.prose{padding:44px 0}
.prose .wrap{max-width:900px}
.field{display:block;margin-bottom:1rem}
.field span{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.field input,.field textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius);font:inherit}
.kontakt-hint{font-size:.88rem;color:var(--muted);margin:-.3rem 0 1rem;line-height:1.5}
.kontakt-hint a{color:var(--red);font-weight:600}
fieldset.katwahl{border:0;padding:0;margin:0 0 1rem;display:block}
fieldset.katwahl>span{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem}
.katwahl .radio{display:flex;align-items:center;gap:.5rem;margin:.15rem 0;font-size:.92rem;cursor:pointer}
.katwahl .radio input{flex:0 0 auto;width:auto;margin:0}
.katwahl .radio span{font-weight:400}
.consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.82rem;color:var(--muted);margin:.4rem 0 1.1rem;line-height:1.45}
.consent input{margin-top:.2rem;flex:0 0 auto}
.consent a{color:var(--red);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formhinweis{padding:.8rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.9rem}
.formhinweis.ok{background:#eef7ee;border:1px solid #c7e3c7;color:#2b6b2b}
.formhinweis.err{background:#fdf3f2;border:1px solid #f3cfcc;color:var(--red)}

/* ===== Oberste Info-Leiste ===== */
.utility{background:#2b333a;color:#cfd4d9;font-size:.82rem}
.utility .wrap{display:flex;gap:1.4rem;align-items:center;justify-content:flex-end;padding:.42rem 24px}
.utility a{color:#e7ecf0;text-decoration:none}
.utility a:hover{color:#fff;text-decoration:underline}
.utility a.kat{color:#fff;font-weight:600;margin-right:auto}
@media(max-width:600px){.utility a.kat{margin-right:0}.utility .wrap{flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}}

/* Zweites Produktbild (kleiner, unter dem Hauptbild) */
.figure2{margin-top:12px;min-height:0;padding:16px}
.figure2 img{max-height:150px}

/* ===== Slideshow-Bilder integrieren (transparente Produkte, kein Kasten) ===== */
.slide .art.photo{background:none;box-shadow:none;border-radius:0;width:auto;max-width:44%;
  right:5%;display:flex;align-items:center;justify-content:flex-end}
.slide .art.photo img{max-height:82%;width:auto;max-width:100%;object-fit:contain;
  }
/* ===== Wissensseite ===== */
.verfahren-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:1.2rem 0 1.6rem}
.verfahren-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff}
.verfahren-card h3{margin-top:0}
.verfahren-card .vfx{width:100%;height:auto;color:var(--blue);background:var(--soft);border-radius:4px;padding:8px;margin-bottom:.6rem}
.tblwrap{overflow-x:auto;margin:.6rem 0 1.6rem;-webkit-overflow-scrolling:touch}
table.wtab{border-collapse:collapse;width:100%;font-size:.9rem;min-width:640px}
table.wtab th,table.wtab td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top}
table.wtab thead th{background:var(--ink);color:#fff;font-size:.82rem}
table.wtab tbody th{background:var(--soft);font-weight:700;white-space:nowrap}
table.wtab tbody tr:nth-child(even) td{background:#fafbfc}

/* Beständigkeits-Checker */
.best-legende{display:flex;flex-wrap:wrap;gap:14px;margin:.8rem 0;font-size:.9rem}
.best-legende span{display:inline-flex;align-items:center;gap:6px}
.rk{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.15)}
.r1{background:#1e8e3e}.r2{background:#f4b400}.r3{background:#d93025}.r0{background:#e6e9ec}
.best-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:.6rem 0 1rem}
.best-search{flex:1 1 320px;display:flex}
.best-search input{width:100%;padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:var(--radius);font-size:1rem}
.best-search input:focus{outline:none;border-color:var(--blue)}
.best-focus{display:flex;flex-wrap:wrap;gap:6px}
.best-focus button{padding:.5rem .8rem;border:1px solid var(--line);background:#fff;border-radius:var(--radius);cursor:pointer;font-size:.85rem}
.best-focus button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.best-wrap{max-height:600px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.besttab{border-collapse:collapse;width:100%;font-size:.82rem;min-width:720px}
table.besttab th,table.besttab td{padding:.32rem .4rem;text-align:center;border-bottom:1px solid var(--line)}
table.besttab thead th{position:sticky;top:0;background:var(--ink);color:#fff;z-index:2;border-bottom:0}
table.besttab thead tr:nth-child(2) th{top:32px}
table.besttab .mcol{text-align:left}
table.besttab tbody th.mcol{font-weight:600;white-space:normal;min-width:190px}
table.besttab td.konz{color:var(--muted);white-space:nowrap}
table.besttab td.v{font-weight:700;color:#20351f}
table.besttab td.v.r1{background:#d9f0e0}
table.besttab td.v.r2{background:#fdf1cf}
table.besttab td.v.r3{background:#fbd9d6}
table.besttab td.v.r0{background:#f4f6f7;color:var(--muted)}
table.besttab tbody tr:hover td,table.besttab tbody tr:hover th{outline:1px solid rgba(28,95,165,.25)}
/* Fokus auf einen Kunststoff: andere Spalten dimmen */
table.besttab.focus td.v{opacity:.2}
table.besttab.focus-0 td.v.c0,
table.besttab.focus-1 td.v.c1,
table.besttab.focus-2 td.v.c2,
table.besttab.focus-3 td.v.c3,
table.besttab.focus-4 td.v.c4{opacity:1}
.bnores{background:var(--soft);padding:.8rem 1rem;border-radius:var(--radius);color:var(--muted)}
.best-hinweis{font-size:.85rem;color:var(--muted);margin-top:.8rem}
@media(max-width:760px){.verfahren-grid{grid-template-columns:1fr}}

/* ===== CKW-Wortmarke im Fließtext (rotes CKW, W kursiv) ===== */
.ckw-word{display:inline;color:var(--red)}
.ckw-word i{display:inline;font-style:italic;font-weight:inherit}

/* ===== Startseite: Leistungen-Liste ===== */
.about .leistungen{list-style:none;padding:0;margin:.2rem 0 1.1rem}
.about .leistungen li{position:relative;padding:.4rem 0 .4rem 1.7rem;border-bottom:1px solid var(--line)}
.about .leistungen li:last-child{border-bottom:0}
.about .leistungen li::before{content:"▸";position:absolute;left:.1rem;color:var(--red);font-weight:700}

/* ===== Über uns: Werkchronik (Luftaufnahmen) ===== */
.werkchronik{margin:2.2rem 0 .5rem}
.werkchronik h2{margin-bottom:.5rem}
.chronik-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:1.1rem}
.chronik-grid figure{margin:0}
.chronik-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius);display:block}
.chronik-grid figcaption{text-align:center;margin-top:.45rem}
.chronik-grid figcaption strong{display:block;letter-spacing:.02em}
.chronik-grid figcaption span{display:block;font-size:.82rem;line-height:1.3;color:#5a6570;margin-top:.15rem}
@media(max-width:760px){.chronik-grid{grid-template-columns:repeat(2,1fr)}}

.slide .art.photo.wide{max-width:52%;right:4%}
.slide .art.photo.wide img{max-height:88%}
@media(max-width:900px){.slide .art.photo{display:none}}

/* ===== Cookie-/Datenschutz-Banner ===== */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#23272B;color:#e7ecf0;
  border-top:3px solid var(--red);box-shadow:0 -8px 24px rgba(0,0,0,.25);display:none}
.cookie.show{display:block;animation:cookieup .3s ease}
@keyframes cookieup{from{transform:translateY(100%)}to{transform:none}}
.cookie .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 24px}
.cookie p{margin:0;font-size:.9rem;max-width:70ch;color:#cfd4d9}
.cookie a{color:#fff;text-decoration:underline}
.cookie .actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:.55rem 1.1rem;font-size:.9rem}
.cookie .btn.decline{background:transparent;border-color:#5a6169;color:#e7ecf0}
.cookie .btn.decline:hover{background:#31363d}

/* Karten-Consent-Platzhalter */
.mapconsent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:320px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);text-align:center;padding:24px}
.mapconsent p{max-width:48ch;color:var(--muted);margin:0}

/* ===== Suche ===== */
.searchbox{position:relative}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:340px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 16px 40px -16px rgba(0,0,0,.4);z-index:70;display:none;max-height:70vh;overflow:auto}
.results.open{display:block}
.results a{display:block;padding:.55rem .8rem;border-bottom:1px solid var(--line);color:var(--ink);font-size:.9rem}
.results a:last-child{border-bottom:0}
.results a:hover{background:var(--soft);text-decoration:none}
.results a strong{color:var(--red);font-weight:600}
.results .rk{color:var(--muted);font-size:.76rem}
.results .allres{color:var(--red);font-weight:600;text-align:center}
.results .nores{padding:.7rem .8rem;color:var(--muted);font-size:.9rem}
.searchpage{display:flex;flex-direction:column;gap:8px;margin-top:1rem}
.sr{display:block;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
.sr:hover{border-color:var(--red);text-decoration:none;background:var(--soft)}
.sr strong{color:var(--red);font-weight:600}
.sr .rk{color:var(--muted);font-size:.8rem;margin-left:.3rem}
tr.rowhi td{background:#ffe08a !important}

/* ===== Mehrstufige Navigation (Kategorie -> Gruppen Flyout) ===== */
.dropdown{min-width:250px}
.dropdown .ddhead,.dropdown .ddkat{display:block;padding:.55rem .7rem;border-radius:3px;font-size:.93rem}
.dropdown .ddhead{border-bottom:1px solid var(--line);margin-bottom:.2rem}
.dropdown .ddkat{border-top:1px solid var(--line);margin-top:.2rem;color:var(--red);font-weight:600}
.subitem{position:relative}
.subitem>.subhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .7rem;border-radius:3px;font-size:.93rem;font-weight:500;color:var(--ink)}
.subitem>.subhead:hover{background:var(--soft);color:var(--red);text-decoration:none}
.subitem>.subhead .arr{color:var(--muted);font-size:1.1rem;line-height:1}
.subitem:hover>.subhead{background:var(--soft);color:var(--red)}
.flyout{position:absolute;top:-.4rem;left:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 14px 34px -14px rgba(0,0,0,.32);padding:.4rem;
  min-width:240px;max-height:76vh;overflow:auto;display:none;z-index:80}
.subitem:hover>.flyout,.subitem:focus-within>.flyout{display:block}
.flyout a{display:block;padding:.5rem .7rem;border-radius:3px;font-size:.9rem;color:var(--ink);white-space:nowrap}
.flyout a:hover{background:var(--soft);color:var(--red);text-decoration:none}
/* Camping & Caravan: Dropdown linksbündig, Flyout nach rechts (wie Produkte) */
.hasmenu.right .dropdown{left:0;right:auto}
.hasmenu.right .flyout{left:100%;right:auto}
@media(max-width:900px){
  .flyout{position:static;left:auto;right:auto;display:block;box-shadow:none;border:0;
    border-left:2px solid var(--line);margin:.2rem 0 .4rem 1rem;max-height:none;min-width:0}
  .subitem>.subhead .arr{display:none}
}

/* Querverweis auf verwandte Gruppe */
.querlink{margin-top:1rem;padding:.7rem .8rem;background:var(--soft);border-radius:var(--radius);font-size:.92rem}
.querlink span{color:var(--muted);display:block;margin-bottom:.15rem}
.querlink a{font-weight:600;color:var(--red)}

/* Beschriftete Bildergalerie (Sammel-/Zubehörtabellen) */
.bildgalerie{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.bildgalerie figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.5rem;text-align:center}
.bildgalerie img{max-height:110px;width:auto;max-width:100%;display:block;margin:0 auto}
.bildgalerie figcaption{margin-top:.4rem;font-size:.78rem;color:var(--muted);line-height:1.25}
@media(max-width:600px){.bildgalerie{grid-template-columns:1fr 1fr}}

/* ---- Bild-Lightbox ---- */
.aside .figure img,.bildgalerie img{cursor:zoom-in}
.lbox{position:fixed;inset:0;background:rgba(15,20,26,.92);z-index:200;display:none;align-items:center;justify-content:center}
.lbox.open{display:flex}
.lb-stage{max-width:92vw;max-height:86vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lb-stage img{max-width:92vw;max-height:86vh;width:auto;height:auto;border-radius:4px;background:#fff;cursor:zoom-in;transition:transform .15s ease;user-select:none}
.lb-stage img.zoomed{transform:scale(2.4);cursor:zoom-out}
.lb-cap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);color:#eef3f8;font-size:.9rem;background:rgba(0,0,0,.4);padding:.35rem .8rem;border-radius:20px;max-width:90vw;text-align:center}
.lb-close,.lb-nav{position:fixed;background:rgba(255,255,255,.14);border:0;color:#fff;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-close{top:18px;right:20px;width:46px;height:46px;font-size:1.8rem;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.2rem;line-height:1}
.lb-prev{left:18px}.lb-next{right:18px}
@media(max-width:600px){.lb-nav{width:44px;height:44px;font-size:1.8rem}.lb-close{width:40px;height:40px}}

/* Übersicht: Abschnittsüberschriften Verpackung / Carysan */
.matrixhead{font-family:"Archivo";font-weight:600;font-size:1.15rem;margin:1.6rem 0 .8rem;padding-bottom:.4rem;border-bottom:2px solid var(--line)}
.matrixhead:first-of-type{margin-top:.4rem}

/* ===================== Mobile-Optimierung ===================== */
/* Basis: neue Umschalter im Desktop ausgeblendet */
.searchtoggle{display:none;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
  width:42px;height:42px;font-size:1.1rem;cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.menutoggle{display:none;background:none;border:0;font-family:"Archivo";font-weight:600;font-size:1rem;
  color:var(--ink);cursor:pointer;padding:.9rem .2rem;gap:.4rem;align-items:center}

@media(max-width:760px){
  /* Utility-Leiste: nur Symbole */
  .utility .lbl{display:none}
  .utility .wrap{justify-content:flex-start;gap:1.4rem;flex-wrap:nowrap}
  .utility a{font-size:1.05rem}
  .utility a.kat{margin-right:0}

  /* Kopfzeile kompakt, kein Umbruch */
  .topbar{flex-wrap:nowrap;gap:10px;padding:12px 0;overflow:hidden}
  .brands{gap:10px;min-width:0;flex-shrink:1;overflow:hidden}
  .brands .logolink{min-width:0}
  .logo-ckw{height:30px;width:auto;max-width:100%}.logo-carysan{height:17px;width:auto;max-width:100%}
  .divider{display:none}
  .toptools{gap:8px;flex-shrink:0}
  .searchtoggle{display:inline-flex}
  .kontaktbtn{padding:.55rem .72rem}
  .kontaktbtn .lbl{display:none}

  /* Suche als aufklappbare Leiste oben */
  .searchbox{position:static}
  .search{display:none}
  .searchbox.open{position:fixed;top:0;left:0;right:0;z-index:200;background:#fff;padding:10px 14px;
    box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
  .searchbox.open .search{display:flex;width:100%;min-width:0}
  .searchbox.open .results{position:absolute;left:14px;right:14px;top:100%;min-width:0}

  /* Navigation als Hamburger */
  .menutoggle{display:inline-flex}
  nav.main .navwrap{padding-top:.2rem;padding-bottom:.2rem}
  nav.main .row{display:none;flex-direction:column;align-items:stretch;padding:.2rem 0 .6rem}
  nav.main .row.open{display:flex}
  nav.main a{padding:.9rem .3rem;border-bottom:1px solid var(--line);font-size:1.05rem}
  nav.main a.active::after{display:none}
  .hasmenu{position:static}
  .hasmenu .dropdown{display:none!important}

  /* Produkt-Matrix immer zweispaltig */
  .matrix,.grpgrid{grid-template-columns:1fr 1fr;gap:12px}
  .mtile{min-height:150px;padding:16px}
  .mtile .txt h3{font-size:1rem}
  .mtile p{display:none}
  .mtile .art{width:52%}
  .mtile .count{left:16px;bottom:12px}
  .matrixhead{font-size:1.05rem}
}

/* ============================================================
   TEST-Einfärbung Produktübersicht (Carysan = Blau, Verpackung = helles Grau)
   Zum Zurückstellen auf die Original-Kategoriefarben: NUR diesen Block entfernen.
   Die Original-Farben bleiben als inline style="background:…" im Markup erhalten.
   ============================================================ */
.mtile.car{background:var(--blue)!important}
.mtile.pack{background:#ECEEF1!important}
.mtile.pack::after{display:none}                 /* dunkler Verlauf für hellen Grund weg */
.mtile.pack h3{color:var(--ink)!important}
.mtile.pack p{color:#5b6570!important}
.mtile.pack .count{color:#7a828b!important}
.mtile.pack .art{filter:drop-shadow(0 6px 14px rgba(0,0,0,.16))!important}
/* ============================ Ende Test-Einfärbung ============================ */