/* Metropolmed — additions for the CMS version (multilingual, RTL, overflow safety). Kept separate from main.min.css. */
/* Phone numbers, e-mails, phone/e-mail inputs always read left-to-right, also on Arabic pages */
.ltr,bdi,input[type=tel],input[type=email],a[href^="tel:"],a[href^="mailto:"],.iti{direction:ltr;unicode-bidi:isolate}
[dir=rtl] input[type=tel],[dir=rtl] input[type=email]{text-align:right}
/* Long words (German, Hungarian, Dutch, Polish, Czech, Russian, Bulgarian) never break the layout */
h1,h2,h3,h4,.eyebrow,.btn,.chip,.mega h4,.menu>li>a,.blog-card h2,.blog-card h3,.pt-card h3,.mini strong,.fact b,.fact span{overflow-wrap:break-word;word-break:normal;hyphens:auto}
:lang(de) h1,:lang(de) h2,:lang(hu) h1,:lang(hu) h2,:lang(nl) h1,:lang(nl) h2,:lang(pl) h1,:lang(pl) h2,:lang(cs) h1,:lang(cs) h2,:lang(ru) h1,:lang(ru) h2,:lang(bg) h1,:lang(bg) h2{hyphens:auto;-webkit-hyphens:auto}
.btn{max-width:100%;white-space:normal;text-align:center}
.nav .menu>li>a{white-space:nowrap}
/* Header menu: size chosen by the auto-fit script in layout.php (or per language in Panel → Diller) */
html.nav-fit .site-header .menu>li>a{font-size:var(--nav-fs)!important;padding:0 var(--nav-px)!important;gap:4px!important}
html.nav-fit .site-header .menu>li>a::after{left:var(--nav-px);right:var(--nav-px)}
html.nav-tight .nav .menu{gap:0}
html.nav-tight .menu>li>a{font-size:.8rem!important;padding:0 7px!important;gap:4px!important}html.nav-tight .nav{gap:10px!important}
html.nav-ctasm .nav-cta{font-size:.8rem!important;padding-left:14px!important;padding-right:14px!important;gap:6px!important}html.nav-ctasm .logo{width:150px!important}
html.nav-xtight .menu>li>a{font-size:.76rem!important;padding:0 5px!important}html.nav-xtight .logo{width:140px!important}
/* Arabic typography */
:lang(ar) body{font-family:"Noto Kufi Arabic","Segoe UI",Tahoma,Arial,sans-serif;line-height:1.75}
:lang(ar) h1,:lang(ar) h2{letter-spacing:0}
/* Blog pager (CMS) */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
/* 404 */
.is-404 .page-hero{padding-block:72px 40px}
/* Cookie consent banner */
.cc-banner{position:fixed;inset-inline:16px;bottom:16px;z-index:1200;max-width:560px;background:#fff;color:var(--text);border-radius:var(--r-m);box-shadow:var(--shadow);padding:18px 20px;font-size:.92rem;line-height:1.5}
.cc-banner h3{font:600 1.05rem/1.3 var(--body);margin-bottom:6px}
.cc-banner .cc-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cc-banner .cc-row .btn{flex:1 1 auto}
.cc-prefs label{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.cc-prefs small{display:block;color:var(--muted)}
@media (max-width:640px){.cc-banner{inset-inline:8px;bottom:8px;padding:14px}}
/* Header auto-fit for long translations: classes are set by the inline fit script in the layout */
html.nav-burger .menu,html.nav-burger .nav-cta{display:none!important}
html.nav-burger .burger{display:grid!important;place-items:center;margin-left:8px}
html.nav-burger .search-btn{margin-left:auto}
html.nav-nocta .nav-cta{display:none!important}
.nav-cta{white-space:nowrap}
/* mobile bottom bar: keep long labels (de "Gratis-Angebot", it "Preventivo gratuito") on one line */
.mcta .btn{white-space:nowrap;min-width:0}
@media (max-width:420px){.mcta .btn{font-size:clamp(.78rem,3.6vw,.95rem);padding-left:10px;padding-right:10px;gap:6px}}
/* ---- RTL (Arabic) — main.rtl.min.css is the mirrored main stylesheet (tools/rtl.py); these are the extras ---- */
[dir=rtl]{--display:"IBM Plex Sans Arabic","Geologica","Onest",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;--body:"IBM Plex Sans Arabic","Onest",system-ui,"Segoe UI",Tahoma,Arial,sans-serif}
[dir=rtl] body,[dir=rtl] body *{letter-spacing:0!important}
[dir=rtl] em,[dir=rtl] i:not([class*=fa-]){font-style:normal}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{line-height:1.35}
[dir=rtl] .menu>li>.mega,[dir=rtl] .menu>li:nth-child(2)>.mega,[dir=rtl] .menu>li:nth-child(n+4)>.mega{left:0!important;right:auto!important;translate:var(--mx,0px) 0!important}
[dir=rtl] .fa-arrow-right,[dir=rtl] .fa-arrow-left,[dir=rtl] .fa-chevron-right,[dir=rtl] .fa-chevron-left,[dir=rtl] .fa-angle-right,[dir=rtl] .fa-angle-left,[dir=rtl] .fa-arrow-right-long,[dir=rtl] .fa-arrow-left-long,[dir=rtl] .fa-caret-right,[dir=rtl] .fa-caret-left,[dir=rtl] .fa-angles-right,[dir=rtl] .fa-angles-left,[dir=rtl] .fa-arrow-up-right-from-square{scale:-1 1}
[dir=rtl] .ltr,[dir=rtl] bdi,[dir=rtl] input[type=tel],[dir=rtl] input[type=email],[dir=rtl] input[type=url]{unicode-bidi:isolate}
[dir=rtl] input[type=tel],[dir=rtl] input[type=email],[dir=rtl] input[type=url]{direction:ltr}
[dir=rtl] .stat b{white-space:nowrap;font-size:clamp(1.8rem,3.2vw,2.6rem)}
/* wide screens: the header may use more width than the page content, so long menu labels (fr, de, ru …) keep a readable size */
@media (min-width:1500px){.site-header>.wrap{max-width:min(1640px,calc(100vw - 40px))}}
/* mobile / tablet header (burger mode ≤1200px): logo grows with the screen, always leaving room for search + menu buttons */
@media (max-width:1200px){.site-header .logo{width:auto}.site-header .logo img{width:clamp(150px,calc(100vw - 180px),200px)!important;height:auto}}