:root {
  --primaryBackground: #00257e;
  --primaryBackgroundColor: #ffffff;
}

.visually-hidden {clip: rect(0 0 0 0);clip-path: inset(50%);height: 1px;overflow: hidden;position: absolute;white-space: nowrap;width: 1px;}
.cs-miniButtons .cs-searchBar {display: none;}
.cs-topsearch {position: relative;width: 40%;}
.cs-topsearch svg {position: absolute;right: 14px;top: 5px;width: 25px;cursor: pointer;}
.cs-topsearch svg path {fill: #1dae45;}
.cs-topsearch input {border: 0;max-width: 100%;border-radius: 36px;padding-left: 19px;width: 47em;border: 1px solid #dadadd ;}
.cs-topsearch #liveSearchResult {position: absolute !important;z-index: 999;width: 100%;padding: 16px;border-radius: 22px;}
.cs-topsearch #liveSearchResult ul.cs-livesearch li {background: #000;border-bottom: 0.1em solid #fff;padding: 3px 10px;border-radius: 13px;}
article.cs-articlePreview .cs-hoverlay {display: none !important;}

header .cs-miniButtons {padding-right: 10px;}
header .cs-miniButtons > ul {gap: 16px;flex-wrap: wrap;}
header .cs-miniButtons > ul > li {margin: 0 0.3em;margin: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 57px;cursor: pointer;}
header .cs-miniButtons > ul > li > a,
header .cs-miniButtons > ul > li button,
header .cs-miniButtons > ul > li .searchIcon {display: flex;;width: 40px;height: 40px;background: var(--primaryBackground) !important;border-radius: 250px;display: flex;align-items: center;justify-content: center;}
header .cs-miniButtons > ul > li svg.cs-svgIcon {margin: 0;width: 25px;height: 25px;}
header .cs-miniButtons > ul > li.cs-logout svg.cs-svgIcon {position: relative;left: 2px;}
header .cs-miniButtons > ul > li svg.cs-svgIcon path {fill: var(--primaryBackgroundColor);}
header .cs-miniButtons > ul > li span {display: block;text-transform: uppercase;font-weight: 600;font-size: 11px;margin-top: 4px;color: var(--primaryBackground);}
header .cs-miniButtons > ul > li.cs-miniwk span {left: auto;}
header .cs-miniButtons > ul > li .cs-svgIcon.cs-heartIcon {top: 2px;position: relative;}

.cs-categoriesTop .cs-categories1 > li > .cs-menuItem .cs-categorieName.active {border-bottom: 3px solid var(--primaryBackground);}
.cs-searchBar .cs-searchBlock {left: -120px;}
/* BETTMER – CSS: Design > eigene Ergänzungen */
.bettmer-themenwelt{--bet-blue:#173F82;--bet-red:#e30613;--bet-pale:#f4f8fd;font-family:Poppins,Arial,sans-serif;color:#23354d;font-size:15px;line-height:1.6;max-width:1260px;margin:0 auto;background:#fff}
.bettmer-themenwelt *{box-sizing:border-box}
.bettmer-themenwelt h1,.bettmer-themenwelt h2,.bettmer-themenwelt h3{font-family:inherit;color:var(--bet-blue);font-weight:700;letter-spacing:-.035em;white-space:normal;margin:0;line-height:1.17}
.bettmer-themenwelt p{margin:12px 0 20px}
.bettmer-themenwelt .bettmer-eyebrow{display:block;text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:600;color:var(--bet-blue);margin-bottom:12px}
.bettmer-themenwelt .bettmer-eyebrow:before{content:'';display:block;width:38px;height:4px;background:var(--bet-red);margin-bottom:12px}
.bettmer-themenwelt .bettmer-eyebrow-light{color:#fff}
.bettmer-themenwelt .bettmer-hero{display:grid;grid-template-columns:1fr 1.1fr;min-height:390px;background:var(--bet-blue);overflow:hidden}
.bettmer-themenwelt .bettmer-hero-copy{padding:42px 28px 42px 48px;color:#fff;align-self:center}
.bettmer-themenwelt .bettmer-hero h1{color:#fff;font-size:clamp(32px,4.2vw,52px)}
.bettmer-themenwelt .bettmer-hero p{max-width:490px;font-size:16px;color:#fff}
.bettmer-themenwelt .bettmer-hero-media{min-width:0;min-height:300px}
.bettmer-themenwelt .bettmer-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bettmer-themenwelt .bettmer-button{display:inline-block;background:var(--bet-red);color:#fff!important;text-decoration:none;padding:13px 21px;border-radius:3px;font-weight:600;font-size:15px;line-height:1.4;transition:background .2s}
.bettmer-themenwelt .bettmer-button:hover{background:#b90010;color:#fff!important}
.bettmer-themenwelt a:focus-visible{outline:3px solid #ffbe35;outline-offset:4px}
.bettmer-themenwelt .bettmer-services{padding:48px 30px 52px}
.bettmer-themenwelt .bettmer-services h2{font-size:clamp(27px,3.3vw,40px);margin-bottom:24px}
.bettmer-themenwelt .bettmer-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bettmer-themenwelt .bettmer-card{border:1px solid #dbe7f3;border-radius:7px;background:#fff;overflow:hidden;min-width:0}
.bettmer-themenwelt .bettmer-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:104px;background:linear-gradient(90deg,#f3f8fd,#fff)}
.bettmer-themenwelt .bettmer-card-heading{display:flex;align-items:center;gap:13px;padding:16px;min-width:0}
.bettmer-themenwelt .bettmer-card h3{font-size:clamp(17px,1.8vw,22px)}
.bettmer-themenwelt .bettmer-icon{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:#e5f2fc;color:var(--bet-blue);font-size:28px;font-weight:600}
.bettmer-themenwelt .bettmer-card-top img{width:32%;height:104px;object-fit:cover;object-position:center;display:block}
.bettmer-themenwelt .bettmer-card ul{padding:12px 20px 18px 39px;margin:0;list-style:none}
.bettmer-themenwelt .bettmer-card li{position:relative;margin:5px 0;font-size:13px;line-height:1.5;color:var(--bet-blue)}
.bettmer-themenwelt .bettmer-card li:before{content:'✓';position:absolute;left:-22px;top:0;color:var(--bet-red);font-weight:700}
.bettmer-themenwelt .bettmer-cta{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;padding:40px 48px;background:#f1f8fc}
.bettmer-themenwelt .bettmer-cta h2{font-size:clamp(25px,3vw,36px)}
.bettmer-themenwelt .bettmer-cta p{color:var(--bet-blue)}
.bettmer-themenwelt .bettmer-benefits{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;color:var(--bet-blue);font-weight:600;font-size:13px}
.bettmer-themenwelt .bettmer-benefits span{padding:16px 8px;border-left:1px solid #b8d6ee}
.bettmer-themenwelt .bettmer-benefits span:first-child{border-left:0}

.bettmer-themenwelt .bettmer-icon svg{display:block;width:28px;height:28px;flex:none}
/* BETTMER-Themenseite: Test für volle Seitenbreite */

@supports selector(body:has(.bettmer-themenwelt)) {

  /* Linke Kategoriennavigation auf der Themenseite ausblenden */
  body:has(.bettmer-themenwelt) aside.cs-aside,
  body:has(.bettmer-themenwelt) nav.cs-sidebox {
    display: none !important;
  }

  /* Hauptinhalt auf volle Breite erweitern */
  body:has(.bettmer-themenwelt) section.cs-mainContent {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

}
/* V4: Ansprechpartner im Abschlussbereich; an CSS: Design > eigene Ergänzungen anhängen */
.bettmer-themenwelt .bettmer-contact-card{display:flex;align-items:center;gap:20px;min-width:0;padding:24px;background:#fff;border:1px solid #dbe7f3;border-radius:10px;box-shadow:0 6px 20px rgba(23,63,130,.06)}
.bettmer-themenwelt .bettmer-contact-photo{display:block;flex:0 0 136px;width:136px;height:136px;object-fit:cover;object-position:center 27%;border-radius:50%}
.bettmer-themenwelt .bettmer-contact-details{min-width:0}
.bettmer-themenwelt .bettmer-contact-details h3{font-size:21px;line-height:1.2;margin:0 0 3px;color:#173F82}
.bettmer-themenwelt .bettmer-contact-role{margin:0 0 14px;color:#355b94;font-size:14px}
.bettmer-themenwelt .bettmer-contact-link{display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere;color:#173F82;text-decoration:none;font-size:14px;line-height:1.55;margin:7px 0}
.bettmer-themenwelt .bettmer-contact-link:hover{text-decoration:underline}
.bettmer-themenwelt .bettmer-contact-link:focus-visible{outline:3px solid #ffbe35;outline-offset:3px}
/* BETTMER – Vorteile Fullservice | Design-CSS V4
   CosmoShop: CSS: Design > eigene Ergänzungen
   Diese Datei EINMAL am Ende ergänzen.
   Voraussetzung: bestehende BETTMER-Themenwelt-Basis aus Webshop-Funktionen.
   Enthält die Design-Regeln aus V1 und die freigegebenen V2-Korrekturen.
   Keine Änderungen an bestehenden Shop-Regeln notwendig.
*/

/* BETTMER Fullservice V1: NUR unter CSS: Design > eigene Ergänzungen ANHÄNGEN.
   Setzt die bereits integrierte Basis .bettmer-themenwelt voraus. */
.bettmer-themenwelt.bettmer-fullservice{--bet-blue:#173F82;--bet-red:#e30613}
.bettmer-fullservice .bettmer-fs-red{color:var(--bet-red)}
.bettmer-fullservice .bettmer-fs-hero{grid-template-columns:1.08fr 1fr;min-height:390px}
.bettmer-fullservice .bettmer-fs-hero .bettmer-hero-copy{padding:34px 36px}
.bettmer-fullservice .bettmer-fs-hero h1{font-size:clamp(30px,3.7vw,46px)}
.bettmer-fullservice .bettmer-fs-hero p{font-size:14px;line-height:1.5;margin:11px 0}
.bettmer-fullservice .bettmer-fs-hero .bettmer-fs-lead{font-size:16px}
.bettmer-fullservice .bettmer-fs-hero .bettmer-fs-promise{margin-bottom:18px}
.bettmer-fullservice .bettmer-fs-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:24px 20px;border-bottom:1px solid #e2ebf4}
.bettmer-fullservice .bettmer-fs-benefit{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 14px;border-right:1px solid #cbdff1;color:var(--bet-blue);min-width:0}
.bettmer-fullservice .bettmer-fs-benefit:last-child{border-right:0}
.bettmer-fullservice .bettmer-fs-benefit svg{flex:none;width:36px;height:36px}
.bettmer-fullservice .bettmer-fs-benefit strong,.bettmer-fullservice .bettmer-fs-benefit span{display:block;font-size:12px;line-height:1.4}
.bettmer-fullservice .bettmer-fs-benefit strong{font-weight:700}
.bettmer-fullservice .bettmer-fs-experience{display:grid;grid-template-columns:1.35fr .8fr;align-items:center;gap:28px;padding:52px 30px}
.bettmer-fullservice .bettmer-fs-experience h2,.bettmer-fullservice .bettmer-fs-process h2,.bettmer-fullservice .bettmer-fs-closing h2{font-size:clamp(28px,3vw,38px)}
.bettmer-fullservice .bettmer-fs-experience-copy>p{max-width:630px}
.bettmer-fullservice .bettmer-fs-experience-photo img{display:block;width:100%;height:auto;aspect-ratio:366/209;object-fit:cover;border-radius:9px}
.bettmer-fullservice .bettmer-fs-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px}
.bettmer-fullservice .bettmer-fs-proof-item{text-align:center;color:var(--bet-blue);border-right:1px solid #cbdff1;padding:5px 7px;min-width:0}
.bettmer-fullservice .bettmer-fs-proof-item:last-child{border-right:0}
.bettmer-fullservice .bettmer-fs-proof-item svg{display:block;margin:0 auto 6px;width:29px;height:29px}
.bettmer-fullservice .bettmer-fs-proof-item strong,.bettmer-fullservice .bettmer-fs-proof-item span{display:block;line-height:1.3;font-size:12px}
.bettmer-fullservice .bettmer-fs-proof-item strong{font-size:15px}
.bettmer-fullservice .bettmer-fs-process{padding:50px 30px 58px;background:#f9fbfe}
.bettmer-fullservice .bettmer-fs-process h2{margin-bottom:10px}
.bettmer-fullservice .bettmer-fs-intro{max-width:980px;color:var(--bet-blue);margin-bottom:32px}
.bettmer-fullservice .bettmer-fs-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 12px;list-style:none;margin:0;padding:0;counter-reset:none}
.bettmer-fullservice .bettmer-fs-step{position:relative;text-align:center;min-width:0;padding:14px 12px 18px;background:#fff;border:1px solid #dbe7f3;border-radius:10px;color:var(--bet-blue)}
.bettmer-fullservice .bettmer-fs-step-num{position:absolute;left:12px;top:-14px;width:32px;height:32px;border-radius:50%;background:var(--bet-blue);color:#fff;font-weight:700;display:grid;place-items:center;z-index:1}
.bettmer-fullservice .bettmer-fs-step-icon{display:grid;place-items:center;margin:0 auto 10px;width:66px;height:66px;border-radius:50%;background:#eef6fd;color:var(--bet-blue)}
.bettmer-fullservice .bettmer-fs-step-icon svg{width:36px;height:36px}
.bettmer-fullservice .bettmer-fs-step h3{font-size:15px;line-height:1.25;min-height:39px;margin:0 0 10px;text-transform:uppercase;letter-spacing:-.015em}
.bettmer-fullservice .bettmer-fs-step p{font-size:12px;line-height:1.55;margin:0;color:#264876}
/* Prozessfluss: 1–4 nach rechts, 5–8 in der zweiten Zeile nach links */
.bettmer-fullservice .bettmer-fs-step:not(:nth-child(4)):not(:nth-child(8))::after{content:'→';position:absolute;right:-18px;top:70px;z-index:2;font-size:22px;font-weight:700;color:var(--bet-blue)}
.bettmer-fullservice .bettmer-fs-step:nth-child(n+5)::after{content:'←';right:auto;left:-18px}
.bettmer-fullservice .bettmer-fs-step:nth-child(5){grid-column:4;grid-row:2}
.bettmer-fullservice .bettmer-fs-step:nth-child(6){grid-column:3;grid-row:2}
.bettmer-fullservice .bettmer-fs-step:nth-child(7){grid-column:2;grid-row:2}
.bettmer-fullservice .bettmer-fs-step:nth-child(8){grid-column:1;grid-row:2}
.bettmer-fullservice .bettmer-fs-closing{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;background:#f1f8fc;padding:44px 30px}
.bettmer-fullservice .bettmer-fs-closing-copy>p{color:var(--bet-blue)}
.bettmer-fullservice .bettmer-fs-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
.bettmer-fullservice .bettmer-fs-values>div{display:flex;gap:8px;align-items:flex-start;min-width:0}
.bettmer-fullservice .bettmer-fs-values svg{flex:0 0 29px;width:29px;height:29px;color:var(--bet-blue)}
.bettmer-fullservice .bettmer-fs-values strong,.bettmer-fullservice .bettmer-fs-values small{display:block;line-height:1.35;font-size:11px;color:var(--bet-blue)}
.bettmer-fullservice .bettmer-fs-values small{font-size:10px;margin-top:4px}
.bettmer-fullservice .bettmer-contact-card{align-items:center;gap:18px;padding:22px;background:#fff;border:1px solid #dbe7f3;border-radius:10px;display:flex;min-width:0}
.bettmer-fullservice .bettmer-contact-photo{width:116px;height:116px;flex:0 0 116px;border-radius:50%;object-fit:cover;object-position:center 27%}
.bettmer-fullservice .bettmer-contact-details{min-width:0}
.bettmer-fullservice .bettmer-contact-details h3{font-size:22px;margin:0;color:var(--bet-blue)}
.bettmer-fullservice .bettmer-contact-role{margin:0 0 12px;font-size:14px;color:#355b94}
.bettmer-fullservice .bettmer-contact-link{display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere;font-size:13px;color:var(--bet-blue);margin:7px 0;text-decoration:none}
.bettmer-fullservice .bettmer-contact-link:hover{text-decoration:underline}
.bettmer-fullservice .bettmer-fs-contact-button{margin-top:12px;font-size:13px;padding:10px 14px}


/* BETTMER Fullservice V2 – Bildhöhe und eindeutiger Prozessfluss */
@media (min-width: 768px) {
  .bettmer-fullservice .bettmer-fs-experience {align-items:stretch;}
  .bettmer-fullservice .bettmer-fs-experience-photo {min-height:310px;align-self:stretch;}
  .bettmer-fullservice .bettmer-fs-experience-photo img {height:100%;min-height:310px;width:100%;aspect-ratio:auto;object-fit:cover;object-position:center center;}
  /* Erste Zeile: 1 → 2 → 3 → 4 */
  .bettmer-fullservice .bettmer-fs-step:nth-child(-n+3)::after {content:'→';left:auto;right:-18px;top:70px;bottom:auto;}
  /* Am rechten Rand: 4 ↓ 5 */
  .bettmer-fullservice .bettmer-fs-step:nth-child(4)::after {content:'↓';position:absolute;left:50%;right:auto;top:auto;bottom:-29px;transform:translateX(-50%);z-index:3;font-size:23px;font-weight:700;color:var(--bet-blue);}
  /* Zweite Zeile: 5 ← 6 ← 7 ← 8 */
  .bettmer-fullservice .bettmer-fs-step:nth-child(n+5):nth-child(-n+7)::after {content:'←';left:-18px;right:auto;top:70px;bottom:auto;transform:none;}
  /* Am Prozessende kein weiterer Pfeil */
  .bettmer-fullservice .bettmer-fs-step:nth-child(8)::after {content:none!important;display:none!important;}
}
/* BETTMER Fullservice V4: PNG-Icons statt Inline-SVG.
   NUR am Ende von CSS: Design > eigene Ergänzungen ergänzen. */
.bettmer-fullservice .bettmer-fs-icon-img {display:block;object-fit:contain;flex-shrink:0;}
.bettmer-fullservice .bettmer-fs-benefit > .bettmer-fs-icon-img {width:36px;height:36px;}
.bettmer-fullservice .bettmer-fs-proof-item > .bettmer-fs-icon-img {width:29px;height:29px;margin:0 auto 6px;}
.bettmer-fullservice .bettmer-fs-step-icon > .bettmer-fs-icon-img {width:36px;height:36px;}
.bettmer-fullservice .bettmer-fs-values > div > .bettmer-fs-icon-img {width:29px;height:29px;flex:0 0 29px;}

/* BETTMER Fullservice – Feinschliff der Icon-Bereiche */
/* Nur für die Fullservice-Themenseite */

/* 1. Vier Vorteile direkt unter dem Hero */

.bettmer-fullservice .bettmer-fs-benefit strong {
  display: block;
  color: #173F82;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 3px;
}

.bettmer-fullservice .bettmer-fs-benefit > div {
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
}


/* 2. Drei Leistungsversprechen im Abschlussbereich */

.bettmer-fullservice .bettmer-fs-values > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-content: start;
  align-items: start;
  min-width: 0;
}

.bettmer-fullservice .bettmer-fs-values > div > img {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.bettmer-fullservice .bettmer-fs-values > div > strong {
  display: block;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  color: #173F82;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.bettmer-fullservice .bettmer-fs-values > div > small {
  display: block;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  font-size: 11px;
  line-height: 1.4;
}

/* BETTMER Themenseiten:
   CosmoShop-Kategorieseitentitel ausblenden */

@supports selector(body:has(.bettmer-themenwelt)) {

  body:has(.bettmer-themenwelt) h1.categoryHeader {
    display: none !important;
  }

}


/* BETTMER Fullservice – Hero-Optimierung V3 */
/* Nur Desktop, Webshop-Funktionen bleibt unverändert */

@media (min-width: 992px) {

  .bettmer-fullservice .bettmer-hero {
    grid-template-columns: 1fr 1.2fr;
    min-height: 350px;
  }

  .bettmer-fullservice .bettmer-hero-copy {
    padding: 32px 24px 32px 38px;
  }

  .bettmer-fullservice .bettmer-hero-media {
    min-height: 0;
    background: transparent;
    overflow: hidden;
  }

  .bettmer-fullservice .bettmer-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

}