/* Aus dem Entwurf design/prototyp-modern übernommen (Grundstil + moderne Ebene) */

/* Layout: 1:1 nach cpapbg.com – Kopfband, Logo/Versandhinweis/Symbole, zentriertes Menü mit Bildkacheln,
   Inhalt in 1160px-Spalte. Farben, Schriften und Größen aus der alten Seite gemessen. Nur helles Design wie das Original. */
:root {
  color-scheme: light;
  --blue: #0092bb;      /* Kopfband, Buttons, Produkttitel */
  --teal: #15596c;      /* Überschriften, Fußleiste */
  --text: #383838;
  --body: #333333;
  --promo: #ff0000;     /* Menüpunkt Промоции */
  --price: #fc002b;     /* Preise */
  --card: #f6f5f0;      /* Produktkarten, Titelband */
  --sat: #addbe9;       /* Kundenbereich */
  --tile: #ececec;      /* Menükacheln */
  --soft: rgba(3, 139, 177, .18);
  --paper: #ffffff;
  --f-mont: "Montserrat", sans-serif;
  --f-rob: "Roboto", sans-serif;
  --f-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --w: 1160px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--body); font: 400 16px/1.5 var(--f-sys); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wrap { max-width: var(--w); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.draft { background: #fff7e0; color: #6b4e00; font: 13px/1.4 var(--f-sys); border-bottom: 1px solid #ecd9a0; }
.draft .wrap { padding-block: 6px; }

/* ---------- Kopfbereich ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.topbar { background: var(--blue); color: #fff; font: 400 16px/24px var(--f-rob); text-align: center; }
.topbar .wrap { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.topbar svg { width: 17px; height: 17px; }
.hrow { border-bottom: 1px solid var(--teal); }
.hrow .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 71px; max-width: 1184px; }
.logo img { width: 100px; }
.ship { font: 500 16px var(--f-rob); color: #000; text-align: center; }
.icons { display: flex; justify-content: flex-end; gap: 6px; padding-right: 100px; }
.icons button, .icons a { width: 26px; height: 26px; display: grid; place-items: center; color: #000; position: relative; }
.icons svg { width: 21px; height: 21px; }
.icons .count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--blue); color: #fff; font: 600 10px/16px var(--f-rob); text-align: center; padding: 0 4px; }
.icons .count:empty { display: none; }
.burger { display: none; }
.nav-head, .sub-toggle, .nav-overlay { display: none; }
nav.main { position: relative; background: var(--paper); }
nav.main > ul { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100px; }
nav.main > ul > li > a { display: flex; align-items: center; gap: 4px; padding: 0 15px; font: 500 17px/80px var(--f-sys); color: #000; }
nav.main > ul > li > a.promo { color: var(--promo); font-weight: 800; }
nav.main > ul > li > a:hover, nav.main > ul > li.on > a:not(.promo) { color: #8a8a8a; }
nav.main .chev { width: 13px; height: 13px; }
.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); padding: 10px 0 30px; z-index: 8; box-shadow: 0 14px 18px -12px rgba(0,0,0,.15); }
nav.main li.hov > .mega { display: block; } /* per JS mit Verzögerung, damit das Menü auf dem Weg nach unten offen bleibt */
.mega .grid3 { width: 946px; max-width: calc(100% - 32px); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mega .tile { display: flex; align-items: center; gap: 14px; background: #f3f6f7; border: 1px solid transparent; border-radius: 12px; padding: 8px 16px 8px 10px; min-height: 72px; font: 600 15px/19px var(--f-rob); color: #10303b; transition: background .15s, border-color .15s, box-shadow .15s; }
.mega .tile:hover { border-color: var(--blue); background: #fff; box-shadow: 0 6px 18px rgba(0,146,187,.12); }
.mega .tile img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.mega .tile.wide { grid-column: span 1; }

/* Mobil */
@media (max-width: 1024px) {
  .topbar { font-size: 14px; font-weight: 700; }
  .topbar .wrap { min-height: 58px; }
  .topbar svg { display: none; }
  .hrow { border-bottom: 0; }
  .hrow .wrap { min-height: 80px; }
  .ship { display: none; }
  .hrow .wrap { grid-template-columns: 1fr auto 1fr; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .burger { display: grid; place-items: center; width: 34px; height: 34px; grid-column: 1; grid-row: 1; justify-self: start; margin-left: -4px; }
  .burger svg { width: 28px; height: 28px; }
  .logo { grid-column: 2; grid-row: 1; }
  .logo img { width: 130px; }
  .icons { grid-column: 3; grid-row: 1; padding-right: 0; justify-self: end; gap: 9px; margin-right: -2px; }
  .icons button, .icons a { width: 26px; height: 30px; }
  .icons svg { width: 23px; height: 23px; }
  nav.main { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: 8px 0 30px rgba(0,0,0,.18); transform: translateX(-102%); transition: transform .25s ease; padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 calc(env(safe-area-inset-bottom, 0px) + 24px) env(safe-area-inset-left, 0px); }
  nav.main.open { transform: none; }
  .nav-head { display: flex; }
  .nav-overlay:not([hidden]) { display: block; }
  .nav-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 14px 20px; }
  .nav-head img { width: 120px; }
  .nav-close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #f3f6f7; font: 400 22px/1 var(--f-sys); color: #000; }
  nav.main > ul { flex-direction: column; align-items: stretch; min-height: 0; padding: 0 18px 0 20px; }
  nav.main > ul > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f1; }
  nav.main > ul > li > a { line-height: 1.3; padding: 16px 0; font-size: 17px; flex: 1; }
  nav.main > ul > li > a .chev { display: none; }
  .sub-toggle { display: grid; place-items: center; width: 44px; height: 24px; border: 1px solid #222; border-radius: 14px; }
  .sub-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
  li.open > .sub-toggle svg { transform: rotate(180deg); }
  nav.main li.hov > .mega { display: none; }
  nav.main li.open > .mega { display: block; position: static; box-shadow: none; padding: 2px 0 18px; flex-basis: 100%; }
  .mega .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: auto; max-width: none; }
  .mega .tile, .mega .tile.wide { flex-direction: column; justify-content: flex-start; text-align: center; gap: 8px; padding: 14px 8px 12px; min-height: 0; font-size: 13.5px; line-height: 17px; }
  .mega .tile img { width: 72px; height: 64px; }
  .nav-overlay { position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.35); }
}
@media (max-width: 380px) { .logo img { width: 118px; } .icons { gap: 8px; } }

/* ---------- Suche ---------- */
.s-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; }
.s-box { position: fixed; z-index: 31; top: calc(env(safe-area-inset-top, 0px) + 188px); right: max(16px, calc((100vw - 1366px) / 2 + 128px)); width: min(615px, calc(100vw - 32px)); max-height: calc(100dvh - 210px); overflow-y: auto; background: #f8f8f8; border-radius: 16px; padding: 20px 20px 26px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.s-row { display: flex; align-items: center; gap: 16px; }
.s-field { flex: 1; min-width: 0; display: flex; align-items: center; background: #fff; border-bottom: 2px solid var(--blue); }
.s-field input { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 16px var(--f-rob); padding: 12px; background: transparent; color: #222; }
.s-field svg { width: 16px; height: 16px; margin-right: 12px; color: #cfcfcf; flex: none; }
.s-go { color: var(--blue); font: 500 17px var(--f-rob); }
.s-label { color: #8a8a8a; font: 400 16px var(--f-rob); margin: 8px 0 14px; }
.s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.s-card { background: #fff; border-radius: 6px; padding: 10px 12px 16px; text-align: center; display: grid; gap: 8px; align-content: start; position: relative; min-width: 0; }
.s-card .pic { aspect-ratio: 1; display: grid; place-items: center; }
.s-card .pic img { width: 100%; height: 100%; object-fit: contain; }
.s-card b { color: var(--blue); font: 500 16px/1.25 var(--f-rob); }
.s-card .pr { font: 400 14px var(--f-rob); color: #555; }
.s-card .pr del { color: #888; }
.s-card .pr ins { text-decoration: underline; color: var(--blue); font-weight: 600; }
.badge-sale { position: absolute; top: 10px; left: 10px; z-index: 2; background: #ff3b3b; color: #fff; font: 700 12px/1 var(--f-rob); text-transform: uppercase; letter-spacing: .05em; border-radius: 6px; padding: 7px 9px; box-shadow: 0 4px 12px -4px rgba(220,38,38,.55); pointer-events: none; }
.pcard .badge-sale { top: 14px; left: 14px; }
.gal .main { position: relative; }
.gal .main .badge-sale { top: 12px; left: 12px; font-size: 14px; padding: 9px 12px; }
.s-empty { padding: 20px 0; color: #666; font: 400 15px var(--f-rob); }
@media (max-width: 1024px) { .s-box { top: calc(env(safe-area-inset-top, 0px) + 80px); right: 16px; } }
@media (max-width: 560px) { .s-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Startseite ---------- */
/* Slider wie im Original (Smart Slider „horizontal“): ganze Folie gleitet waagerecht, 800 ms easeOutQuad.
   Blauer Bereich 632 px, Karten ragen 124 px darunter in den weißen Bereich, Diagnostik beginnt 919 px unter Slider-Oberkante. */
.slider { position: relative; overflow: hidden; color: #fff; background: #fff; height: 919px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.slider img { -webkit-user-drag: none; }
.slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; transform: translateX(100%); will-change: transform; }
.slide.on { visibility: visible; transform: none; }
.slide .band { position: absolute; left: 0; right: 0; top: 0; height: 632px; background: #0b3d4d url("../img/bg-textur.webp") center / cover; }
.slide .wrap { position: relative; height: 100%; max-width: 1232px; }
@media (min-width: 1025px) and (max-width: 1260px) { .slide .wrap { padding-left: 48px; } }
.slide .txt { position: relative; z-index: 2; width: 560px; max-width: 100%; padding-top: 108px; }
.kicker { font: 400 16px/25.6px var(--f-mont); letter-spacing: 5px; text-transform: uppercase; color: #ccc; }
.slide .h1 { font: 400 52px/52px var(--f-mont); -webkit-text-stroke: 1.1px currentColor; margin: 12px 0 0; }
.slide .model { font: 400 24px/38.4px var(--f-mont); -webkit-text-stroke: .5px currentColor; margin-top: 4px; }
.slide p { font: 400 16px/25.6px var(--f-mont); margin: 26px 0 0; max-width: 550px; }
.pill { display: inline-flex; align-items: center; justify-content: center; margin: 40px 0 0; width: 235px; height: 60px; border-radius: 100px; border: 2px solid #fff; background: #fff; color: #121212; font: 400 16px/25.6px var(--f-mont); -webkit-text-stroke: .45px currentColor; transition: background .15s, color .15s; }
.pill:hover { background: transparent; color: #fff; }
.slide .pic { position: absolute; z-index: 1; left: calc(50% + 20px); top: 0; width: 780px; max-width: none; }
.slide .cards { position: absolute; z-index: 2; top: 478px; display: flex; gap: 20px; }
.slide:nth-child(1) .cards { top: 493px; } .slide:nth-child(2) .cards { top: 485px; } /* Positionen je Folie wie im Original */
.slide .cards div { width: 290px; min-height: 278px; border-radius: 24px; padding: 40px; background: #0b3d4d url("../img/bg-textur.webp") center / cover; font: 400 14px/21px var(--f-mont); box-shadow: 0 8px 20px rgba(0,0,0,.15); display: flex; align-items: center; }
.slider .dots { display: none; position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); gap: 9px; }
.slider .dots button { position: relative; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.45); }
.slider .dots button::before { content: ""; position: absolute; inset: -10px; }
.slider .dots button[aria-current="true"] { background: #fff; }
.after-slider { display: none; }
/* Handy wie Original: Text mittig im oberen Bereich (357 px), Gerät quadratisch in voller Breite unten, Punkte auf dem Bild */
@media (max-width: 1024px) {
  .slider { height: auto; }
  .slide { height: auto; bottom: 0; }
  .slide.on { position: relative; }
  .slide .band { height: 100%; }
  .slide .wrap { height: auto; display: flex; flex-direction: column; padding-bottom: 0; }
  .slide .txt { width: auto; min-height: 357px; padding-block: 24px; display: flex; flex-direction: column; justify-content: center; }
  .kicker { font-size: 11.2px; line-height: 17.92px; }
  .slide .h1 { font-size: 36.4px; line-height: 36.4px; margin-top: 10px; -webkit-text-stroke-width: .8px; }
  .slide .model { font-size: 19.2px; line-height: 30.72px; margin-top: 0; }
  .slide p { font-size: 12.8px; line-height: 20.48px; margin-top: 20px; }
  .pill { display: flex; align-self: flex-start; margin: 22px 0 0; width: 235px; height: 60px; }
  .slide .pic { position: relative; left: auto; top: auto; width: calc(100% + 32px); max-width: 560px; aspect-ratio: 1; height: auto; object-fit: contain; margin: 0 -16px; }
  .slide .cards { display: none; }
  .slider .dots { display: flex; bottom: 14px; gap: 8px; }
  .slider .dots button { width: 10px; height: 10px; background: rgba(255,255,255,.5); }
  .slider .dots button[aria-current="true"] { background: #fff; }
}
@media (min-width: 561px) and (max-width: 1024px) { .slide .pic { margin-inline: auto; } }
/* Handy: Geräte im Slider so groß wie möglich, aber vollständig sichtbar (transparenter Bildrand wird überdeckt) */
@media (max-width: 560px) {
  .slide .pic { --fit: .91; width: calc((100vw - 20px) / var(--fit)); max-width: none; aspect-ratio: 1; align-self: center; margin: calc((100vw - 20px) / var(--fit) * -.16 + 18px) 0 calc((100vw - 20px) / var(--fit) * -.12 + 22px); /* etwas Luft zum Button und zu den Punkten */ filter: drop-shadow(0 24px 28px rgba(0,20,30,.4)); }
  .slide:nth-child(2) .pic { --fit: .78; margin-top: calc((100vw - 20px) / var(--fit) * -.195 + 18px); margin-bottom: calc((100vw - 20px) / var(--fit) * -.19 + 22px); } /* alle Folien gleich hoch */
}
/* Online-Test: Hintergrundfoto bewegt sich beim Scrollen langsamer mit (Parallax, per JS) */
.diag { background: none; overflow: hidden; }
.diag .px { position: absolute; left: 0; right: 0; top: -130px; bottom: -130px; z-index: 0; background: url("../img/bg-diagnostika.webp") center / cover; will-change: transform; }
.diag::before { z-index: 1; }
.diag .wrap { z-index: 2; }
/* Handy: Hintergrundfoto bewegt sich beim Scrollen nur ganz leicht (wie am Computer), rein per CSS – ohne JavaScript, daher ruckelfrei.
   Das Foto ist etwas höher als der Bereich (= näher herangezoomt) und wandert beim Durchscrollen ca. 140 px.
   Ohne Unterstützung (ältere Browser) bleibt das Foto einfach stehen. */
@media (max-width: 760px) {
  .diag .px { top: -90px; bottom: -90px; will-change: auto; }
  @supports (animation-timeline: view()) {
    /* Zeitleiste am Bereich selbst (nicht am Foto): der Bereich hat overflow: hidden und wäre sonst selbst der „Scroller“ */
    .diag { view-timeline: --diagpx block; }
    .diag .px { will-change: transform; animation: diag-px linear both; animation-timeline: --diagpx; animation-range: cover 0% cover 100%; }
    @keyframes diag-px { from { transform: translate3d(0, -70px, 0); } to { transform: translate3d(0, 70px, 0); } }
  }
}
/* Korrekturen nach Feedback: weniger Weißraum unter dem Slider, Fotos so hoch wie der Text */
@media (min-width: 761px) {
  .slider { height: 830px; }
  .two { align-items: stretch; }
  .two > .rimg { height: 100%; min-height: 360px; }
  .rev p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .slide { transition: none !important; } }

.diag { position: relative; color: #fff; text-align: center; background: url("../img/bg-diagnostika.webp") center / cover; }
.diag::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.diag .wrap { position: relative; padding-block: 108px 128px; display: grid; gap: 40px; justify-items: center; }
.diag h2 { font: 600 32px/32px var(--f-mont); margin: 0; }
.diag p { font: 400 16px/24px var(--f-mont); margin: 0; max-width: 980px; }
.diag .btns { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.obtn { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 12px 40px; border: 1px solid currentColor; border-radius: 2px; font: 500 17px/1.1 var(--f-mont); text-align: center; }
.diag .obtn { color: #fff; }
.obtn.teal { color: var(--teal); }
.obtn.rob { font-family: var(--f-rob); }
@media (max-width: 760px) { .diag .wrap { padding-block: 60px; gap: 26px; } .diag h2 { font-size: 24px; } .diag .btns { width: 100%; } .diag .obtn { width: 100%; } }

.sec { padding-block: 110px 0; }
.two { max-width: 1046px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.two > * { min-width: 0; }
h2.it { font: italic 600 28px/28px var(--f-mont); color: var(--teal); margin: 0 0 30px; }
.just p { font: 400 16px/24px var(--f-mont); color: var(--text); text-align: left; margin: 0 0 34px; }
.rimg { border-radius: 24px; width: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .sec { padding-block: 50px 0; }
  .two { grid-template-columns: 1fr; gap: 30px; }
  .two.swap > :first-child { order: -1; }
  h2.it { font-size: 18px; line-height: 20px; text-align: center; margin-bottom: 26px; }
  .center-m { text-align: center; }
}
.help h2.it { font-size: 22px; line-height: 22px; padding-left: 90px; }
.help .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1146px; margin: 0 auto; align-items: start; }
.help .cols > * { min-width: 0; }
.help h3 { font: italic 600 20px/20px var(--f-mont); color: var(--teal); margin: 30px 0 18px; }
.help .cols > div > h3:first-child { margin-top: 0; }
.help .cols p { font: 400 16px/24px var(--f-mont); color: var(--text); text-align: left; margin: 0; }
@media (max-width: 760px) { .help h2.it { padding-left: 0; font-size: 18px; } .help .cols { grid-template-columns: 1fr; } }
.types { text-align: center; padding-block: 140px 0; }
.types h2 { font: 600 32px/32px var(--f-mont); color: var(--teal); margin: 0 0 66px; }
.types .cols { max-width: 1066px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.types .cols > div { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; min-width: 0; }
.types img { width: 260px; aspect-ratio: 1; object-fit: contain; }
.types h3 { font: italic 600 22px/22px var(--f-mont); color: var(--teal); margin: 26px 0 50px; min-height: 44px; }
.types p { font: 400 16px/24px var(--f-mont); color: var(--text); text-align: left; margin: 0 0 60px; }
@media (max-width: 760px) { .types { padding-block: 60px 0; } .types h2 { font-size: 22px; line-height: 26px; margin-bottom: 30px; } .types .cols { grid-template-columns: 1fr; gap: 50px; } .types h3 { margin: 16px 0; min-height: 0; } .types p { margin-bottom: 24px; } }
.brands { max-width: 1066px; margin: 110px auto 0; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.3); height: 100px; overflow: hidden; position: relative; }
.brands .track { display: flex; width: max-content; height: 100%; animation: marquee 22s linear infinite; will-change: transform; backface-visibility: hidden; }
.brands .track div { width: 325px; display: grid; place-items: center; }
.brands img { max-height: 60px; width: auto; max-width: 160px; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* Spur ist doppelt → nahtlose Schleife bei jeder Kachelbreite */
@media (prefers-reduced-motion: reduce) { .brands .track { animation: none; } }
@media (max-width: 1100px) { .brands { margin-inline: 16px; } }
@media (max-width: 760px) { .brands { margin-top: 60px; } }
.why-h { text-align: center; font: 600 32px/32px var(--f-mont); color: var(--teal); margin: 130px 0 78px; }
.why { background: #0b3d4d url("../img/bg-textur.webp") center / cover; color: #fff; }
.why .wrap { max-width: 1366px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 82px 90px; text-align: center; }
.why img { width: 50px; height: 50px; object-fit: contain; margin: 0 auto 26px; }
.why h3 { font: italic 600 22px/22px var(--f-mont); margin: 0 0 54px; min-height: 44px; }
.why p { font: 400 16px/24px var(--f-mont); margin: 0 auto; max-width: 322px; }
@media (max-width: 760px) { .why-h { margin: 60px 0 40px; font-size: 24px; } .why .wrap { grid-template-columns: 1fr; gap: 50px; padding-block: 60px; } .why h3 { margin-bottom: 16px; min-height: 0; } }
.faq { padding-block: 160px 86px; }
.faq h2 { text-align: center; font: 600 32px/32px var(--f-mont); color: var(--teal); margin: 0 0 104px; }
.faq .grid { max-width: 1066px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 10px; }
.faq a { position: relative; border-radius: 15px; overflow: hidden; display: grid; place-items: center; text-align: center; padding: 20px; min-height: 184px; color: #fff; font: 600 22px/24px var(--f-mont); background-size: cover; background-position: center; }
.faq .grid a:nth-child(n+4) { min-height: 232px; }
.faq a::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); transition: background .2s; }
.faq a:hover::before { background: rgba(0,0,0,.5); }
.faq a span { position: relative; }
@media (max-width: 760px) { .faq { padding-block: 60px; } .faq h2 { font-size: 22px; line-height: 26px; margin-bottom: 40px; } .faq .grid { grid-template-columns: 1fr; gap: 14px; } .faq .grid a, .faq .grid a:nth-child(n+4) { min-height: 160px; } }
.sat { background: var(--sat); text-align: center; padding-block: 108px 104px; }
.sat .s1 { font: 600 22px/22px var(--f-mont); color: var(--teal); margin: 0 0 14px; }
.sat h2 { font: 700 32px/32px var(--f-mont); color: var(--teal); margin: 0 0 54px; }
.sat .cards { max-width: 1036px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.rev { background: #fff; border-radius: 16px; box-shadow: 0 0 10px rgba(0,0,0,.25); padding: 26px 25px 40px; text-align: left; min-width: 0; }
.rev .stars { display: flex; gap: 3px; margin-bottom: 14px; }
.rev .stars img { width: 18px; height: 18px; }
.rev h3 { font: italic 700 22px/22px var(--f-mont); color: var(--teal); margin: 0 0 20px; }
.rev p { font: 400 16px/24px var(--f-mont); color: var(--text); text-align: left; margin: 0; }
@media (max-width: 760px) { .sat { padding-block: 60px; } .sat h2 { font-size: 24px; line-height: 28px; } .sat .cards { grid-template-columns: 1fr; } }
.blog { padding-block: 92px 80px; }
.blog h2 { text-align: center; font: 700 24px/24px var(--f-mont); color: var(--teal); margin: 0 0 46px; }
.blog .intro { font: 400 16px/24px var(--f-mont); color: var(--text); text-align: left; margin: 0 0 34px; }
.blog .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.post { box-shadow: 0 0 10px rgba(0,0,0,.15); background: #fff; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.post .pic { aspect-ratio: 36 / 25; overflow: hidden; }
.post .pic img { width: 100%; height: 100%; object-fit: cover; }
.post .b { padding: 30px 30px 20px; border-bottom: 1px solid var(--teal); }
.post h3 { font: 600 19px/22.8px var(--f-mont); color: var(--teal); margin: 0 0 22px; }
.post .more { font: 500 12px/18px var(--f-rob); color: var(--teal); text-transform: uppercase; }
.post .meta { padding: 14px 30px; font: 400 12px "Roboto Slab", serif; color: var(--teal); }
@media (max-width: 760px) { .blog { padding-block: 50px; } .blog .grid { grid-template-columns: 1fr; } }


/* ---------- Startseite Handy: Maße wie Original (cpapbg.com, 390 px) ---------- */
@media (max-width: 760px) {
  .diag { margin-top: 24px; }
  .diag .wrap { padding-block: 56px 40px; gap: 24px; }
  .diag h2 { font-size: 20px; line-height: 24px; }
  .diag p { font-size: 16px; line-height: 24px; }
  .diag .btns { gap: 12px; }
  .diag .obtn { font-size: 15px; min-height: 47px; }
  .sec { padding-top: 40px; }
  h2.it, .help h2.it { font-size: 16px; line-height: 20px; text-align: center; margin-bottom: 24px; }
  .just p, .help .cols p, .types p { font-size: 16px; line-height: 24px; margin-bottom: 24px; }
  .rimg.eksperti { display: none; }
  .two { gap: 40px; }
  .center-m { text-align: center; }
  .obtn.teal { font-size: 15px; padding: 14px 28px; }
  .help h3 { font-size: 16px; line-height: 20px; text-align: center; margin: 24px 0 12px; }
  .help .cols { gap: 0; }
  .help .cols > div > h3:first-child { margin-top: 24px; }
  .types { padding-top: 70px; }
  .types h2 { font-size: 16px; line-height: 20px; margin-bottom: 30px; }
  .types .cols { gap: 56px; }
  .types .cols > div { justify-items: center; }
  .types img { width: 100%; max-width: 370px; justify-self: center; }
  .types h3 { font-size: 16px; line-height: 20px; margin: 20px 0 16px; justify-self: center; }
  .brands { margin: 60px 0 0; height: 80px; }
  .brands .track div { width: 230px; }
  .why-h { font-size: 16px; line-height: 20px; margin: 56px 0 40px; }
  .why .wrap { gap: 56px; padding-block: 50px 60px; }
  .why h3 { font-size: 18px; line-height: 22px; margin-bottom: 22px; }
  .faq { padding-block: 56px 50px; }
  .faq h2 { font-size: 16px; line-height: 20px; margin-bottom: 28px; }
  .faq .grid { gap: 10px; }
  .faq .grid a, .faq .grid a:nth-child(n+4) { min-height: 124px; font-size: 17px; line-height: 21px; }
  .sat { padding-block: 50px 36px; }
  .sat .s1 { font-size: 17px; line-height: 20px; margin-bottom: 20px; }
  .sat h2 { font-size: 17px; line-height: 21px; margin-bottom: 40px; }
  .sat .cards { gap: 30px; }
  .rev { padding: 24px 24px 32px; }
  .rev h3 { font-size: 20px; line-height: 22px; }
  .rev p { font-size: 16px; line-height: 24px; }
  .blog { padding-block: 40px 50px; }
  .blog h2 { font-size: 17px; line-height: 21px; margin-bottom: 36px; }
  .blog .intro { font-size: 16px; line-height: 24px; }
  .post .b { padding: 30px 30px 20px; }
  .post h3 { font-size: 19px; line-height: 22.8px; }
  footer .contact { font-weight: 400; font-size: 15px; }
  footer .contact a { font-weight: 400; }
}

/* ---------- Kategorie ---------- */
.band-title { background: var(--card); text-align: center; padding-block: 34px; }
.band-title h1 { font: 600 34px/38px var(--f-mont); color: #000; margin: 0; }
.band-title.naem { background: #fff url("../img/bg-titel-podnaem.webp") right center / auto 100% no-repeat; }
.band-title.naem h1 { font: 700 40px/40px var(--f-rob); color: var(--teal); padding-block: 20px; }
.cat { display: grid; grid-template-columns: 205px 1fr; gap: 23px; padding-block: 60px 80px; max-width: 1170px; }
.cat > * { min-width: 0; }
.filt { display: grid; gap: 28px; align-content: start; }
.filt .fb { display: flex; gap: 5px; }
.filt .fb button { height: 40px; padding: 5px 13px; background: #f0f0f0; border: 1px solid var(--blue); border-radius: 4px; color: #64808e; font: 700 16px var(--f-sys); text-transform: uppercase; }
.filt h4 { font: 700 16px/20px var(--f-sys); color: #333; margin: 0 0 12px; }
.filt label { display: flex; align-items: center; gap: 10px; font: 400 13px/27px var(--f-sys); color: #64808e; cursor: pointer; }
.filt input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.range { position: relative; height: 30px; margin: 4px 9px 0; }
.range input { position: absolute; inset: 0; width: 100%; pointer-events: none; -webkit-appearance: none; appearance: none; background: none; margin: 0; }
.range input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 1px solid #0a5d77; cursor: pointer; }
.range input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 1px solid #0a5d77; cursor: pointer; }
.range::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 3px; background: #e5eef1; }
.rv { display: flex; justify-content: center; gap: 14px; font: 400 15px var(--f-sys); color: #333; }
.rv span:last-child { color: #888; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; align-content: start; }
.pcard { background: var(--card); border: 1px solid transparent; text-align: center; padding: 10px 20px 40px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto auto; justify-items: center; transition: box-shadow .2s; position: relative; min-width: 0; }
.pcard:hover { box-shadow: 0 0 10px rgba(0,0,0,.3); }
.pcard .pic { width: 100%; aspect-ratio: 1 / .85; display: grid; place-items: center; }
.pcard .pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pcard .cats { font: 400 14px/21px var(--f-sys); color: #999; margin: 8px 0 22px; }
.pcard h3 { font: 700 21px/29.4px var(--f-sys); color: var(--blue); margin: 0 0 24px; align-self: start; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; }
.pr { font: 600 14px/21px var(--f-mont); color: var(--price); }
.pr del { color: #9c9c9c; margin-right: 4px; }
.pr ins { text-decoration: underline; }
.pcard .pr { margin-bottom: 24px; min-height: 21px; }
.pcard .btn { position: relative; z-index: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; border-radius: 3px; padding: 9px 17px; font: 600 14px/17px var(--f-mont); }
.btn:hover { background: #0a7fa2; }
.out { position: absolute; top: 14px; left: 14px; z-index: 1; margin: 0; background: #7a7a7a; color: #fff; font: 600 12px var(--f-sys); padding: 4px 9px; border-radius: 4px; }
.nores { grid-column: 1 / -1; padding: 40px; text-align: center; color: #666; background: var(--card); }
.naem-grid { max-width: 946px; margin: 0 auto; padding-block: 40px 80px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; }
.naem-grid .pcard { padding: 30px 16px; grid-template-rows: auto 1fr auto auto; }
.naem-grid h3 { font: 600 19px/22px var(--f-rob); color: var(--blue); margin: 30px 0 18px; }
.naem-grid .pr { font: 500 15px var(--f-rob); color: var(--price); margin-bottom: 26px; }
.naem-grid .btn { font: 500 14px var(--f-rob); padding: 13px 27px; }
@media (max-width: 1024px) { .cat { grid-template-columns: 1fr; padding-block: 30px 60px; } .pgrid, .naem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pgrid, .naem-grid { grid-template-columns: minmax(0, 1fr); } .band-title h1 { font-size: 26px; line-height: 30px; } }

/* ---------- Produkt ---------- */
.pdp-crumbs { padding-top: 54px; font: 400 16px var(--f-sys); color: #333; }
.pdp-crumbs b { font-weight: 700; }
.pdp-crumbs a { color: var(--teal); }
.pdp { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; padding-block: 40px 0; max-width: 1300px; }
.pdp > * { min-width: 0; }
.gal .main { aspect-ratio: 1; display: grid; place-items: center; }
.gal .main img { width: 100%; height: 100%; object-fit: contain; }
.gal .thumbs { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.gal .thumbs button { width: 70px; height: 80px; opacity: .6; }
.gal .thumbs button[aria-current="true"], .gal .thumbs button:hover { opacity: 1; }
.gal .thumbs img { width: 100%; height: 100%; object-fit: contain; }
.buy h1 { font: 600 40px/40px var(--f-rob); color: var(--teal); margin: 0 0 18px; }
.buy .pr { font: 600 20px/30px var(--f-rob); }
.attr { margin: 46px 0 0; }
.attr strong { display: block; font: 600 16px/24px var(--f-mont); color: var(--teal); margin: 0 0 8px; }
.sw { display: flex; gap: 6px; flex-wrap: wrap; }
.sw button { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #333; border-radius: 2px; background: #fff; font: 400 16px var(--f-mont); color: #000; box-shadow: inset 0 0 0 2px #fff; }
.sw button[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--blue); }
.qty-in { display: block; width: 404px; max-width: 100%; height: 38px; margin: 36px 0 10px; border: 1px solid #222; border-radius: 2px; text-align: center; font: 400 16px var(--f-sys); }
.bbtn { display: flex; align-items: center; justify-content: center; width: 404px; max-width: 100%; height: 38px; border-radius: 3px; color: #fff; font: 700 16px var(--f-sys); margin-bottom: 10px; }
.bbtn.add { background: var(--blue); }
.bbtn.add[aria-disabled="true"] { opacity: .5; }
.bbtn.quick { background: var(--teal); }
.bbtn.quick[aria-disabled="true"], .bbtn.add:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.35); }
.notice { display: inline-block; margin-top: 10px; padding: 15px 30px; background: var(--soft); color: var(--teal); font: 400 15px/18px var(--f-sys); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.hint { min-height: 22px; margin-top: 8px; color: var(--price); font: 400 14px var(--f-sys); }
.tabs { margin-top: 70px; border-bottom: 1px solid #ccc; display: flex; gap: 6px; padding-left: 17px; }
.tabs button { padding: 12.8px 19.2px; background: var(--soft); color: var(--teal); border: 1px solid #c9dfe6; border-bottom: 0; border-radius: 4px 4px 0 0; font: 400 16px var(--f-sys); }
.tabs button[aria-selected="true"] { background: #d1e8ef; }
.tabp { padding: 18px 20px 60px; font: 400 16px/24px var(--f-sys); color: #333; }
.tabp p { margin: 0 0 14px; }
.tabp table { border-collapse: collapse; }
.tabp td, .tabp th { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
@media (max-width: 1024px) { .pdp { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; } .buy h1 { font-size: 28px; line-height: 32px; } .pdp-crumbs { padding-top: 24px; font-size: 14px; } .tabs { margin-top: 40px; padding-left: 0; } .tabp { padding-inline: 0; } }

/* ---------- Warenkorb ---------- */
.cart { padding-block: 50px 80px; display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.cart > * { min-width: 0; }
.cart h1 { grid-column: 1 / -1; font: 600 34px var(--f-mont); color: var(--teal); margin: 0; }
.cline { display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid #e3e3e3; }
.cline > * { min-width: 0; }
.cline img { width: 90px; height: 90px; object-fit: contain; background: var(--card); }
.cline .n { color: var(--blue); font: 700 17px var(--f-sys); }
.cline .v { color: #666; font-size: 14px; }
.cline .q { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cline .q button { width: 30px; height: 30px; border: 1px solid #ccc; border-radius: 2px; }
.cline .q .rm { width: auto; border: 0; color: #888; text-decoration: underline; font-size: 14px; }
.sum { background: var(--card); padding: 24px; display: grid; gap: 12px; }
.sum .r { display: flex; justify-content: space-between; gap: 12px; }
.sum .t { font: 700 20px var(--f-sys); border-top: 1px solid #ddd; padding-top: 12px; }
.meter { height: 8px; background: #fff; border-radius: 4px; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--blue); }
.empty { grid-column: 1 / -1; background: var(--card); padding: 50px; text-align: center; display: grid; gap: 16px; justify-items: center; }
@media (max-width: 900px) { .cart { grid-template-columns: 1fr; } .cline { grid-template-columns: 70px 1fr; } .cline img { width: 70px; height: 70px; } .cline .tot { grid-column: 2; } }

/* ---------- Unterseiten ---------- */
.ptitle { text-align: center; font: 600 32px/1.25 var(--f-mont); color: var(--teal); margin: 56px auto 40px; max-width: 900px; padding-inline: 16px; }
.pg-h { max-width: 900px; margin: 40px auto 14px; font: 600 22px/1.3 var(--f-mont); color: var(--teal); }
.prose { max-width: 900px; margin: 0 auto 18px; font: 400 16px/26px var(--f-sys); color: #333; }
.prose p { margin: 0 0 14px; }
.prose h2, .prose h3, .prose h4 { font: 600 20px/1.3 var(--f-mont); color: var(--teal); margin: 26px 0 10px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 4px; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose img { border-radius: 16px; margin: 14px 0; }
.prose table { border-collapse: collapse; width: 100%; } .prose td, .prose th { border: 1px solid #ddd; padding: 8px 10px; text-align: left; }
.pimg { max-width: 900px; margin: 10px auto 26px; } .pimg img { border-radius: 16px; width: 100%; }
.faqrow { max-width: 1110px; margin: 0 auto 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.faqrow > * { min-width: 0; }
.faqrow.solo { grid-template-columns: minmax(0, 860px); justify-content: center; }
.faqrow.flip > img { order: -1; }
.faqrow > img { border-radius: 20px; width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.acc details { background: #f2f2f2; border-radius: 3px; margin-bottom: 8px; }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; font: 600 14px/1.4 var(--f-sys); color: #111; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.6px solid #333; border-bottom: 1.6px solid #333; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.acc details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.acc .ans { padding: 2px 18px 16px; font: 400 15px/24px var(--f-sys); color: #333; }
.acc .ans p { margin: 0 0 10px; }
.tabsec { background: var(--sat); padding: 46px 16px 40px; margin: 0 0 60px; }
.tabbtns { display: grid; gap: 12px; max-width: 560px; margin: 0 auto 30px; }
.tabbtns button { background: #f0f0f0; border-radius: 6px; padding: 14px; font: 600 15px/1.3 var(--f-sys); color: #111; }
.tabbtns button[aria-selected="true"] { background: var(--blue); color: #fff; }
.tabsec .pane { max-width: 900px; margin: 0 auto; text-align: center; font: 400 15px/24px var(--f-sys); color: #333; }
.tabsec .pane p { margin: 0 0 8px; } .tabsec .pane ul { display: inline-block; text-align: left; }
.btnrow { text-align: center; margin: 6px 0 36px; }
.cinfo { display: flex; justify-content: center; gap: 30px 60px; flex-wrap: wrap; text-align: center; font: 400 16px/26px var(--f-mont); margin-bottom: 30px; }
.cinfo b { color: var(--teal); }
.cinfo a { color: var(--teal); font-weight: 600; }
.mapbox { max-width: 1110px; margin: 0 auto 50px; background: #e9f2f5; border-radius: 16px; padding: 28px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.form { max-width: 740px; margin: 0 auto 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.form > * { min-width: 0; }
.form label { display: grid; gap: 6px; font: 700 12px var(--f-sys); color: #333; }
.form label.full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: 400 15px var(--f-sys); padding: 10px 12px; border: 1px solid #8a8a8a; border-radius: 2px; width: 100%; background: #fff; color: #222; }
.form textarea { min-height: 120px; resize: vertical; }
.form .cnt { justify-self: end; font: 400 12px var(--f-sys); color: #777; grid-column: 1 / -1; margin-top: -12px; }
.form button { justify-self: start; border: 1px solid var(--blue); color: var(--blue); border-radius: 3px; padding: 10px 26px; font: 400 15px var(--f-sys); }
.form button:hover { background: var(--blue); color: #fff; }
.rent { max-width: 1110px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; padding-bottom: 40px; }
.rent > * { min-width: 0; }
.rent img { max-height: 440px; margin: 0 auto; object-fit: contain; }
.rent .prose { font-family: var(--f-mont); font-size: 15px; line-height: 24px; }
.rent .rp { font: 600 18px var(--f-mont); color: var(--price); }
.form.r3 { grid-template-columns: repeat(3, 1fr); max-width: 1110px; }
.form.r3 input, .form.r3 select { border: 0; border-bottom: 1px solid #999; border-radius: 0; padding: 8px 2px; }
.postmeta { max-width: 900px; margin: 46px auto 0; font: 400 14px var(--f-sys); color: #333; display: grid; gap: 10px; }
.postmeta a { color: var(--blue); }
.post-title { max-width: 900px; margin: 10px auto 26px; font: 600 26px/1.3 var(--f-mont); color: var(--teal); }
/* Blogartikel: Inhalte in Karten wie auf cpapbg.com, die beim Scrollen hereinzoomen */
.postpage { position: relative; padding: 1px 0 0; background: #fff; } /* Seitenhintergrund weiß; Muster nur in der ersten Karte */
.postpage .postmeta, .postpage .post-title { position: relative; }
.pcards { max-width: 940px; margin: 0 auto; padding: 0 0 70px; display: grid; gap: 24px; }
.pcard-a { position: relative; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(21,89,108,.10); border-radius: 18px; box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 18px 40px -22px rgba(21,89,108,.45); padding: 32px 40px 30px; overflow: clip; }
.pcard-a.blue { background: linear-gradient(160deg, rgba(214,238,246,.92), rgba(199,230,240,.88)); border-color: rgba(0,146,187,.18); }
/* erste Karte wie im Original: Muster dezent im Kartenhintergrund, Text links, Bild rechts oben */
/* Linienmuster in allen Karten (wie die erste Karte im Original); Ausschnitt wechselt von Karte zu Karte */
.pcard-a::before { content: ""; position: absolute; inset: 0; background: url("../img/blog-muster.webp") left top / 1600px auto no-repeat; opacity: .6; pointer-events: none; }
.pcard-a:nth-child(2n)::before { background-position: right top; }
.pcard-a:nth-child(3n)::before { background-position: center bottom; }
.pcard-a.blue::before { display: none; } /* hellblaue Karten ohne Muster */
.pcard-a > * { position: relative; }
/* erste Karte: Bild rechts oben, der Text fließt daneben und darunter über die volle Breite weiter (kein Leerraum) */
.pcard-a .pic { float: right; width: 44%; margin: 4px 0 18px 32px; }
.pcard-a::after { content: ""; display: block; clear: both; }
.pcard-a .pic img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 26px -14px rgba(15,23,42,.45); }
.pcard-a h2 { font: 700 21px/1.3 var(--f-mont); color: var(--teal); margin: 26px 0 12px; }
.pcard-a > h2:first-child, .pcard-a .txt > h2:first-child { margin-top: 0; }
.pcard-a:not(.split) > h2:first-child { text-align: center; margin-bottom: 16px; }
.pcard-a .prose { font: 400 15.5px/1.7 var(--f-rob); color: var(--text); }
.pcard-a .prose p { margin: 0 0 14px; }
.pcard-a .prose > :last-child { margin-bottom: 0; }
.pcard-a .prose ul { margin: 0 0 14px; padding-left: 22px; }
.pcard-a .prose li { margin: 4px 0; }
.pcard-a .prose li::marker { color: var(--blue); }
.pcards .back { justify-self: center; margin-top: 8px; }
.zoom { opacity: 0; transform: scale(.94) translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.zoom.in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .pcard-a { background: rgba(255,255,255,.94); }
  .pcards { padding-inline: 16px; gap: 16px; }
  .pcard-a { padding: 22px 20px; border-radius: 14px; }
  .pcard-a .pic { float: none; width: auto; margin: 0 0 18px; }
  .pcard-a h2 { font-size: 18px; }
  .pcard-a::before { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) { .zoom { opacity: 1; transform: none; transition: none; } }
.blogpage .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding-bottom: 80px; }
.login { max-width: 420px; margin: 0 auto 80px; display: grid; gap: 14px; }
.login label { display: grid; gap: 6px; font: 600 14px var(--f-sys); }
.login input { font: 400 15px var(--f-sys); padding: 11px 12px; border: 1px solid #8a8a8a; border-radius: 3px; }
.login .btn { justify-self: start; }
.login p { text-align: center; font-size: 14px; } .login p a { color: var(--blue); text-decoration: underline; }
/* ESS-Test */
.ess { max-width: 860px; margin: 0 auto 80px; }
.ess .sub { text-align: center; font: 400 16px var(--f-mont); color: #555; margin: -30px 0 30px; }
.ess .lead { font: 600 18px/1.4 var(--f-mont); color: var(--teal); text-align: center; margin: 0 0 16px; }
.ess .scale { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; background: #f2f7f9; border-radius: 10px; padding: 14px; font: 600 14px var(--f-sys); color: var(--teal); margin: 18px 0 26px; }
.ess .bar { height: 10px; background: #e3edf1; border-radius: 5px; overflow: hidden; margin: 0 0 6px; } .ess .bar i { display: block; height: 100%; background: var(--blue); transition: width .3s; }
.ess .pct { text-align: right; font: 600 13px var(--f-sys); color: #555; margin-bottom: 22px; }
.ess .q { background: #f6f5f0; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.ess .q h3 { font: 600 17px/1.4 var(--f-mont); color: #111; margin: 0 0 14px; }
.ess .opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ess .opts label { position: relative; }
.ess .opts input { position: absolute; opacity: 0; }
.ess .opts span { display: block; text-align: center; padding: 11px 6px; border: 1px solid #c9d6db; border-radius: 8px; background: #fff; font: 500 15px var(--f-sys); cursor: pointer; }
.ess .opts input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.ess .opts input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.ess .nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.ess .nav .ghost { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.ess .res { text-align: center; background: #f2f7f9; border-radius: 16px; padding: 34px 20px; display: grid; gap: 14px; justify-items: center; }
.ess .res .score { font: 700 44px var(--f-mont); color: var(--teal); }
.ess .devnote { background: #fff7e0; color: #6b4e00; border: 1px dashed #d9bf72; border-radius: 8px; padding: 10px 14px; font: 13px/1.4 var(--f-sys); text-align: left; }
.ess .err { color: var(--price); font: 400 14px var(--f-sys); min-height: 20px; }
@media (max-width: 900px) {
  .faqrow, .rent { grid-template-columns: 1fr; } .faqrow.flip > img { order: 0; } .faqrow > img { max-height: 300px; }
  .form, .form.r3 { grid-template-columns: 1fr; } .blogpage .grid { grid-template-columns: 1fr; }
  .ptitle { font-size: 24px; margin: 34px auto 26px; } .ess .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Fußzeile ---------- */
footer { border-top: 1px solid var(--teal); }
footer .cols { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 46px 16px 40px; text-align: center; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li a { display: block; font: 600 14px/33px var(--f-mont); color: #000; padding: 0 20px; }
footer li a:hover { color: var(--blue); }
footer li a.on { background: var(--blue); color: #fff; }
footer .contact { display: grid; gap: 2px; justify-items: center; align-content: start; font: italic 400 16px/24px var(--f-mont); color: var(--teal); }
footer .soc { display: flex; gap: 10px; margin-top: 14px; }
footer .soc a { width: 26px; height: 26px; color: var(--teal); }
footer .soc svg { width: 26px; height: 26px; }
footer .copy { background: var(--teal); color: #fff; text-align: center; font: 400 16px/24px var(--f-rob); padding: 10px 16px; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr; gap: 10px; } }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 32px); background: var(--teal); color: #fff; padding: 12px 18px; border-radius: 4px; z-index: 40; font: 400 15px var(--f-sys); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.toast a { text-decoration: underline; font-weight: 700; margin-left: 10px; }
.loading { padding: 80px 0; text-align: center; color: #888; }

/* Versand-Hinweis unter „Бърза поръчка“ */
.ship-eta { width: 404px; max-width: 100%; margin: 4px 0 6px; display: grid; gap: 8px; font: 400 14px/20px var(--f-sys); color: var(--text); }
.ship-eta p { margin: 0; display: flex; align-items: flex-start; gap: 10px; }
.ship-eta b { font-weight: 700; color: var(--body); }
.ship-eta .dot { position: relative; flex: none; width: 10px; height: 10px; margin: 5px 3px 0 4px; border-radius: 50%; background: #22A559; }
.ship-eta .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22A559; animation: shipPulse 1.8s ease-out infinite; }
.ship-eta .truck { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--blue); }
@keyframes shipPulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ship-eta .dot::after { animation: none; } }
.ship-eta.in-cart { width: auto; margin: 0; gap: 4px; font-size: 12.5px; line-height: 17px; color: #64748B; } /* im Warenkorb dezenter */
.ship-eta.in-cart b { font-weight: 600; color: #475569; }
.ship-eta.in-cart p { gap: 8px; }
.ship-eta.in-cart .dot { width: 7px; height: 7px; margin: 5px 4px 0 3px; }
.ship-eta.in-cart .truck { width: 14px; height: 14px; margin-top: 1px; opacity: .8; }
.mega .tile img[src*="mc-diagnostika"] { object-fit: cover; border-radius: 12px; } /* Foto mit Hintergrund: gefüllt und abgerundet wie auf der alten Seite */
/* Ratenzahlung tbi bank: dezenter Hinweis unter dem Preis (im Shop: Ausgabe des Plugins „Fusion Pay by tbi bank“) */
.tbi { margin: 4px 0 16px; font: 400 14px/1.45 var(--f-rob); color: #6b7280; }
.tbi:empty { display: none; }
/* Logo so skaliert, dass „bank“ (im Bild 62 px Oberlänge, Grundlinie 59 px über der Unterkante, Bildhöhe 180 px)
   genau die Oberlänge der Zeilenschrift hat (--tbi-asc, gemessen) und auf derselben Grundlinie steht */
.tbi { --tbi-asc: .76; }
.tbi .tbi-logo { display: inline-block; height: calc(var(--tbi-asc) * 180 / 62 * 1em); width: auto; vertical-align: calc(var(--tbi-asc) * -59 / 62 * 1em); }
.tbi .tbi-calc { background: none; border: 0; padding: 0; font: inherit; color: #4b5563; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.tbi .tbi-calc:hover, .tbi .tbi-calc:focus-visible { color: var(--blue); }
.tbi-dlg { border: 0; border-radius: 14px; padding: 26px 24px 20px; max-width: min(420px, calc(100vw - 32px)); box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); font: 400 15px/1.5 var(--f-rob); color: var(--text); text-align: center; }
.tbi-dlg::backdrop { background: rgba(15, 23, 42, .45); }
.tbi-dlg h3 { margin: 0 0 10px; font: 700 17px/1.3 var(--f-rob); color: var(--teal); }
.tbi-dlg p { margin: 0 0 18px; }
.tbi-dlg button { background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 9px 22px; font: 600 14px var(--f-rob); cursor: pointer; }
/* Handy: Zeile bleibt einzeilig – Schrift (und damit Logo) wird auf schmalen Geräten minimal kleiner (Zeile ≈ 26 em breit) */
@media (max-width: 560px) { .tbi { font-size: min(13.5px, calc((100vw - 32px) / 26)); margin-bottom: 14px; white-space: nowrap; } }
/* Produktbilder per Wischen (Finger/Maus) wechseln; senkrechtes Scrollen bleibt möglich */
.gal .main { touch-action: pan-y pinch-zoom; overflow: hidden; user-select: none; -webkit-user-select: none; }
.gal .main.swipe { cursor: grab; }
.gal .main.swipe.drag { cursor: grabbing; }
.gal .main img { -webkit-user-drag: none; will-change: transform; }

/* ---------- Moderne Ebene ---------- */

/* ===== Moderne Variante (Design-System aus „UI/UX Pro Max“, Profil Healthcare/Medical) =====
   Gleicher Aufbau wie der 1:1-Entwurf; diese Schicht ändert nur Farben, Schrift, Rundungen, Schatten und Hover.
   Palette: Firmenblau #0092bb (von der alten Seite, Wunsch des Betreibers) für alle Akzente, Dunkeltürkis #15596c, Preise #DC2626.
   Schrift: Manrope (Überschriften, statt Figtree – Figtree hat keine kyrillischen Zeichen) + Noto Sans (Text). */
:root {
  --blue: #0092bb; --teal: #15596c; --text: #334155; --body: #1E293B; --price: #DC2626; --sale: #DC2626;
  --card: #FFFFFF; --sat: #E6F4F8; --tile: #F1F7F9; --muted: #F1F7F9; --line: #E2E8F0; --accent: #0092bb;
  --soft: #E6F4F8; --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06); --shadow-h: 0 2px 4px rgba(15,23,42,.05), 0 16px 36px rgba(0,146,187,.14);
  --f-mont: "Manrope", "Noto Sans", sans-serif; --f-rob: "Noto Sans", sans-serif; --f-sys: "Noto Sans", -apple-system, "Segoe UI", sans-serif;
  --r: 16px;
}
body { color: var(--body); -webkit-font-smoothing: antialiased; }
a, button, [role=button] { cursor: pointer; }
:focus-visible { outline: 3px solid rgba(0,146,187,.55); outline-offset: 3px; border-radius: 6px; }
.slide .h1, .slide .model, .pill { -webkit-text-stroke: 0 !important; }

/* Kopf */
.topbar { background: #0092bb; font-weight: 500; }
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.hrow { border-bottom: 1px solid var(--line); }
nav.main { background: transparent; }
nav.main > ul > li > a { font-family: var(--f-mont); font-weight: 600; font-size: 16px; color: var(--teal); transition: color .2s; }
nav.main > ul > li > a:hover, nav.main > ul > li.on > a:not(.promo) { color: var(--blue); }
nav.main > ul > li > a.promo { color: var(--sale); }
.mega { border-top: 1px solid var(--line); box-shadow: 0 24px 40px -20px rgba(15,23,42,.18); }
.mega .tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .2s, box-shadow .2s, border-color .2s; color: var(--teal); }
.mega .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); border-color: #7FC8DD; background: #fff; }
.icons button, .icons a { border-radius: 10px; transition: background .2s; }
.icons button:hover, .icons a:hover { background: var(--muted); }

/* Slider */
/* Slider-Hintergrund modern: Verlauf im Firmenblau mit weichen Lichtflecken und feinem Punktraster.
   Zurück zur Betonoptik: <body class="hero-beton"> setzen (Regel darunter bleibt erhalten). */
.slide .band { background:
  radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.6px) 0 0 / 22px 22px,
  radial-gradient(900px 520px at 78% 38%, rgba(56,200,240,.45), transparent 62%),
  radial-gradient(700px 420px at 8% 105%, rgba(0,146,187,.35), transparent 60%),
  linear-gradient(125deg, #022c3a 0%, #00465b 42%, #006f8f 75%, #0092bb 100%); }
.slide .band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); }
.hero-beton .slide .band { background: #0b3d4d linear-gradient(120deg, rgba(0,62,80,.55), rgba(0,146,187,.15)), url("../img/bg-textur.webp") center / cover; }
.hero-beton .slide .band::after { display: none; }
.slide .h1 { font-weight: 800; letter-spacing: -.02em; }
.slide .model { font-weight: 600; }
.kicker { color: #BFE6F1; }
.pill { border-radius: 14px; font-weight: 700; border-color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: transform .2s, background .2s, color .2s; }
.pill:hover { transform: translateY(-2px); }
.slide .cards div { border-radius: 20px; background: linear-gradient(160deg, #0092bb, #005a73); border: 1px solid rgba(191,230,241,.3); box-shadow: 0 24px 48px -12px rgba(0,62,80,.45); font-family: var(--f-rob); line-height: 22px; }
.slider { background: #fff; }

/* Buttons */
.obtn { border-radius: 12px; font-family: var(--f-mont); font-weight: 700; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.obtn.teal { background: var(--blue); color: #fff; border-color: var(--blue); }
.obtn.teal:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,146,187,.25); }
.diag .obtn:hover { background: #fff; color: var(--teal); }
.btn, .bbtn { border-radius: 12px; font-family: var(--f-mont); font-weight: 700; transition: background .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,146,187,.25); background: var(--teal); }
.bbtn.add { background: var(--blue); } .bbtn.quick { background: var(--teal); }

/* Abschnitte */
.diag h2, .types h2, .why-h, .faq h2, .sat h2, .blog h2 { font-weight: 800; letter-spacing: -.01em; }
h2.it, .help h3, .types h3, .why h3, .rev h3 { font-style: normal; font-weight: 800; letter-spacing: -.01em; }
.just p, .help .cols p, .types p, .rev p, .blog .intro { color: var(--text); font-family: var(--f-rob); }
.rimg { border-radius: 24px; box-shadow: var(--shadow); }
.types .cols > div { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 24px 32px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.types .cols > div:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
/* Überschriften, Texte und Buttons der drei Maskenkarten auf einer Linie (gemeinsame Zeilen per Subgrid) */
@media (min-width: 761px) {
  .types .cols { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
  .types .cols > div { grid-row: span 4; grid-template-rows: subgrid; }
  .types h3 { min-height: 0; align-self: center; }
}
.types img { width: 200px; }
.types h3 { margin: 18px 0 16px; min-height: 0; }
.types p { margin-bottom: 24px; }
.brands { border-radius: 20px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.why { background: linear-gradient(135deg, #005a73, #0092bb); }
.why img { filter: brightness(0) invert(1); opacity: .95; }
.why .wrap > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 32px 22px; }
.why h3 { margin-bottom: 14px; min-height: 0; }
.faq a { border-radius: 20px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.faq a::before { background: linear-gradient(180deg, rgba(0,62,80,.15), rgba(0,62,80,.72)); }
.faq a:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.faq a span { font-family: var(--f-mont); font-weight: 700; }
.sat { background: linear-gradient(180deg, #E6F4F8, #F2F9FB); }
.sat .s1 { color: var(--accent); font-weight: 700; }
.sat .cards { align-items: stretch; }
.rev { border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.post { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.post .b { border-bottom-color: var(--line); }
.post h3 { font-weight: 700; }
.post .more { color: var(--blue); font-family: var(--f-mont); font-weight: 700; }
.post .meta { font-family: var(--f-rob); color: #64748B; }

/* Produkte */
.band-title, .band-title.naem { background: #fff; }
.band-title h1 { font-family: var(--f-mont); font-weight: 800; color: var(--teal); letter-spacing: -.02em; }
.pgrid { gap: 24px; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px 18px 26px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.pcard .cats { color: #64748B; font-size: 13px; }
.pcard h3 { font-family: var(--f-mont); font-weight: 700; font-size: 18px; line-height: 25px; color: var(--blue); } /* Produktnamen im Firmenblau */
/* Preise rot wie auf der alten Seite (#DC2626 = Signalrot des Design-Systems, 4,8:1 auf Weiß) */
.pr { font-family: var(--f-mont); font-weight: 800; color: var(--price); font-size: 16px; }
.pr del { color: #94A3B8; font-weight: 500; }
.pr ins { text-decoration: none; color: var(--price); }
.s-card .pr { color: var(--price); font-weight: 700; }
.s-card .pr ins { text-decoration: none; color: var(--price); }
.buy .pr { font-size: 24px; line-height: 32px; }
.out { border-radius: 8px; background: #64748B; }
/* ausverkauft: Button grau und nicht anklickbar */
.btn.off, .btn.off:hover { background: #CBD5E1; color: #475569; cursor: not-allowed; transform: none; box-shadow: none; }
.filt .fb button { border-radius: 10px; background: #fff; border-color: var(--line); color: var(--teal); }
.filt .fb button:first-child { background: var(--blue); border-color: var(--blue); color: #fff; }
.filt label { color: var(--text); }
.naem-grid .pr { color: var(--sale); }
.buy h1 { font-family: var(--f-mont); font-weight: 800; letter-spacing: -.02em; color: var(--blue); }
.sw button { border-radius: 10px; border-color: var(--line); }
.sw button[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.qty-in { border-radius: 12px; border-color: var(--line); }
.notice { border-radius: 12px; box-shadow: none; }
.tabs button { border-radius: 12px 12px 0 0; }
.sum { border-radius: 20px; background: var(--muted); }
.acc details { border-radius: 12px; background: var(--muted); }
.tabbtns button { border-radius: 12px; }
.tabsec { background: linear-gradient(180deg, #E6F4F8, #F2F9FB); }
.ptitle { font-family: var(--f-mont); font-weight: 800; letter-spacing: -.02em; }
.form input, .form select, .form textarea, .login input { border-radius: 10px; border-color: #CBD5E1; }
.form button { border-radius: 12px; }

/* Suche */
.s-box { border-radius: 24px; }
.s-field { border-radius: 12px; border: 1px solid var(--line); border-bottom: 2px solid var(--blue); }
.s-card { border-radius: 16px; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.s-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }

/* Fußzeile */
footer { border-top: 0; background: #F8FAFC; }
footer li a { color: var(--teal); font-family: var(--f-mont); font-weight: 600; border-radius: 8px; }
footer .copy { background: #0092bb; }

@media (prefers-reduced-motion: reduce) { .pcard, .post, .faq a, .types .cols > div, .mega .tile, .btn, .obtn, .pill { transition: none; } .pcard:hover, .post:hover, .faq a:hover, .types .cols > div:hover { transform: none; } }
/* Unschärfe-Effekt würde das ausklappbare Handy-Menü (position: fixed) auf die Kopfzeile begrenzen */
@media (max-width: 1024px) { header.site { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } nav.main { background: #fff; } }
@media (max-width: 760px) {
  .topbar { font-size: 13px; }
  .types .cols > div { padding: 22px 18px 26px; }
  .why .wrap { gap: 16px; }
  .brands { margin-inline: 16px; }
}

/* Startseite – moderner Kopfbereich (template-parts/start-hero.php; zurück zum Slider: Option „cpapbg_startseite“ = „alt“) */
.hero2 { position: relative; overflow: hidden; background: linear-gradient(180deg, #F5FAFC 0%, #EAF5F9 62%, #fff 92%); }
.hero2 + .diag { margin-top: 72px; } /* weißer Abstand zum Online-Test (ca. drei Finger) */
@media (max-width: 760px) { .hero2 + .diag { margin-top: 48px; } }
.hero2-track { display: grid; }
.hero2-slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.hero2-slide.on { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.hero2-nav { position: absolute; z-index: 3; top: calc(50% - 90px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--teal); border: 1px solid rgba(21,89,108,.14); box-shadow: 0 8px 20px -10px rgba(15,23,42,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.hero2-nav:hover { background: #fff; transform: scale(1.06); }
.hero2-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero2-nav.prev { left: 16px; } .hero2-nav.next { right: 16px; }
.hero2-dots { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; }
.hero2-dots button { position: relative; width: 10px; height: 10px; border-radius: 99px; background: rgba(21,89,108,.25); transition: width .3s, background .3s; }
.hero2-dots button::before { content: ""; position: absolute; inset: -10px; }
.hero2-dots button[aria-current="true"] { width: 26px; background: var(--blue); }
.hero2-pic { position: absolute; top: 0; right: 0; bottom: 120px; width: 78%; }
.hero2-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 88%; }
.hero2-pic img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 44%), linear-gradient(0deg, transparent 0%, #000 30%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 44%), linear-gradient(0deg, transparent 0%, #000 30%); mask-composite: intersect; } /* Foto läuft links und unten weich in den Hintergrund aus */
.hero2-in { position: relative; z-index: 1; min-height: 520px; display: flex; align-items: center; }
.hero2-txt { max-width: 560px; padding-block: 64px 44px; }
.hero2-eyebrow { display: flex; align-items: center; gap: 12px; font: 600 13px/1 var(--f-mont); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.hero2-eyebrow::before { content: ""; width: 32px; height: 2px; border-radius: 2px; background: currentColor; }
.hero2-h { margin: 20px 0 0; font: 800 clamp(36px, 4.2vw, 54px)/1.08 var(--f-mont); letter-spacing: -.02em; color: var(--teal); }
.hero2-h span { display: block; color: var(--blue); }
.hero2-txt p { margin: 22px 0 0; font: 400 19px/1.55 var(--f-sys); color: var(--text); max-width: 440px; }
.hero2-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 34px; } /* beide Knöpfe untereinander, auf allen Folien gleich */
.hero2-cta, .hero2-ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; font: 700 16px/1 var(--f-mont); transition: transform .2s, box-shadow .2s, background .2s; }
.hero2-cta { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -8px rgba(0,146,187,.55); }
.hero2-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.hero2-cta:hover { background: #007fa3; transform: translateY(-1px); }
.hero2-cta:hover svg { transform: translateX(3px); }
.hero2-ghost { background: rgba(255,255,255,.8); color: var(--teal); border: 1px solid rgba(21,89,108,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero2-ghost:hover { background: #fff; transform: translateY(-1px); }
.hero2-feat { position: relative; z-index: 1; list-style: none; margin: 0 0 40px; padding: 22px 8px; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.94); color: var(--body); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(226,232,240,.9); box-shadow: var(--shadow); }
.hero2-feat li { display: flex; align-items: center; gap: 14px; padding: 4px 20px; }
.hero2-feat li + li { border-left: 1px solid var(--line); }
.hero2-feat b { display: block; font: 700 15px/1.3 var(--f-mont); color: var(--teal); margin-bottom: 3px; }
.hero2-feat li > span:last-child { font-size: 13.5px; line-height: 1.4; color: #64748b; }
.hero2-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); box-shadow: 0 6px 16px -6px rgba(0,146,187,.6); }
.hero2-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .hero2-cta, .hero2-ghost, .hero2-cta svg, .hero2-slide, .hero2-nav, .hero2-dots button { transition: none; } }
@media (max-width: 1100px) {
  .hero2-feat { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .hero2-feat li:nth-child(3) { border-left: 0; }
}
@media (max-width: 860px) {
  .hero2-pic { position: relative; display: block; bottom: auto; width: 100%; height: auto; aspect-ratio: 800 / 479; margin: 0; }
  .hero2-pic img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); } /* Handy: Foto nur unten weich auslaufend, an den Seiten bis zum Rand */
  .hero2-nav { display: none; }
  .hero2-pic img { object-position: center; }
  .hero2-in { min-height: 0; margin-top: -14px; position: static; }
  /* Handy: Kennzeichnung („Сънна апнея“ / „CPAP маски“) oben links auf dem Foto */
  .hero2-eyebrow { position: absolute; z-index: 2; top: 16px; left: 16px; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
  .hero2-txt { padding-block: 0 28px; max-width: none; }
  .hero2-h { margin-top: 14px; font-size: clamp(32px, 9vw, 44px); }
  .hero2-txt p { font-size: 17px; margin-top: 14px; min-height: 4.65em; } /* immer drei Zeilen hoch: Knöpfe stehen auf allen Folien gleich hoch */
  .hero2-btns { margin-top: 24px; }
  .hero2-btns { align-items: stretch; }
  .hero2-cta, .hero2-ghost { justify-content: center; }
  .hero2-feat { display: none; } /* Handy: aufgeräumter, ohne Vorteile-Leiste */
  .hero2-slide { padding-bottom: 44px; }
}

/* Handy: zwei Produkte nebeneinander (Kategorien, Suche, Promotionen) */
@media (max-width: 560px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .pgrid .pcard { padding: 8px 10px 14px; border-radius: 14px; }
  .pgrid .pcard .pic { aspect-ratio: 1; }
  .pgrid .pcard .cats { display: none; }
  .pgrid .pcard h3 { font-size: 14px; line-height: 19px; margin: 6px 0 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .pgrid .pcard .pr { margin-bottom: 12px; font-size: 14px; line-height: 19px; }
  .pgrid .pcard .btn { width: 100%; min-height: 38px; padding: 8px 6px; font-size: 13px; }
  .pgrid .pcard .badge-sale { top: 8px; left: 8px; transform: scale(.85); transform-origin: top left; }
}

/* Produktseite: „Вижте още …“ – weitere Produkte der Kategorie, seitlich wischbar (Computer: mit Pfeilen) */
.related { padding: 8px 0 72px; }
.related h2 { font: 800 clamp(22px, 2.4vw, 28px)/1.2 var(--f-mont); color: var(--teal); margin: 0 0 18px; letter-spacing: -.01em; }
.related-wrap { position: relative; }
.related-track { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 6px; scrollbar-width: none; margin: -10px -6px; padding: 10px 6px 26px; -webkit-overflow-scrolling: touch; }
.related-track::-webkit-scrollbar { display: none; }
.related-track:focus-visible { outline-offset: -2px; }
.related .pcard { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; }
.related-nav { position: absolute; top: 38%; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--teal); border: 1px solid var(--line); box-shadow: 0 8px 20px -8px rgba(15,23,42,.45); transition: transform .2s, opacity .2s; }
.related-nav:hover { transform: scale(1.06); }
.related-nav[hidden] { display: none; }
.related-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.related-nav.prev { left: -20px; } .related-nav.next { right: -20px; }
@media (max-width: 1024px) { .related .pcard { flex-basis: calc((100% - 32px) / 3); } .related-nav.prev { left: -8px; } .related-nav.next { right: -8px; } }
@media (max-width: 760px) {
  .related { padding-bottom: 48px; }
  .related-track { gap: 10px; }
  .related .pcard { flex-basis: calc((100% - 10px) / 2); }
  .related-nav { display: none; } /* Handy: wischen */
}
@media (max-width: 560px) {
  .related .pcard { padding: 8px 10px 14px; border-radius: 14px; }
  .related .pcard .pic { aspect-ratio: 1; }
  .related .pcard .cats { display: none; }
  .related .pcard h3 { font-size: 14px; line-height: 19px; margin: 6px 0 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .related .pcard .pr { margin-bottom: 12px; font-size: 14px; line-height: 19px; }
  .related .pcard .btn { width: 100%; min-height: 38px; padding: 8px 6px; font-size: 13px; }
  .related .pcard .badge-sale { top: 8px; left: 8px; transform: scale(.85); transform-origin: top left; }
}

/* Warenkorb: „Подходящи продукти за Вас“ unter Tabelle und Summe */
.cart:has(+ .cart-rel) { padding-bottom: 8px; } /* Vorschläge rücken näher an Warenkorb und Summe */
.cart-rel { padding: 0 0 20px; }
.cart-rel .wrap { padding-top: 0; }
.cart-rel h2 { margin-top: 0; }

/* Produktkarten: Bild, Kategorie, Name, Preis und Knopf stehen in jeder Reihe auf gleicher Höhe (auch wenn ein Name 2 oder 3 Zeilen hat).
   Technik: jede Karte übernimmt die Zeilen des Rasters („subgrid“); ältere Browser zeigen die Karten wie bisher. */
@supports (grid-template-rows: subgrid) {
  .pgrid > .pcard, .related-track > .pcard { grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .pgrid .pcard .pic, .related-track .pcard .pic { grid-row: 1; }
  .pgrid .pcard .cats, .related-track .pcard .cats { grid-row: 2; }
  .pgrid .pcard h3, .related-track .pcard h3 { grid-row: 3; }
  .pgrid .pcard .pr, .related-track .pcard .pr { grid-row: 4; }
  .pgrid .pcard .btn, .related-track .pcard .btn { grid-row: 6; align-self: end; }
  /* „Вижте още …“ / Warenkorb-Vorschläge: Reihe als Raster mit sechs Zeilen, Karten laufen nach rechts weiter */
  .related-track { --n: 4; --g: 16px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); grid-auto-columns: calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); column-gap: var(--g); row-gap: 0; }
  .related .pcard { flex: none; }
}
@supports (grid-template-rows: subgrid) {
  @media (max-width: 1024px) { .related-track { --n: 3; } }
  @media (max-width: 760px) { .related-track { --n: 2; --g: 10px; } }
}

/* Fußzeilen-Leiste: Lieferdienste links, Logo groß in der Mitte, Zahlungsarten rechts */
footer .fstrip { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: 28px 16px 32px; border-top: 1px solid #E2E8F0; }
footer .fs-side { display: grid; gap: 8px; align-content: center; }
footer .fs-pay { justify-items: end; }
footer .fs-ship { justify-items: start; }
footer .fs-label { font: 600 12px/16px var(--f-mont); letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
footer .fs-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 12px; }
footer .fs-pay .fs-logos { justify-content: flex-end; }
footer .fs-logos img { height: 20px; width: auto; }
footer .fs-pay .fs-logos img { height: 21px; width: auto; }
footer .fs-logos img[alt^="Еконт"] { height: auto; width: 75px; }
footer .fs-logos img[alt^="Спиди"] { height: auto; width: 75px; }
footer .fs-logo { display: block; justify-self: center; }
footer .fs-logo img { display: block; width: 280px; max-width: 100%; height: auto; }
@media (max-width: 900px) {
  footer .fstrip { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; }
  footer .fs-logo { order: -1; }
  footer .fs-logo img { width: 240px; }
  footer .fs-ship, footer .fs-pay { justify-items: center; }
  footer .fs-logos, footer .fs-pay .fs-logos { justify-content: center; }
}

/* Cookie-Hinweis: schwebender „Управление на съгласието“-Knopf unten rechts ausgeblendet. Einwilligung ändern: Seite „Информация за бисквитки“ (Fußzeile), dort Link „Управление на съгласието“. */
button.cmplz-btn.cmplz-manage-consent { display: none !important; }

/* Produktseite: Hinweisfeld („Моля, четете нашето упътване …“) so breit wie Mengenfeld und Knöpfe (404 px), damit die rechte Kante gerade ist */
.buy .notice { display: block; width: 404px; max-width: 100%; box-sizing: border-box; padding-inline: clamp(8px, 2.5vw, 14px); font-size: clamp(9.6px, 3.05vw, 14px); white-space: nowrap; text-align: center; } /* eine Zeile: Schrift etwas kleiner, auf dem Handy mit der Breite */

/* Produktseiten: Zwischenüberschriften der Beschreibung im Blau von Kopfband und Knöpfen (von Daniel freigegeben, 31.10.) */
.tabp h3 { color: var(--blue); }

/* Kategorie auf dem Handy: Filter eingeklappt, Knopf „Филтри“ klappt sie auf (Computer und Tablet unverändert) */
.filt-toggle { display: none; }
@media (max-width: 760px) {
  .filt-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; padding: 0 18px; background: #fff; border: 1.5px solid var(--blue); border-radius: 14px; color: var(--teal); font: 700 16px var(--f-mont); cursor: pointer; box-shadow: var(--shadow); }
  .filt-toggle svg { width: 22px; height: 22px; flex: none; }
  .filt-toggle .chev { width: 18px; height: 18px; transition: transform .25s; }
  .filt-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .filt-count { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 11px; background: var(--blue); color: #fff; font: 700 12px/1 var(--f-mont); }
  .filt-count[hidden] { display: none; }
  .filt { display: none; }
  .filt.open { display: grid; gap: 12px; padding: 20px 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
  /* Auswahlfelder nebeneinander statt untereinander (spart Platz bei vielen Größen) */
  .filt.open > div:not(:has(.range)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0 8px; align-content: start; }
  .filt.open > div:has([data-f="brand"]) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .filt.open > div > h4 { grid-column: 1 / -1; margin-bottom: 2px; }
  .filt.open label { min-height: 30px; gap: 8px; font-size: 13.5px; line-height: 20px; }
  .filt.open > div + div { padding-top: 12px; border-top: 1px solid #E5E7EB; } /* dünne graue Trennlinien zwischen den Filtergruppen unterhalb des Preises */
  .filt.open > .fb + div { padding-top: 0; border-top: 0; }
  .filt.open > div:has(.range), .filt.open > div:has(.range) + div { padding-top: 0; border-top: 0; } /* keine Linie über „Цена“ und direkt darunter; Linien nur zwischen den Gruppen danach */
  .filt.open > div:not(.fb):not(.fg-size):not(:has(.range)):not(:has([data-f="brand"])) { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); } /* lange Bezeichnungen („без овлажнител“) nicht umbrechen */
  .filt .fb { position: sticky; bottom: 0; background: #fff; padding-top: 6px; }
  .filt .fb button { flex: 1; height: 46px; }
  .pgrid { scroll-margin-top: 90px; }
}

/* Kategorie-Filter (Computer/Tablet): Die Liste filtert sofort, der Knopf „Филтър“ entfällt. „Изчисти“ erscheint als schlichter Text-Link nur, wenn etwas gewählt ist. Auf dem Handy bleiben beide Knöpfe. */
@media (min-width: 761px) {
  .filt .fb #fApply { display: none; }
  .filt:not(.has-filter) .fb { display: none; }
  .filt .fb #fClear { height: auto; padding: 0; background: none; border: 0; border-radius: 0; color: var(--blue); font: 600 14px/20px var(--f-mont); text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .filt .fb #fClear::before { content: "✕"; display: inline-block; margin-right: 6px; font-size: 12px; text-decoration: none; }
  .filt .fb #fClear:hover { color: var(--teal); }
}

/* Kategorie (Handy): Überschrift mittig zwischen Kopfzeile (unterer Strich) und Filter-Knopf – gleicher Abstand oben und unten. */
@media (max-width: 760px) {
  .band-title:has(+ .cat) { padding-block: 49px 19px; }
}

/* Под наем (Handy): Überschrift mittig – 46 px oben (ab Kopfzeile) und unten (bis zum ersten Gerät); zwei Geräte nebeneinander. */
@media (max-width: 760px) {
  .band-title.naem { padding-block: 26px; }
  .naem-grid { padding-block: 0 50px; }
}
@media (max-width: 560px) {
  .naem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .naem-grid .pcard { padding: 14px 10px; }
  .naem-grid h3 { font-size: 14px; line-height: 19px; margin: 12px 0 8px; }
  .naem-grid .pr { font-size: 14px; margin-bottom: 12px; }
  .naem-grid .btn { width: 100%; padding: 9px 6px; font-size: 13px; }
}

/* Produktkarte mit Stichpunkten (z. B. Filter): Titel, darunter kurze Liste „für …, Filterleistung, Packung mit …“ */
.pcard .ptxt { align-self: start; margin: 0 0 20px; min-width: 0; }
.pcard .ptxt h3 { margin: 0 0 12px; }
.pcard .pbul { display: inline-block; margin: 0; padding: 0 0 0 18px; text-align: left; font: 400 14px/20px var(--f-sys); color: var(--text); }
.pcard .pbul li { margin: 2px 0; }
@media (max-width: 560px) {
  .pgrid .pcard .ptxt { margin-bottom: 10px; }
  .pgrid .pcard .ptxt h3 { margin: 6px 0 8px; }
  .pgrid .pcard .pbul { font-size: 12.5px; line-height: 17px; padding-left: 15px; }
}
@supports (grid-template-rows: subgrid) { .pgrid .pcard .ptxt, .related-track .pcard .ptxt { grid-row: 3; } }

/* Produktkarten: Kategorie-Zeile unter dem Bild entfällt (wie auf dem Handy) */
.pcard .cats { display: none; }
@media (min-width: 561px) {
  .pcard > h3, .pcard > .ptxt { margin-top: 22px; }
}

/* Stichpunkte unter dem Titel der Produktkarte ausgeblendet (Stückzahl steht im Titel) */
.pcard .pbul { display: none; }
.pcard .ptxt { margin-bottom: 24px; }
.pcard .ptxt h3 { margin-bottom: 0; }
@media (max-width: 560px) { .pgrid .pcard .ptxt { margin-bottom: 0; } .pgrid .pcard .ptxt h3 { margin: 6px 0 10px; } }

/* Produktseite: nicht lieferbare Auswahl (z. B. „с QuietAir“) grau, aber noch wählbar */
.sw button.na { color: #9aa3ab; background: #f3f5f6; border-color: #dde2e6; }
.sw button.na[aria-pressed="true"] { color: #6b747c; border-color: var(--blue); }

/* Produktseite (Probe): Auswahlgruppen (z. B. Größe und QuietAir) nebeneinander in einer Reihe; auf dem Handy untereinander (Abstand 20 px). Zurück: diesen Block ersetzen durch „.attr + .attr { margin-top: 20px; }“ */
.attr + .attr { margin-top: 20px; }
@media (min-width: 561px) {
  .attr { display: inline-block; vertical-align: top; }
  .attr + .attr { margin: 46px 0 0 36px; }
}