/* Two different mobile compositions. No desktop or cinematic selectors. */
@media(max-width:720px), (pointer:coarse) and (max-width:1024px) and (max-height:500px){
 html body.editorial-site #main section#vergleich>.wrap{
  background:#fff!important;overflow:hidden;border-radius:8px!important;
 }
 html body.editorial-site #main section#vergleich .p-opening{
  display:block!important;background:#fff!important;margin:0!important;padding:0!important;
 }
 html body.editorial-site #main section#vergleich .p-opening>div:first-child{
  position:relative!important;display:flex!important;align-items:center!important;
  min-height:156px!important;padding:16px 35% 16px 0!important;
  background:none!important;border-radius:0!important;
 }
 html body.editorial-site #main section#vergleich .p-opening>div:first-child::after{
  content:''!important;display:block!important;position:absolute!important;
  inset:0 0 0 auto!important;width:30%!important;height:auto!important;
  background:url('assets/selection/what-you-get-courtyard-v1.jpg') 51% 48%/cover!important;
  border:0!important;border-radius:8px!important;transform:none!important;opacity:1!important;
 }
 html body.editorial-site #main section#vergleich .p-opening h2{
  color:#102e3b!important;width:100%!important;margin:0!important;
  font-size:30px!important;line-height:1.08!important;letter-spacing:-.055em!important;
 }
 html body.editorial-site #main section#vergleich .selection-title-quiet,
 html body.editorial-site #main section#vergleich .selection-title-result{
  display:block!important;max-width:none!important;font-size:clamp(27px,7.7vw,34px)!important;
  line-height:1.08!important;letter-spacing:-.055em!important;color:#102e3b!important;
 }
 html body.editorial-site #main section#vergleich .selection-title-quiet{margin:0 0 9px!important;color:#62747b!important}
 html body.editorial-site #main section#vergleich .p-opening>p{
  padding:18px 0 22px!important;margin:0!important;max-width:38ch!important;
  font-size:16px!important;line-height:1.55!important;color:#52646c!important;
 }
 html body.editorial-site #main section#vergleich .flow-switch{
  width:100%!important;margin:0!important;padding:4px!important;gap:4px!important;
  background:#f4f1ea!important;border:0!important;min-height:52px!important;
 }
 html body.editorial-site #main section#vergleich .flow-switch button,
 html body.editorial-site #main section#vergleich .flow-switch button+button{
  min-height:44px!important;padding:10px 5px!important;font-size:14px!important;
  border:0!important;background:transparent!important;color:#617077!important;
 }
 html body.editorial-site #main section#vergleich .flow-switch button[aria-selected=true]{
  background:#fff!important;color:#102e3b!important;box-shadow:0 2px 6px #102e3b08!important;
 }
 html body.editorial-site #main section#vergleich .flow-switch button::after{display:none!important}
 html body.editorial-site #main section#vergleich .p-discovery,
 html body.editorial-site #main section#vergleich .p-example{
  margin:0!important;padding:24px 0 0!important;background:#fff!important;
 }
 html body.editorial-site #main section#vergleich .p-services{
  display:block!important;padding:22px!important;background:#f4f1ea!important;border-radius:8px!important;
 }
 html body.editorial-site #main section#vergleich .p-services article{
  margin:0!important;padding:0!important;background:none!important;border:0!important;
 }
 html body.editorial-site #main section#vergleich .p-services article+article{
  margin-top:23px!important;padding-top:20px!important;border-top:1px solid #e4e8e6!important;
 }
 html body.editorial-site #main section#vergleich .p-services h3{
  margin:0 0 8px!important;font-size:15px!important;font-weight:700!important;
  color:#8a5c25!important;letter-spacing:0!important;
 }
 html body.editorial-site #main section#vergleich .service-copy-lead{
  font-size:20px!important;line-height:1.35!important;color:#102e3b!important;
 }
 html body.editorial-site #main section#vergleich #hotelservice .service-copy-lead{
  font-size:26px!important;line-height:1.2!important;letter-spacing:-.045em!important;
 }
 html body.editorial-site #main section#vergleich .service-copy-line{
  margin-top:10px!important;font-size:16px!important;line-height:1.5!important;color:#52646c!important;
 }
 html body.editorial-site #main section#vergleich .service-booking-note{
  margin-top:22px!important;padding:18px 0 0!important;border-top:1px solid #e4e8e6!important;
  background:none!important;border-radius:0!important;
 }
 html body.editorial-site #main section#vergleich .service-booking-note .p-separate{
  font-size:14px!important;line-height:1.5!important;max-width:38ch!important;
 }
 html body.editorial-site #main section#vergleich .booking-details-trigger{
  font-size:14px!important;min-height:44px!important;margin:4px 0 0!important;
 }
 html body.editorial-site #main section#vergleich .p-example-context{
  border:0!important;padding:0 0 16px!important;margin:0!important;
 }
 html body.editorial-site #main section#vergleich .mobile-comparison-tabs{
  margin:0 0 12px!important;gap:8px!important;
 }
 html body.editorial-site #main section#vergleich .mobile-comparison-tabs button{
  background:#f4f1ea!important;color:#536771!important;font-size:14px!important;
  min-height:44px!important;padding:10px 4px!important;
 }
 html body.editorial-site #main section#vergleich .mobile-comparison-tabs button[aria-selected=true]{
  background:#102e3b!important;color:#fff!important;
 }
 html body.editorial-site #main section#vergleich .p-options>article[data-mobile-hotel-active]{
  min-height:320px!important;padding:24px!important;border-radius:8px!important;overflow:hidden!important;
 }
 html body.editorial-site #main section#vergleich .p-options>article>h4{
  font-size:30px!important;margin:12px 0 16px!important;
 }

 /* A navigation dial and compact choices give the quiz its own mobile identity. */
 html body.editorial-site #main .compass-section{background:#fff!important;padding-block:48px!important}
 html body.editorial-site #main div#regionen-check.region-check{
  width:calc(100% - 48px)!important;min-height:0!important;height:auto!important;
  padding:0!important;border:0!important;background:transparent!important;
  border-radius:0!important;overflow:visible!important;box-shadow:none!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-panel{
  min-height:0!important;height:auto!important;padding:0!important;
  border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-panel .check-intro{
  position:relative!important;display:block!important;padding:0!important;margin:0 0 24px!important;
  min-height:0!important;border:0!important;background:transparent!important;
 }
 html body.editorial-site #main div#regionen-check .check-intro .eyebrow{display:none!important}
 html body.editorial-site #main div#regionen-check .check-intro h2{
  font-size:30px!important;line-height:1.12!important;max-width:calc(100% - 100px)!important;min-height:82px;
  letter-spacing:-.045em!important;color:#102e3b!important;margin:0!important;text-wrap:balance;
 }
 html body.editorial-site #main div#regionen-check .check-intro h2 br{display:none!important}
 html body.editorial-site #main div#regionen-check .check-intro>p{
  font-size:15px!important;line-height:1.5!important;max-width:37ch!important;
  color:#52646c!important;margin:12px 0 0!important;text-wrap:balance;
 }
 html body.editorial-site #main div#regionen-check .compass-instrument,
 html body.editorial-site #main div#regionen-check .quiz-panel-head{display:none!important}
 html body.editorial-site #main div#regionen-check .quiz{
  display:block!important;min-height:0!important;padding:0!important;border:0!important;
 }
 html body.editorial-site #main div#regionen-check:not(.has-result) .quiz{min-height:520px!important}
 html body.editorial-site #main div#regionen-check .mobile-quiz-dial{
  position:absolute;right:0;top:0;width:82px;height:82px;
 }
 html body.editorial-site #main div#regionen-check .mobile-quiz-dial svg{display:block;width:100%;height:100%}
 html body.editorial-site #main div#regionen-check .dial-face{fill:#f6f2e9}
 html body.editorial-site #main div#regionen-check .dial-sector{stroke:#e8dcc8;stroke-width:6;stroke-linecap:round;transition:stroke .4s ease}
 html body.editorial-site #main div#regionen-check .dial-sector.is-active{stroke:#d9a14d}
 html body.editorial-site #main div#regionen-check .dial-needle{transform-origin:50% 50%;transform-box:view-box;transition:transform .55s cubic-bezier(.22,.68,.22,1)}
 html body.editorial-site #main div#regionen-check .dial-north{fill:#247d83}
 html body.editorial-site #main div#regionen-check .dial-south{fill:#dfc79f}
 html body.editorial-site #main div#regionen-check .dial-pivot{fill:#102e3b}
 /* Preserve the accessible progressbar; the dial provides the visual progress. */
 html body.editorial-site #main div#regionen-check .quiz-progress{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:0!important;overflow:hidden!important;clip-path:inset(50%);
 }
 html body.editorial-site #main div#regionen-check .quiz>h3{
  display:flex!important;align-items:center!important;min-height:126px!important;
  padding:22px!important;box-sizing:border-box;background:#102e3b!important;
  border-radius:28px 28px 10px 10px!important;
  font-size:24px!important;line-height:1.2!important;letter-spacing:-.035em!important;
  color:#fff!important;margin:0 0 14px!important;max-width:none!important;text-wrap:balance;
 }
 html body.editorial-site #main div#regionen-check .quiz-answers{display:grid!important;gap:9px!important}
 html body.editorial-site #main div#regionen-check .quiz-answers button,
 html body.editorial-site #main div#regionen-check .quiz-answers button:hover{
  display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;
  gap:12px!important;align-items:center!important;padding:16px!important;
  width:100%!important;min-width:0!important;min-height:96px!important;
  font-size:15px!important;line-height:1.45!important;text-align:left!important;
  color:#102e3b!important;background:#f6f2e9!important;border:0!important;
  border-radius:14px!important;box-shadow:none!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-answers button>span{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:32px!important;height:32px!important;border-radius:50%!important;
  background:#fff!important;color:#8a5c25!important;font-size:13px!important;font-weight:700!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-answers button:hover{transform:none!important}
 html body.editorial-site #main div#regionen-check .quiz-answers button:active>span{background:#f4b65b!important}
 html body.editorial-site #main div#regionen-check #quiz-back,
 html body.editorial-site #main div#regionen-check #quiz-reset{
  color:#52646c!important;font-size:14px!important;min-height:44px!important;margin:12px 0 0!important;
 }
 html body.editorial-site #main div#regionen-check.has-result .check-intro{display:none!important}
 html body.editorial-site #main div#regionen-check .quiz-result{
  display:grid!important;grid-template-columns:minmax(0,1fr) clamp(84px,25vw,112px)!important;
  gap:0 16px!important;padding:0!important;background:transparent!important;color:#102e3b!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-result>*{grid-column:1 / -1!important}
 html body.editorial-site #main div#regionen-check .quiz-result>img{
  grid-column:2!important;grid-row:1 / 3!important;
  width:100%!important;height:auto!important;aspect-ratio:1;object-fit:cover!important;
  margin:0 0 22px!important;order:0!important;border-radius:50%!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-result>.eyebrow{
  grid-column:1!important;grid-row:1!important;
  color:#8a5c25!important;margin:0 0 8px!important;font-size:12px!important;
 }
 html body.editorial-site #main div#regionen-check .result-place{grid-column:1!important;grid-row:2!important;margin:0 0 22px!important}
 html body.editorial-site #main div#regionen-check .result-place h3{
  color:#102e3b!important;font-size:30px!important;margin:0!important;line-height:1.1!important;
 }
 html body.editorial-site #main div#regionen-check .result-coordinates{
  display:block!important;margin:12px 0 0!important;padding:0!important;border:0!important;
  color:#8a5c25!important;font-size:13px!important;line-height:1.5!important;
  font-weight:400!important;letter-spacing:.02em!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-result>p{
  color:#52646c!important;font-size:16px!important;line-height:1.5!important;margin:0 0 14px!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-result>.result-intro{
  color:#247d83!important;font-size:21px!important;line-height:1.35!important;margin-bottom:18px!important;
 }
 html body.editorial-site #main div#regionen-check .result-focus{
  border:0!important;padding:0!important;margin:6px 0 20px!important;gap:10px!important;
 }
 html body.editorial-site #main div#regionen-check .result-focus li{
  color:#52646c!important;background:transparent!important;border:0!important;padding:0!important;font-size:15px!important;
 }
 html body.editorial-site #main div#regionen-check .result-focus li::before,
 html body.editorial-site #main div#regionen-check .result-focus li::after{display:none!important}
 html body.editorial-site #main div#regionen-check .result-action{
  margin:0!important;padding:20px 0 0!important;border:0!important;border-top:1px solid #e4e8e3!important;
 }
 html body.editorial-site #main div#regionen-check .result-action>p{color:#102e3b!important;font-size:18px!important;margin:0 0 12px!important}
 html body.editorial-site #main div#regionen-check .result-action .button{
  width:100%!important;min-width:0!important;min-height:52px!important;font-size:15px!important;
  line-height:1.4!important;white-space:normal!important;padding:14px 16px!important;
  background:#f4b65b!important;color:#102e3b!important;
 }
 html body.editorial-site #main div#regionen-check .result-action>span{color:#52646c!important;font-size:13px!important}
 html body.editorial-site #main :is(section#vergleich,div#regionen-check) :is(button,a):focus-visible{
  outline:2px solid #b27a2f!important;outline-offset:3px!important;
 }
 html body.editorial-site #main div#regionen-check .quiz-answers button:focus-visible{outline-color:#f4b65b!important}
}
@media(max-width:360px){
 html body.editorial-site #main div#regionen-check:not(.has-result) .quiz{min-height:575px!important}
 html body.editorial-site #main div#regionen-check .quiz>h3{min-height:126px!important;font-size:23px!important;padding:20px!important}
 html body.editorial-site #main div#regionen-check .quiz-answers button,
 html body.editorial-site #main div#regionen-check .quiz-answers button:hover{min-height:112px!important}
}

@media(prefers-reduced-motion:reduce){
 html body.editorial-site #main div#regionen-check :is(.dial-needle,.dial-sector){transition:none!important}
}