@import url("mobile-selection-v173.css");
.selection-copy-mobile{display:none}

/* Mobile chapter 02 — clear editorial hierarchy, with no vertical decorative rules. */
@media(max-width:720px), (pointer:coarse) and (max-width:1024px) and (max-height:500px){
  html body.editorial-site #vergleich *,
  html body.editorial-site #vergleich *::before,
  html body.editorial-site #vergleich *::after{
    border-left-width:0!important;
    border-right-width:0!important;
    border-inline-start-width:0!important;
    border-inline-end-width:0!important;
  }

  html body.editorial-site #vergleich .selection-copy-desktop{display:none!important}
  html body.editorial-site #vergleich .selection-copy-mobile{
    display:block!important;
    max-width:26ch!important;
    color:#344e59!important;
    font-size:18px!important;
    font-weight:400!important;
    letter-spacing:-.025em!important;
    line-height:1.32!important;
  }
  html body.editorial-site #vergleich .selection-copy-mobile strong{
    display:block!important;
    margin-top:12px!important;
    color:#657983!important;
    font-size:14px!important;
    font-weight:400!important;
    letter-spacing:0!important;
    line-height:1.55!important;
  }
  html body.editorial-site #vergleich .p-opening>p{
    max-width:none!important;
    margin:21px 0 27px!important;
    padding:0!important;
    border:0!important;
  }

  html body.editorial-site #vergleich .flow-switch{
    gap:8px!important;
    border:0!important;
    background:transparent!important;
  }
  html body.editorial-site #vergleich .flow-switch button,
  html body.editorial-site #vergleich .flow-switch button+button{
    min-height:46px!important;
    padding:0 12px!important;
    border:1px solid #d9e1df!important;
    background:#fff!important;
  }
  html body.editorial-site #vergleich .flow-switch button[aria-selected=true]{background:#f6f2e9!important}
  html body.editorial-site #vergleich .flow-switch button[aria-selected=true]::after{display:none!important}

  html body.editorial-site #vergleich .p-example-context{
    border:0!important;
    border-top:1px solid #d9e1df!important;
    border-bottom:1px solid #d9e1df!important;
  }
  html body.editorial-site #vergleich #hotel-a::after{display:none!important}
}

/* A distinct, compact introduction for mobile. The original copy stays intact. */
@media(max-width:720px), (pointer:coarse) and (max-width:1024px) and (max-height:500px){
 html body.editorial-site .mobile-arrival>a{display:none!important}
 html body.editorial-site #vergleich .p-opening{display:block!important;text-align:left!important;padding:0!important;margin:0!important}
 html body.editorial-site #main #vergleich .p-opening h2{
  width:100%!important;max-width:none!important;margin:0 auto!important;
  font-size:clamp(27px,8.2vw,40px)!important;line-height:1.16!important;
  letter-spacing:-.05em!important;font-weight:400!important;text-align:left!important;
 }
 html body.editorial-site #vergleich .p-opening h2>br{display:none!important}
 html body.editorial-site #vergleich .selection-title-quiet,
 html body.editorial-site #vergleich .selection-title-result{display:block!important;max-width:none!important;margin:0!important;font-size:clamp(27px,8.5vw,45px)!important;font-weight:400!important;line-height:1.15!important;letter-spacing:-.05em!important;color:#102e3b!important}
 html body.editorial-site #vergleich .p-opening>p{
  width:100%!important;max-width:35ch!important;box-sizing:border-box!important;margin:18px 0 28px!important;padding:0!important;
  color:#52646c!important;font-size:16px!important;line-height:1.6!important;text-align:left!important;
 }
 html body.editorial-site #vergleich .selection-copy-mobile{display:none!important}
 html body.editorial-site #vergleich .selection-copy-desktop{display:inline!important}
 html body.editorial-site #vergleich .flow-switch{gap:4px!important;padding:4px!important;background:#f4f1ea!important;border-radius:5px!important;box-shadow:none!important}
 html body.editorial-site #vergleich .flow-switch button,
 html body.editorial-site #vergleich .flow-switch button+button{min-height:48px!important;padding:8px!important;text-align:center!important;font-size:12px!important;background:transparent!important;border-radius:3px!important}
 html body.editorial-site #vergleich .flow-switch button[aria-selected=true]{background:#fff!important;color:#102e3b!important;box-shadow:0 2px 8px #102e3b0d!important}
 html body.editorial-site #vergleich .booking-details-trigger{font-size:13px!important;min-height:44px!important;letter-spacing:0!important;text-transform:none!important;text-decoration:underline!important;text-underline-offset:4px!important}
 html body.editorial-site #vergleich .p-recommendation{padding-top:0!important;margin-top:24px!important}
 html body.editorial-site #vergleich .p-example-context{padding:4px 0 18px!important}
 /* Borders are removed after all component rules, including inherited card/tab rails. */
 html body.editorial-site #main #vergleich,
 html body.editorial-site #main #vergleich *,
 html body.editorial-site #main #vergleich *::before,
 html body.editorial-site #main #vergleich *::after{border:0!important;border-inline:0!important}
 html body.editorial-site #vergleich .flow-switch::before,
 html body.editorial-site #vergleich .flow-switch::after,
 html body.editorial-site #vergleich .p-recommendation::before,
 html body.editorial-site #vergleich .p-recommendation::after{display:none!important}
}