@import url('/assets/bleaching-koeln/v11/styles.css');

/* Keep the language choice on the physical left in every writing direction. */
.header-inner{direction:ltr;gap:16px}
.lang-switcher{position:relative;z-index:2}
.lang-current{display:flex;align-items:center;gap:7px;min-height:40px;padding:8px 11px;border:1px solid #c6c6c6;border-radius:6px;background:transparent;color:inherit;font-size:12px;font-weight:600;white-space:nowrap}
.lang-menu{position:absolute;top:calc(100% + 9px);left:0;width:238px;max-width:calc(100vw - 48px);max-height:min(480px,calc(100dvh - 125px));overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:7px;background:#fff;color:#111;border:1px solid #e5e5e5;border-radius:10px;box-shadow:0 12px 32px #0002;direction:ltr;text-align:left}
.lang-menu[hidden]{display:none}
.lang-menu a{display:block;padding:9px 11px;border-radius:5px;font-size:13px}
.lang-menu a:hover,.lang-menu a:focus-visible{background:#f1f5ff}
.lang-menu a.active{background:#edf2ff;font-weight:700}
.desktop-nav{margin-left:auto}
.desktop-nav>a:not(.nav-cta){display:none}
.desktop-nav .nav-cta{max-width:220px;text-align:center}
.menu-toggle{display:flex;flex:none;flex-direction:column;gap:7px;width:44px;height:44px;align-items:center;justify-content:center;background:none;color:inherit;border:0;margin:0}
.menu-toggle span{background:currentColor;width:24px;height:2px;transition:transform .2s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mobile-nav:not([hidden]){display:flex;flex-direction:column;position:absolute;top:100%;right:5vw;width:380px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;padding:18px 24px;background:#fff;color:#111;gap:5px;border:1px solid #eee;border-radius:10px;box-shadow:0 12px 32px #0002}
.mobile-nav a{padding:10px 0;font-size:15px;line-height:1.5}
.mobile-nav .aligner-link{color:var(--blue);font-weight:650;border-bottom:1px solid #eee;margin-bottom:3px}
.header.menu-open{background:#fff;color:#111}
.header.menu-open .logo img{filter:brightness(0)}

/* Translated copy can occupy more lines than the German original. */
body{overflow-wrap:break-word}
.hero{height:auto;max-height:none;direction:ltr}
.hero-content{padding-bottom:240px;margin-left:0;margin-right:auto}
.hero h1{overflow-wrap:anywhere}
.hero-product{height:auto;min-height:100px}
.kit-grid>* ,.application-grid>* ,.intro-grid>* ,.section-heading>*{min-width:0}
.hero-product small,.kit-price span,.booking-meta span{overflow-wrap:anywhere}
.button,.text-link{max-width:100%}
.button{justify-content:center}
.button>span,.text-link>span{flex-shrink:0}
.comparison-stage{direction:ltr}
.comparison-label{max-width:45%;overflow-wrap:anywhere}
.refill-mark{direction:ltr}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .eyebrow,[dir=rtl] .advantage-index{letter-spacing:normal}
[dir=rtl] .hero-content{direction:rtl;text-align:right}
[dir=rtl] .hero-product{direction:rtl}
[dir=rtl] .hero-footnote{direction:rtl;text-align:right}
[dir=rtl] .diagnostic-guidance{border-left:0;border-right:3px solid var(--blue);padding:7px 22px 7px 0}
[dir=rtl] .mobile-nav{text-align:right}
[dir=rtl] footer>div span{margin-right:0;margin-left:auto}

@media(max-width:1000px){
  .desktop-nav{display:none}
  .menu-toggle{margin-left:auto}
}
@media(max-width:800px){
  .header-inner{padding:16px 24px}
  .lang-current{font-size:11px;gap:5px;padding:7px 8px}
  .logo{position:static;transform:none;margin-inline:auto;min-width:0}
  .logo img{height:auto;width:150px;max-width:37vw}
  .mobile-nav:not([hidden]){right:24px;max-height:calc(100dvh - 100px)}
  .hero{padding-bottom:0}
  .hero-content{padding-bottom:40px}
  .hero-product{position:relative;left:auto;right:auto;bottom:auto;margin:0 auto 0 24px;width:calc(100% - 48px)}
  .hero-footnote{position:relative;left:auto;right:auto;bottom:auto;margin:14px 24px 24px}
}
@media(max-width:600px){
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero-content{order:1;padding-bottom:25px}
  .hero-photo{position:relative;order:2;top:auto;bottom:auto;right:auto;height:400px;width:100%;object-position:50% 24%}
  .hero-shade{display:none}
  .hero-product{order:3;margin-top:20px;min-height:100px}
  .hero-footnote{order:4;width:auto}
  .hero h1{font-size:clamp(40px,11.5vw,64px);line-height:1.08}
  .header-inner{gap:8px}
}