.demo-footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:20px;margin-top:25px;font-size:.75rem;color:var(--muted)}
.demo-footer a{text-decoration:underline;text-underline-offset:4px}
.demo-sitemap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:40px}
.demo-sitemap a{display:block;padding:18px 0;border-bottom:1px solid var(--line);line-height:1.5}
summary:focus-visible,select:focus-visible{outline:3px solid var(--bronze);outline-offset:4px}
button,a,input,select,textarea{touch-action:manipulation}
.site-menu{overscroll-behavior:contain}
.brand-number,.brand-type-panel>.eyebrow{color:#526363}
.selection-links>.eyebrow{flex-basis:100%;max-width:none}
html:has(noscript>a) .menu-toggle{display:none}
@media(max-width:800px){.demo-sitemap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.demo-sitemap{grid-template-columns:1fr}.demo-footer{display:block}.demo-footer a{display:inline-block;padding:12px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Preserve the desktop design; keep mobile opening lines readable as whole words. */
@media(max-width:950px){
  .home-copy h1{hyphens:manual;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
  body[data-page-id="21"] .page-hero h1,
  body[data-page-id="33"] .page-hero h1{font-size:clamp(1.75rem,9vw,2.2rem)}
  .breadcrumb{align-items:center;gap:4px 13px}
  .breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
  .footer-brand,.footer-contact>a:not(.text-link),.footer-links a{display:flex;align-items:center;min-height:44px}
  .privacy-note summary{min-height:44px;padding-top:10px;padding-bottom:10px}
}

/* The real WhatsApp contact is separate from the simulated demo forms. */
body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.whatsapp-dock{display:contents}
.whatsapp-float{position:fixed;z-index:40;right:max(24px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:11px;min-height:58px;max-width:calc(100vw - 32px);padding:11px 18px;color:#fff;background:#155e45;border:1px solid #155e45;border-radius:32px;text-decoration:none;box-shadow:0 4px 18px #0f2a2426;line-height:1.35}
.whatsapp-float svg{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;stroke-width:1.5}
.whatsapp-float-copy{display:flex;flex-direction:column}
.whatsapp-float strong{font-size:.875rem;font-weight:700}
.whatsapp-float small{font-size:.6875rem;white-space:nowrap}
.whatsapp-float:hover{background:#104b37;border-color:#104b37}
.whatsapp-float:focus-visible,.whatsapp-contact:focus-visible{outline:3px solid #967147;outline-offset:4px}
.whatsapp-float[hidden],.whatsapp-dock[hidden],body:has(.site-menu:not([hidden])) .whatsapp-dock,body:has(dialog[open]) .whatsapp-dock{display:none!important}
@media(max-width:950px){
  .whatsapp-dock{display:flex;position:fixed;z-index:40;right:0;bottom:0;left:0;justify-content:flex-end;background:var(--stone,#f2f3f0);border-top:1px solid var(--line,#cdd3d0);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .whatsapp-dock .whatsapp-float{position:static;width:100%;max-width:none;justify-content:center;min-height:56px;padding:10px 16px;box-shadow:none}
}
@media(forced-colors:active){.whatsapp-float{border:2px solid ButtonText}.whatsapp-dock{background:Canvas;border-top-color:CanvasText}}
@media print{.whatsapp-dock,.whatsapp-float{display:none!important}body{padding-bottom:0}}

/* Keep the desktop hero's flex items unchanged; give mobile readers the title first. */
.home-title,.home-details{display:contents}
:is(.home-copy,.home-hero figcaption,.type-gallery .text-hero,.type-catalog .text-hero,.consultation-photo figcaption,.brand-overview-item>figure>figcaption,.brand-hero>figure>figcaption) :focus-visible{outline:3px solid #f2f3f0;outline-offset:4px}
@media(max-width:950px){
  .home-hero .home-copy{display:contents}
  .home-hero .home-title,.home-hero .home-details{display:block;min-width:0;background:var(--petrol);color:var(--stone);padding:26px 24px}
  .home-hero .home-title{grid-row:1;padding-bottom:22px}
  .home-hero>figure{grid-row:2}
  .home-hero .home-details{grid-row:3}
  .home-hero .home-details .hero-lead{margin-top:0}
  .home-hero figcaption,.home-hero figcaption span{font-size:.75rem;line-height:1.6;letter-spacing:.02em}
}
@media(max-width:360px){.home-hero .home-title,.home-hero .home-details{padding:24px 20px}}
@media(forced-colors:active){:is(.home-copy,.home-hero figcaption,.type-gallery .text-hero,.type-catalog .text-hero,.consultation-photo figcaption,.brand-overview-item>figure>figcaption,.brand-hero>figure>figcaption) :focus-visible{outline-color:Highlight}}

/* The reference desk stays visible in the header, including compact screens. */
.header-lexicon{display:none}
.quick-nav .nav-lexicon{font-weight:400}
.type-lexicon main{margin:0 var(--gutter)}
@media(max-width:950px){.header-lexicon{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;font-weight:700;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}}
@media(max-width:680px){.site-header{column-gap:12px}.header-lexicon{order:1;margin-left:auto}.menu-toggle{order:2;margin-left:0}.header-contact{order:3}}

/* Home first; Badlexikon is an ordinary, separate menu destination. */
.menu-direct-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;border-bottom:1px solid #607579;padding:6px 0 12px}.menu-columns .menu-direct-links a{font-size:1rem;min-height:48px;display:flex;align-items:center;border-bottom:0}.menu-direct-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}.quick-nav{gap:24px}