/* Beatlio 4.1 – Display-Produktpräsentation. Isoliert von bestehenden Musik-Seiten. */
@media(min-width:961px){
  .nav .brand{flex:0 0 205px!important}
  .navlinks{gap:clamp(10px,1.35vw,20px)!important;font-size:13px!important}
}
@media(min-width:961px) and (max-width:1220px){
  .nav .brand{flex:0 0 158px!important}
  .nav .brand img{max-width:158px!important}
  .navlinks{gap:11px!important;font-size:12px!important}
  .nav .actions .btn{font-size:11px!important;padding-inline:12px!important}
  .navin{gap:13px!important}
}

.beatlioDisplayPage{position:relative;overflow:hidden;color:#ecf3fc;background:radial-gradient(ellipse 850px 500px at 77% 1%,rgba(65,45,170,.12),transparent 80%),#080c14}
.beatlioDisplayPageInner{max-width:1480px!important;margin:auto!important}
.beatlioDisplayEditorContent{max-width:none!important;width:100%;padding:0 12px 84px}
.beatlioDisplayPage .bdHero,.beatlioDisplayPage .bdSection,.beatlioDisplayPage .bdFinal,.beatlioDisplayPage .bdTrustRail{max-width:100%!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box}
.beatlioDisplayPage .bdEyebrow,.beatlioDisplayHomeTeaser .bdEyebrow{margin:0 0 16px!important;font-size:12px!important;line-height:1.3!important;letter-spacing:.17em!important;color:#6fe58f!important;text-transform:uppercase;font-weight:900}
.beatlioDisplayPage h1,.beatlioDisplayPage h2,.beatlioDisplayPage h3,.beatlioDisplayHomeTeaser h2{color:#f6f8ff!important;overflow-wrap:break-word}
.beatlioDisplayPage h2,.beatlioDisplayHomeTeaser h2{font-size:clamp(34px,3.9vw,56px)!important;line-height:1.09!important;letter-spacing:-.045em!important;font-weight:900!important;max-width:880px;margin:0 0 17px!important}
.beatlioDisplayPage p,.beatlioDisplayHomeTeaser p{color:#acbdd1;line-height:1.7;font-size:16px;max-width:870px}
.beatlioDisplayPage .wp-block-buttons,.beatlioDisplayHomeTeaser .wp-block-buttons{display:flex!important;flex-wrap:wrap;gap:13px!important;margin-top:30px!important}
.beatlioDisplayPage .wp-block-button__link,.beatlioDisplayHomeTeaser .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 23px;border-radius:13px;background:linear-gradient(125deg,#45c968,#66e38a);color:#071209!important;font-size:14px;font-weight:900;text-decoration:none!important;transition:transform .18s,box-shadow .18s;box-shadow:0 10px 30px rgba(49,202,102,.16)}
.beatlioDisplayPage .wp-block-button__link:hover,.beatlioDisplayHomeTeaser .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(49,202,102,.27)}
.beatlioDisplayPage .is-style-outline .wp-block-button__link,.beatlioDisplayHomeTeaser .is-style-outline .wp-block-button__link{background:rgba(255,255,255,.025)!important;color:#eaf1fb!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none}
.beatlioDisplayPage .bdHero{padding:76px 0 61px!important}
.beatlioDisplayPage .bdHeroCols,.beatlioDisplayHomeTeaser .bdHomeTeaserCols{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;align-items:center!important;gap:clamp(24px,3vw,65px)!important;max-width:none!important;margin:0!important}
.beatlioDisplayPage .bdHeroCols>.wp-block-column,.beatlioDisplayHomeTeaser .bdHomeTeaserCols>.wp-block-column{min-width:0!important;width:auto!important;flex-basis:auto!important;margin:0!important}
.beatlioDisplayPage .bdHero h1{font-size:clamp(48px,5.05vw,79px)!important;line-height:1.01!important;letter-spacing:-.065em!important;font-weight:950!important;margin:0 0 24px!important;max-width:690px!important}
.beatlioDisplayPage .bdHero .bdLead{font-size:18px!important;line-height:1.75!important;max-width:625px}
.beatlioDisplayPage .bdFine{color:#7f90a6!important;font-size:13px!important;line-height:1.65!important;margin-top:18px!important}
.beatlioDisplayPage .bdTrustRail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:17px;padding:5px 10px!important}
.beatlioDisplayPage .bdTrustItem{margin:0!important;padding:16px 24px!important;color:#d6e1ec!important;font-size:13px!important;font-weight:750!important;text-align:center;max-width:none!important}
.beatlioDisplayPage .bdTrustItem + .bdTrustItem{border-left:1px solid rgba(255,255,255,.09)}
.beatlioDisplayPage .bdTrustItem:before{content:'✓';font-weight:900;color:#71e78b;margin-right:10px}
.beatlioDisplayPage .bdSection{padding:89px 0!important}
.beatlioDisplayPage .bdSection>p:not(.bdEyebrow){margin:0 0 34px!important;max-width:840px}
.beatlioDisplayPage .bdSection--tint{position:relative}
.beatlioDisplayPage .bdSection--tint:before{content:'';position:absolute;z-index:0;inset:10px -100vw 6px;pointer-events:none;background:linear-gradient(180deg,rgba(56,39,127,.065),rgba(13,20,37,.48),rgba(56,39,127,.035));border-block:1px solid rgba(255,255,255,.035)}
.beatlioDisplayPage .bdSection--tint>*{position:relative;z-index:1}
.beatlioDisplayPage .bdGrid{display:grid!important;gap:19px!important;max-width:none!important;margin:28px 0 0!important;align-items:stretch}
.beatlioDisplayPage .bdGrid3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.beatlioDisplayPage .bdGrid2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.beatlioDisplayPage .bdCard{display:flex!important;flex-direction:column;min-width:0!important;max-width:none!important;margin:0!important;padding:31px!important;border-radius:23px;border:1px solid rgba(94,81,176,.3);background:radial-gradient(300px 150px at 100% 0,rgba(60,44,156,.12),transparent 70%),linear-gradient(160deg,#111824,#0b101a);box-shadow:0 24px 65px rgba(0,0,0,.12)}
.beatlioDisplayPage .bdCard--green{border-color:rgba(60,201,111,.26);background:radial-gradient(350px 160px at 100% 0,rgba(47,165,87,.12),transparent 75%),linear-gradient(160deg,#101b17,#0b1117)}
.beatlioDisplayPage .bdCard .bdCardEyebrow{color:#79e994!important;font-size:11px!important;font-weight:900!important;letter-spacing:.09em!important;margin:0 0 17px!important}
.beatlioDisplayPage .bdCard h3{font-size:clamp(20px,2vw,26px)!important;line-height:1.15!important;letter-spacing:-.027em!important;margin:0 0 14px!important;font-weight:850!important}
.beatlioDisplayPage .bdCard>p:last-child{font-size:14px!important;line-height:1.72!important;color:#a5b7cb!important;margin:0!important}
.beatlioDisplayPage .bdHardwarePanel{padding:54px clamp(24px,4vw,62px)!important;border-radius:30px;border:1px solid rgba(94,81,176,.3);background:radial-gradient(900px 340px at 85% -15%,rgba(64,48,163,.2),transparent 80%),linear-gradient(125deg,#111729,#0b101a)}
.beatlioDisplayPage .bdHardwarePanel h2{max-width:900px}
.beatlioDisplayPage .bdHardwarePanel>p:not(.bdEyebrow){margin-bottom:14px!important}
.beatlioDisplayPage .bdSubscriptionNote{margin-top:23px!important;padding:24px 28px!important;border-left:3px solid #57d87a;background:#101b1b;border-radius:0 15px 15px 0}
.beatlioDisplayPage .bdSubscriptionNote p{margin:0!important;font-size:14px!important;color:#c4d6cf!important;max-width:1100px}
.beatlioDisplayPage .bdFinal{text-align:center;margin-top:10px!important;padding:58px 25px!important;border-radius:29px;border:1px solid rgba(74,204,110,.22);background:radial-gradient(640px 280px at 50% 0,rgba(53,190,97,.13),transparent),linear-gradient(160deg,#102019,#101624)}
.beatlioDisplayPage .bdFinal h2,.beatlioDisplayPage .bdFinal>p{margin-left:auto!important;margin-right:auto!important}
.beatlioDisplayPage .bdFinal .wp-block-buttons{justify-content:center}

/* Vollständig per CSS gezeichnete Monitor-Präsentation; bewusst als Illustration gekennzeichnet. */
.bdVisual{position:relative;width:100%;min-height:585px;isolation:isolate;overflow:visible}
.bdVisualAura{position:absolute;z-index:-1;inset:8% 0 4%;background:radial-gradient(ellipse at 38% 43%,rgba(69,53,180,.32),transparent 57%),radial-gradient(ellipse at 86% 75%,rgba(50,188,99,.16),transparent 55%);filter:blur(24px);pointer-events:none}
.bdVisualMonitor{position:absolute;left:1%;right:14%;top:14%;height:69%;filter:drop-shadow(0 32px 40px rgba(0,0,0,.42))}
.bdVisualBezel{padding:9px;border:1px solid #333b46;border-radius:16px;background:linear-gradient(160deg,#222936,#030609 60%,#252d38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 1px 0 #39414c;aspect-ratio:16/9;width:100%;max-height:100%;display:flex}
.bdVisualScreen{display:flex;flex-direction:column;position:relative;flex:1;min-width:0;overflow:hidden;border-radius:6px;background:radial-gradient(ellipse at 85% 18%,rgba(94,70,223,.7),transparent 53%),radial-gradient(ellipse at 5% 91%,rgba(16,158,73,.54),transparent 48%),linear-gradient(145deg,#191340,#0b1025 62%,#0b1720);color:#fff}
.bdVisualScreen:after{content:'';position:absolute;left:-18%;top:-105%;width:62%;height:300%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);transform:rotate(28deg);pointer-events:none}
.bdVisualScreenTop,.bdVisualScreenBottom{display:flex;align-items:center;gap:9px;padding:13px 16px;font-size:9px;font-weight:800;letter-spacing:.1em;color:#d6dce7}
.bdVisualScreenTop img{width:25px;height:25px;object-fit:contain}.bdVisualScreenTop i{margin-left:auto;border-radius:50%;width:6px;height:6px;background:#69e78e;box-shadow:0 0 0 4px rgba(94,228,137,.12)}
.bdVisualScreenBody{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:8px 9% 15px}
.bdVisualScreenTag{font-size:8px;letter-spacing:.22em;color:#9ce6be;font-weight:900}
.bdVisualScreenBody strong{display:block;font-size:clamp(24px,3.4vw,55px);line-height:.94;letter-spacing:-.064em;font-weight:950;margin:15px 0 15px}.bdVisualScreenBody em{font-style:normal;color:#77eb9d}
.bdVisualScreenCopy{color:#d3d9e9;font-size:10px;letter-spacing:.01em}
.bdVisualScreenRule{width:27%;height:3px;background:linear-gradient(90deg,#8a79fc,#74eb98);border-radius:9px;margin-top:17px}
.bdVisualScreenBottom{justify-content:space-between;font-size:7px;color:#b4bbd3;padding:9px 15px}
.bdVisualScreenBottom span:last-child{color:#7ce69e}
.bdVisualNeck{position:absolute;top:100%;left:calc(50% - 12px);width:24px;height:33px;background:linear-gradient(90deg,#111820,#3b4350,#151b23);border-radius:0 0 5px 5px}
.bdVisualFoot{position:absolute;top:calc(100% + 29px);left:calc(50% - 91px);width:182px;height:13px;border-radius:52% 52% 7px 7px;background:linear-gradient(180deg,#323c48,#10161c)}
.bdVisualTouch{position:absolute;right:0;bottom:13%;width:33%;height:56%;display:flex;flex-direction:column;overflow:hidden;padding:12px 12px 14px;border:7px solid #141b24;border-radius:19px;background:linear-gradient(165deg,#15223b,#11142a 72%,#101b24);box-shadow:0 21px 45px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.07);transform:rotate(4deg)}
.bdVisualTouchTop{display:flex;align-items:center;gap:6px;color:#a1aec6;font-size:7px;font-weight:900;letter-spacing:.05em}.bdVisualTouchTop img{width:24px;height:24px;object-fit:contain}
.bdVisualTouchBody{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;padding:3px 4px}.bdVisualTouchBody>span{font-size:8px;color:#83f3a6;font-weight:900;letter-spacing:.09em}.bdVisualTouchBody>strong{font-size:clamp(15px,1.6vw,24px);line-height:1.12;letter-spacing:-.02em;margin:10px 0 19px}.bdVisualSearch{display:flex;justify-content:space-between;gap:3px;padding:10px 8px;background:rgba(255,255,255,.075);border-radius:8px;color:#b9c3d7;font-size:7px;white-space:nowrap}.bdVisualSearch b{font-size:13px;color:#87e9a4}
.bdVisualTouchButton{padding:9px 4px;text-align:center;background:#51d677;border-radius:8px;color:#08150a;font-size:8px;font-weight:900;margin-top:10px}
.bdVisualTouchBottom{border-top:1px solid rgba(255,255,255,.085);padding-top:8px;text-align:center;font-size:7px;line-height:1.25;color:#acbdcc}
.bdVisualPill{position:absolute;left:2%;bottom:6%;border:1px solid rgba(100,230,148,.29);border-radius:99px;padding:8px 12px;color:#9af2b6;background:#12251d;font-size:10px;font-weight:850}
.bdVisualNote{position:absolute;right:0;bottom:0;max-width:63%;text-align:right;color:#718399;font-size:9px;line-height:1.25}

/* Der Startseiten-Teaser ist ein echter Gutenberg-Block und lässt sich frei bearbeiten/verschieben. */
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser{display:block!important;position:relative;max-width:1330px!important;margin:70px auto!important;padding:42px clamp(28px,3.5vw,56px)!important;border-radius:32px!important;border:1px solid rgba(70,199,115,.27)!important;background:radial-gradient(500px 350px at 100% 0%,rgba(49,151,97,.12),transparent 75%),linear-gradient(130deg,#111d1c,#0b1020 80%)!important;overflow:hidden}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser h2{max-width:550px!important}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser p:not(.bdEyebrow){max-width:550px!important;font-size:15px!important;line-height:1.65!important;color:#b3c4d0!important}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser .bdVisual{min-height:360px}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser .bdVisualScreenBody strong{font-size:clamp(23px,2.6vw,38px)}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser .bdVisualTouchBody>strong{font-size:17px}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser .bdVisualMonitor{top:14%;height:66%}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser .bdVisualTouch{bottom:15%}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser .bdVisualPill{bottom:2%}
.beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser .bdVisualNote{bottom:0}

@media(max-width:1100px){
  .beatlioDisplayPage .bdHeroCols,.beatlioDisplayHomeTeaser .bdHomeTeaserCols{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  .beatlioDisplayPage .bdHero{padding:56px 0 40px!important}
  .beatlioDisplayPage .bdHeroCols>.wp-block-column:first-child{max-width:850px}
  .beatlioDisplayPage .bdGrid3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser .bdVisual{max-width:680px;margin:auto}
}
@media(max-width:720px){
  /* 3.9 bleibt auf dem Handy bewusst kurz: nur Hub-Link zu Display, kein zweiter Full-Page-Teaser. */
  .beatlioHomeEditorContentV33 .beatlioDisplayHomeTeaser{display:none!important}
  .beatlioDisplayEditorContent{padding:0 0 42px}
  .beatlioDisplayPage .bdHero{padding:38px 0 32px!important}
  .beatlioDisplayPage .bdHero h1{font-size:clamp(39px,9.8vw,56px)!important;max-width:550px!important}
  .beatlioDisplayPage .bdHero .bdLead{font-size:15px!important;line-height:1.64!important}
  .beatlioDisplayPage .bdHeroCols{gap:8px!important}
  .beatlioDisplayPage .wp-block-buttons{margin-top:21px!important;gap:9px!important}
  .beatlioDisplayPage .wp-block-button{width:100%!important}
  .beatlioDisplayPage .wp-block-button__link{width:100%;min-height:48px;font-size:13px!important}
  .beatlioDisplayPage .bdTrustRail{grid-template-columns:1fr!important;padding:0 14px!important}
  .beatlioDisplayPage .bdTrustItem{padding:12px!important;text-align:left!important}
  .beatlioDisplayPage .bdTrustItem+.bdTrustItem{border-left:0;border-top:1px solid rgba(255,255,255,.09)}
  .beatlioDisplayPage .bdSection{padding:59px 0!important}
  .beatlioDisplayPage h2{font-size:clamp(30px,8vw,43px)!important}
  .beatlioDisplayPage .bdGrid3,.beatlioDisplayPage .bdGrid2{grid-template-columns:1fr!important}
  .beatlioDisplayPage .bdGrid{gap:12px!important;margin-top:22px!important}
  .beatlioDisplayPage .bdCard{padding:23px!important;border-radius:17px!important}
  .beatlioDisplayPage .bdCard h3{font-size:22px!important}
  .beatlioDisplayPage .bdHardwarePanel{padding:29px 22px!important;border-radius:22px!important}
  .beatlioDisplayPage .bdFinal{padding:34px 20px!important;border-radius:20px!important}
  .bdVisual{min-height:340px;max-width:570px;margin:3px auto 0}
  .bdVisualMonitor{top:14%;left:0;right:11%;height:64%}
  .bdVisualBezel{padding:5px;border-radius:10px}
  .bdVisualScreenTop{padding:8px 9px;font-size:6px;gap:5px}.bdVisualScreenTop img{width:16px;height:16px}
  .bdVisualScreenBody strong{font-size:clamp(21px,6.2vw,34px);margin:7px 0}.bdVisualScreenTag{font-size:6px}.bdVisualScreenCopy{font-size:7px}.bdVisualScreenRule{margin-top:8px}
  .bdVisualScreenBottom{font-size:5px;padding:5px 9px}.bdVisualNeck{height:24px;width:16px;left:calc(50% - 8px)}.bdVisualFoot{top:calc(100% + 20px);width:100px;left:calc(50% - 50px);height:9px}
  .bdVisualTouch{right:0;bottom:17%;width:37%;height:55%;border:5px solid #141b24;border-radius:12px;padding:7px}
  .bdVisualTouchTop{font-size:5px}.bdVisualTouchTop img{width:16px;height:16px}
  .bdVisualTouchBody>span{font-size:6px}.bdVisualTouchBody>strong{font-size:clamp(11px,3vw,16px);margin:7px 0}.bdVisualSearch{font-size:5px;padding:7px 4px}.bdVisualSearch b{font-size:9px}.bdVisualTouchButton{font-size:6px;padding:6px 3px;margin-top:6px}.bdVisualTouchBottom{font-size:5px}
  .bdVisualPill{font-size:7px;padding:6px 8px;bottom:8%}.bdVisualNote{font-size:7px;bottom:1%;max-width:55%}
}
@media(prefers-reduced-motion:reduce){.beatlioDisplayPage .wp-block-button__link,.beatlioDisplayHomeTeaser .wp-block-button__link{transition:none}}
/* Der Monitorfuß muss unmittelbar am 16:9-Rahmen ansetzen (nicht an einer zu hohen Layoutbox). */
.bdVisual .bdVisualMonitor{height:auto!important;aspect-ratio:16/9}
.bdVisual .bdVisualBezel{height:100%;box-sizing:border-box}

/* Version 4.1: signage-led visual; optional music request is explained in its own section. */
.beatlioDisplayPage .bdUseCases{padding-top:78px!important}
.beatlioDisplayPage .bdOptionalMusic{border-top:1px solid rgba(255,255,255,.045);padding-top:68px!important}
.beatlioDisplayPage .bdOptionalMusic .bdGrid{max-width:1120px!important}
.bdVisualScreen{background:radial-gradient(ellipse at 85% 18%,rgba(63,56,185,.65),transparent 54%),radial-gradient(ellipse at 10% 93%,rgba(35,173,97,.42),transparent 49%),linear-gradient(140deg,#12283a,#151833 65%,#112820)}
.bdVisualScreenBody strong{letter-spacing:-.053em}
.bdVisualTouch{background:linear-gradient(155deg,#13352f,#141d36 70%,#111c2a)}
.bdVisualTouchButton{background:#70e593}
@media(max-width:720px){.beatlioDisplayPage .bdUseCases{padding-top:52px!important}.beatlioDisplayPage .bdOptionalMusic{padding-top:50px!important}}


/* 4.2 · Mobile Display-Startseite ist ein kurzer Wegweiser. Desktop-Ansicht bleibt unverändert. */
.beatlioDisplayPage .bdMobileHub{display:none!important}
.beatlioDisplayPage.bdDetailPage .bdDetailIntro{padding:65px 0 45px!important}
.beatlioDisplayPage.bdDetailPage .bdDetailIntro h1{font-size:clamp(36px,4.7vw,68px)!important;max-width:950px;letter-spacing:-.055em;line-height:1.05;margin:0 0 20px!important}
.beatlioDisplayPage.bdDetailPage .bdDetailIntro .bdLead{font-size:18px!important;line-height:1.65!important;max-width:800px}
.beatlioDisplayPage.bdDetailPage .bdDetailIntro .wp-block-buttons{margin-top:22px!important}
.beatlioDisplayPage.bdDetailPage .bdDetailIntro .wp-block-button__link{min-height:42px;padding:9px 15px;font-size:12px!important}
.beatlioDisplayPage.bdDetailPage .bdSection{padding:56px 0!important}
.beatlioDisplayPage.bdDetailPage .bdDetailSteps>p.bdFine{margin-top:20px!important}
.beatlioDisplayPage.bdDetailPage .bdFinal{margin-top:16px!important}
@media(max-width:720px){
  /* Hide only known 4.1 default overview sections, not user's other custom blocks. */
  .beatlioDisplayPage:not(.bdDetailPage) .bdTrustRail,
  .beatlioDisplayPage:not(.bdDetailPage) .bdModes,
  .beatlioDisplayPage:not(.bdDetailPage) .bdUseCases,
  .beatlioDisplayPage:not(.bdDetailPage) .bdFeatures,
  .beatlioDisplayPage:not(.bdDetailPage) .bdSteps,
  .beatlioDisplayPage:not(.bdDetailPage) .bdHardware,
  .beatlioDisplayPage:not(.bdDetailPage) .bdSubscriptions,
  .beatlioDisplayPage:not(.bdDetailPage) .bdOptionalMusic,
  .beatlioDisplayPage:not(.bdDetailPage) .bdDisplayFaq{display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub{display:block!important;margin:0!important;padding:21px 18px 20px!important;border:1px solid rgba(98,209,137,.22);border-radius:19px;background:linear-gradient(145deg,#10201d,#0d1120)!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub .bdEyebrow{font-size:9px!important;letter-spacing:.11em!important;margin:0 0 8px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub h2{font-size:clamp(23px,6vw,30px)!important;line-height:1.1!important;margin:0 0 9px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub>p:not(.bdEyebrow){font-size:13px!important;line-height:1.48!important;margin:0 0 15px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubLinks{display:grid!important;gap:8px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;column-gap:11px;padding:12px 13px!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);min-width:0!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem h3{grid-column:1!important;font-size:15px!important;line-height:1.2!important;margin:0 0 3px!important;color:#f4f8ff!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem p{grid-column:1!important;font-size:11px!important;line-height:1.35!important;color:#aabcc9!important;margin:0!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-buttons{grid-column:2!important;grid-row:1 / 3!important;margin:0!important;width:auto!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-button{width:auto!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-button__link{width:auto!important;min-height:37px!important;font-size:11px!important;white-space:nowrap;padding:7px 9px!important;border-color:rgba(106,231,140,.26)!important;color:#aaf1c0!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero{padding:25px 0 10px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero h1{font-size:clamp(32px,8.5vw,42px)!important;line-height:1.07!important;margin-bottom:12px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdLead{font-size:13px!important;line-height:1.5!important;margin-bottom:4px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdFine{display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .wp-block-buttons{margin-top:14px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .wp-block-button.is-style-outline{display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .wp-block-button__link{min-height:44px!important}
  /* Smartphone: hero mockup only as one compact monitor, no second long illustration. */
  .beatlioDisplayPage:not(.bdDetailPage) .bdHeroCols>.wp-block-column:nth-child(2){display:block!important;max-width:420px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisual{min-height:178px!important;max-height:178px!important;margin:0 auto!important;overflow:hidden!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisualMonitor{top:7%!important;left:4%!important;right:10%!important;filter:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisualTouch,
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisualPill,
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisualNote,
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisualNeck,
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisualFoot{display:none!important}
  /* One clear contact CTA in the hero: no duplicate closing pitch on phones. */
  .beatlioDisplayPage:not(.bdDetailPage) .bdFinal{display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdFinal .bdEyebrow{display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdFinal h2{font-size:23px!important;margin:0 0 8px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdFinal>p:not(.bdEyebrow){font-size:12px!important;line-height:1.45!important;margin:0 0 8px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdFinal .wp-block-buttons{margin-top:12px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdFinal .wp-block-button.is-style-outline{display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdFinal .wp-block-button__link{min-height:43px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .beatlioDisplayEditorContent{padding-bottom:28px!important}
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro{padding:29px 0 12px!important}
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro h1{font-size:clamp(30px,8vw,43px)!important}
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro .bdLead{font-size:14px!important;line-height:1.5!important}
  .beatlioDisplayPage.bdDetailPage .bdSection{padding:31px 0!important}
  .beatlioDisplayPage.bdDetailPage .bdCard{padding:18px!important}
  .beatlioDisplayPage.bdDetailPage .bdCard h3{font-size:19px!important}
  .beatlioDisplayPage.bdDetailPage .bdFinal{padding:24px 17px!important}
}


/* 4.3: Display Desktop-Layout. Mobile (< 961px) and editorial content remain unchanged.
   Four-card sections fill one row; three-card groups stay in a single row;
   six-feature sections use a balanced 3 x 2 layout with readable copy. */
@media (min-width: 1180px) {
  .beatlioDisplayPage .bdUseCases > .bdGrid,
  .beatlioDisplayPage .bdDisplayFaq > .bdGrid,
  .beatlioDisplayPage.bdDetailPage .bdDetailCards > .bdGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .beatlioDisplayPage .bdUseCases > .bdGrid > .bdCard,
  .beatlioDisplayPage .bdDisplayFaq > .bdGrid > .bdCard,
  .beatlioDisplayPage.bdDetailPage .bdDetailCards > .bdGrid > .bdCard {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(20px, 1.8vw, 28px) !important;
  }
  .beatlioDisplayPage .bdUseCases .bdCard h3,
  .beatlioDisplayPage .bdDisplayFaq .bdCard h3,
  .beatlioDisplayPage.bdDetailPage .bdDetailCards .bdCard h3 {
    font-size: clamp(19px, 1.55vw, 23px) !important;
    overflow-wrap: break-word;
  }
}
@media (min-width: 1101px) {
  .beatlioDisplayPage .bdModes > .bdGrid,
  .beatlioDisplayPage .bdFeatures > .bdGrid,
  .beatlioDisplayPage .bdSteps > .bdGrid,
  .beatlioDisplayPage.bdDetailPage .bdDetailSteps > .bdGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 17px !important;
    align-items: stretch !important;
  }
  .beatlioDisplayPage .bdSection {padding-top: 68px !important;padding-bottom: 68px !important;}
  .beatlioDisplayPage .bdGrid > .bdCard {min-width: 0 !important;margin: 0 !important;}
  .beatlioDisplayPage .bdSection .bdCard {padding: clamp(23px, 2.1vw, 30px) !important;}
  .beatlioDisplayPage .bdCard .bdCardEyebrow {margin-bottom: 12px !important;}
  .beatlioDisplayPage .bdCard h3 {margin-bottom: 10px !important;}
  .beatlioDisplayPage.bdDetailPage .bdSection {padding-top: 48px !important;padding-bottom: 48px !important;}
}
/* A 10–11-inch landscape laptop is desktop too: don't stack the hero monitors
   under the text until the tablet/mobile breakpoint. */
@media (min-width: 961px) and (max-width: 1100px) {
  .beatlioDisplayPage .bdHeroCols,
  .beatlioDisplayHomeTeaser .bdHomeTeaserCols {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: center !important;
  }
  .beatlioDisplayPage .bdHero h1 {font-size: clamp(39px, 4.4vw, 49px) !important;}
  .beatlioDisplayPage .bdHero .bdLead {font-size: 15px !important;line-height: 1.55 !important;}
  .beatlioDisplayPage .bdHero .wp-block-button__link {font-size: 12px !important;padding-inline: 13px !important;}
  .beatlioDisplayPage .bdHero .bdVisual {min-height: 400px !important;}
  .beatlioDisplayHomeTeaser .bdVisual {min-height: 330px !important;}
}

/* 4.4 – Real WordPress/Gutenberg layout resilience: keep full-width grid groups
   and ensure group cards are real grid items, not constrained flow blocks. */
.beatlioDisplayPage .beatlioDisplayEditorContent,
.beatlioDisplayPage .beatlioDisplayEditorContent > .wp-block-group,
.beatlioDisplayPage .beatlioDisplayEditorContent .bdSection,
.beatlioDisplayPage .beatlioDisplayEditorContent .bdGrid {
  width:100%!important;max-width:100%!important;min-width:0!important;
}
.beatlioDisplayPage .beatlioDisplayEditorContent .bdSection > .bdGrid,
.beatlioDisplayPage .beatlioDisplayEditorContent .bdReliableGrid {
  display:grid!important;align-items:stretch!important;justify-items:stretch!important;
  margin-left:0!important;margin-right:0!important;
}
.beatlioDisplayPage .beatlioDisplayEditorContent .bdGrid > .bdCard,
.beatlioDisplayPage .beatlioDisplayEditorContent .bdReliableGrid > .bdCard {
  width:100%!important;max-width:none!important;min-width:0!important;
  margin:0!important;grid-column:auto!important;grid-row:auto!important;
  justify-self:stretch!important;align-self:stretch!important;
}
@media(min-width:1180px){
  .beatlioDisplayPage .beatlioDisplayEditorContent .bdUseCases > .bdGrid,
  .beatlioDisplayPage .beatlioDisplayEditorContent .bdDisplayFaq > .bdGrid,
  .beatlioDisplayPage.bdDetailPage .beatlioDisplayEditorContent .bdDetailCards > .bdGrid {
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media(min-width:961px) and (max-width:1179px){
  .beatlioDisplayPage .beatlioDisplayEditorContent .bdUseCases > .bdGrid,
  .beatlioDisplayPage .beatlioDisplayEditorContent .bdDisplayFaq > .bdGrid,
  .beatlioDisplayPage.bdDetailPage .beatlioDisplayEditorContent .bdDetailCards > .bdGrid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* 4.4 – Mobile product-page hierarchy: brief pitch, one monitor, three large
   navigational targets. The full Gutenberg sections stay available on desktop
   and on the three independent detail pages; nothing is deleted. */
@media(max-width:720px){
  .beatlioDisplayPage:not(.bdDetailPage) .beatlioDisplayEditorContent{padding:0 0 23px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero{padding:18px 0 5px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHeroCols{gap:3px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdEyebrow{
    font-size:9px!important;letter-spacing:.1em!important;line-height:1.5!important;
    margin:0 0 9px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero h1{
    font-size:clamp(29px,7.9vw,35px)!important;line-height:1.045!important;
    margin:0 0 11px!important;letter-spacing:-.048em!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdLead{
    font-size:13px!important;line-height:1.46!important;margin:0!important;max-width:510px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .wp-block-buttons{margin-top:13px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .wp-block-button__link{
    min-height:43px!important;border-radius:11px!important;font-size:13px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHeroCols>.wp-block-column:nth-child(2){
    max-width:360px!important;width:100%!important;min-width:0!important;margin:4px auto 0!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisual{
    min-height:140px!important;max-height:140px!important;max-width:360px!important;
    width:100%!important;margin:0 auto!important;overflow:hidden!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisualMonitor{
    left:9%!important;right:auto!important;width:82%!important;top:0!important;
    height:auto!important;aspect-ratio:16/9!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisualAura{filter:blur(14px)!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub{
    display:block!important;border-radius:16px!important;padding:15px 13px!important;
    margin:1px 0 0!important;background:linear-gradient(150deg,#101b1e,#101422)!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub>.bdEyebrow,
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub>p:not(.bdEyebrow){display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub h2{
    font-size:21px!important;line-height:1.18!important;letter-spacing:-.03em!important;
    margin:0 0 12px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubLinks{display:grid!important;gap:7px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem{
    position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 35px!important;
    align-items:center!important;gap:0 8px!important;padding:10px 9px 10px 12px!important;
    border-radius:11px!important;background:#151c27!important;min-width:0!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem h3{
    font-size:14px!important;line-height:1.24!important;font-weight:800!important;margin:0 0 2px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem p{
    font-size:11px!important;line-height:1.3!important;margin:0!important;color:#9daec1!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-buttons{
    grid-column:2!important;grid-row:1 / 3!important;width:35px!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-button{
    width:35px!important;height:35px!important;margin:0!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-button__link{
    font-size:0!important;line-height:0!important;display:flex!important;align-items:center!important;
    justify-content:center!important;width:35px!important;height:35px!important;min-height:35px!important;
    padding:0!important;border-radius:50%!important;background:rgba(82,218,129,.085)!important;
    border:1px solid rgba(106,231,140,.22)!important;color:transparent!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-button__link::after{
    content:'→';font-size:19px!important;line-height:1!important;color:#a1f3bc!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-button__link::before{
    content:'';position:absolute;inset:0;z-index:2
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem:focus-within{
    outline:2px solid #6ce899;outline-offset:2px
  }
  /* Compact explanatory subpages – retain every editable block. */
  .beatlioDisplayPage.bdDetailPage .beatlioDisplayEditorContent{padding-bottom:20px!important}
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro{padding:20px 0 6px!important}
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro .bdEyebrow{font-size:10px!important;margin-bottom:9px!important}
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro h1{
    font-size:clamp(28px,7.5vw,35px)!important;line-height:1.1!important;margin-bottom:10px!important
  }
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro .bdLead{
    font-size:13px!important;line-height:1.48!important;margin:0!important
  }
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro .wp-block-buttons{margin-top:12px!important}
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro .wp-block-button{width:auto!important}
  .beatlioDisplayPage.bdDetailPage .bdDetailIntro .wp-block-button__link{
    width:auto!important;min-height:36px!important;font-size:12px!important;padding:7px 12px!important
  }
  .beatlioDisplayPage.bdDetailPage .bdSection{padding:24px 0!important}
  .beatlioDisplayPage.bdDetailPage .bdSection h2{font-size:25px!important;line-height:1.15!important}
  .beatlioDisplayPage.bdDetailPage .bdGrid{gap:9px!important;margin-top:15px!important}
  .beatlioDisplayPage.bdDetailPage .bdCard{padding:15px 16px!important;border-radius:13px!important}
  .beatlioDisplayPage.bdDetailPage .bdCard .bdCardEyebrow{font-size:9px!important;margin-bottom:6px!important}
  .beatlioDisplayPage.bdDetailPage .bdCard h3{font-size:18px!important;margin-bottom:6px!important}
  .beatlioDisplayPage.bdDetailPage .bdCard>p:last-child{font-size:12px!important;line-height:1.47!important}
  .beatlioDisplayPage.bdDetailPage .bdFinal{padding:19px 16px!important;border-radius:16px!important}
  .beatlioDisplayPage.bdDetailPage .bdFinal h2{font-size:25px!important}
}
/* On 8–10-inch portrait/tablet screens, also show the short product overview. */
@media(min-width:721px) and (max-width:960px){
  .beatlioDisplayPage:not(.bdDetailPage) .bdTrustRail,
  .beatlioDisplayPage:not(.bdDetailPage) .bdModes,
  .beatlioDisplayPage:not(.bdDetailPage) .bdUseCases,
  .beatlioDisplayPage:not(.bdDetailPage) .bdFeatures,
  .beatlioDisplayPage:not(.bdDetailPage) .bdSteps,
  .beatlioDisplayPage:not(.bdDetailPage) .bdHardware,
  .beatlioDisplayPage:not(.bdDetailPage) .bdSubscriptions,
  .beatlioDisplayPage:not(.bdDetailPage) .bdOptionalMusic,
  .beatlioDisplayPage:not(.bdDetailPage) .bdDisplayFaq,
  .beatlioDisplayPage:not(.bdDetailPage) .bdFinal{display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub{
    display:block!important;max-width:850px!important;margin:12px auto 0!important;
    padding:24px!important;border-radius:19px!important;border:1px solid rgba(98,209,137,.22)!important;
    background:linear-gradient(145deg,#10201d,#0d1120)!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubLinks{display:grid!important;gap:8px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;padding:12px 16px!important;border-radius:13px!important;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09)
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem h3,
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem p{grid-column:1!important;margin:0!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-buttons{
    grid-column:2!important;grid-row:1 / 3!important;margin:0!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisual{min-height:320px!important;max-width:640px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero{padding:36px 0 20px!important}
}
/* Keep the entire sample advertisement visible on phones; no chopped monitor. */
@media(max-width:720px){
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdVisual{
    height:auto!important;min-height:0!important;max-height:none!important;
    aspect-ratio:2.03 / 1!important;overflow:visible!important
  }
}


/* 4.5: Full-width desktop cards even if core/group applies a narrow
   Gutenberg content-width; display-layout.js measures the actual page edge. */
@media(min-width:961px){
  .beatlioDisplayPage .beatlioDisplayEditorContent .bdSection,
  .beatlioDisplayPage .beatlioDisplayEditorContent .bdSection > .bdGrid{
    max-width:none!important;min-width:0!important;overflow:visible!important;
  }
  .beatlioDisplayPage .beatlioDisplayEditorContent .bdGrid > .bdCard{
    box-sizing:border-box!important;overflow-wrap:normal!important;word-break:normal!important;
  }
  .beatlioDisplayPage .beatlioDisplayEditorContent .bdCard h3{
    overflow-wrap:break-word!important;word-break:normal!important;hyphens:none!important;
  }
}
/* The first phone screen explains the product BEFORE the three navigational links.
   Each text and CTA is a Gutenberg block, editable in WordPress. */
.beatlioDisplayPage:not(.bdDetailPage) .bdMobileIntro,
.beatlioDisplayPage:not(.bdDetailPage) .bdMobileAction{display:none!important}
@media(max-width:960px){
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileIntro{
    display:block!important;position:relative!important;width:100%!important;max-width:100%!important;
    margin:0 0 18px!important;padding:21px 21px 20px!important;
    border:1px solid rgba(105,216,137,.16)!important;border-radius:18px!important;
    background:linear-gradient(145deg,rgba(25,35,39,.9),rgba(16,23,38,.9))!important;
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileIntro .bdEyebrow{
    font-size:10px!important;margin:0 0 8px!important;letter-spacing:.1em!important;
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileIntro h2{
    font-size:clamp(23px,5.8vw,32px)!important;line-height:1.15!important;
    margin:0 0 10px!important;letter-spacing:-.035em!important;
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileIntro p:not(.bdEyebrow){
    font-size:13px!important;line-height:1.55!important;margin:0!important;max-width:660px!important;
  }
  .beatlioDisplayPage:not(.bdDetailPage):has(.bdMobileAction) .bdHero .wp-block-buttons{
    display:none!important;
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileAction{
    display:block!important;width:100%!important;max-width:100%!important;
    padding:0!important;margin:13px 0 0!important;
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileAction .wp-block-buttons{
    display:flex!important;margin:0!important;gap:0!important;
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileAction .wp-block-button{
    width:100%!important;
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileAction .wp-block-button__link{
    display:flex!important;width:100%!important;min-height:46px!important;
    font-size:14px!important;
  }
}
@media(max-width:720px){
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero{padding-bottom:12px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileIntro{padding:17px 17px 16px!important;margin:0 0 14px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileIntro h2{font-size:23px!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub{margin:0!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileAction{margin:13px 0 0!important}
}


/* Beatlio Display 4.6: Der tatsächliche mobile Seitenaufbau aus WordPress.
   Präsentation zuerst, dann Navigation, danach genau ein Anfragebutton.
   Keine Änderungen am Desktop und keine Änderungen an gespeicherten Seiten. */
@media (max-width:960px){
  .beatlioDisplayPage:not(.bdDetailPage) .beatlioDisplayEditorContent{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    width:100%!important;min-width:0!important;max-width:100%!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .beatlioDisplayEditorContent > *{
    min-width:0!important;max-width:100%!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .beatlioDisplayEditorContent > .bdHero{order:-30!important}
  .beatlioDisplayPage:not(.bdDetailPage) .beatlioDisplayEditorContent > .bdMobileHub{order:-20!important}
  .beatlioDisplayPage:not(.bdDetailPage) .beatlioDisplayEditorContent > .bdMobileAction{order:-10!important}
  /* Die vorige mobile Erklärung wiederholt den Text der Hero-Vorstellung. */
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileIntro{display:none!important}
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero{
    width:100%!important;margin:0!important;padding-top:17px!important;padding-bottom:17px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHeroCols{
    width:100%!important;max-width:100%!important;min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;gap:9px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHeroCols > .wp-block-column{
    min-width:0!important;width:100%!important;max-width:100%!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub{
    width:100%!important;max-width:100%!important;margin:0!important
  }
  /* Navigationspfeil bleibt rechts, auch wenn Gutenberg Grid-Regeln ergänzt. */
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem{
    display:block!important;position:relative!important;
    min-height:64px!important;padding:12px 57px 12px 13px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem > h3,
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem > p{
    display:block!important;width:100%!important;max-width:100%!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHubItem .wp-block-buttons{
    position:absolute!important;top:50%!important;right:11px!important;left:auto!important;
    transform:translateY(-50%)!important;grid-column:auto!important;grid-row:auto!important;
    width:35px!important;height:35px!important;margin:0!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileAction{
    width:100%!important;max-width:100%!important;margin:12px 0 0!important
  }
}
@media (max-width:720px){
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero h1{
    font-size:clamp(28px,7.1vw,34px)!important;line-height:1.07!important;
    letter-spacing:-.045em!important;margin-bottom:10px!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHero .bdLead{
    font-size:12.5px!important;line-height:1.48!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdHeroCols > .wp-block-column:nth-child(2){
    margin:7px auto 0!important
  }
  .beatlioDisplayPage:not(.bdDetailPage) .bdMobileHub h2{
    font-size:20px!important;margin-bottom:10px!important
  }
}