/* main.css */
.text-shadow-white {
  text-shadow: -1.5px -1.5px 0 white, 1.5px -1.5px 0 white, -1.5px 1.5px 0 white, 1.5px 1.5px 0 white;
  color: var(--inn-neutral);
  letter-spacing: 3px;
}
h1 {
  font-size: var(--inn-h1-font-size);
  font-weight: var(--inn-headline-font-weight-h1);
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  h1 {
    font-size: var(--inn-h1-font-size-mobile);
  }
}
h2 {
  font-size: var(--inn-h2-font-size);
  font-weight: var(--inn-headline-font-weight-h2);
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  h2 {
    font-size: var(--inn-h2-font-size-mobile);
  }
}
h3 {
  font-size: var(--inn-h3-font-size);
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  h3 {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
h4 {
  font-size: var(--inn-h4-font-size);
  font-weight: var(--inn-headline-font-weight-h4);
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  h4 {
    font-size: var(--inn-h4-font-size-mobile);
  }
}
.h1-font-size {
  font-size: var(--inn-h1-font-size);
  font-weight: var(--inn-headline-font-weight-h1);
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .h1-font-size {
    font-size: var(--inn-h1-font-size-mobile);
  }
}
.h2-font-size {
  font-size: var(--inn-h2-font-size);
  font-weight: var(--inn-headline-font-weight-h2);
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .h2-font-size {
    font-size: var(--inn-h2-font-size-mobile);
  }
}
.h3-font-size {
  font-size: var(--inn-h3-font-size);
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .h3-font-size {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.h4-font-size {
  font-size: var(--inn-h4-font-size);
  font-weight: var(--inn-headline-font-weight-h4);
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .h4-font-size {
    font-size: var(--inn-h4-font-size-mobile);
  }
}
.h5-font-size {
  font-size: 20px;
  font-weight: var(--inn-headline-font-weight-h4);
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .h5-font-size {
    font-size: var(--inn-h4-font-size-mobile);
  }
}
.reset-br br {
  display: inline;
  content: ' ';
  padding: 0 3px;
}
.v-bold {
  font-weight: 700;
}
.small-dot-styling {
  width: 7px;
  min-width: 7px;
  height: 7px;
  background: var(--inn-primary);
  border-radius: 2px;
}
.ul-points ul {
  list-style: none;
  padding: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  grid-gap: 15px;
}
.ul-points ul li {
  position: relative;
}
.ul-points ul li:before {
  content: "";
  width: 7px;
  min-width: 7px;
  height: 7px;
  background: var(--inn-primary);
  border-radius: 2px;
  display: block;
  position: absolute;
  left: -20px;
  top: 0.4em;
}
.ul-custom ul {
  list-style: none;
  padding: 0!important;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  grid-gap: 15px;
}
.ul-custom ul li {
  position: relative;
  padding-left: 1.8em;
}
.ul-custom ul li:before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  background: url('/files/contao_files/Bilder/svg/icon-stichpunkte-anker.svg') no-repeat center center;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0.2em;
}
.v-primary-color {
  color: var(--inn-primary);
}
.v-secondary-color {
  color: var(--inn-secondary);
}
.v-third-color {
  color: var(--inn-third);
}
.v-fourth-color {
  color: var(--inn-fourth);
}
.v-neutral-color {
  color: var(--inn-neutral);
}
.v-icon-white-bg {
  background: white;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 1px solid #707070;
}
.v-icon-secondary-bg {
  background: var(--inn-secondary);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 20px;
}
@media only screen and (max-width: 767px) {
  .v-icon-secondary-bg {
    width: 55px;
    height: 55px;
  }
}
.v-icon-secondary-bg-small {
  background: var(--inn-secondary);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 5px;
  color: white;
  font-size: 1.2em;
}
.v-icon-primary-bg {
  background: var(--inn-primary);
  color: white;
  width: 45px;
  height: 45px;
  display: flex!important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 1.7em;
}
.v-chevron-right-line-icons:before {
  display: inline-block;
  font: normal normal normal 1em/1 'lineicons';
  color: inherit;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\eb0d";
}
.v-primary-bg {
  background: var(--inn-primary);
}
strong {
  font-weight: 700;
}
.v-max-width-650 {
  max-width: 650px;
}
.v-margin-center {
  margin-left: auto;
  margin-right: auto;
}
.v-bg-primary-light {
  position: relative;
}
.v-bg-primary-light:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--inn-primary);
  opacity: 0.1;
}
.v-bg-primary-light-half-bottom {
  position: relative;
}
.v-bg-primary-light-half-bottom:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  right: 0;
  bottom: 0;
  background: var(--inn-primary);
  opacity: 0.1;
}
.v-bg-primary-light-bigger-bottom {
  position: relative;
}
.v-bg-primary-light-bigger-bottom:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 40%;
  right: 0;
  bottom: 0;
  background: var(--inn-primary);
  opacity: 0.1;
}
.v-bg-primary-light-bigger-top {
  position: relative;
}
.v-bg-primary-light-bigger-top:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 50%;
  background: var(--inn-primary);
  opacity: 0.1;
}
.v-vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.v-vertical-text p {
  margin: 0;
}
.v-vertical-text-normal {
  writing-mode: vertical-rl;
}
.v-vertical-text-normal p {
  margin: 0;
}
/*--------------------------------

Lineicons Free Web Font
Crafted by Lineicons.com Team
Version: 4.0

-------------------------------- */
/* base class */
.lni {
  display: inline-block;
  font: normal normal normal 1em/1 'lineicons';
  color: inherit;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* size examples - relative units */
.lni-sm {
  font-size: 0.8em;
}
.lni-lg {
  font-size: 1.2em;
}
/* size examples - absolute units */
.lni-16 {
  font-size: 16px;
}
.lni-32 {
  font-size: 32px;
}
/* rotate the icon infinitely */
.lni-is-spinning {
  animation: lni-spin 1s infinite linear;
}
@keyframes lni-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* transform */
.lni-rotate-90 {
  transform: rotate(90deg);
}
.lni-rotate-180 {
  transform: rotate(180deg);
}
.lni-rotate-270 {
  transform: rotate(270deg);
}
.lni-flip-y {
  transform: scaleY(-1);
}
.lni-flip-x {
  transform: scaleX(-1);
}
/* icons */
.lni-zoom-out::before {
  content: "\ea02";
}
.lni-zoom-in::before {
  content: "\ea03";
}
.lni-zip::before {
  content: "\ea04";
}
.lni-website::before {
  content: "\ea05";
}
.lni-website-alt::before {
  content: "\ea06";
}
.lni-users::before {
  content: "\ea07";
}
.lni-user::before {
  content: "\ea08";
}
.lni-upload::before {
  content: "\ea09";
}
.lni-unlink::before {
  content: "\ea0a";
}
.lni-trash-can::before {
  content: "\ea0b";
}
.lni-timer::before {
  content: "\ea0c";
}
.lni-tab::before {
  content: "\ea0d";
}
.lni-star-half::before {
  content: "\ea0e";
}
.lni-star-fill::before {
  content: "\ea0f";
}
.lni-star-empty::before {
  content: "\ea10";
}
.lni-signal::before {
  content: "\ea11";
}
.lni-shortcode::before {
  content: "\ea12";
}
.lni-shopping-basket::before {
  content: "\ea13";
}
.lni-share::before {
  content: "\ea14";
}
.lni-share-alt::before {
  content: "\ea15";
}
.lni-search::before {
  content: "\ea16";
}
.lni-search-alt::before {
  content: "\ea17";
}
.lni-scroll-down::before {
  content: "\ea18";
}
.lni-save::before {
  content: "\ea19";
}
.lni-rss-feed::before {
  content: "\ea1a";
}
.lni-rocket::before {
  content: "\ea1b";
}
.lni-remove-file::before {
  content: "\ea1c";
}
.lni-reload::before {
  content: "\ea1d";
}
.lni-printer::before {
  content: "\ea1e";
}
.lni-plug::before {
  content: "\ea1f";
}
.lni-package::before {
  content: "\ea20";
}
.lni-mouse::before {
  content: "\ea21";
}
.lni-mobile::before {
  content: "\ea22";
}
.lni-microphone::before {
  content: "\ea23";
}
.lni-mic::before {
  content: "\ea24";
}
.lni-menu::before {
  content: "\ea25";
}
.lni-map::before {
  content: "\ea26";
}
.lni-map-marker::before {
  content: "\ea27";
}
.lni-magnifier::before {
  content: "\ea28";
}
.lni-magnet::before {
  content: "\ea29";
}
.lni-link::before {
  content: "\ea2a";
}
.lni-laptop::before {
  content: "\ea2b";
}
.lni-laptop-phone::before {
  content: "\ea2c";
}
.lni-keyboard::before {
  content: "\ea2d";
}
.lni-image::before {
  content: "\ea2e";
}
.lni-headphone::before {
  content: "\ea2f";
}
.lni-harddrive::before {
  content: "\ea30";
}
.lni-game::before {
  content: "\ea31";
}
.lni-folder::before {
  content: "\ea32";
}
.lni-files::before {
  content: "\ea33";
}
.lni-empty-file::before {
  content: "\ea34";
}
.lni-download::before {
  content: "\ea35";
}
.lni-domain::before {
  content: "\ea36";
}
.lni-display::before {
  content: "\ea37";
}
.lni-display-alt::before {
  content: "\ea38";
}
.lni-database::before {
  content: "\ea39";
}
.lni-dashboard::before {
  content: "\ea3a";
}
.lni-cut::before {
  content: "\ea3b";
}
.lni-control-panel::before {
  content: "\ea3c";
}
.lni-cogs::before {
  content: "\ea3d";
}
.lni-cog::before {
  content: "\ea3e";
}
.lni-code::before {
  content: "\ea3f";
}
.lni-code-alt::before {
  content: "\ea40";
}
.lni-cloud-upload::before {
  content: "\ea41";
}
.lni-cloud-sync::before {
  content: "\ea42";
}
.lni-cloud-network::before {
  content: "\ea43";
}
.lni-cloud-download::before {
  content: "\ea44";
}
.lni-cloud-check::before {
  content: "\ea45";
}
.lni-camera::before {
  content: "\ea46";
}
.lni-calendar::before {
  content: "\ea47";
}
.lni-bulb::before {
  content: "\ea48";
}
.lni-bookmark::before {
  content: "\ea49";
}
.lni-bookmark-alt::before {
  content: "\ea4a";
}
.lni-bluetooth::before {
  content: "\ea4b";
}
.lni-ban::before {
  content: "\ea4c";
}
.lni-archive::before {
  content: "\ea4d";
}
.lni-alarm::before {
  content: "\ea4e";
}
.lni-alarm-clock::before {
  content: "\ea4f";
}
.lni-add-files::before {
  content: "\ea50";
}
.lni-thunder::before {
  content: "\ea51";
}
.lni-thunder-alt::before {
  content: "\ea52";
}
.lni-sun::before {
  content: "\ea53";
}
.lni-rain::before {
  content: "\ea54";
}
.lni-night::before {
  content: "\ea55";
}
.lni-drop::before {
  content: "\ea56";
}
.lni-cloudy-sun::before {
  content: "\ea57";
}
.lni-cloud::before {
  content: "\ea58";
}
.lni-travel::before {
  content: "\ea59";
}
.lni-surf-board::before {
  content: "\ea5a";
}
.lni-pyramids::before {
  content: "\ea5b";
}
.lni-underline::before {
  content: "\ea5c";
}
.lni-text-format::before {
  content: "\ea5d";
}
.lni-text-format-remove::before {
  content: "\ea5e";
}
.lni-text-align-right::before {
  content: "\ea5f";
}
.lni-text-align-left::before {
  content: "\ea60";
}
.lni-text-align-justify::before {
  content: "\ea61";
}
.lni-text-align-center::before {
  content: "\ea62";
}
.lni-strikethrough::before {
  content: "\ea63";
}
.lni-spellcheck::before {
  content: "\ea64";
}
.lni-sort-amount-dsc::before {
  content: "\ea65";
}
.lni-sort-amount-asc::before {
  content: "\ea66";
}
.lni-sort-alpha-asc::before {
  content: "\ea67";
}
.lni-pilcrow::before {
  content: "\ea68";
}
.lni-pagination::before {
  content: "\ea69";
}
.lni-page-break::before {
  content: "\ea6a";
}
.lni-line-spacing::before {
  content: "\ea6b";
}
.lni-line-double::before {
  content: "\ea6c";
}
.lni-line-dotted::before {
  content: "\ea6d";
}
.lni-line-dashed::before {
  content: "\ea6e";
}
.lni-italic::before {
  content: "\ea6f";
}
.lni-indent-increase::before {
  content: "\ea70";
}
.lni-indent-decrease::before {
  content: "\ea71";
}
.lni-bold::before {
  content: "\ea72";
}
.lni-spinner::before {
  content: "\ea73";
}
.lni-spinner-solid::before {
  content: "\ea74";
}
.lni-spinner-arrow::before {
  content: "\ea75";
}
.lni-hourglass::before {
  content: "\ea76";
}
.lni-tounge::before {
  content: "\ea77";
}
.lni-suspect::before {
  content: "\ea78";
}
.lni-speechless::before {
  content: "\ea79";
}
.lni-smile::before {
  content: "\ea7a";
}
.lni-sad::before {
  content: "\ea7b";
}
.lni-happy::before {
  content: "\ea7c";
}
.lni-friendly::before {
  content: "\ea7d";
}
.lni-cool::before {
  content: "\ea7e";
}
.lni-thought::before {
  content: "\ea7f";
}
.lni-t-shirt::before {
  content: "\ea80";
}
.lni-home::before {
  content: "\ea81";
}
.lni-gift::before {
  content: "\ea82";
}
.lni-cup::before {
  content: "\ea83";
}
.lni-crown::before {
  content: "\ea84";
}
.lni-briefcase::before {
  content: "\ea85";
}
.lni-spray::before {
  content: "\ea86";
}
.lni-flags-alt-1::before {
  content: "\ea87";
}
.lni-fireworks::before {
  content: "\ea88";
}
.lni-candy::before {
  content: "\ea89";
}
.lni-candy-cane::before {
  content: "\ea8a";
}
.lni-cake::before {
  content: "\ea8b";
}
.lni-baloon::before {
  content: "\ea8c";
}
.lni-trees::before {
  content: "\ea8d";
}
.lni-tree::before {
  content: "\ea8e";
}
.lni-sprout::before {
  content: "\ea8f";
}
.lni-mushroom::before {
  content: "\ea90";
}
.lni-mashroom::before {
  content: "\ea91";
}
.lni-leaf::before {
  content: "\ea92";
}
.lni-island::before {
  content: "\ea93";
}
.lni-flower::before {
  content: "\ea94";
}
.lni-bug::before {
  content: "\ea95";
}
.lni-volume::before {
  content: "\ea96";
}
.lni-volume-mute::before {
  content: "\ea97";
}
.lni-volume-medium::before {
  content: "\ea98";
}
.lni-volume-low::before {
  content: "\ea99";
}
.lni-volume-high::before {
  content: "\ea9a";
}
.lni-video::before {
  content: "\ea9b";
}
.lni-stop::before {
  content: "\ea9c";
}
.lni-shuffle::before {
  content: "\ea9d";
}
.lni-play::before {
  content: "\ea9e";
}
.lni-pause::before {
  content: "\ea9f";
}
.lni-gallery::before {
  content: "\eaa0";
}
.lni-full-screen::before {
  content: "\eaa1";
}
.lni-frame-expand::before {
  content: "\eaa2";
}
.lni-forward::before {
  content: "\eaa3";
}
.lni-backward::before {
  content: "\eaa4";
}
.lni-target-customer::before {
  content: "\eaa5";
}
.lni-seo::before {
  content: "\eaa6";
}
.lni-network::before {
  content: "\eaa7";
}
.lni-keyword-research::before {
  content: "\eaa8";
}
.lni-graph::before {
  content: "\eaa9";
}
.lni-bar-chart::before {
  content: "\eaaa";
}
.lni-warning::before {
  content: "\eaab";
}
.lni-unlock::before {
  content: "\eaac";
}
.lni-ticket::before {
  content: "\eaad";
}
.lni-ticket-alt::before {
  content: "\eaae";
}
.lni-thumbs-up::before {
  content: "\eaaf";
}
.lni-thumbs-down::before {
  content: "\eab0";
}
.lni-teabag::before {
  content: "\eab1";
}
.lni-shield::before {
  content: "\eab2";
}
.lni-radio-button::before {
  content: "\eab3";
}
.lni-question-circle::before {
  content: "\eab4";
}
.lni-protection::before {
  content: "\eab5";
}
.lni-power-switch::before {
  content: "\eab6";
}
.lni-pointer::before {
  content: "\eab7";
}
.lni-plus::before {
  content: "\eab8";
}
.lni-music::before {
  content: "\eab9";
}
.lni-more::before {
  content: "\eaba";
}
.lni-more-alt::before {
  content: "\eabb";
}
.lni-minus::before {
  content: "\eabc";
}
.lni-lock::before {
  content: "\eabd";
}
.lni-lock-alt::before {
  content: "\eabe";
}
.lni-list::before {
  content: "\eabf";
}
.lni-lifering::before {
  content: "\eac0";
}
.lni-key::before {
  content: "\eac1";
}
.lni-invention::before {
  content: "\eac2";
}
.lni-information::before {
  content: "\eac3";
}
.lni-infinite::before {
  content: "\eac4";
}
.lni-help::before {
  content: "\eac5";
}
.lni-heart::before {
  content: "\eac6";
}
.lni-heart-fill::before {
  content: "\eac7";
}
.lni-hand::before {
  content: "\eac8";
}
.lni-funnel::before {
  content: "\eac9";
}
.lni-flag::before {
  content: "\eaca";
}
.lni-flag-alt::before {
  content: "\eacb";
}
.lni-eye::before {
  content: "\eacc";
}
.lni-cross-circle::before {
  content: "\eacd";
}
.lni-close::before {
  content: "\eace";
}
.lni-circle-plus::before {
  content: "\eacf";
}
.lni-circle-minus::before {
  content: "\ead0";
}
.lni-checkmark::before {
  content: "\ead1";
}
.lni-checkmark-circle::before {
  content: "\ead2";
}
.lni-check-box::before {
  content: "\ead3";
}
.lni-bolt::before {
  content: "\ead4";
}
.lni-bolt-alt::before {
  content: "\ead5";
}
.lni-wheelchair::before {
  content: "\ead6";
}
.lni-weight::before {
  content: "\ead7";
}
.lni-syringe::before {
  content: "\ead8";
}
.lni-sthethoscope::before {
  content: "\ead9";
}
.lni-slim::before {
  content: "\eada";
}
.lni-skipping-rope::before {
  content: "\eadb";
}
.lni-pulse::before {
  content: "\eadc";
}
.lni-microscope::before {
  content: "\eadd";
}
.lni-hospital::before {
  content: "\eade";
}
.lni-heart-monitor::before {
  content: "\eadf";
}
.lni-first-aid::before {
  content: "\eae0";
}
.lni-dumbbell::before {
  content: "\eae1";
}
.lni-capsule::before {
  content: "\eae2";
}
.lni-basketball::before {
  content: "\eae3";
}
.lni-ambulance::before {
  content: "\eae4";
}
.lni-service::before {
  content: "\eae5";
}
.lni-restaurant::before {
  content: "\eae6";
}
.lni-pizza::before {
  content: "\eae7";
}
.lni-juice::before {
  content: "\eae8";
}
.lni-fresh-juice::before {
  content: "\eae9";
}
.lni-dinner::before {
  content: "\eaea";
}
.lni-coffee-cup::before {
  content: "\eaeb";
}
.lni-chef-hat::before {
  content: "\eaec";
}
.lni-burger::before {
  content: "\eaed";
}
.lni-write::before {
  content: "\eaee";
}
.lni-world::before {
  content: "\eaef";
}
.lni-world-alt::before {
  content: "\eaf0";
}
.lni-school-bench::before {
  content: "\eaf1";
}
.lni-school-bench-alt::before {
  content: "\eaf2";
}
.lni-pencil::before {
  content: "\eaf3";
}
.lni-pencil-alt::before {
  content: "\eaf4";
}
.lni-library::before {
  content: "\eaf5";
}
.lni-graduation::before {
  content: "\eaf6";
}
.lni-eraser::before {
  content: "\eaf7";
}
.lni-compass::before {
  content: "\eaf8";
}
.lni-clipboard::before {
  content: "\eaf9";
}
.lni-certificate::before {
  content: "\eafa";
}
.lni-book::before {
  content: "\eafb";
}
.lni-blackboard::before {
  content: "\eafc";
}
.lni-shift-right::before {
  content: "\eafd";
}
.lni-shift-left::before {
  content: "\eafe";
}
.lni-pointer-top::before {
  content: "\eaff";
}
.lni-pointer-right::before {
  content: "\eb00";
}
.lni-pointer-left::before {
  content: "\eb01";
}
.lni-pointer-down::before {
  content: "\eb02";
}
.lni-exit::before {
  content: "\eb03";
}
.lni-exit-up::before {
  content: "\eb04";
}
.lni-exit-down::before {
  content: "\eb05";
}
.lni-enter::before {
  content: "\eb06";
}
.lni-direction::before {
  content: "\eb07";
}
.lni-direction-rtl::before {
  content: "\eb08";
}
.lni-direction-ltr::before {
  content: "\eb09";
}
.lni-direction-alt::before {
  content: "\eb0a";
}
.lni-chevron-up::before {
  content: "\eb0b";
}
.lni-chevron-up-circle::before {
  content: "\eb0c";
}
.lni-chevron-right::before {
  content: "\eb0d";
}
.lni-chevron-right-circle::before {
  content: "\eb0e";
}
.lni-chevron-left::before {
  content: "\eb0f";
}
.lni-chevron-left-circle::before {
  content: "\eb10";
}
.lni-chevron-down::before {
  content: "\eb11";
}
.lni-chevron-down-circle::before {
  content: "\eb12";
}
.lni-arrows-vertical::before {
  content: "\eb13";
}
.lni-arrows-horizontal::before {
  content: "\eb14";
}
.lni-arrow-up::before {
  content: "\eb15";
}
.lni-arrow-up-circle::before {
  content: "\eb16";
}
.lni-arrow-top-right::before {
  content: "\eb17";
}
.lni-arrow-top-left::before {
  content: "\eb18";
}
.lni-arrow-right::before {
  content: "\eb19";
}
.lni-arrow-right-circle::before {
  content: "\eb1a";
}
.lni-arrow-left::before {
  content: "\eb1b";
}
.lni-arrow-left-circle::before {
  content: "\eb1c";
}
.lni-arrow-down::before {
  content: "\eb1d";
}
.lni-arrow-down-circle::before {
  content: "\eb1e";
}
.lni-angle-double-up::before {
  content: "\eb1f";
}
.lni-angle-double-right::before {
  content: "\eb20";
}
.lni-angle-double-left::before {
  content: "\eb21";
}
.lni-angle-double-down::before {
  content: "\eb22";
}
.lni-vector::before {
  content: "\eb23";
}
.lni-ux::before {
  content: "\eb24";
}
.lni-slice::before {
  content: "\eb25";
}
.lni-select-cursor::before {
  content: "\eb26";
}
.lni-pallet::before {
  content: "\eb27";
}
.lni-move::before {
  content: "\eb28";
}
.lni-layout::before {
  content: "\eb29";
}
.lni-layers::before {
  content: "\eb2a";
}
.lni-highlight::before {
  content: "\eb2b";
}
.lni-highlight-alt::before {
  content: "\eb2c";
}
.lni-grid::before {
  content: "\eb2d";
}
.lni-grid-alt::before {
  content: "\eb2e";
}
.lni-crop::before {
  content: "\eb2f";
}
.lni-brush::before {
  content: "\eb30";
}
.lni-brush-alt::before {
  content: "\eb31";
}
.lni-yen::before {
  content: "\eb32";
}
.lni-wallet::before {
  content: "\eb33";
}
.lni-rupee::before {
  content: "\eb34";
}
.lni-pound::before {
  content: "\eb35";
}
.lni-money-protection::before {
  content: "\eb36";
}
.lni-money-location::before {
  content: "\eb37";
}
.lni-euro::before {
  content: "\eb38";
}
.lni-dollar::before {
  content: "\eb39";
}
.lni-diamond-shape::before {
  content: "\eb3a";
}
.lni-diamond-alt::before {
  content: "\eb3b";
}
.lni-credit-cards::before {
  content: "\eb3c";
}
.lni-coin::before {
  content: "\eb3d";
}
.lni-calculator::before {
  content: "\eb3e";
}
.lni-calculator-alt::before {
  content: "\eb3f";
}
.lni-wheelbarrow::before {
  content: "\eb40";
}
.lni-trowel::before {
  content: "\eb41";
}
.lni-shovel::before {
  content: "\eb42";
}
.lni-ruler::before {
  content: "\eb43";
}
.lni-ruler-pencil::before {
  content: "\eb44";
}
.lni-ruler-alt::before {
  content: "\eb45";
}
.lni-paint-roller::before {
  content: "\eb46";
}
.lni-paint-bucket-alt::before {
  content: "\eb47";
}
.lni-helmet::before {
  content: "\eb48";
}
.lni-hammer::before {
  content: "\eb49";
}
.lni-construction::before {
  content: "\eb4a";
}
.lni-construction-hammer::before {
  content: "\eb4b";
}
.lni-bricks::before {
  content: "\eb4c";
}
.lni-train::before {
  content: "\eb4d";
}
.lni-train-alt::before {
  content: "\eb4e";
}
.lni-taxi::before {
  content: "\eb4f";
}
.lni-support::before {
  content: "\eb50";
}
.lni-ship::before {
  content: "\eb51";
}
.lni-scooter::before {
  content: "\eb52";
}
.lni-road::before {
  content: "\eb53";
}
.lni-reply::before {
  content: "\eb54";
}
.lni-postcard::before {
  content: "\eb55";
}
.lni-popup::before {
  content: "\eb56";
}
.lni-plane::before {
  content: "\eb57";
}
.lni-phone::before {
  content: "\eb58";
}
.lni-phone-set::before {
  content: "\eb59";
}
.lni-inbox::before {
  content: "\eb5a";
}
.lni-helicopter::before {
  content: "\eb5b";
}
.lni-envelope::before {
  content: "\eb5c";
}
.lni-comments::before {
  content: "\eb5d";
}
.lni-comments-reply::before {
  content: "\eb5e";
}
.lni-comments-alt-2::before {
  content: "\eb5f";
}
.lni-caravan::before {
  content: "\eb60";
}
.lni-car::before {
  content: "\eb61";
}
.lni-car-alt::before {
  content: "\eb62";
}
.lni-bus::before {
  content: "\eb63";
}
.lni-bullhorn::before {
  content: "\eb64";
}
.lni-bubble::before {
  content: "\eb65";
}
.lni-bridge::before {
  content: "\eb66";
}
.lni-bi-cycle::before {
  content: "\eb67";
}
.lni-anchor::before {
  content: "\eb68";
}
.lni-target::before {
  content: "\eb69";
}
.lni-target-revenue::before {
  content: "\eb6a";
}
.lni-tag::before {
  content: "\eb6b";
}
.lni-stats-up::before {
  content: "\eb6c";
}
.lni-stats-down::before {
  content: "\eb6d";
}
.lni-stamp::before {
  content: "\eb6e";
}
.lni-revenue::before {
  content: "\eb6f";
}
.lni-quotation::before {
  content: "\eb70";
}
.lni-pin::before {
  content: "\eb71";
}
.lni-pie-chart::before {
  content: "\eb72";
}
.lni-paperclip::before {
  content: "\eb73";
}
.lni-offer::before {
  content: "\eb74";
}
.lni-notepad::before {
  content: "\eb75";
}
.lni-license::before {
  content: "\eb76";
}
.lni-investment::before {
  content: "\eb77";
}
.lni-invest-monitor::before {
  content: "\eb78";
}
.lni-handshake::before {
  content: "\eb79";
}
.lni-grow::before {
  content: "\eb7a";
}
.lni-delivery::before {
  content: "\eb7b";
}
.lni-customer::before {
  content: "\eb7c";
}
.lni-consulting::before {
  content: "\eb7d";
}
.lni-cart::before {
  content: "\eb7e";
}
.lni-cart-full::before {
  content: "\eb7f";
}
.lni-briefcase-alt::before {
  content: "\eb80";
}
.lni-apartment::before {
  content: "\eb81";
}
.lni-agenda::before {
  content: "\eb82";
}
.lni-zoom::before {
  content: "\eb83";
}
.lni-zapier::before {
  content: "\eb84";
}
.lni-youtube::before {
  content: "\eb85";
}
.lni-ycombinator::before {
  content: "\eb86";
}
.lni-yahoo::before {
  content: "\eb87";
}
.lni-xrp::before {
  content: "\eb88";
}
.lni-xbox::before {
  content: "\eb89";
}
.lni-wordpress::before {
  content: "\eb8a";
}
.lni-wordpress-fill::before {
  content: "\eb8b";
}
.lni-windows::before {
  content: "\eb8c";
}
.lni-whatsapp::before {
  content: "\eb8d";
}
.lni-wechat::before {
  content: "\eb8e";
}
.lni-webhooks::before {
  content: "\eb8f";
}
.lni-vuejs::before {
  content: "\eb90";
}
.lni-vs-code::before {
  content: "\eb91";
}
.lni-volkswagen::before {
  content: "\eb92";
}
.lni-vmware::before {
  content: "\eb93";
}
.lni-vk::before {
  content: "\eb94";
}
.lni-visa::before {
  content: "\eb95";
}
.lni-vimeo::before {
  content: "\eb96";
}
.lni-vercel::before {
  content: "\eb97";
}
.lni-unsplash::before {
  content: "\eb98";
}
.lni-ubuntu::before {
  content: "\eb99";
}
.lni-typescript::before {
  content: "\eb9a";
}
.lni-twitter::before {
  content: "\eb9b";
}
.lni-twitter-original::before {
  content: "\eb9c";
}
.lni-twitter-fill::before {
  content: "\eb9d";
}
.lni-twitch::before {
  content: "\eb9e";
}
.lni-tumblr::before {
  content: "\eb9f";
}
.lni-trello::before {
  content: "\eba0";
}
.lni-toyota::before {
  content: "\eba1";
}
.lni-tiktok::before {
  content: "\eba2";
}
.lni-tiktok-alt::before {
  content: "\eba3";
}
.lni-tesla::before {
  content: "\eba4";
}
.lni-telegram::before {
  content: "\eba5";
}
.lni-telegram-original::before {
  content: "\eba6";
}
.lni-tailwindcss::before {
  content: "\eba7";
}
.lni-swift::before {
  content: "\eba8";
}
.lni-svelte::before {
  content: "\eba9";
}
.lni-stumbleupon::before {
  content: "\ebaa";
}
.lni-stripe::before {
  content: "\ebab";
}
.lni-steam::before {
  content: "\ebac";
}
.lni-stackoverflow::before {
  content: "\ebad";
}
.lni-squarespace::before {
  content: "\ebae";
}
.lni-spotify::before {
  content: "\ebaf";
}
.lni-spotify-original::before {
  content: "\ebb0";
}
.lni-soundcloud::before {
  content: "\ebb1";
}
.lni-soundcloud-original::before {
  content: "\ebb2";
}
.lni-snapchat::before {
  content: "\ebb3";
}
.lni-slideshare::before {
  content: "\ebb4";
}
.lni-slack::before {
  content: "\ebb5";
}
.lni-slack-line::before {
  content: "\ebb6";
}
.lni-skype::before {
  content: "\ebb7";
}
.lni-sketch::before {
  content: "\ebb8";
}
.lni-signal-app::before {
  content: "\ebb9";
}
.lni-shopify::before {
  content: "\ebba";
}
.lni-safari::before {
  content: "\ebbb";
}
.lni-reddit::before {
  content: "\ebbc";
}
.lni-react::before {
  content: "\ebbd";
}
.lni-quora::before {
  content: "\ebbe";
}
.lni-python::before {
  content: "\ebbf";
}
.lni-producthunt::before {
  content: "\ebc0";
}
.lni-postman::before {
  content: "\ebc1";
}
.lni-postgresql::before {
  content: "\ebc2";
}
.lni-playstation::before {
  content: "\ebc3";
}
.lni-play-store::before {
  content: "\ebc4";
}
.lni-play-store-fill::before {
  content: "\ebc5";
}
.lni-play-store-alt::before {
  content: "\ebc6";
}
.lni-pinterest::before {
  content: "\ebc7";
}
.lni-php::before {
  content: "\ebc8";
}
.lni-paypal::before {
  content: "\ebc9";
}
.lni-paypal-original::before {
  content: "\ebca";
}
.lni-patreon::before {
  content: "\ebcb";
}
.lni-paddle::before {
  content: "\ebcc";
}
.lni-opera::before {
  content: "\ebcd";
}
.lni-oculus::before {
  content: "\ebce";
}
.lni-npm::before {
  content: "\ebcf";
}
.lni-notion::before {
  content: "\ebd0";
}
.lni-nodejs::before {
  content: "\ebd1";
}
.lni-nodejs-alt::before {
  content: "\ebd2";
}
.lni-nissan::before {
  content: "\ebd3";
}
.lni-nextjs::before {
  content: "\ebd4";
}
.lni-netlify::before {
  content: "\ebd5";
}
.lni-netflix::before {
  content: "\ebd6";
}
.lni-mysql::before {
  content: "\ebd7";
}
.lni-mongodb::before {
  content: "\ebd8";
}
.lni-microsoft::before {
  content: "\ebd9";
}
.lni-microsoft-teams::before {
  content: "\ebda";
}
.lni-microsoft-edge::before {
  content: "\ebdb";
}
.lni-meta::before {
  content: "\ebdc";
}
.lni-meta-2::before {
  content: "\ebdd";
}
.lni-meta-1::before {
  content: "\ebde";
}
.lni-mercedes::before {
  content: "\ebdf";
}
.lni-medium::before {
  content: "\ebe0";
}
.lni-medium-alt::before {
  content: "\ebe1";
}
.lni-mastercard::before {
  content: "\ebe2";
}
.lni-markdown::before {
  content: "\ebe3";
}
.lni-mailchimp::before {
  content: "\ebe4";
}
.lni-magento::before {
  content: "\ebe5";
}
.lni-linkedin::before {
  content: "\ebe6";
}
.lni-linkedin-original::before {
  content: "\ebe7";
}
.lni-lineicons::before {
  content: "\ebe8";
}
.lni-lineicons-symbol::before {
  content: "\ebe9";
}
.lni-lineicons-symbol-alt::before {
  content: "\ebea";
}
.lni-lineicons-symbol-alt-2::before {
  content: "\ebeb";
}
.lni-lineicons-alt::before {
  content: "\ebec";
}
.lni-line::before {
  content: "\ebed";
}
.lni-laravel::before {
  content: "\ebee";
}
.lni-kubernetes::before {
  content: "\ebef";
}
.lni-jsfiddle::before {
  content: "\ebf0";
}
.lni-joomla::before {
  content: "\ebf1";
}
.lni-joomla-original::before {
  content: "\ebf2";
}
.lni-jcb::before {
  content: "\ebf3";
}
.lni-javascript::before {
  content: "\ebf4";
}
.lni-java::before {
  content: "\ebf5";
}
.lni-jamstack::before {
  content: "\ebf6";
}
.lni-jaguar::before {
  content: "\ebf7";
}
.lni-ios::before {
  content: "\ebf8";
}
.lni-instagram::before {
  content: "\ebf9";
}
.lni-instagram-original::before {
  content: "\ebfa";
}
.lni-instagram-fill::before {
  content: "\ebfb";
}
.lni-imdb::before {
  content: "\ebfc";
}
.lni-html5::before {
  content: "\ebfd";
}
.lni-hacker-news::before {
  content: "\ebfe";
}
.lni-grammarly::before {
  content: "\ebff";
}
.lni-google::before {
  content: "\ec00";
}
.lni-google-wallet::before {
  content: "\ec01";
}
.lni-google-pay::before {
  content: "\ec02";
}
.lni-google-drive::before {
  content: "\ec03";
}
.lni-google-cloud::before {
  content: "\ec04";
}
.lni-google-meet::before {
  content: "\ec05";
}
.lni-goodreads::before {
  content: "\ec06";
}
.lni-go::before {
  content: "\ec07";
}
.lni-github::before {
  content: "\ec08";
}
.lni-github-original::before {
  content: "\ec09";
}
.lni-git::before {
  content: "\ec0a";
}
.lni-gatsby::before {
  content: "\ec0b";
}
.lni-ford::before {
  content: "\ec0c";
}
.lni-flutter::before {
  content: "\ec0d";
}
.lni-flickr::before {
  content: "\ec0e";
}
.lni-fitbit::before {
  content: "\ec0f";
}
.lni-firefox::before {
  content: "\ec10";
}
.lni-firefox-original::before {
  content: "\ec11";
}
.lni-firebase::before {
  content: "\ec12";
}
.lni-figma::before {
  content: "\ec13";
}
.lni-facetime::before {
  content: "\ec14";
}
.lni-facebook::before {
  content: "\ec15";
}
.lni-facebook-oval::before {
  content: "\ec16";
}
.lni-facebook-original::before {
  content: "\ec17";
}
.lni-facebook-messenger::before {
  content: "\ec18";
}
.lni-facebook-line::before {
  content: "\ec19";
}
.lni-facebook-fill::before {
  content: "\ec1a";
}
.lni-ethereum::before {
  content: "\ec1b";
}
.lni-envato::before {
  content: "\ec1c";
}
.lni-edge::before {
  content: "\ec1d";
}
.lni-drupal::before {
  content: "\ec1e";
}
.lni-drupal-original::before {
  content: "\ec1f";
}
.lni-dropbox::before {
  content: "\ec20";
}
.lni-dropbox-original::before {
  content: "\ec21";
}
.lni-dribbble::before {
  content: "\ec22";
}
.lni-docker::before {
  content: "\ec23";
}
.lni-discover::before {
  content: "\ec24";
}
.lni-discord::before {
  content: "\ec25";
}
.lni-discord-alt::before {
  content: "\ec26";
}
.lni-diners-club::before {
  content: "\ec27";
}
.lni-digitalocean::before {
  content: "\ec28";
}
.lni-dialogflow::before {
  content: "\ec29";
}
.lni-dev::before {
  content: "\ec2a";
}
.lni-css3::before {
  content: "\ec2b";
}
.lni-creative-commons::before {
  content: "\ec2c";
}
.lni-cpanel::before {
  content: "\ec2d";
}
.lni-coral::before {
  content: "\ec2e";
}
.lni-connectdevelop::before {
  content: "\ec2f";
}
.lni-coinbase::before {
  content: "\ec30";
}
.lni-codepen::before {
  content: "\ec31";
}
.lni-cloudflare::before {
  content: "\ec32";
}
.lni-cisco::before {
  content: "\ec33";
}
.lni-chromecast::before {
  content: "\ec34";
}
.lni-chrome::before {
  content: "\ec35";
}
.lni-cash-app::before {
  content: "\ec36";
}
.lni-btc::before {
  content: "\ec37";
}
.lni-brave::before {
  content: "\ec38";
}
.lni-bootstrap::before {
  content: "\ec39";
}
.lni-bootstrap-5::before {
  content: "\ec3a";
}
.lni-bmw::before {
  content: "\ec3b";
}
.lni-bluetooth-original::before {
  content: "\ec3c";
}
.lni-blogger::before {
  content: "\ec3d";
}
.lni-bittorrent::before {
  content: "\ec3e";
}
.lni-bitcoin::before {
  content: "\ec3f";
}
.lni-bitbucket::before {
  content: "\ec40";
}
.lni-behance::before {
  content: "\ec41";
}
.lni-behance-original::before {
  content: "\ec42";
}
.lni-azure::before {
  content: "\ec43";
}
.lni-aws::before {
  content: "\ec44";
}
.lni-audi::before {
  content: "\ec45";
}
.lni-atlassian::before {
  content: "\ec46";
}
.lni-apple-pay::before {
  content: "\ec47";
}
.lni-apple-music::before {
  content: "\ec48";
}
.lni-apple-brand::before {
  content: "\ec49";
}
.lni-app-store::before {
  content: "\ec4a";
}
.lni-angular::before {
  content: "\ec4b";
}
.lni-angellist::before {
  content: "\ec4c";
}
.lni-android::before {
  content: "\ec4d";
}
.lni-android-original::before {
  content: "\ec4e";
}
.lni-amex::before {
  content: "\ec4f";
}
.lni-amazon::before {
  content: "\ec50";
}
.lni-amazon-pay::before {
  content: "\ec51";
}
.lni-amazon-original::before {
  content: "\ec52";
}
.lni-airtable::before {
  content: "\ec53";
}
.lni-airbnb::before {
  content: "\ec54";
}
.lni-adobe::before {
  content: "\ec55";
}
.lni-500px::before {
  content: "\ec56";
}
.inn-container {
  box-sizing: border-box;
  max-width: var(--inn-container-width);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--inn-container-padding);
}
@media only screen and (max-width: 767px) {
  .inn-container {
    padding-inline: var(--inn-container-padding-mobile);
  }
}
.inn-theme--green {
  --inn-theme-accent: var(--inn-primary);
  color: var(--inn-primary);
}
.inn-theme--gold {
  --inn-theme-accent: var(--inn-secondary);
  color: var(--inn-secondary);
}
.inn-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--inn-nav-link-gap, 10px);
  color: inherit;
  text-decoration: none;
  font-family: var(--inn-main-font);
  font-size: var(--inn-nav-link-font-size, 18px);
  font-weight: 400;
  line-height: 1.2;
}
.inn-nav-link__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 0;
}
.inn-nav-link__icon svg,
.inn-nav-link__icon img {
  display: block;
  height: 1.25em;
  width: auto;
}
.inn-nav-link__label {
  padding-bottom: var(--inn-nav-link-label-padding-bottom, 6px);
  border-bottom: 1px solid currentColor;
}
.inn-nav-link:hover,
.inn-nav-link:focus-visible {
  opacity: 0.85;
}
.inn-nav-link--on-dark {
  color: white;
}
.inn-glass-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--inn-glass-cta-min-height, 48px);
  padding: 0 24px;
  color: white;
  text-decoration: none;
  font-family: var(--inn-main-font);
  font-size: var(--inn-nav-link-font-size, 18px);
  font-weight: 400;
  line-height: 1.2;
  background: var(--inn-glass-cta-bg, rgba(0, 0, 0, 0.38));
  border-bottom: 1px solid white;
  -webkit-backdrop-filter: blur(var(--inn-glass-cta-blur, 12px)) saturate(1.1);
  backdrop-filter: blur(var(--inn-glass-cta-blur, 12px)) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .inn-glass-cta {
    background: rgba(0, 0, 0, 0.55);
  }
}
.inn-glass-cta__label {
  padding-bottom: var(--inn-nav-link-label-padding-bottom, 6px);
}
.inn-glass-cta__arrow {
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-0.15em);
}
@media only screen and (max-width: 767px) {
  .inn-glass-cta {
    width: 100%;
    max-width: 100%;
  }
}
.inn-script-headline {
  font-family: var(--inn-head-font);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
}
.inn-script-headline--h1 {
  font-size: clamp(3rem, 9vw, 9.375rem);
}
.inn-script-headline--h2 {
  font-size: clamp(2.5rem, 7vw, 6.25rem);
}
.inn-script-headline--h3 {
  font-size: clamp(2.5rem, 6vw, 5rem);
}
.inn-script-headline--h4 {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
}
.inn-script-headline--display-1 {
  font-size: clamp(1.75rem, 3.5vw, 3.125rem);
}
.inn-section-label {
  font-family: var(--inn-main-font);
  font-size: clamp(1.125rem, 2.5vw, 1.875rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}
.inn-prose {
  font-family: var(--inn-main-font);
  font-size: clamp(1rem, 1.75vw, 1.25rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--inn-neutral);
}
.inn-prose p:last-child {
  margin-bottom: 0;
}
.inn-category-grid {
  display: grid;
  gap: var(--inn-category-grid-gap, 24px);
  grid-template-columns: repeat(3, 1fr);
}
.inn-category-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1200px) {
  .inn-category-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .inn-category-grid {
    grid-template-columns: 1fr;
  }
  .inn-category-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}
.inn-category-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.inn-icon-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
}
.inn-icon-grid--cols-6 {
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (min-width: 720px) and (max-width: 1024px) {
  .inn-icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .inn-icon-grid {
    grid-template-columns: 1fr;
  }
  .inn-icon-grid--cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.inn-cta-band {
  text-align: center;
  padding-block: var(--inn-section-padding-top, 80px);
}
@media only screen and (max-width: 767px) {
  .inn-cta-band {
    padding-block: var(--inn-section-padding-top-mobile, 40px);
  }
}
.inn-logo-divider {
  display: flex;
  justify-content: center;
  padding-block: 2rem;
}
.inn-logo-divider img,
.inn-logo-divider svg {
  max-width: min(100%, 420px);
  height: auto;
}
.text-primary {
  color: var(--inn-primary) !important;
}
.text-secondary {
  color: var(--inn-secondary) !important;
}
.text-neutral {
  color: var(--inn-neutral) !important;
}
.text-white {
  color: white !important;
}
.text-black {
  color: black !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.add_font {
  font-family: var(--inn-head-font);
}
body {
  font-family: var(--inn-main-font);
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--inn-head-font);
}
.v-button a {
  text-transform: uppercase;
  border-radius: 10px;
  padding: 11px 30px !important;
  min-width: 150px !important;
  font-weight: 400 !important;
}
.v-button.v-secondary a {
  background: var(--inn-secondary);
  color: var(--inn-neutral) !important;
}
.v-button.v-white a {
  background: transparent !important;
  color: white !important;
}
.v-button.v-white-full a {
  background: white!important;
  color: var(--inn-neutral) !important;
}
.v-button.v-neutral a {
  background: transparent !important;
  color: var(--inn-neutral) !important;
  border-color: var(--inn-neutral) !important;
}
.v-add-waves-bottom {
  position: relative;
  overflow: visible;
  background: var(--inn-lightgrey);
  margin-bottom: 200px;
}
.v-add-waves-bottom:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 9vw;
  background-color: var(--inn-lightgrey);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='178.381' viewBox='0 0 1920 178.381'%3E%3Cpath d='M1920,0V176.374c-63.9-11.724-139.741-27.816-230.976-48.165-299.52-66.8-393.6-54.839-935.04,23.93C367.457,208.37,113.614,161.45,0,130V0Z' transform='translate(0 -0.003)' fill='black'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-position: bottom;
  mask-size: 100vw 10vw;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='178.381' viewBox='0 0 1920 178.381'%3E%3Cpath d='M1920,0V176.374c-63.9-11.724-139.741-27.816-230.976-48.165-299.52-66.8-393.6-54.839-935.04,23.93C367.457,208.37,113.614,161.45,0,130V0Z' transform='translate(0 -0.003)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: 100vw 10vw;
}
@media only screen and (max-width: 767px) {
  .v-hide-waves-bottom {
    background: transparent;
    margin-bottom: 0;
  }
  .v-hide-waves-bottom:before {
    display: none;
  }
}
.v-add-waves-top-big {
  position: relative;
  overflow: visible;
  background: var(--inn-lightgrey);
  margin-top: 200px;
}
.v-add-waves-top-big:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 9vw;
  background-color: var(--inn-lightgrey);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='178.381' viewBox='0 0 1920 178.381'%3E%3Cpath d='M1920,0V176.374c-63.9-11.724-139.741-27.816-230.976-48.165-299.52-66.8-393.6-54.839-935.04,23.93C367.457,208.37,113.614,161.45,0,130V0Z' transform='translate(0 -0.003)' fill='black'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-position: bottom;
  mask-size: 100vw 10vw;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='178.381' viewBox='0 0 1920 178.381'%3E%3Cpath d='M1920,0V176.374c-63.9-11.724-139.741-27.816-230.976-48.165-299.52-66.8-393.6-54.839-935.04,23.93C367.457,208.37,113.614,161.45,0,130V0Z' transform='translate(0 -0.003)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: 100vw 10vw;
  transform: rotate(180deg);
}
.v-add-waves-bottom-2 {
  position: relative;
  overflow: visible;
}
.v-add-waves-bottom-2:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 250px;
  width: 100%;
  height: 9vw;
  background-color: var(--inn-lightgrey);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='178.381' viewBox='0 0 1920 178.381'%3E%3Cpath d='M1920,0V176.374c-63.9-11.724-139.741-27.816-230.976-48.165-299.52-66.8-393.6-54.839-935.04,23.93C367.457,208.37,113.614,161.45,0,130V0Z' transform='translate(0 -0.003)' fill='black'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-position: bottom;
  mask-size: 100vw 10vw;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='178.381' viewBox='0 0 1920 178.381'%3E%3Cpath d='M1920,0V176.374c-63.9-11.724-139.741-27.816-230.976-48.165-299.52-66.8-393.6-54.839-935.04,23.93C367.457,208.37,113.614,161.45,0,130V0Z' transform='translate(0 -0.003)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: 100vw 10vw;
  transform: scaleX(-1);
}
.v-add-waves-bottom-2:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: var(--inn-lightgrey);
  height: 250px;
}
.v-add-waves-bottom-2 > .inside {
  position: relative;
  z-index: 66;
}
.v-add-waves-bottom-white:before {
  background-color: white;
}
.v-add-waves-bottom-primary:before {
  background-color: var(--inn-primary);
}
.v-add-waves-bottom-secondary:before {
  background-color: var(--inn-secondary);
}
.v-add-waves-bottom-neutral:before {
  background-color: var(--inn-neutral);
}
.v-add-waves-bottom-lightgrey:before {
  background-color: var(--inn-lightgrey);
}
.v-add-waves-bottom-grey:before {
  background-color: #7F8883;
}
.v-add-waves-bottom-black:before {
  background-color: #000000;
}
.v-add-waves-top {
  position: relative;
  overflow: visible;
  margin-top: 6vw;
}
.v-add-waves-top:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 99%;
  width: 200%;
  height: 4vw;
  background-color: var(--inn-lightgrey);
  transform: translateX(-50%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2027.693' height='89.647' viewBox='0 0 2027.693 89.647'%3E%3Cpath id='Pfad_1463' d='M23055.443-4893.533h-193.887q-2.742.179-5.557.18c-1.873,0-3.729-.061-5.555-.18h-200.738q-2.569.179-5.207.18t-5.209-.18h-197.584q-2.569.179-5.207.18t-5.209-.18H22230.1q-2.766.179-5.6.18t-5.605-.18H22014.1q-2.766.179-5.6.18t-5.605-.18h-197.34q-2.739.179-5.555.18t-5.557-.18h-200.736q-2.569.179-5.209.18t-5.207-.18H21378.5q-2.962.179-6,.18t-6-.18h-188.789q-2.569.179-5.209.18t-5.207-.18h-10.443v-1.493c-21.35-4.693-36.85-18.736-36.85-35.329a28.389,28.389,0,0,1,5.484-16.48q-2.186,1.881-4.219,3.977a10.66,10.66,0,0,1-15.012.278a10.5,10.5,0,0,1-.279-14.919a83.325,83.325,0,0,1,60.338-25.5a83.317,83.317,0,0,1,60.3,25.455.314.314,0,0,1,.041.046a62.156,62.156,0,0,0,42.045,18.965h6a62.112,62.112,0,0,0,42-18.93.271.271,0,0,0,.041-.041a83.322,83.322,0,0,1,60.338-25.5a83.335,83.335,0,0,1,60.338,25.5c.021.023.039.041.063.064a62.115,62.115,0,0,0,41.98,18.907h6.006a62.134,62.134,0,0,0,42.039-18.965a83.328,83.328,0,0,1,60.344-25.5a83.328,83.328,0,0,1,60.336,25.5c.018.023.041.041.059.064a62.141,62.141,0,0,0,41.986,18.907h6a62.142,62.142,0,0,0,42.041-18.965.563.563,0,0,1,.045-.046a83.321,83.321,0,0,1,60.3-25.455a83.331,83.331,0,0,1,60.336,25.5l.059.058a62.107,62.107,0,0,0,41.986,18.913h6.006a62.133,62.133,0,0,0,42.027-18.948l.018-.023a83.325,83.325,0,0,1,60.336-25.5a83.328,83.328,0,0,1,60.309,25.467.269.269,0,0,0,.041.041a62.1,62.1,0,0,0,42.039,18.965h10.145a62.1,62.1,0,0,0,42.039-18.965l.041-.041a83.324,83.324,0,0,1,60.3-25.467a83.328,83.328,0,0,1,60.342,25.5l.018.023a62.121,62.121,0,0,0,42.027,18.948h6.006a62.133,62.133,0,0,0,41.992-18.913l.053-.058a83.331,83.331,0,0,1,60.336-25.5a83.331,83.331,0,0,1,60.3,25.455.563.563,0,0,1,.045.046a62.142,62.142,0,0,0,42.041,18.965h6a62.141,62.141,0,0,0,41.986-18.907.628.628,0,0,1,.059-.064a83.328,83.328,0,0,1,60.336-25.5a83.328,83.328,0,0,1,60.344,25.5a62.13,62.13,0,0,0,42.039,18.965h6.006a62.141,62.141,0,0,0,41.986-18.907c.018-.023.035-.041.053-.064a83.351,83.351,0,0,1,60.342-25.5a83.322,83.322,0,0,1,60.338,25.5.271.271,0,0,0,.041.041a62.112,62.112,0,0,0,42,18.93h6a62.138,62.138,0,0,0,42.039-18.965l.047-.046a83.317,83.317,0,0,1,60.3-25.455a83.348,83.348,0,0,1,60.344,25.5a10.518,10.518,0,0,1,2.967,7.28v.075a10.489,10.489,0,0,1-3.252,7.564a10.674,10.674,0,0,1-12.863,1.434a25.611,25.611,0,0,1,2.422,10.792c0,16.8-16.943,30.982-40.154,35.5v1.323h-10.293q-2.739.179-5.555.18T23055.443-4893.533Z' transform='translate(-21103.002 4983)' fill='black'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-position: top;
  mask-size: 105vw 5vw;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2027.693' height='89.647' viewBox='0 0 2027.693 89.647'%3E%3Cpath id='Pfad_1463' d='M23055.443-4893.533h-193.887q-2.742.179-5.557.18c-1.873,0-3.729-.061-5.555-.18h-200.738q-2.569.179-5.207.18t-5.209-.18h-197.584q-2.569.179-5.207.18t-5.209-.18H22230.1q-2.766.179-5.6.18t-5.605-.18H22014.1q-2.766.179-5.6.18t-5.605-.18h-197.34q-2.739.179-5.555.18t-5.557-.18h-200.736q-2.569.179-5.209.18t-5.207-.18H21378.5q-2.962.179-6,.18t-6-.18h-188.789q-2.569.179-5.209.18t-5.207-.18h-10.443v-1.493c-21.35-4.693-36.85-18.736-36.85-35.329a28.389,28.389,0,0,1,5.484-16.48q-2.186,1.881-4.219,3.977a10.66,10.66,0,0,1-15.012.278a10.5,10.5,0,0,1-.279-14.919a83.325,83.325,0,0,1,60.338-25.5a83.317,83.317,0,0,1,60.3,25.455.314.314,0,0,1,.041.046a62.156,62.156,0,0,0,42.045,18.965h6a62.112,62.112,0,0,0,42-18.93.271.271,0,0,0,.041-.041a83.322,83.322,0,0,1,60.338-25.5a83.335,83.335,0,0,1,60.338,25.5c.021.023.039.041.063.064a62.115,62.115,0,0,0,41.98,18.907h6.006a62.134,62.134,0,0,0,42.039-18.965a83.328,83.328,0,0,1,60.344-25.5a83.328,83.328,0,0,1,60.336,25.5c.018.023.041.041.059.064a62.141,62.141,0,0,0,41.986,18.907h6a62.142,62.142,0,0,0,42.041-18.965.563.563,0,0,1,.045-.046a83.321,83.321,0,0,1,60.3-25.455a83.331,83.331,0,0,1,60.336,25.5l.059.058a62.107,62.107,0,0,0,41.986,18.913h6.006a62.133,62.133,0,0,0,42.027-18.948l.018-.023a83.325,83.325,0,0,1,60.336-25.5a83.328,83.328,0,0,1,60.309,25.467.269.269,0,0,0,.041.041a62.1,62.1,0,0,0,42.039,18.965h10.145a62.1,62.1,0,0,0,42.039-18.965l.041-.041a83.324,83.324,0,0,1,60.3-25.467a83.328,83.328,0,0,1,60.342,25.5l.018.023a62.121,62.121,0,0,0,42.027,18.948h6.006a62.133,62.133,0,0,0,41.992-18.913l.053-.058a83.331,83.331,0,0,1,60.336-25.5a83.331,83.331,0,0,1,60.3,25.455.563.563,0,0,1,.045.046a62.142,62.142,0,0,0,42.041,18.965h6a62.141,62.141,0,0,0,41.986-18.907.628.628,0,0,1,.059-.064a83.328,83.328,0,0,1,60.336-25.5a83.328,83.328,0,0,1,60.344,25.5a62.13,62.13,0,0,0,42.039,18.965h6.006a62.141,62.141,0,0,0,41.986-18.907c.018-.023.035-.041.053-.064a83.351,83.351,0,0,1,60.342-25.5a83.322,83.322,0,0,1,60.338,25.5.271.271,0,0,0,.041.041a62.112,62.112,0,0,0,42,18.93h6a62.138,62.138,0,0,0,42.039-18.965l.047-.046a83.317,83.317,0,0,1,60.3-25.455a83.348,83.348,0,0,1,60.344,25.5a10.518,10.518,0,0,1,2.967,7.28v.075a10.489,10.489,0,0,1-3.252,7.564a10.674,10.674,0,0,1-12.863,1.434a25.611,25.611,0,0,1,2.422,10.792c0,16.8-16.943,30.982-40.154,35.5v1.323h-10.293q-2.739.179-5.555.18T23055.443-4893.533Z' transform='translate(-21103.002 4983)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: top;
  -webkit-mask-size: 105vw 5vw;
}
@media only screen and (max-width: 767px) {
  .v-add-waves-top:before {
    mask-size: 210vw 10vw;
    height: 9vw;
  }
}
.v-add-waves2-bottom {
  position: relative;
  overflow: visible;
  margin-bottom: 6vw;
}
.v-add-waves2-bottom:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  width: 200%;
  height: 5vw;
  background-color: var(--inn-lightgrey);
  transform: translateX(-50%) rotate(180deg) translateY(1vw);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2027.693' height='89.647' viewBox='0 0 2027.693 89.647'%3E%3Cpath id='Pfad_1463' d='M23055.443-4893.533h-193.887q-2.742.179-5.557.18c-1.873,0-3.729-.061-5.555-.18h-200.738q-2.569.179-5.207.18t-5.209-.18h-197.584q-2.569.179-5.207.18t-5.209-.18H22230.1q-2.766.179-5.6.18t-5.605-.18H22014.1q-2.766.179-5.6.18t-5.605-.18h-197.34q-2.739.179-5.555.18t-5.557-.18h-200.736q-2.569.179-5.209.18t-5.207-.18H21378.5q-2.962.179-6,.18t-6-.18h-188.789q-2.569.179-5.209.18t-5.207-.18h-10.443v-1.493c-21.35-4.693-36.85-18.736-36.85-35.329a28.389,28.389,0,0,1,5.484-16.48q-2.186,1.881-4.219,3.977a10.66,10.66,0,0,1-15.012.278a10.5,10.5,0,0,1-.279-14.919a83.325,83.325,0,0,1,60.338-25.5a83.317,83.317,0,0,1,60.3,25.455.314.314,0,0,1,.041.046a62.156,62.156,0,0,0,42.045,18.965h6a62.112,62.112,0,0,0,42-18.93.271.271,0,0,0,.041-.041a83.322,83.322,0,0,1,60.338-25.5a83.335,83.335,0,0,1,60.338,25.5c.021.023.039.041.063.064a62.115,62.115,0,0,0,41.98,18.907h6.006a62.134,62.134,0,0,0,42.039-18.965a83.328,83.328,0,0,1,60.344-25.5a83.328,83.328,0,0,1,60.336,25.5c.018.023.041.041.059.064a62.141,62.141,0,0,0,41.986,18.907h6a62.142,62.142,0,0,0,42.041-18.965.563.563,0,0,1,.045-.046a83.321,83.321,0,0,1,60.3-25.455a83.331,83.331,0,0,1,60.336,25.5l.059.058a62.107,62.107,0,0,0,41.986,18.913h6.006a62.133,62.133,0,0,0,42.027-18.948l.018-.023a83.325,83.325,0,0,1,60.336-25.5a83.328,83.328,0,0,1,60.309,25.467.269.269,0,0,0,.041.041a62.1,62.1,0,0,0,42.039,18.965h10.145a62.1,62.1,0,0,0,42.039-18.965l.041-.041a83.324,83.324,0,0,1,60.3-25.467a83.328,83.328,0,0,1,60.342,25.5l.018.023a62.121,62.121,0,0,0,42.027,18.948h6.006a62.133,62.133,0,0,0,41.992-18.913l.053-.058a83.331,83.331,0,0,1,60.336-25.5a83.331,83.331,0,0,1,60.3,25.455.563.563,0,0,1,.045.046a62.142,62.142,0,0,0,42.041,18.965h6a62.141,62.141,0,0,0,41.986-18.907.628.628,0,0,1,.059-.064a83.328,83.328,0,0,1,60.336-25.5a83.328,83.328,0,0,1,60.344,25.5a62.13,62.13,0,0,0,42.039,18.965h6.006a62.141,62.141,0,0,0,41.986-18.907c.018-.023.035-.041.053-.064a83.351,83.351,0,0,1,60.342-25.5a83.322,83.322,0,0,1,60.338,25.5.271.271,0,0,0,.041.041a62.112,62.112,0,0,0,42,18.93h6a62.138,62.138,0,0,0,42.039-18.965l.047-.046a83.317,83.317,0,0,1,60.3-25.455a83.348,83.348,0,0,1,60.344,25.5a10.518,10.518,0,0,1,2.967,7.28v.075a10.489,10.489,0,0,1-3.252,7.564a10.674,10.674,0,0,1-12.863,1.434a25.611,25.611,0,0,1,2.422,10.792c0,16.8-16.943,30.982-40.154,35.5v1.323h-10.293q-2.739.179-5.555.18T23055.443-4893.533Z' transform='translate(-21103.002 4983)' fill='black'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-position: bottom;
  mask-size: 105vw 5vw;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2027.693' height='89.647' viewBox='0 0 2027.693 89.647'%3E%3Cpath id='Pfad_1463' d='M23055.443-4893.533h-193.887q-2.742.179-5.557.18c-1.873,0-3.729-.061-5.555-.18h-200.738q-2.569.179-5.207.18t-5.209-.18h-197.584q-2.569.179-5.207.18t-5.209-.18H22230.1q-2.766.179-5.6.18t-5.605-.18H22014.1q-2.766.179-5.6.18t-5.605-.18h-197.34q-2.739.179-5.555.18t-5.557-.18h-200.736q-2.569.179-5.209.18t-5.207-.18H21378.5q-2.962.179-6,.18t-6-.18h-188.789q-2.569.179-5.209.18t-5.207-.18h-10.443v-1.493c-21.35-4.693-36.85-18.736-36.85-35.329a28.389,28.389,0,0,1,5.484-16.48q-2.186,1.881-4.219,3.977a10.66,10.66,0,0,1-15.012.278a10.5,10.5,0,0,1-.279-14.919a83.325,83.325,0,0,1,60.338-25.5a83.317,83.317,0,0,1,60.3,25.455.314.314,0,0,1,.041.046a62.156,62.156,0,0,0,42.045,18.965h6a62.112,62.112,0,0,0,42-18.93.271.271,0,0,0,.041-.041a83.322,83.322,0,0,1,60.338-25.5a83.335,83.335,0,0,1,60.338,25.5c.021.023.039.041.063.064a62.115,62.115,0,0,0,41.98,18.907h6.006a62.134,62.134,0,0,0,42.039-18.965a83.328,83.328,0,0,1,60.344-25.5a83.328,83.328,0,0,1,60.336,25.5c.018.023.041.041.059.064a62.141,62.141,0,0,0,41.986,18.907h6a62.142,62.142,0,0,0,42.041-18.965.563.563,0,0,1,.045-.046a83.321,83.321,0,0,1,60.3-25.455a83.331,83.331,0,0,1,60.336,25.5l.059.058a62.107,62.107,0,0,0,41.986,18.913h6.006a62.133,62.133,0,0,0,42.027-18.948l.018-.023a83.325,83.325,0,0,1,60.336-25.5a83.328,83.328,0,0,1,60.309,25.467.269.269,0,0,0,.041.041a62.1,62.1,0,0,0,42.039,18.965h10.145a62.1,62.1,0,0,0,42.039-18.965l.041-.041a83.324,83.324,0,0,1,60.3-25.467a83.328,83.328,0,0,1,60.342,25.5l.018.023a62.121,62.121,0,0,0,42.027,18.948h6.006a62.133,62.133,0,0,0,41.992-18.913l.053-.058a83.331,83.331,0,0,1,60.336-25.5a83.331,83.331,0,0,1,60.3,25.455.563.563,0,0,1,.045.046a62.142,62.142,0,0,0,42.041,18.965h6a62.141,62.141,0,0,0,41.986-18.907.628.628,0,0,1,.059-.064a83.328,83.328,0,0,1,60.336-25.5a83.328,83.328,0,0,1,60.344,25.5a62.13,62.13,0,0,0,42.039,18.965h6.006a62.141,62.141,0,0,0,41.986-18.907c.018-.023.035-.041.053-.064a83.351,83.351,0,0,1,60.342-25.5a83.322,83.322,0,0,1,60.338,25.5.271.271,0,0,0,.041.041a62.112,62.112,0,0,0,42,18.93h6a62.138,62.138,0,0,0,42.039-18.965l.047-.046a83.317,83.317,0,0,1,60.3-25.455a83.348,83.348,0,0,1,60.344,25.5a10.518,10.518,0,0,1,2.967,7.28v.075a10.489,10.489,0,0,1-3.252,7.564a10.674,10.674,0,0,1-12.863,1.434a25.611,25.611,0,0,1,2.422,10.792c0,16.8-16.943,30.982-40.154,35.5v1.323h-10.293q-2.739.179-5.555.18T23055.443-4893.533Z' transform='translate(-21103.002 4983)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: 105vw 5vw;
}
@media only screen and (max-width: 767px) {
  .v-add-waves2-bottom:after {
    mask-size: 210vw 9vw;
    height: 9vw;
    top: 100%;
  }
}
.v-add-waves-top-white:before {
  background-color: white;
}
.v-add-waves-top-primary:before {
  background-color: var(--inn-primary);
}
.v-add-waves-top-secondary:before {
  background-color: var(--inn-secondary);
}
.v-add-waves-top-neutral:before {
  background-color: var(--inn-neutral);
}
.v-add-waves-top-lightgrey:before {
  background-color: var(--inn-lightgrey);
}
.v-add-waves-top-grey:before {
  background-color: #7F8883;
}
.v-add-waves-top-black:before {
  background-color: #000000;
}
.v-add-waves2-bottom-white:after {
  background-color: white;
}
.v-add-waves2-bottom-primary:after {
  background-color: var(--inn-primary);
}
.v-add-waves2-bottom-secondary:after {
  background-color: var(--inn-secondary);
}
.v-add-waves2-bottom-neutral:after {
  background-color: var(--inn-neutral);
}
.v-add-waves2-bottom-lightgrey:after {
  background-color: var(--inn-lightgrey);
}
.v-add-waves2-bottom-grey:after {
  background-color: #7F8883;
}
.v-add-waves2-bottom-black:after {
  background-color: #000000;
}
.v-max-width-500 {
  max-width: 500px;
}
.hidden {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.ce_image figure {
  margin-bottom: 0;
}
nav ul {
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
section > div {
  margin-left: 0;
  margin-right: 0;
}
section .col_2 {
  margin-left: 0;
}
.flex-row {
  display: flex;
}
.flex-jc {
  justify-content: space-between;
}
.flex-al {
  align-items: center;
}
.sec-impressum .v-headline {
  margin-bottom: 30px!important;
}
.start-header-wrapper {
  background-size: cover;
  background-position: 50% 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small-header-wrapper {
  background-size: cover;
  background-position: 50% 50%;
  min-height: 40vh;
}
@media only screen and (max-width: 767px) {
  .small-header-wrapper .header-image {
    max-width: 85%;
  }
}
.imp-logo {
  text-align: right;
  margin-left: auto;
}
.imp-logo img {
  width: auto;
  height: 104px;
  display: block;
  margin-left: auto;
}
@media only screen and (max-width: 767px) {
  .imp-logo {
    margin: auto;
  }
}
img {
  width: 100%;
}
.v-centered {
  text-align: center;
}
.v-right {
  text-align: right;
}
.v-left {
  text-align: left;
}
.v-headline {
  font-family: var(--inn-main-font);
  margin-bottom: 30px;
  /* HRS-80: Contaos „.block { overflow: hidden }" schnitt bei 65px-Ueberschriften
     (Zeilenhoehe 1) die Unterlaengen ab — g, p, y verloren 4px, auf acht Seiten.
     Eine Ueberschrift hat nichts, das abgeschnitten werden muesste. */
}
.v-headline.block {
  overflow: visible;
}
.v-headline .v-headline-text-container {
  margin-top: 20px;
  max-width: 600px;
}
.v-headline.v-left .v-headline-text-container {
  margin-right: auto;
}
.v-headline.v-centered .v-headline-text-container {
  margin-left: auto;
  margin-right: auto;
}
.cookiebar {
  z-index: 9999999;
  background: var(--inn-neutral);
  font-family: var(--inn-main-font);
}
.cookiebar .cookiebar__button {
  background: var(--inn-primary);
}
.cookiebar {
  width: 20%;
  bottom: 0;
  left: 0;
}
.cookiebar .cookiebar__text,
.cookiebar .cookiebar__message {
  margin-right: 0;
}
.cookiebar .cookiebar__text {
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .cookiebar {
    width: 100%;
  }
}
#page-image {
  position: relative;
}
#page-image .inside {
  max-width: 100%;
  padding: 0;
}
.v-button > a,
.buttons > a,
.v-button > a.button,
.buttons > a.button,
.v-button button,
.buttons button {
  width: auto!important;
  display: inline-block;
  border: 2px solid var(--inn-neutral);
  padding: 5px 5px;
  color: var(--inn-neutral);
  background: transparent;
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
}
.v-button > a:hover,
.buttons > a:hover,
.v-button > a.button:hover,
.buttons > a.button:hover,
.v-button button:hover,
.buttons button:hover {
  background: var(--inn-neutral);
  transition: 0.5s all ease-in-out;
  color: white;
  text-decoration: none;
}
.v-button.v-primary > a,
.buttons.v-primary > a,
.v-button.v-primary button,
.buttons.v-primary button {
  border: 2px solid var(--inn-primary);
  background: var(--inn-primary);
  color: white;
}
.v-button.v-primary > a:hover,
.buttons.v-primary > a:hover,
.v-button.v-primary button:hover,
.buttons.v-primary button:hover {
  background: transparent;
  color: var(--inn-primary);
}
.v-button.v-secondary > a,
.buttons.v-secondary > a,
.v-button.v-secondary button,
.buttons.v-secondary button {
  border: 2px solid var(--inn-secondary);
  background: var(--inn-secondary);
  color: white;
}
.v-button.v-secondary > a:hover,
.buttons.v-secondary > a:hover,
.v-button.v-secondary button:hover,
.buttons.v-secondary button:hover {
  background: transparent;
  color: var(--inn-secondary);
}
.v-button.v-neutral > a,
.buttons.v-neutral > a,
.v-button.v-neutral button,
.buttons.v-neutral button {
  border: 2px solid var(--inn-neutral);
  background: var(--inn-neutral);
  color: white;
}
.v-button.v-neutral > a:hover,
.buttons.v-neutral > a:hover,
.v-button.v-neutral button:hover,
.buttons.v-neutral button:hover {
  background: transparent;
  color: var(--inn-neutral);
}
.v-button.v-white > a,
.buttons.v-white > a,
.v-button.v-white button,
.buttons.v-white button {
  border: 2px solid white;
  background: white;
  color: var(--inn-neutral);
}
.v-button.v-white > a:hover,
.buttons.v-white > a:hover,
.v-button.v-white button:hover,
.buttons.v-white button:hover {
  background: transparent;
  color: white;
}
/*swiper*/
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  width: 1vw;
  height: 1vw;
  border: none;
  border-left: 0.1vw solid var(--inn-neutral);
  border-bottom: 0.1vw solid var(--inn-neutral);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  box-sizing: border-box;
  background: none;
  box-shadow: none;
}
.swiper-button-prev {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Swiper: Navigation unter dem Track (ersetzt altes padding-bottom: 10 %) */
.v-swiper--nav-below .swiper-container,
.v-swiper.v-swiper-under .swiper-container {
  padding-bottom: 0;
}
.v-swiper--nav-below .swiper-arrow-container,
.v-swiper.v-swiper-under .swiper-arrow-container {
  display: flex;
  gap: 20px;
  margin-top: var(--inn-swiper-nav-gap, 40px);
}
.v-swiper--nav-below .swiper-arrow-container .bh-button-prev,
.v-swiper.v-swiper-under .swiper-arrow-container .bh-button-prev,
.v-swiper--nav-below .swiper-arrow-container .bh-button-next,
.v-swiper.v-swiper-under .swiper-arrow-container .bh-button-next {
  position: static;
  transform: none;
  color: var(--inn-primary);
}
.swiper-container {
  padding-left: 30px;
  padding-right: 30px;
}
/*swiper-end*/
.datenschutz-checkbox {
  margin-bottom: 20px;
}
.datenschutz-checkbox a {
  color: var(--inn-neutral);
}
.datenschutz-checkbox input,
.datenschutz-checkbox label {
  display: inline-block;
  width: 5%;
  margin: 0px;
  height: auto;
}
.datenschutz-checkbox label {
  min-width: 70%;
  padding-top: 2px;
  vertical-align: bottom;
  font-size: 18px;
}
form input,
form textarea {
  border-color: var(--inn-neutral);
  color: var(--inn-neutral);
  border-width: 2px;
  border-style: solid;
  border-image: none!important;
  box-shadow: none!important;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 30px;
  padding-left: 15px;
  background: transparent;
}
form textarea {
  height: 240px;
  padding-top: 10px;
}
form .widget-select {
  position: relative;
}
form .widget-select select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  padding-left: 15px;
  color: var(--inn-neutral);
  font-family: var(--inn-main-font);
  font-size: 20px;
  background: var(--inn-neutral);
  border: 2px solid var(--inn-neutral);
  border-radius: 0;
  margin-bottom: 30px;
  font-weight: 100;
  background: transparent;
}
form .widget-select select::-ms-expand {
  display: none;
}
form .widget-select:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f107";
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 5px;
  pointer-events: none;
  color: var(--inn-neutral);
  font-weight: 900;
}
form .input-submit button {
  background: var(--inn-primary);
  padding: 5px 15px;
  border: 2px solid var(--inn-primary);
  transition: 0.5s all ease-in-out;
  width: 100%;
  color: white;
}
form .input-submit button:hover {
  color: var(--inn-primary);
  background: transparent;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
form .datenschutz-checkbox {
  display: inline-block;
  width: 74%;
  font-size: 1vw;
  margin-bottom: 0;
}
.checkbox_container > input,
.datenschutz-checkbox > input,
.radio_container > input,
.option.radio > input {
  position: absolute;
  opacity: 0!important;
  display: none;
}
.checkbox_container > input + label,
.datenschutz-checkbox > input + label,
.radio_container > input + label,
.option.radio > input + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
.checkbox_container > input + label:before,
.datenschutz-checkbox > input + label:before,
.radio_container > input + label:before,
.option.radio > input + label:before {
  content: "";
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 22px;
  height: 22px;
  background: white;
  border: 2px solid var(--inn-primary);
  margin-top: 3px;
}
.checkbox_container > input:hover + label:before,
.datenschutz-checkbox > input:hover + label:before,
.radio_container > input:hover + label:before,
.option.radio > input:hover + label:before {
  background: var(--inn-primary);
}
.checkbox_container > input:focus + label:before,
.datenschutz-checkbox > input:focus + label:before,
.radio_container > input:focus + label:before,
.option.radio > input:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.checkbox_container > input:checked + label:before,
.datenschutz-checkbox > input:checked + label:before,
.radio_container > input:checked + label:before,
.option.radio > input:checked + label:before {
  background: var(--inn-primary);
}
.checkbox_container > input:disabled + label,
.datenschutz-checkbox > input:disabled + label,
.radio_container > input:disabled + label,
.option.radio > input:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.checkbox_container > input:disabled + label:before,
.datenschutz-checkbox > input:disabled + label:before,
.radio_container > input:disabled + label:before,
.option.radio > input:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.checkbox_container > input:checked + label:after,
.datenschutz-checkbox > input:checked + label:after,
.radio_container > input:checked + label:after,
.option.radio > input:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.checkbox_container > label,
.datenschutz-checkbox > label,
.radio_container > label,
.option.radio > label {
  margin-right: 10px;
  margin-bottom: 30px;
}
.datenschutz-checkbox label {
  margin-bottom: 0;
}
.side-nav-container {
  position: fixed;
  left: 0;
  top: 40%;
  display: flex;
  flex-direction: column;
  z-index: 99999999;
}
.side-nav-container a {
  padding: 15px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  background: var(--inn-primary);
  color: white;
  margin-bottom: 20px;
  width: auto;
  margin-right: auto;
  align-items: center;
  height: 60px;
}
.side-nav-container a:hover {
  color: white;
}
.side-nav-container a:hover i,
.side-nav-container a:hover p {
  color: white;
}
.side-nav-container a i {
  font-size: 140%;
  line-height: 1;
}
.side-nav-container .side-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-nav-container .side-nav-text {
  white-space: nowrap;
  padding-right: 10px;
}
.side-nav-container .side-nav-text p {
  margin-bottom: 0;
}
.scroll-top-button {
  position: fixed;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}
.scroll-top-button {
  position: fixed;
  right: 50px;
  bottom: 50px;
  color: white;
  background: var(--inn-primary);
  font-size: 150%;
  width: 1.7em;
  height: 1.7em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  opacity: 0;
  transition: 0.5s all ease-in-out;
  border: 2px solid white;
}
@media only screen and (max-width: 767px) {
  .scroll-top-button {
    right: 10px;
    bottom: 10px;
  }
}
.scroll-top-button:hover {
  cursor: pointer;
}
.scroll-top-button.show-scroll-top {
  opacity: 1;
}
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--inn-neutral);
  font-family: var(--inn-main-font);
  font-size: var(--inn-body-font-size);
  font-weight: 100;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--inn-neutral);
  font-family: var(--inn-main-font);
  font-size: var(--inn-body-font-size);
  font-weight: 100;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: var(--inn-neutral);
  font-family: var(--inn-main-font);
  font-size: var(--inn-body-font-size);
  font-weight: 100;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: var(--inn-neutral);
  font-family: var(--inn-main-font);
  font-size: var(--inn-body-font-size);
  font-weight: 100;
}
form {
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
.parallax {
  min-height: 30vw;
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
}
@media only screen and (max-width: 1000px) {
  .parallax {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: unset;
  }
}
section {
  display: grid;
  grid-gap: 50px;
  max-width: 100%!important;
  overflow: hidden;
}
section > div {
  width: 100%!important;
  max-width: 100%;
  overflow: hidden;
}
section > div > div {
  width: 100%!important;
  height: 100%;
}
section.col-20x20x20x20x20 {
  grid-template-columns: 20fr 20fr 20fr 20fr 20fr;
}
section.col-25x25x25x25 {
  grid-template-columns: 25fr 25fr 25fr 25fr;
}
section.col-33x33x33 {
  grid-template-columns: 33fr 33fr 33fr;
}
section.col-50x50 {
  grid-template-columns: 50fr 50fr;
}
section.col-75x25 {
  grid-template-columns: 75fr 25fr;
}
section.col-25x75 {
  grid-template-columns: 25fr 75fr;
}
section.col-60x40 {
  grid-template-columns: 60fr 40fr;
}
section.col-40x60 {
  grid-template-columns: 40fr 60fr;
}
section.col-30x70 {
  grid-template-columns: 30fr 70fr;
}
section.col-33x66 {
  grid-template-columns: 33fr 66fr;
}
section.col-66x33 {
  grid-template-columns: 66fr 33fr;
}
section.col-70x30 {
  grid-template-columns: 30fr 70fr;
}
@media only screen and (max-width: 767px) {
  section {
    grid-template-columns: 100%;
    grid-gap: 30px;
  }
}
section > div {
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  section > div > div .ce_text {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  section > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
.background-image {
  display: flex;
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  height: 100%;
}
.accordion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
  overflow: visible;
}
.accordion .card {
  background: transparent;
  overflow: visible;
  width: 100%;
  margin-bottom: 20px;
  border: none;
  position: relative;
}
.accordion .card > div {
  overflow: visible;
}
.accordion .card:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 50px;
  background: var(--inn-secondary);
  left: -10px;
  top: 5px;
  z-index: -1;
  border-radius: 3px;
}
.accordion .card .card-header {
  padding: 0;
  background: var(--inn-primary);
  color: white;
  position: relative;
  z-index: 5;
  border-radius: 3px;
}
.accordion .card .card-header .btn-link {
  display: flex;
  color: white;
  position: relative;
  z-index: 6;
}
.accordion .card .card-header .btn-link:hover {
  text-decoration-color: var(--inn-primary) !important;
}
.accordion .card .card-header .btn-link .plus.icon {
  margin-right: 10px;
}
.accordion .card .card-header .btn-link .plus.icon i {
  color: white;
  font-size: 150%;
}
.accordion .card .card-header .btn-link .question {
  color: white;
  white-space: normal;
}
@media only screen and (max-width: 767px) {
  .accordion .card .card-header .btn-link .question {
    font-size: 3.3vw;
  }
}
.accordion .card .card-body {
  position: relative;
  left: -10px;
  top: -35px;
  background: var(--inn-secondary);
  color: var(--inn-primary);
  padding-top: 45px;
}
.accordion.faq-page .card {
  width: 48%;
}
@media only screen and (max-width: 767px) {
  .accordion.faq-page .card {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .accordion .card {
    width: 100%;
  }
}
.mod_cms_accept_tags form > .tags > div .head input:checked + label {
  background: var(--inn-primary);
}
.mod_cms_accept_tags form .widget-submit button {
  background: var(--inn-primary);
  padding: 5px 15px;
  border: 2px solid var(--inn-primary);
  transition: 0.5s all ease-in-out;
  color: white;
}
.mod_cms_accept_tags form .widget-submit button:hover {
  color: var(--inn-primary);
  background: transparent;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.v-buttons {
  display: flex;
}
.v-buttons .v-button:first-child {
  margin-right: 20px;
}
@media only screen and (max-width: 767px) {
  .v-buttons {
    flex-direction: column;
  }
  .v-buttons .v-button {
    margin-right: 0!important;
    margin-bottom: 20px;
    text-align: center;
  }
}
.mod_dlh_googlemaps {
  max-width: 100%;
}
.mod_dlh_googlemaps .dlh_googlemap {
  max-width: 100%;
  position: relative;
}
.mod_dlh_googlemaps .dlh_googlemap #confirm-googlemaps {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.mod_dlh_googlemaps .dlh_googlemap #confirm-googlemaps p {
  max-width: 600px;
}
.mod_dlh_googlemaps .dlh_googlemap #confirm-googlemaps a[href="#"] {
  display: inline-block;
  border: 2px solid var(--inn-primary);
  padding: var(--inn-button-padding-vertical, 12px) var(--inn-button-padding-horizontal, 30px);
  color: var(--inn-neutral);
  background: var(--inn-primary);
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
  border-radius: var(--inn-button-border-radius, 5px);
}
.mod_dlh_googlemaps .dlh_googlemap #confirm-googlemaps a[href="#"]:hover {
  color: var(--inn-primary);
  background: transparent;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px!important;
  min-width: 60px!important;
  height: 34px!important;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch input:checked + .slider {
  background-color: var(--inn-primary);
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px var(--inn-primary);
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background: white;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--inn-primary);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: var(--inn-primary);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch .slider.round {
  border-radius: 34px;
  border: 2px solid var(--inn-primary);
}
.switch .slider.round:before {
  border-radius: 50%;
}
.switch.white .slider {
  background: var(--inn-primary);
  border-color: var(--inn-primary) !important;
}
.switch.white .slider:before {
  background: white;
}
.switch.white input:checked + .slider {
  background-color: white;
  border-color: var(--inn-primary) !important;
}
.switch.white input:checked + .slider:before {
  background: var(--inn-primary) !important;
}
.switch.white input:focus + .slider {
  box-shadow: 0 0 1px white;
}
.switch.white input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background: white;
}
.full-form .formbody {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
}
.full-form .formbody .widget.select-gender {
  width: 15%;
  margin-right: 1%;
}
.full-form .formbody .widget.input-firstname {
  width: 32%;
  margin-right: 4%;
}
.full-form .formbody .widget.input-lastname {
  width: 48%;
}
.full-form .formbody .widget.input-street {
  width: 48%;
  margin-right: 4%;
}
.full-form .formbody .widget.input-plz,
.full-form .formbody .widget.input-wunschtermin {
  margin-right: 2%;
}
.full-form .formbody .widget.input-plz,
.full-form .formbody .widget.input-city,
.full-form .formbody .widget.input-wunschtermin,
.full-form .formbody .widget.input-alternativtermin {
  width: 23%;
}
.full-form .formbody .widget.input-mail {
  width: 48%;
  margin-right: 4%;
}
.full-form .formbody .widget.input-phone {
  width: 48%;
}
.full-form .formbody .widget.input-betreff {
  width: 100%;
}
.full-form .formbody .widget.input-msg {
  width: 100%;
}
.full-form .formbody .widget.input-grund {
  width: 48%;
  margin-right: 4%;
}
.full-form .formbody .widget.widget-fineuploader {
  width: 40%;
}
.full-form .formbody .widget.widget-fineuploader .qq-upload-button-selector {
  display: inline-block;
  border: 2px solid var(--inn-primary);
  padding: var(--inn-button-padding-vertical, 12px) var(--inn-button-padding-horizontal, 30px);
  color: var(--inn-primary);
  background: transparent;
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
  border-radius: var(--inn-button-border-radius, 5px);
  border-width: 4px!important;
  padding: 15px 30px!important;
  min-width: 12em!important;
}
.full-form .formbody .widget.widget-fineuploader .qq-upload-button-selector:hover {
  color: white;
  background: var(--inn-primary);
}
.full-form .formbody .widget.widget-fineuploader .qq-upload-button-selector:hover {
  color: white;
}
@media only screen and (max-width: 767px) {
  .full-form .formbody .widget.widget-fineuploader .qq-upload-button-selector {
    display: inline-block;
    border: 2px solid var(--inn-primary);
    padding: var(--inn-button-padding-vertical, 12px) var(--inn-button-padding-horizontal, 30px);
    color: white;
    background: var(--inn-primary);
    transition: 0.5s all ease-in-out;
    z-index: 9999;
    min-width: 10em;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    border-radius: var(--inn-button-border-radius, 5px);
    width: 100%;
    border-radius: 10px;
    padding: 10px 60px;
    min-width: 8em;
  }
  .full-form .formbody .widget.widget-fineuploader .qq-upload-button-selector:hover {
    color: var(--inn-primary);
    background: transparent;
  }
}
.full-form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item {
  display: flex;
}
.full-form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .content {
  display: flex;
}
.full-form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .content img {
  width: inherit!important;
}
.full-form .formbody .widget.widget-fineuploader .qq-upload-success {
  display: none;
}
@media only screen and (max-width: 767px) {
  .full-form .formbody .widget {
    width: 100%!important;
    padding: 0!important;
    margin: 0!important;
  }
}
.full-form .formbody .datenschutz-checkbox {
  width: 40%!important;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .full-form .formbody .datenschutz-checkbox {
    margin-bottom: 10px!important;
    margin-top: 20px!important;
  }
}
@media only screen and (max-width: 767px) {
  .full-form .formbody .datenschutz-checkbox {
    align-items: center;
    width: 100%!important;
    font-size: 100%!important;
  }
  .full-form .formbody .datenschutz-checkbox label {
    font-size: 70%;
    width: 100%;
  }
}
.full-form .formbody .widget.widget-submit {
  width: 20%;
  display: flex;
}
.full-form .formbody .widget.widget-submit button {
  display: inline-block;
  border: 2px solid var(--inn-primary);
  padding: var(--inn-button-padding-vertical, 12px) var(--inn-button-padding-horizontal, 30px);
  color: var(--inn-primary);
  background: transparent;
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
  border-radius: var(--inn-button-border-radius, 5px);
  padding: 10px 30px!important;
  min-width: 12em!important;
  text-transform: uppercase;
  font-family: var(--inn-head-font);
}
.full-form .formbody .widget.widget-submit button:hover {
  color: white;
  background: var(--inn-primary);
}
div.widget-calendar {
  position: relative;
}
div.widget-calendar img {
  position: absolute;
  width: 30px;
  right: 10px;
  top: 5px;
}
.icons-container a {
  display: flex;
}
.icons-container a p {
  margin-bottom: 0;
}
.icons-container a.type-image-icon.hover-image-icon .hover-icon-img {
  opacity: 0;
  transition: 0.5s all ease-in-out;
}
.icons-container a.type-image-icon.hover-image-icon:hover .hover-icon-img {
  opacity: 1;
}
.gallery-thumbs {
  margin-top: 20px;
}
@media only screen and (max-width: 1100px) {
  .gallery-thumbs {
    display: none;
  }
}
.gallery-thumbs .swiper-wrapper {
  display: grid!important;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}
.gallery-thumbs .swiper-slide {
  min-height: 100px;
  width: 100%!important;
  background-size: 100% auto;
  background-position: 50% 50%;
}
.gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
  display: none!important;
}
#maps .inside {
  max-width: 100%!important;
  padding: 0!important;
}
#maps .inside .mod_dlh_googlemaps,
#maps .inside .dlh_googlemap {
  max-width: 100%!important;
  width: 100%!important;
}
.mt-xxl {
  margin-top: 150px!important;
}
.mt-xl {
  margin-top: 100px!important;
}
.mt-l {
  margin-top: 80px!important;
}
.mt-m {
  margin-top: 60px!important;
}
.mt-s {
  margin-top: 40px!important;
}
.mt-xs {
  margin-top: 30px!important;
}
.mt-xxs {
  margin-top: 20px!important;
}
.mb-xxl {
  margin-bottom: 150px!important;
}
.mb-xl {
  margin-bottom: 100px!important;
}
.mb-l {
  margin-bottom: 80px!important;
}
.mb-m {
  margin-bottom: 60px!important;
}
.mb-s {
  margin-bottom: 40px!important;
}
.mb-xs {
  margin-bottom: 30px!important;
}
.mb-xxs {
  margin-bottom: 20px!important;
}
.pt-xxl {
  padding-top: 150px!important;
}
.pt-xl {
  padding-top: 120px!important;
}
.pt-l {
  padding-top: 100px!important;
}
.pt-m {
  padding-top: 80px!important;
}
.pt-s {
  padding-top: 60px!important;
}
.pt-xs {
  padding-top: 40px!important;
}
.pt-xxs {
  padding-top: 20px!important;
}
.pb-xxl {
  padding-bottom: 150px!important;
}
.pb-xl {
  padding-bottom: 120px!important;
}
.pb-l {
  padding-bottom: 100px!important;
}
.pb-m {
  padding-bottom: 80px!important;
}
.pb-s {
  padding-bottom: 60px!important;
}
.pb-xs {
  padding-bottom: 40px!important;
}
.pb-xxs {
  padding-bottom: 20px!important;
}
.m-0 {
  margin: 0 !important;
}
.m-4 {
  margin: 4px !important;
}
.m-8 {
  margin: 8px !important;
}
.m-12 {
  margin: 12px !important;
}
.m-16 {
  margin: 16px !important;
}
.m-20 {
  margin: 20px !important;
}
.m-24 {
  margin: 24px !important;
}
.m-32 {
  margin: 32px !important;
}
.m-40 {
  margin: 40px !important;
}
.m-48 {
  margin: 48px !important;
}
.m-56 {
  margin: 56px !important;
}
.m-64 {
  margin: 64px !important;
}
.m-80 {
  margin: 80px !important;
}
.m-96 {
  margin: 96px !important;
}
.m-120 {
  margin: 120px !important;
}
.m-160 {
  margin: 160px !important;
}
.m-200 {
  margin: 200px !important;
}
.m-auto {
  margin: auto !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-4 {
  margin-top: 4px !important;
}
.mt-8 {
  margin-top: 8px !important;
}
.mt-12 {
  margin-top: 12px !important;
}
.mt-16 {
  margin-top: 16px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mt-24 {
  margin-top: 24px !important;
}
.mt-32 {
  margin-top: 32px !important;
}
.mt-40 {
  margin-top: 40px !important;
}
.mt-48 {
  margin-top: 48px !important;
}
.mt-56 {
  margin-top: 56px !important;
}
.mt-64 {
  margin-top: 64px !important;
}
.mt-80 {
  margin-top: 80px !important;
}
.mt-96 {
  margin-top: 96px !important;
}
.mt-120 {
  margin-top: 120px !important;
}
.mt-160 {
  margin-top: 160px !important;
}
.mt-200 {
  margin-top: 200px !important;
}
.mt-auto {
  margin-top: auto !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-4 {
  margin-bottom: 4px !important;
}
.mb-8 {
  margin-bottom: 8px !important;
}
.mb-12 {
  margin-bottom: 12px !important;
}
.mb-16 {
  margin-bottom: 16px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-24 {
  margin-bottom: 24px !important;
}
.mb-32 {
  margin-bottom: 32px !important;
}
.mb-40 {
  margin-bottom: 40px !important;
}
.mb-48 {
  margin-bottom: 48px !important;
}
.mb-56 {
  margin-bottom: 56px !important;
}
.mb-64 {
  margin-bottom: 64px !important;
}
.mb-80 {
  margin-bottom: 80px !important;
}
.mb-96 {
  margin-bottom: 96px !important;
}
.mb-120 {
  margin-bottom: 120px !important;
}
.mb-160 {
  margin-bottom: 160px !important;
}
.mb-200 {
  margin-bottom: 200px !important;
}
.mb-auto {
  margin-bottom: auto !important;
}
.ml-0 {
  margin-left: 0 !important;
}
.ml-4 {
  margin-left: 4px !important;
}
.ml-8 {
  margin-left: 8px !important;
}
.ml-12 {
  margin-left: 12px !important;
}
.ml-16 {
  margin-left: 16px !important;
}
.ml-20 {
  margin-left: 20px !important;
}
.ml-24 {
  margin-left: 24px !important;
}
.ml-32 {
  margin-left: 32px !important;
}
.ml-40 {
  margin-left: 40px !important;
}
.ml-48 {
  margin-left: 48px !important;
}
.ml-56 {
  margin-left: 56px !important;
}
.ml-64 {
  margin-left: 64px !important;
}
.ml-80 {
  margin-left: 80px !important;
}
.ml-96 {
  margin-left: 96px !important;
}
.ml-120 {
  margin-left: 120px !important;
}
.ml-160 {
  margin-left: 160px !important;
}
.ml-200 {
  margin-left: 200px !important;
}
.ml-auto {
  margin-left: auto !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mr-4 {
  margin-right: 4px !important;
}
.mr-8 {
  margin-right: 8px !important;
}
.mr-12 {
  margin-right: 12px !important;
}
.mr-16 {
  margin-right: 16px !important;
}
.mr-20 {
  margin-right: 20px !important;
}
.mr-24 {
  margin-right: 24px !important;
}
.mr-32 {
  margin-right: 32px !important;
}
.mr-40 {
  margin-right: 40px !important;
}
.mr-48 {
  margin-right: 48px !important;
}
.mr-56 {
  margin-right: 56px !important;
}
.mr-64 {
  margin-right: 64px !important;
}
.mr-80 {
  margin-right: 80px !important;
}
.mr-96 {
  margin-right: 96px !important;
}
.mr-120 {
  margin-right: 120px !important;
}
.mr-160 {
  margin-right: 160px !important;
}
.mr-200 {
  margin-right: 200px !important;
}
.mr-auto {
  margin-right: auto !important;
}
.mx-0 {
  margin-left: 0!important;
  margin-right: 0 !important;
}
.mx-4 {
  margin-left: 4px!important;
  margin-right: 4px !important;
}
.mx-8 {
  margin-left: 8px!important;
  margin-right: 8px !important;
}
.mx-12 {
  margin-left: 12px!important;
  margin-right: 12px !important;
}
.mx-16 {
  margin-left: 16px!important;
  margin-right: 16px !important;
}
.mx-20 {
  margin-left: 20px!important;
  margin-right: 20px !important;
}
.mx-24 {
  margin-left: 24px!important;
  margin-right: 24px !important;
}
.mx-32 {
  margin-left: 32px!important;
  margin-right: 32px !important;
}
.mx-40 {
  margin-left: 40px!important;
  margin-right: 40px !important;
}
.mx-48 {
  margin-left: 48px!important;
  margin-right: 48px !important;
}
.mx-56 {
  margin-left: 56px!important;
  margin-right: 56px !important;
}
.mx-64 {
  margin-left: 64px!important;
  margin-right: 64px !important;
}
.mx-80 {
  margin-left: 80px!important;
  margin-right: 80px !important;
}
.mx-96 {
  margin-left: 96px!important;
  margin-right: 96px !important;
}
.mx-120 {
  margin-left: 120px!important;
  margin-right: 120px !important;
}
.mx-160 {
  margin-left: 160px!important;
  margin-right: 160px !important;
}
.mx-200 {
  margin-left: 200px!important;
  margin-right: 200px !important;
}
.mx-auto {
  margin-left: auto!important;
  margin-right: auto !important;
}
.my-0 {
  margin-top: 0!important;
  margin-bottom: 0 !important;
}
.my-4 {
  margin-top: 4px!important;
  margin-bottom: 4px !important;
}
.my-8 {
  margin-top: 8px!important;
  margin-bottom: 8px !important;
}
.my-12 {
  margin-top: 12px!important;
  margin-bottom: 12px !important;
}
.my-16 {
  margin-top: 16px!important;
  margin-bottom: 16px !important;
}
.my-20 {
  margin-top: 20px!important;
  margin-bottom: 20px !important;
}
.my-24 {
  margin-top: 24px!important;
  margin-bottom: 24px !important;
}
.my-32 {
  margin-top: 32px!important;
  margin-bottom: 32px !important;
}
.my-40 {
  margin-top: 40px!important;
  margin-bottom: 40px !important;
}
.my-48 {
  margin-top: 48px!important;
  margin-bottom: 48px !important;
}
.my-56 {
  margin-top: 56px!important;
  margin-bottom: 56px !important;
}
.my-64 {
  margin-top: 64px!important;
  margin-bottom: 64px !important;
}
.my-80 {
  margin-top: 80px!important;
  margin-bottom: 80px !important;
}
.my-96 {
  margin-top: 96px!important;
  margin-bottom: 96px !important;
}
.my-120 {
  margin-top: 120px!important;
  margin-bottom: 120px !important;
}
.my-160 {
  margin-top: 160px!important;
  margin-bottom: 160px !important;
}
.my-200 {
  margin-top: 200px!important;
  margin-bottom: 200px !important;
}
.my-auto {
  margin-top: auto!important;
  margin-bottom: auto !important;
}
.p-0 {
  padding: 0 !important;
}
.p-4 {
  padding: 4px !important;
}
.p-8 {
  padding: 8px !important;
}
.p-12 {
  padding: 12px !important;
}
.p-16 {
  padding: 16px !important;
}
.p-20 {
  padding: 20px !important;
}
.p-24 {
  padding: 24px !important;
}
.p-32 {
  padding: 32px !important;
}
.p-40 {
  padding: 40px !important;
}
.p-48 {
  padding: 48px !important;
}
.p-56 {
  padding: 56px !important;
}
.p-64 {
  padding: 64px !important;
}
.p-80 {
  padding: 80px !important;
}
.p-96 {
  padding: 96px !important;
}
.p-120 {
  padding: 120px !important;
}
.p-160 {
  padding: 160px !important;
}
.p-200 {
  padding: 200px !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pt-4 {
  padding-top: 4px !important;
}
.pt-8 {
  padding-top: 8px !important;
}
.pt-12 {
  padding-top: 12px !important;
}
.pt-16 {
  padding-top: 16px !important;
}
.pt-20 {
  padding-top: 20px !important;
}
.pt-24 {
  padding-top: 24px !important;
}
.pt-32 {
  padding-top: 32px !important;
}
.pt-40 {
  padding-top: 40px !important;
}
.pt-48 {
  padding-top: 48px !important;
}
.pt-56 {
  padding-top: 56px !important;
}
.pt-64 {
  padding-top: 64px !important;
}
.pt-80 {
  padding-top: 80px !important;
}
.pt-96 {
  padding-top: 96px !important;
}
.pt-120 {
  padding-top: 120px !important;
}
.pt-160 {
  padding-top: 160px !important;
}
.pt-200 {
  padding-top: 200px !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-4 {
  padding-bottom: 4px !important;
}
.pb-8 {
  padding-bottom: 8px !important;
}
.pb-12 {
  padding-bottom: 12px !important;
}
.pb-16 {
  padding-bottom: 16px !important;
}
.pb-20 {
  padding-bottom: 20px !important;
}
.pb-24 {
  padding-bottom: 24px !important;
}
.pb-32 {
  padding-bottom: 32px !important;
}
.pb-40 {
  padding-bottom: 40px !important;
}
.pb-48 {
  padding-bottom: 48px !important;
}
.pb-56 {
  padding-bottom: 56px !important;
}
.pb-64 {
  padding-bottom: 64px !important;
}
.pb-80 {
  padding-bottom: 80px !important;
}
.pb-96 {
  padding-bottom: 96px !important;
}
.pb-120 {
  padding-bottom: 120px !important;
}
.pb-160 {
  padding-bottom: 160px !important;
}
.pb-200 {
  padding-bottom: 200px !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.pl-4 {
  padding-left: 4px !important;
}
.pl-8 {
  padding-left: 8px !important;
}
.pl-12 {
  padding-left: 12px !important;
}
.pl-16 {
  padding-left: 16px !important;
}
.pl-20 {
  padding-left: 20px !important;
}
.pl-24 {
  padding-left: 24px !important;
}
.pl-32 {
  padding-left: 32px !important;
}
.pl-40 {
  padding-left: 40px !important;
}
.pl-48 {
  padding-left: 48px !important;
}
.pl-56 {
  padding-left: 56px !important;
}
.pl-64 {
  padding-left: 64px !important;
}
.pl-80 {
  padding-left: 80px !important;
}
.pl-96 {
  padding-left: 96px !important;
}
.pl-120 {
  padding-left: 120px !important;
}
.pl-160 {
  padding-left: 160px !important;
}
.pl-200 {
  padding-left: 200px !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.pr-4 {
  padding-right: 4px !important;
}
.pr-8 {
  padding-right: 8px !important;
}
.pr-12 {
  padding-right: 12px !important;
}
.pr-16 {
  padding-right: 16px !important;
}
.pr-20 {
  padding-right: 20px !important;
}
.pr-24 {
  padding-right: 24px !important;
}
.pr-32 {
  padding-right: 32px !important;
}
.pr-40 {
  padding-right: 40px !important;
}
.pr-48 {
  padding-right: 48px !important;
}
.pr-56 {
  padding-right: 56px !important;
}
.pr-64 {
  padding-right: 64px !important;
}
.pr-80 {
  padding-right: 80px !important;
}
.pr-96 {
  padding-right: 96px !important;
}
.pr-120 {
  padding-right: 120px !important;
}
.pr-160 {
  padding-right: 160px !important;
}
.pr-200 {
  padding-right: 200px !important;
}
.px-0 {
  padding-left: 0!important;
  padding-right: 0 !important;
}
.px-4 {
  padding-left: 4px!important;
  padding-right: 4px !important;
}
.px-8 {
  padding-left: 8px!important;
  padding-right: 8px !important;
}
.px-12 {
  padding-left: 12px!important;
  padding-right: 12px !important;
}
.px-16 {
  padding-left: 16px!important;
  padding-right: 16px !important;
}
.px-20 {
  padding-left: 20px!important;
  padding-right: 20px !important;
}
.px-24 {
  padding-left: 24px!important;
  padding-right: 24px !important;
}
.px-32 {
  padding-left: 32px!important;
  padding-right: 32px !important;
}
.px-40 {
  padding-left: 40px!important;
  padding-right: 40px !important;
}
.px-48 {
  padding-left: 48px!important;
  padding-right: 48px !important;
}
.px-56 {
  padding-left: 56px!important;
  padding-right: 56px !important;
}
.px-64 {
  padding-left: 64px!important;
  padding-right: 64px !important;
}
.px-80 {
  padding-left: 80px!important;
  padding-right: 80px !important;
}
.px-96 {
  padding-left: 96px!important;
  padding-right: 96px !important;
}
.px-120 {
  padding-left: 120px!important;
  padding-right: 120px !important;
}
.px-160 {
  padding-left: 160px!important;
  padding-right: 160px !important;
}
.px-200 {
  padding-left: 200px!important;
  padding-right: 200px !important;
}
.py-0 {
  padding-top: 0!important;
  padding-bottom: 0 !important;
}
.py-4 {
  padding-top: 4px!important;
  padding-bottom: 4px !important;
}
.py-8 {
  padding-top: 8px!important;
  padding-bottom: 8px !important;
}
.py-12 {
  padding-top: 12px!important;
  padding-bottom: 12px !important;
}
.py-16 {
  padding-top: 16px!important;
  padding-bottom: 16px !important;
}
.py-20 {
  padding-top: 20px!important;
  padding-bottom: 20px !important;
}
.py-24 {
  padding-top: 24px!important;
  padding-bottom: 24px !important;
}
.py-32 {
  padding-top: 32px!important;
  padding-bottom: 32px !important;
}
.py-40 {
  padding-top: 40px!important;
  padding-bottom: 40px !important;
}
.py-48 {
  padding-top: 48px!important;
  padding-bottom: 48px !important;
}
.py-56 {
  padding-top: 56px!important;
  padding-bottom: 56px !important;
}
.py-64 {
  padding-top: 64px!important;
  padding-bottom: 64px !important;
}
.py-80 {
  padding-top: 80px!important;
  padding-bottom: 80px !important;
}
.py-96 {
  padding-top: 96px!important;
  padding-bottom: 96px !important;
}
.py-120 {
  padding-top: 120px!important;
  padding-bottom: 120px !important;
}
.py-160 {
  padding-top: 160px!important;
  padding-bottom: 160px !important;
}
.py-200 {
  padding-top: 200px!important;
  padding-bottom: 200px !important;
}
.-mt-4 {
  margin-top: -4px !important;
}
.-mt-8 {
  margin-top: -8px !important;
}
.-mt-12 {
  margin-top: -12px !important;
}
.-mt-16 {
  margin-top: -16px !important;
}
.-mt-20 {
  margin-top: -20px !important;
}
.-mt-24 {
  margin-top: -24px !important;
}
.-mt-32 {
  margin-top: -32px !important;
}
.-mt-40 {
  margin-top: -40px !important;
}
.-mt-48 {
  margin-top: -48px !important;
}
.-mt-64 {
  margin-top: -64px !important;
}
.-mt-80 {
  margin-top: -80px !important;
}
.-mt-96 {
  margin-top: -96px !important;
}
.-mt-120 {
  margin-top: -120px !important;
}
.-mb-4 {
  margin-bottom: -4px !important;
}
.-mb-8 {
  margin-bottom: -8px !important;
}
.-mb-12 {
  margin-bottom: -12px !important;
}
.-mb-16 {
  margin-bottom: -16px !important;
}
.-mb-20 {
  margin-bottom: -20px !important;
}
.-mb-24 {
  margin-bottom: -24px !important;
}
.-mb-32 {
  margin-bottom: -32px !important;
}
.-mb-40 {
  margin-bottom: -40px !important;
}
.-mb-48 {
  margin-bottom: -48px !important;
}
.-mb-64 {
  margin-bottom: -64px !important;
}
.-mb-80 {
  margin-bottom: -80px !important;
}
.-mb-96 {
  margin-bottom: -96px !important;
}
.-mb-120 {
  margin-bottom: -120px !important;
}
.-ml-4 {
  margin-left: -4px !important;
}
.-ml-8 {
  margin-left: -8px !important;
}
.-ml-12 {
  margin-left: -12px !important;
}
.-ml-16 {
  margin-left: -16px !important;
}
.-ml-20 {
  margin-left: -20px !important;
}
.-ml-24 {
  margin-left: -24px !important;
}
.-ml-32 {
  margin-left: -32px !important;
}
.-ml-40 {
  margin-left: -40px !important;
}
.-ml-48 {
  margin-left: -48px !important;
}
.-ml-64 {
  margin-left: -64px !important;
}
.-ml-80 {
  margin-left: -80px !important;
}
.-ml-96 {
  margin-left: -96px !important;
}
.-ml-120 {
  margin-left: -120px !important;
}
.-mr-4 {
  margin-right: -4px !important;
}
.-mr-8 {
  margin-right: -8px !important;
}
.-mr-12 {
  margin-right: -12px !important;
}
.-mr-16 {
  margin-right: -16px !important;
}
.-mr-20 {
  margin-right: -20px !important;
}
.-mr-24 {
  margin-right: -24px !important;
}
.-mr-32 {
  margin-right: -32px !important;
}
.-mr-40 {
  margin-right: -40px !important;
}
.-mr-48 {
  margin-right: -48px !important;
}
.-mr-64 {
  margin-right: -64px !important;
}
.-mr-80 {
  margin-right: -80px !important;
}
.-mr-96 {
  margin-right: -96px !important;
}
.-mr-120 {
  margin-right: -120px !important;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .mt-xxl {
    margin-top: 60px!important;
  }
  .mt-xl {
    margin-top: 50px!important;
  }
  .mt-l {
    margin-top: 40px!important;
  }
  .mt-m {
    margin-top: 30px!important;
  }
  .mt-s {
    margin-top: 25px!important;
  }
  .mt-xs {
    margin-top: 25px!important;
  }
  .mt-xxs {
    margin-top: 25px!important;
  }
  .mb-xxl {
    margin-bottom: 60px!important;
  }
  .mb-xl {
    margin-bottom: 50px!important;
  }
  .mb-l {
    margin-bottom: 40px!important;
  }
  .mb-m {
    margin-bottom: 30px!important;
  }
  .mb-s {
    margin-bottom: 25px!important;
  }
  .mb-xs {
    margin-bottom: 25px!important;
  }
  .mb-xxs {
    margin-bottom: 25px!important;
  }
  .pt-xxl {
    padding-top: 100px!important;
  }
  .pt-xl {
    padding-top: 80px!important;
  }
  .pt-l {
    padding-top: 70px!important;
  }
  .pt-m {
    padding-top: 60px!important;
  }
  .pt-s {
    padding-top: 50px!important;
  }
  .pt-xs {
    padding-top: 30px!important;
  }
  .pt-xxs {
    padding-top: 20px!important;
  }
  .pb-xxl {
    padding-bottom: 100px!important;
  }
  .pb-xl {
    padding-bottom: 80px!important;
  }
  .pb-l {
    padding-bottom: 70px!important;
  }
  .pb-m {
    padding-bottom: 60px!important;
  }
  .pb-s {
    padding-bottom: 50px!important;
  }
  .pb-xs {
    padding-bottom: 30px!important;
  }
  .pb-xxs {
    padding-bottom: 20px!important;
  }
  .m-0-t {
    margin: 0 !important;
  }
  .m-4-t {
    margin: 4px !important;
  }
  .m-8-t {
    margin: 8px !important;
  }
  .m-12-t {
    margin: 12px !important;
  }
  .m-16-t {
    margin: 16px !important;
  }
  .m-20-t {
    margin: 20px !important;
  }
  .m-24-t {
    margin: 24px !important;
  }
  .m-32-t {
    margin: 32px !important;
  }
  .m-40-t {
    margin: 40px !important;
  }
  .m-48-t {
    margin: 48px !important;
  }
  .m-56-t {
    margin: 56px !important;
  }
  .m-64-t {
    margin: 64px !important;
  }
  .m-80-t {
    margin: 80px !important;
  }
  .m-96-t {
    margin: 96px !important;
  }
  .m-120-t {
    margin: 120px !important;
  }
  .m-160-t {
    margin: 160px !important;
  }
  .m-200-t {
    margin: 200px !important;
  }
  .mt-0-t {
    margin-top: 0 !important;
  }
  .mt-4-t {
    margin-top: 4px !important;
  }
  .mt-8-t {
    margin-top: 8px !important;
  }
  .mt-12-t {
    margin-top: 12px !important;
  }
  .mt-16-t {
    margin-top: 16px !important;
  }
  .mt-20-t {
    margin-top: 20px !important;
  }
  .mt-24-t {
    margin-top: 24px !important;
  }
  .mt-32-t {
    margin-top: 32px !important;
  }
  .mt-40-t {
    margin-top: 40px !important;
  }
  .mt-48-t {
    margin-top: 48px !important;
  }
  .mt-56-t {
    margin-top: 56px !important;
  }
  .mt-64-t {
    margin-top: 64px !important;
  }
  .mt-80-t {
    margin-top: 80px !important;
  }
  .mt-96-t {
    margin-top: 96px !important;
  }
  .mt-120-t {
    margin-top: 120px !important;
  }
  .mt-160-t {
    margin-top: 160px !important;
  }
  .mt-200-t {
    margin-top: 200px !important;
  }
  .mb-0-t {
    margin-bottom: 0 !important;
  }
  .mb-4-t {
    margin-bottom: 4px !important;
  }
  .mb-8-t {
    margin-bottom: 8px !important;
  }
  .mb-12-t {
    margin-bottom: 12px !important;
  }
  .mb-16-t {
    margin-bottom: 16px !important;
  }
  .mb-20-t {
    margin-bottom: 20px !important;
  }
  .mb-24-t {
    margin-bottom: 24px !important;
  }
  .mb-32-t {
    margin-bottom: 32px !important;
  }
  .mb-40-t {
    margin-bottom: 40px !important;
  }
  .mb-48-t {
    margin-bottom: 48px !important;
  }
  .mb-56-t {
    margin-bottom: 56px !important;
  }
  .mb-64-t {
    margin-bottom: 64px !important;
  }
  .mb-80-t {
    margin-bottom: 80px !important;
  }
  .mb-96-t {
    margin-bottom: 96px !important;
  }
  .mb-120-t {
    margin-bottom: 120px !important;
  }
  .mb-160-t {
    margin-bottom: 160px !important;
  }
  .mb-200-t {
    margin-bottom: 200px !important;
  }
  .ml-0-t {
    margin-left: 0 !important;
  }
  .ml-4-t {
    margin-left: 4px !important;
  }
  .ml-8-t {
    margin-left: 8px !important;
  }
  .ml-12-t {
    margin-left: 12px !important;
  }
  .ml-16-t {
    margin-left: 16px !important;
  }
  .ml-20-t {
    margin-left: 20px !important;
  }
  .ml-24-t {
    margin-left: 24px !important;
  }
  .ml-32-t {
    margin-left: 32px !important;
  }
  .ml-40-t {
    margin-left: 40px !important;
  }
  .ml-48-t {
    margin-left: 48px !important;
  }
  .ml-64-t {
    margin-left: 64px !important;
  }
  .ml-80-t {
    margin-left: 80px !important;
  }
  .ml-auto-t {
    margin-left: auto !important;
  }
  .mr-0-t {
    margin-right: 0 !important;
  }
  .mr-4-t {
    margin-right: 4px !important;
  }
  .mr-8-t {
    margin-right: 8px !important;
  }
  .mr-12-t {
    margin-right: 12px !important;
  }
  .mr-16-t {
    margin-right: 16px !important;
  }
  .mr-20-t {
    margin-right: 20px !important;
  }
  .mr-24-t {
    margin-right: 24px !important;
  }
  .mr-32-t {
    margin-right: 32px !important;
  }
  .mr-40-t {
    margin-right: 40px !important;
  }
  .mr-48-t {
    margin-right: 48px !important;
  }
  .mr-64-t {
    margin-right: 64px !important;
  }
  .mr-80-t {
    margin-right: 80px !important;
  }
  .mr-auto-t {
    margin-right: auto !important;
  }
  .mx-0-t {
    margin-left: 0!important;
    margin-right: 0 !important;
  }
  .mx-auto-t {
    margin-left: auto!important;
    margin-right: auto !important;
  }
  .my-0-t {
    margin-top: 0!important;
    margin-bottom: 0 !important;
  }
  .my-auto-t {
    margin-top: auto!important;
    margin-bottom: auto !important;
  }
  .p-0-t {
    padding: 0 !important;
  }
  .p-4-t {
    padding: 4px !important;
  }
  .p-8-t {
    padding: 8px !important;
  }
  .p-12-t {
    padding: 12px !important;
  }
  .p-16-t {
    padding: 16px !important;
  }
  .p-20-t {
    padding: 20px !important;
  }
  .p-24-t {
    padding: 24px !important;
  }
  .p-32-t {
    padding: 32px !important;
  }
  .p-40-t {
    padding: 40px !important;
  }
  .p-48-t {
    padding: 48px !important;
  }
  .p-56-t {
    padding: 56px !important;
  }
  .p-64-t {
    padding: 64px !important;
  }
  .p-80-t {
    padding: 80px !important;
  }
  .p-96-t {
    padding: 96px !important;
  }
  .p-120-t {
    padding: 120px !important;
  }
  .p-160-t {
    padding: 160px !important;
  }
  .p-200-t {
    padding: 200px !important;
  }
  .pt-0-t {
    padding-top: 0 !important;
  }
  .pt-4-t {
    padding-top: 4px !important;
  }
  .pt-8-t {
    padding-top: 8px !important;
  }
  .pt-12-t {
    padding-top: 12px !important;
  }
  .pt-16-t {
    padding-top: 16px !important;
  }
  .pt-20-t {
    padding-top: 20px !important;
  }
  .pt-24-t {
    padding-top: 24px !important;
  }
  .pt-32-t {
    padding-top: 32px !important;
  }
  .pt-40-t {
    padding-top: 40px !important;
  }
  .pt-48-t {
    padding-top: 48px !important;
  }
  .pt-56-t {
    padding-top: 56px !important;
  }
  .pt-64-t {
    padding-top: 64px !important;
  }
  .pt-80-t {
    padding-top: 80px !important;
  }
  .pt-96-t {
    padding-top: 96px !important;
  }
  .pt-120-t {
    padding-top: 120px !important;
  }
  .pt-160-t {
    padding-top: 160px !important;
  }
  .pt-200-t {
    padding-top: 200px !important;
  }
  .pb-0-t {
    padding-bottom: 0 !important;
  }
  .pb-4-t {
    padding-bottom: 4px !important;
  }
  .pb-8-t {
    padding-bottom: 8px !important;
  }
  .pb-12-t {
    padding-bottom: 12px !important;
  }
  .pb-16-t {
    padding-bottom: 16px !important;
  }
  .pb-20-t {
    padding-bottom: 20px !important;
  }
  .pb-24-t {
    padding-bottom: 24px !important;
  }
  .pb-32-t {
    padding-bottom: 32px !important;
  }
  .pb-40-t {
    padding-bottom: 40px !important;
  }
  .pb-48-t {
    padding-bottom: 48px !important;
  }
  .pb-56-t {
    padding-bottom: 56px !important;
  }
  .pb-64-t {
    padding-bottom: 64px !important;
  }
  .pb-80-t {
    padding-bottom: 80px !important;
  }
  .pb-96-t {
    padding-bottom: 96px !important;
  }
  .pb-120-t {
    padding-bottom: 120px !important;
  }
  .pb-160-t {
    padding-bottom: 160px !important;
  }
  .pb-200-t {
    padding-bottom: 200px !important;
  }
  .pl-0-t {
    padding-left: 0 !important;
  }
  .pl-4-t {
    padding-left: 4px !important;
  }
  .pl-8-t {
    padding-left: 8px !important;
  }
  .pl-12-t {
    padding-left: 12px !important;
  }
  .pl-16-t {
    padding-left: 16px !important;
  }
  .pl-20-t {
    padding-left: 20px !important;
  }
  .pl-24-t {
    padding-left: 24px !important;
  }
  .pl-32-t {
    padding-left: 32px !important;
  }
  .pl-40-t {
    padding-left: 40px !important;
  }
  .pl-48-t {
    padding-left: 48px !important;
  }
  .pl-64-t {
    padding-left: 64px !important;
  }
  .pl-80-t {
    padding-left: 80px !important;
  }
  .pr-0-t {
    padding-right: 0 !important;
  }
  .pr-4-t {
    padding-right: 4px !important;
  }
  .pr-8-t {
    padding-right: 8px !important;
  }
  .pr-12-t {
    padding-right: 12px !important;
  }
  .pr-16-t {
    padding-right: 16px !important;
  }
  .pr-20-t {
    padding-right: 20px !important;
  }
  .pr-24-t {
    padding-right: 24px !important;
  }
  .pr-32-t {
    padding-right: 32px !important;
  }
  .pr-40-t {
    padding-right: 40px !important;
  }
  .pr-48-t {
    padding-right: 48px !important;
  }
  .pr-64-t {
    padding-right: 64px !important;
  }
  .pr-80-t {
    padding-right: 80px !important;
  }
  .px-0-t {
    padding-left: 0!important;
    padding-right: 0 !important;
  }
  .px-8-t {
    padding-left: 8px!important;
    padding-right: 8px !important;
  }
  .px-16-t {
    padding-left: 16px!important;
    padding-right: 16px !important;
  }
  .px-24-t {
    padding-left: 24px!important;
    padding-right: 24px !important;
  }
  .px-32-t {
    padding-left: 32px!important;
    padding-right: 32px !important;
  }
  .px-40-t {
    padding-left: 40px!important;
    padding-right: 40px !important;
  }
  .py-0-t {
    padding-top: 0!important;
    padding-bottom: 0 !important;
  }
  .py-8-t {
    padding-top: 8px!important;
    padding-bottom: 8px !important;
  }
  .py-16-t {
    padding-top: 16px!important;
    padding-bottom: 16px !important;
  }
  .py-24-t {
    padding-top: 24px!important;
    padding-bottom: 24px !important;
  }
  .py-32-t {
    padding-top: 32px!important;
    padding-bottom: 32px !important;
  }
  .py-40-t {
    padding-top: 40px!important;
    padding-bottom: 40px !important;
  }
}
@media only screen and (max-width: 767px) {
  .mt-xxl {
    margin-top: 50px!important;
  }
  .mt-xl {
    margin-top: 40px!important;
  }
  .mt-l {
    margin-top: 30px!important;
  }
  .mt-m {
    margin-top: 25px!important;
  }
  .mt-s {
    margin-top: 20px!important;
  }
  .mt-xs {
    margin-top: 15px!important;
  }
  .mt-xxs {
    margin-top: 10px!important;
  }
  .mb-xxl {
    margin-bottom: 50px!important;
  }
  .mb-xl {
    margin-bottom: 40px!important;
  }
  .mb-l {
    margin-bottom: 30px!important;
  }
  .mb-m {
    margin-bottom: 25px!important;
  }
  .mb-s {
    margin-bottom: 20px!important;
  }
  .mb-xs {
    margin-bottom: 15px!important;
  }
  .mb-xxs {
    margin-bottom: 10px!important;
  }
  .pt-xxl {
    padding-top: 80px!important;
  }
  .pt-xl {
    padding-top: 60px!important;
  }
  .pt-l {
    padding-top: 50px!important;
  }
  .pt-m {
    padding-top: 40px!important;
  }
  .pt-s {
    padding-top: 30px!important;
  }
  .pt-xs {
    padding-top: 20px!important;
  }
  .pt-xxs {
    padding-top: 15px!important;
  }
  .pb-xxl {
    padding-bottom: 80px!important;
  }
  .pb-xl {
    padding-bottom: 60px!important;
  }
  .pb-l {
    padding-bottom: 50px!important;
  }
  .pb-m {
    padding-bottom: 40px!important;
  }
  .pb-s {
    padding-bottom: 30px!important;
  }
  .pb-xs {
    padding-bottom: 20px!important;
  }
  .pb-xxs {
    padding-bottom: 15px!important;
  }
  .mt-xxl-m {
    margin-top: 80px!important;
  }
  .mt-xl-m {
    margin-top: 70px!important;
  }
  .mt-l-m {
    margin-top: 60px!important;
  }
  .mt-m-m {
    margin-top: 45px!important;
  }
  .mt-s-m {
    margin-top: 35px!important;
  }
  .mt-xs-m {
    margin-top: 25px!important;
  }
  .mt-xxs-m {
    margin-top: 20px!important;
  }
  .mt-no-m {
    margin-top: 0px!important;
  }
  .mb-xxl-m {
    margin-bottom: 80px!important;
  }
  .mb-xl-m {
    margin-bottom: 70px!important;
  }
  .mb-l-m {
    margin-bottom: 60px!important;
  }
  .mb-m-m {
    margin-bottom: 45px!important;
  }
  .mb-s-m {
    margin-bottom: 35px!important;
  }
  .mb-xs-m {
    margin-bottom: 25px!important;
  }
  .mb-xxs-m {
    margin-bottom: 20px!important;
  }
  .mb-no-m {
    margin-bottom: 0px!important;
  }
  .m-0-m {
    margin: 0 !important;
  }
  .m-4-m {
    margin: 4px !important;
  }
  .m-8-m {
    margin: 8px !important;
  }
  .m-12-m {
    margin: 12px !important;
  }
  .m-16-m {
    margin: 16px !important;
  }
  .m-20-m {
    margin: 20px !important;
  }
  .m-24-m {
    margin: 24px !important;
  }
  .m-32-m {
    margin: 32px !important;
  }
  .m-40-m {
    margin: 40px !important;
  }
  .m-48-m {
    margin: 48px !important;
  }
  .m-56-m {
    margin: 56px !important;
  }
  .m-64-m {
    margin: 64px !important;
  }
  .m-80-m {
    margin: 80px !important;
  }
  .m-96-m {
    margin: 96px !important;
  }
  .m-120-m {
    margin: 120px !important;
  }
  .m-160-m {
    margin: 160px !important;
  }
  .m-200-m {
    margin: 200px !important;
  }
  .mt-0-m {
    margin-top: 0 !important;
  }
  .mt-4-m {
    margin-top: 4px !important;
  }
  .mt-8-m {
    margin-top: 8px !important;
  }
  .mt-12-m {
    margin-top: 12px !important;
  }
  .mt-16-m {
    margin-top: 16px !important;
  }
  .mt-20-m {
    margin-top: 20px !important;
  }
  .mt-24-m {
    margin-top: 24px !important;
  }
  .mt-32-m {
    margin-top: 32px !important;
  }
  .mt-40-m {
    margin-top: 40px !important;
  }
  .mt-48-m {
    margin-top: 48px !important;
  }
  .mt-56-m {
    margin-top: 56px !important;
  }
  .mt-64-m {
    margin-top: 64px !important;
  }
  .mt-80-m {
    margin-top: 80px !important;
  }
  .mt-96-m {
    margin-top: 96px !important;
  }
  .mt-120-m {
    margin-top: 120px !important;
  }
  .mt-160-m {
    margin-top: 160px !important;
  }
  .mt-200-m {
    margin-top: 200px !important;
  }
  .mb-0-m {
    margin-bottom: 0 !important;
  }
  .mb-4-m {
    margin-bottom: 4px !important;
  }
  .mb-8-m {
    margin-bottom: 8px !important;
  }
  .mb-12-m {
    margin-bottom: 12px !important;
  }
  .mb-16-m {
    margin-bottom: 16px !important;
  }
  .mb-20-m {
    margin-bottom: 20px !important;
  }
  .mb-24-m {
    margin-bottom: 24px !important;
  }
  .mb-32-m {
    margin-bottom: 32px !important;
  }
  .mb-40-m {
    margin-bottom: 40px !important;
  }
  .mb-48-m {
    margin-bottom: 48px !important;
  }
  .mb-56-m {
    margin-bottom: 56px !important;
  }
  .mb-64-m {
    margin-bottom: 64px !important;
  }
  .mb-80-m {
    margin-bottom: 80px !important;
  }
  .mb-96-m {
    margin-bottom: 96px !important;
  }
  .mb-120-m {
    margin-bottom: 120px !important;
  }
  .mb-160-m {
    margin-bottom: 160px !important;
  }
  .mb-200-m {
    margin-bottom: 200px !important;
  }
  .ml-0-m {
    margin-left: 0 !important;
  }
  .ml-4-m {
    margin-left: 4px !important;
  }
  .ml-8-m {
    margin-left: 8px !important;
  }
  .ml-12-m {
    margin-left: 12px !important;
  }
  .ml-16-m {
    margin-left: 16px !important;
  }
  .ml-20-m {
    margin-left: 20px !important;
  }
  .ml-24-m {
    margin-left: 24px !important;
  }
  .ml-32-m {
    margin-left: 32px !important;
  }
  .ml-40-m {
    margin-left: 40px !important;
  }
  .ml-48-m {
    margin-left: 48px !important;
  }
  .ml-64-m {
    margin-left: 64px !important;
  }
  .ml-80-m {
    margin-left: 80px !important;
  }
  .ml-auto-m {
    margin-left: auto !important;
  }
  .mr-0-m {
    margin-right: 0 !important;
  }
  .mr-4-m {
    margin-right: 4px !important;
  }
  .mr-8-m {
    margin-right: 8px !important;
  }
  .mr-12-m {
    margin-right: 12px !important;
  }
  .mr-16-m {
    margin-right: 16px !important;
  }
  .mr-20-m {
    margin-right: 20px !important;
  }
  .mr-24-m {
    margin-right: 24px !important;
  }
  .mr-32-m {
    margin-right: 32px !important;
  }
  .mr-40-m {
    margin-right: 40px !important;
  }
  .mr-48-m {
    margin-right: 48px !important;
  }
  .mr-64-m {
    margin-right: 64px !important;
  }
  .mr-80-m {
    margin-right: 80px !important;
  }
  .mr-auto-m {
    margin-right: auto !important;
  }
  .mx-0-m {
    margin-left: 0!important;
    margin-right: 0 !important;
  }
  .mx-4-m {
    margin-left: 4px!important;
    margin-right: 4px !important;
  }
  .mx-8-m {
    margin-left: 8px!important;
    margin-right: 8px !important;
  }
  .mx-12-m {
    margin-left: 12px!important;
    margin-right: 12px !important;
  }
  .mx-16-m {
    margin-left: 16px!important;
    margin-right: 16px !important;
  }
  .mx-20-m {
    margin-left: 20px!important;
    margin-right: 20px !important;
  }
  .mx-24-m {
    margin-left: 24px!important;
    margin-right: 24px !important;
  }
  .mx-32-m {
    margin-left: 32px!important;
    margin-right: 32px !important;
  }
  .mx-40-m {
    margin-left: 40px!important;
    margin-right: 40px !important;
  }
  .mx-auto-m {
    margin-left: auto!important;
    margin-right: auto !important;
  }
  .my-0-m {
    margin-top: 0!important;
    margin-bottom: 0 !important;
  }
  .my-4-m {
    margin-top: 4px!important;
    margin-bottom: 4px !important;
  }
  .my-8-m {
    margin-top: 8px!important;
    margin-bottom: 8px !important;
  }
  .my-12-m {
    margin-top: 12px!important;
    margin-bottom: 12px !important;
  }
  .my-16-m {
    margin-top: 16px!important;
    margin-bottom: 16px !important;
  }
  .my-20-m {
    margin-top: 20px!important;
    margin-bottom: 20px !important;
  }
  .my-24-m {
    margin-top: 24px!important;
    margin-bottom: 24px !important;
  }
  .my-32-m {
    margin-top: 32px!important;
    margin-bottom: 32px !important;
  }
  .my-40-m {
    margin-top: 40px!important;
    margin-bottom: 40px !important;
  }
  .my-auto-m {
    margin-top: auto!important;
    margin-bottom: auto !important;
  }
  .p-0-m {
    padding: 0 !important;
  }
  .p-4-m {
    padding: 4px !important;
  }
  .p-8-m {
    padding: 8px !important;
  }
  .p-12-m {
    padding: 12px !important;
  }
  .p-16-m {
    padding: 16px !important;
  }
  .p-20-m {
    padding: 20px !important;
  }
  .p-24-m {
    padding: 24px !important;
  }
  .p-32-m {
    padding: 32px !important;
  }
  .p-40-m {
    padding: 40px !important;
  }
  .p-48-m {
    padding: 48px !important;
  }
  .p-56-m {
    padding: 56px !important;
  }
  .p-64-m {
    padding: 64px !important;
  }
  .p-80-m {
    padding: 80px !important;
  }
  .p-96-m {
    padding: 96px !important;
  }
  .p-120-m {
    padding: 120px !important;
  }
  .p-160-m {
    padding: 160px !important;
  }
  .p-200-m {
    padding: 200px !important;
  }
  .pt-0-m {
    padding-top: 0 !important;
  }
  .pt-4-m {
    padding-top: 4px !important;
  }
  .pt-8-m {
    padding-top: 8px !important;
  }
  .pt-12-m {
    padding-top: 12px !important;
  }
  .pt-16-m {
    padding-top: 16px !important;
  }
  .pt-20-m {
    padding-top: 20px !important;
  }
  .pt-24-m {
    padding-top: 24px !important;
  }
  .pt-32-m {
    padding-top: 32px !important;
  }
  .pt-40-m {
    padding-top: 40px !important;
  }
  .pt-48-m {
    padding-top: 48px !important;
  }
  .pt-56-m {
    padding-top: 56px !important;
  }
  .pt-64-m {
    padding-top: 64px !important;
  }
  .pt-80-m {
    padding-top: 80px !important;
  }
  .pt-96-m {
    padding-top: 96px !important;
  }
  .pt-120-m {
    padding-top: 120px !important;
  }
  .pt-160-m {
    padding-top: 160px !important;
  }
  .pt-200-m {
    padding-top: 200px !important;
  }
  .pb-0-m {
    padding-bottom: 0 !important;
  }
  .pb-4-m {
    padding-bottom: 4px !important;
  }
  .pb-8-m {
    padding-bottom: 8px !important;
  }
  .pb-12-m {
    padding-bottom: 12px !important;
  }
  .pb-16-m {
    padding-bottom: 16px !important;
  }
  .pb-20-m {
    padding-bottom: 20px !important;
  }
  .pb-24-m {
    padding-bottom: 24px !important;
  }
  .pb-32-m {
    padding-bottom: 32px !important;
  }
  .pb-40-m {
    padding-bottom: 40px !important;
  }
  .pb-48-m {
    padding-bottom: 48px !important;
  }
  .pb-56-m {
    padding-bottom: 56px !important;
  }
  .pb-64-m {
    padding-bottom: 64px !important;
  }
  .pb-80-m {
    padding-bottom: 80px !important;
  }
  .pb-96-m {
    padding-bottom: 96px !important;
  }
  .pb-120-m {
    padding-bottom: 120px !important;
  }
  .pb-160-m {
    padding-bottom: 160px !important;
  }
  .pb-200-m {
    padding-bottom: 200px !important;
  }
  .pl-0-m {
    padding-left: 0 !important;
  }
  .pl-4-m {
    padding-left: 4px !important;
  }
  .pl-8-m {
    padding-left: 8px !important;
  }
  .pl-12-m {
    padding-left: 12px !important;
  }
  .pl-16-m {
    padding-left: 16px !important;
  }
  .pl-20-m {
    padding-left: 20px !important;
  }
  .pl-24-m {
    padding-left: 24px !important;
  }
  .pl-32-m {
    padding-left: 32px !important;
  }
  .pl-40-m {
    padding-left: 40px !important;
  }
  .pl-48-m {
    padding-left: 48px !important;
  }
  .pl-64-m {
    padding-left: 64px !important;
  }
  .pl-80-m {
    padding-left: 80px !important;
  }
  .pr-0-m {
    padding-right: 0 !important;
  }
  .pr-4-m {
    padding-right: 4px !important;
  }
  .pr-8-m {
    padding-right: 8px !important;
  }
  .pr-12-m {
    padding-right: 12px !important;
  }
  .pr-16-m {
    padding-right: 16px !important;
  }
  .pr-20-m {
    padding-right: 20px !important;
  }
  .pr-24-m {
    padding-right: 24px !important;
  }
  .pr-32-m {
    padding-right: 32px !important;
  }
  .pr-40-m {
    padding-right: 40px !important;
  }
  .pr-48-m {
    padding-right: 48px !important;
  }
  .pr-64-m {
    padding-right: 64px !important;
  }
  .pr-80-m {
    padding-right: 80px !important;
  }
  .px-0-m {
    padding-left: 0!important;
    padding-right: 0 !important;
  }
  .px-4-m {
    padding-left: 4px!important;
    padding-right: 4px !important;
  }
  .px-8-m {
    padding-left: 8px!important;
    padding-right: 8px !important;
  }
  .px-12-m {
    padding-left: 12px!important;
    padding-right: 12px !important;
  }
  .px-16-m {
    padding-left: 16px!important;
    padding-right: 16px !important;
  }
  .px-20-m {
    padding-left: 20px!important;
    padding-right: 20px !important;
  }
  .px-24-m {
    padding-left: 24px!important;
    padding-right: 24px !important;
  }
  .px-32-m {
    padding-left: 32px!important;
    padding-right: 32px !important;
  }
  .px-40-m {
    padding-left: 40px!important;
    padding-right: 40px !important;
  }
  .py-0-m {
    padding-top: 0!important;
    padding-bottom: 0 !important;
  }
  .py-4-m {
    padding-top: 4px!important;
    padding-bottom: 4px !important;
  }
  .py-8-m {
    padding-top: 8px!important;
    padding-bottom: 8px !important;
  }
  .py-12-m {
    padding-top: 12px!important;
    padding-bottom: 12px !important;
  }
  .py-16-m {
    padding-top: 16px!important;
    padding-bottom: 16px !important;
  }
  .py-20-m {
    padding-top: 20px!important;
    padding-bottom: 20px !important;
  }
  .py-24-m {
    padding-top: 24px!important;
    padding-bottom: 24px !important;
  }
  .py-32-m {
    padding-top: 32px!important;
    padding-bottom: 32px !important;
  }
  .py-40-m {
    padding-top: 40px!important;
    padding-bottom: 40px !important;
  }
}
.show-lines-1 .inner-text-container {
  max-height: 1.32em;
}
.show-lines-2 .inner-text-container {
  max-height: 2.64em;
}
.show-lines-3 .inner-text-container {
  max-height: 3.96em;
}
.show-lines-4 .inner-text-container {
  max-height: 5.28em;
}
.show-lines-5 .inner-text-container {
  max-height: 6.6em;
}
.show-lines-6 .inner-text-container {
  max-height: 7.92em;
}
.show-lines-7 .inner-text-container {
  max-height: 9.24em;
}
.show-lines-8 .inner-text-container {
  max-height: 10.56em;
}
.show-lines-9 .inner-text-container {
  max-height: 11.88em;
}
.show-lines-10 .inner-text-container {
  max-height: 13.2em;
}
.show-lines-11 .inner-text-container {
  max-height: 14.52em;
}
.show-lines-12 .inner-text-container {
  max-height: 15.84em;
}
.show-lines-13 .inner-text-container {
  max-height: 17.16em;
}
.show-lines-14 .inner-text-container {
  max-height: 18.48em;
}
.show-lines-15 .inner-text-container {
  max-height: 19.8em;
}
.show-lines-16 .inner-text-container {
  max-height: 21.12em;
}
.show-lines-17 .inner-text-container {
  max-height: 22.44em;
}
.show-lines-18 .inner-text-container {
  max-height: 23.76em;
}
.show-lines-19 .inner-text-container {
  max-height: 25.08em;
}
.show-lines-20 .inner-text-container {
  max-height: 26.4em;
}
.show-lines-21 .inner-text-container {
  max-height: 27.72em;
}
.show-lines-22 .inner-text-container {
  max-height: 29.04em;
}
.show-lines-23 .inner-text-container {
  max-height: 30.36em;
}
.show-lines-24 .inner-text-container {
  max-height: 31.68em;
}
.show-lines-25 .inner-text-container {
  max-height: 33em;
}
.show-lines-26 .inner-text-container {
  max-height: 34.32em;
}
.show-lines-27 .inner-text-container {
  max-height: 35.64em;
}
.show-lines-28 .inner-text-container {
  max-height: 36.96em;
}
.show-lines-29 .inner-text-container {
  max-height: 38.28em;
}
.show-lines-30 .inner-text-container {
  max-height: 39.6em;
}
.show-lines-31 .inner-text-container {
  max-height: 40.92em;
}
.show-lines-32 .inner-text-container {
  max-height: 42.24em;
}
.show-lines-33 .inner-text-container {
  max-height: 43.56em;
}
.show-lines-34 .inner-text-container {
  max-height: 44.88em;
}
.show-lines-35 .inner-text-container {
  max-height: 46.2em;
}
.show-lines-36 .inner-text-container {
  max-height: 47.52em;
}
.show-lines-37 .inner-text-container {
  max-height: 48.84em;
}
.show-lines-38 .inner-text-container {
  max-height: 50.16em;
}
.show-lines-39 .inner-text-container {
  max-height: 51.48em;
}
.show-lines-40 .inner-text-container {
  max-height: 52.8em;
}
.show-lines-41 .inner-text-container {
  max-height: 54.12em;
}
.show-lines-42 .inner-text-container {
  max-height: 55.44em;
}
.show-lines-43 .inner-text-container {
  max-height: 56.76em;
}
.show-lines-44 .inner-text-container {
  max-height: 58.08em;
}
.show-lines-45 .inner-text-container {
  max-height: 59.4em;
}
.show-lines-46 .inner-text-container {
  max-height: 60.72em;
}
.show-lines-47 .inner-text-container {
  max-height: 62.04em;
}
.show-lines-48 .inner-text-container {
  max-height: 63.36em;
}
.show-lines-49 .inner-text-container {
  max-height: 64.68em;
}
.show-lines-50 .inner-text-container {
  max-height: 66em;
}
.show-lines-51 .inner-text-container {
  max-height: 67.32em;
}
.show-lines-52 .inner-text-container {
  max-height: 68.64em;
}
.show-lines-53 .inner-text-container {
  max-height: 69.96em;
}
.show-lines-54 .inner-text-container {
  max-height: 71.28em;
}
.show-lines-55 .inner-text-container {
  max-height: 72.6em;
}
.show-lines-56 .inner-text-container {
  max-height: 73.92em;
}
.show-lines-57 .inner-text-container {
  max-height: 75.24em;
}
.show-lines-58 .inner-text-container {
  max-height: 76.56em;
}
.show-lines-59 .inner-text-container {
  max-height: 77.88em;
}
.show-lines-60 .inner-text-container {
  max-height: 79.2em;
}
.show-lines-61 .inner-text-container {
  max-height: 80.52em;
}
.show-lines-62 .inner-text-container {
  max-height: 81.84em;
}
.show-lines-63 .inner-text-container {
  max-height: 83.16em;
}
.show-lines-64 .inner-text-container {
  max-height: 84.48em;
}
.show-lines-65 .inner-text-container {
  max-height: 85.8em;
}
.show-lines-66 .inner-text-container {
  max-height: 87.12em;
}
.show-lines-67 .inner-text-container {
  max-height: 88.44em;
}
.show-lines-68 .inner-text-container {
  max-height: 89.76em;
}
.show-lines-69 .inner-text-container {
  max-height: 91.08em;
}
.show-lines-70 .inner-text-container {
  max-height: 92.4em;
}
.show-lines-71 .inner-text-container {
  max-height: 93.72em;
}
.show-lines-72 .inner-text-container {
  max-height: 95.04em;
}
.show-lines-73 .inner-text-container {
  max-height: 96.36em;
}
.show-lines-74 .inner-text-container {
  max-height: 97.68em;
}
.show-lines-75 .inner-text-container {
  max-height: 99em;
}
.show-lines-76 .inner-text-container {
  max-height: 100.32em;
}
.show-lines-77 .inner-text-container {
  max-height: 101.64em;
}
.show-lines-78 .inner-text-container {
  max-height: 102.96em;
}
.show-lines-79 .inner-text-container {
  max-height: 104.28em;
}
.show-lines-80 .inner-text-container {
  max-height: 105.6em;
}
.show-lines-81 .inner-text-container {
  max-height: 106.92em;
}
.show-lines-82 .inner-text-container {
  max-height: 108.24em;
}
.show-lines-83 .inner-text-container {
  max-height: 109.56em;
}
.show-lines-84 .inner-text-container {
  max-height: 110.88em;
}
.show-lines-85 .inner-text-container {
  max-height: 112.2em;
}
.show-lines-86 .inner-text-container {
  max-height: 113.52em;
}
.show-lines-87 .inner-text-container {
  max-height: 114.84em;
}
.show-lines-88 .inner-text-container {
  max-height: 116.16em;
}
.show-lines-89 .inner-text-container {
  max-height: 117.48em;
}
.show-lines-90 .inner-text-container {
  max-height: 118.8em;
}
.show-lines-91 .inner-text-container {
  max-height: 120.12em;
}
.show-lines-92 .inner-text-container {
  max-height: 121.44em;
}
.show-lines-93 .inner-text-container {
  max-height: 122.76em;
}
.show-lines-94 .inner-text-container {
  max-height: 124.08em;
}
.show-lines-95 .inner-text-container {
  max-height: 125.4em;
}
.show-lines-96 .inner-text-container {
  max-height: 126.72em;
}
.show-lines-97 .inner-text-container {
  max-height: 128.04em;
}
.show-lines-98 .inner-text-container {
  max-height: 129.36em;
}
.show-lines-99 .inner-text-container {
  max-height: 130.68em;
}
.show-lines-100 .inner-text-container {
  max-height: 132em;
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-1 .inner-text-container {
    max-height: 1.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-2 .inner-text-container {
    max-height: 2.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-3 .inner-text-container {
    max-height: 3.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-4 .inner-text-container {
    max-height: 4.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-5 .inner-text-container {
    max-height: 6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-6 .inner-text-container {
    max-height: 7.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-7 .inner-text-container {
    max-height: 8.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-8 .inner-text-container {
    max-height: 9.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-9 .inner-text-container {
    max-height: 10.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-10 .inner-text-container {
    max-height: 12em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-11 .inner-text-container {
    max-height: 13.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-12 .inner-text-container {
    max-height: 14.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-13 .inner-text-container {
    max-height: 15.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-14 .inner-text-container {
    max-height: 16.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-15 .inner-text-container {
    max-height: 18em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-16 .inner-text-container {
    max-height: 19.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-17 .inner-text-container {
    max-height: 20.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-18 .inner-text-container {
    max-height: 21.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-19 .inner-text-container {
    max-height: 22.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-20 .inner-text-container {
    max-height: 24em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-21 .inner-text-container {
    max-height: 25.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-22 .inner-text-container {
    max-height: 26.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-23 .inner-text-container {
    max-height: 27.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-24 .inner-text-container {
    max-height: 28.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-25 .inner-text-container {
    max-height: 30em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-26 .inner-text-container {
    max-height: 31.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-27 .inner-text-container {
    max-height: 32.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-28 .inner-text-container {
    max-height: 33.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-29 .inner-text-container {
    max-height: 34.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-30 .inner-text-container {
    max-height: 36em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-31 .inner-text-container {
    max-height: 37.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-32 .inner-text-container {
    max-height: 38.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-33 .inner-text-container {
    max-height: 39.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-34 .inner-text-container {
    max-height: 40.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-35 .inner-text-container {
    max-height: 42em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-36 .inner-text-container {
    max-height: 43.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-37 .inner-text-container {
    max-height: 44.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-38 .inner-text-container {
    max-height: 45.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-39 .inner-text-container {
    max-height: 46.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-40 .inner-text-container {
    max-height: 48em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-41 .inner-text-container {
    max-height: 49.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-42 .inner-text-container {
    max-height: 50.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-43 .inner-text-container {
    max-height: 51.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-44 .inner-text-container {
    max-height: 52.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-45 .inner-text-container {
    max-height: 54em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-46 .inner-text-container {
    max-height: 55.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-47 .inner-text-container {
    max-height: 56.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-48 .inner-text-container {
    max-height: 57.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-49 .inner-text-container {
    max-height: 58.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-50 .inner-text-container {
    max-height: 60em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-51 .inner-text-container {
    max-height: 61.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-52 .inner-text-container {
    max-height: 62.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-53 .inner-text-container {
    max-height: 63.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-54 .inner-text-container {
    max-height: 64.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-55 .inner-text-container {
    max-height: 66em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-56 .inner-text-container {
    max-height: 67.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-57 .inner-text-container {
    max-height: 68.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-58 .inner-text-container {
    max-height: 69.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-59 .inner-text-container {
    max-height: 70.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-60 .inner-text-container {
    max-height: 72em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-61 .inner-text-container {
    max-height: 73.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-62 .inner-text-container {
    max-height: 74.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-63 .inner-text-container {
    max-height: 75.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-64 .inner-text-container {
    max-height: 76.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-65 .inner-text-container {
    max-height: 78em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-66 .inner-text-container {
    max-height: 79.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-67 .inner-text-container {
    max-height: 80.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-68 .inner-text-container {
    max-height: 81.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-69 .inner-text-container {
    max-height: 82.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-70 .inner-text-container {
    max-height: 84em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-71 .inner-text-container {
    max-height: 85.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-72 .inner-text-container {
    max-height: 86.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-73 .inner-text-container {
    max-height: 87.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-74 .inner-text-container {
    max-height: 88.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-75 .inner-text-container {
    max-height: 90em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-76 .inner-text-container {
    max-height: 91.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-77 .inner-text-container {
    max-height: 92.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-78 .inner-text-container {
    max-height: 93.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-79 .inner-text-container {
    max-height: 94.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-80 .inner-text-container {
    max-height: 96em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-81 .inner-text-container {
    max-height: 97.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-82 .inner-text-container {
    max-height: 98.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-83 .inner-text-container {
    max-height: 99.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-84 .inner-text-container {
    max-height: 100.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-85 .inner-text-container {
    max-height: 102em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-86 .inner-text-container {
    max-height: 103.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-87 .inner-text-container {
    max-height: 104.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-88 .inner-text-container {
    max-height: 105.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-89 .inner-text-container {
    max-height: 106.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-90 .inner-text-container {
    max-height: 108em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-91 .inner-text-container {
    max-height: 109.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-92 .inner-text-container {
    max-height: 110.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-93 .inner-text-container {
    max-height: 111.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-94 .inner-text-container {
    max-height: 112.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-95 .inner-text-container {
    max-height: 114em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-96 .inner-text-container {
    max-height: 115.2em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-97 .inner-text-container {
    max-height: 116.4em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-98 .inner-text-container {
    max-height: 117.6em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-99 .inner-text-container {
    max-height: 118.8em;
  }
}
@media only screen and (max-width: 767px) {
  .show-lines-mobile-100 .inner-text-container {
    max-height: 120em;
  }
}
.show-lines .inner-text-container,
.show-lines-mobile .inner-text-container {
  overflow: hidden;
  line-height: 1.2em;
}
.show-lines .inner-text-container p,
.show-lines-mobile .inner-text-container p,
.show-lines .inner-text-container ul,
.show-lines-mobile .inner-text-container ul {
  margin-bottom: 1.2em !important;
}
.show-lines .v-button,
.show-lines-mobile .v-button {
  margin-top: 20px;
}
.show-lines.show-all-lines .inner-text-container,
.show-lines-mobile.show-all-lines .inner-text-container {
  max-height: unset;
}
.show-more-text-button .show-less-span {
  display: none;
}
.show-more-text-button.show-more-clicked .show-less-span {
  display: inline;
}
.show-more-text-button.show-more-clicked .show-more-span {
  display: none;
}
.v-team-boxes .inner-team-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
@media only screen and (max-width: 1100px) {
  .v-team-boxes .inner-team-boxes {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (max-width: 900px) {
  .v-team-boxes .inner-team-boxes {
    grid-template-columns: 1fr 1fr;
  }
}
.single-team-element .ste-name {
  font-size: 1.6em;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .single-team-element .ste-name {
    font-size: 1.1em;
  }
}
.widget-fineuploader .qq-upload-button-selector {
  display: inline-block;
  border: 2px solid var(--inn-neutral);
  padding: var(--inn-button-padding-vertical, 12px) var(--inn-button-padding-horizontal, 30px);
  color: white;
  background: var(--inn-neutral);
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
  border-radius: var(--inn-button-border-radius, 5px);
  border-width: 4px!important;
  min-width: unset!important;
  text-transform: uppercase;
  padding: 2px 12px!important;
}
.widget-fineuploader .qq-upload-button-selector:hover {
  color: var(--inn-neutral);
  background: transparent;
}
.widget-fineuploader .qq-upload-button-selector:hover {
  color: white;
}
@media only screen and (max-width: 767px) {
  .widget-fineuploader .qq-upload-button-selector {
    display: inline-block;
    border: 2px solid var(--inn-neutral);
    padding: var(--inn-button-padding-vertical, 12px) var(--inn-button-padding-horizontal, 30px);
    color: white;
    background: var(--inn-neutral);
    transition: 0.5s all ease-in-out;
    z-index: 9999;
    min-width: 10em;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    border-radius: var(--inn-button-border-radius, 5px);
    width: 100%;
    border-radius: 10px;
    padding: 10px 60px;
    min-width: 8em;
  }
  .widget-fineuploader .qq-upload-button-selector:hover {
    color: var(--inn-neutral);
    background: transparent;
  }
}
.widget-fineuploader .values-container .values-list li .fineuploader-item {
  display: flex;
}
.widget-fineuploader .values-container .values-list li .fineuploader-item .content {
  display: flex;
}
.widget-fineuploader .values-container .values-list li .fineuploader-item .content img {
  width: inherit!important;
}
.widget-fineuploader .qq-upload-success {
  display: none;
}
.widget-submit {
  display: flex;
  justify-content: flex-end;
}
.widget-submit a {
  text-transform: uppercase;
  border-radius: 10px;
  padding: 11px 30px !important;
  min-width: 150px !important;
  font-weight: 400 !important;
}
.widget-submit.v-secondary a {
  background: var(--inn-secondary);
  color: var(--inn-neutral) !important;
}
.widget-submit.v-white a {
  background: transparent !important;
  color: white !important;
}
.widget-submit.v-white-full a {
  background: white!important;
  color: var(--inn-neutral) !important;
}
.widget-submit.v-neutral a {
  background: transparent !important;
  color: var(--inn-neutral) !important;
  border-color: var(--inn-neutral) !important;
}
.widget-submit > a,
.widget-submit > a.button,
.widget-submit button {
  width: auto!important;
  display: inline-block;
  border: 2px solid var(--inn-neutral);
  padding: 5px 5px;
  color: var(--inn-neutral);
  background: transparent;
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
}
.widget-submit > a:hover,
.widget-submit > a.button:hover,
.widget-submit button:hover {
  background: var(--inn-neutral);
  transition: 0.5s all ease-in-out;
  color: white;
  text-decoration: none;
}
.widget-submit.v-primary > a,
.widget-submit.v-primary button {
  border: 2px solid var(--inn-primary);
  background: var(--inn-primary);
  color: white;
}
.widget-submit.v-primary > a:hover,
.widget-submit.v-primary button:hover {
  background: transparent;
  color: var(--inn-primary);
}
.widget-submit.v-secondary > a,
.widget-submit.v-secondary button {
  border: 2px solid var(--inn-secondary);
  background: var(--inn-secondary);
  color: white;
}
.widget-submit.v-secondary > a:hover,
.widget-submit.v-secondary button:hover {
  background: transparent;
  color: var(--inn-secondary);
}
.widget-submit.v-neutral > a,
.widget-submit.v-neutral button {
  border: 2px solid var(--inn-neutral);
  background: var(--inn-neutral);
  color: white;
}
.widget-submit.v-neutral > a:hover,
.widget-submit.v-neutral button:hover {
  background: transparent;
  color: var(--inn-neutral);
}
.widget-submit.v-white > a,
.widget-submit.v-white button {
  border: 2px solid white;
  background: white;
  color: var(--inn-neutral);
}
.widget-submit.v-white > a:hover,
.widget-submit.v-white button:hover {
  background: transparent;
  color: white;
}
.widget-submit p {
  margin-bottom: 0;
}
.widget-submit.v-whatsapp-button a {
  background: #39AE41;
  color: white;
  border-color: #39AE41;
}
.widget-submit.v-whatsapp-button a:hover {
  background: transparent;
  color: #39AE41;
}
.widget-submit > a,
.widget-submit button {
  border: 2px solid var(--inn-primary);
  background: var(--inn-primary);
  color: white;
}
.widget-submit > a:hover,
.widget-submit button:hover {
  background: transparent;
  color: var(--inn-primary);
}
.v-job-boxes .inner-job-boxes {
  display: grid;
  grid-gap: 50px;
}
@media only screen and (max-width: 767px) {
  .v-job-boxes .inner-job-boxes {
    font-size: 18px;
  }
}
.v-job-boxes .inner-job-boxes .single-job-element {
  border-top: 6px solid var(--inn-primary);
  padding-top: 10px;
}
.v-job-boxes .inner-job-boxes .single-job-element .sje-inner {
  background: var(--inn-neutral);
  color: white;
  padding: 25px;
}
.v-job-boxes .inner-job-boxes .single-job-element:nth-child(2n) .sje-inner {
  background: var(--inn-lightgrey);
}
.v-job-boxes .inner-job-boxes .single-job-element:nth-child(2n) .v-button.v-primary a {
  display: inline-block;
  border: 2px solid var(--inn-primary);
  padding: var(--inn-button-padding-vertical, 12px) var(--inn-button-padding-horizontal, 30px);
  color: var(--inn-primary);
  background: transparent;
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
  border-radius: var(--inn-button-border-radius, 5px);
}
.v-job-boxes .inner-job-boxes .single-job-element:nth-child(2n) .v-button.v-primary a:hover {
  color: white;
  background: var(--inn-primary);
}
.v-job-boxes .inner-job-boxes .single-job-element .sje-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.v-job-boxes .inner-job-boxes .single-job-element .sje-link > div:first-child,
.v-job-boxes .inner-job-boxes .single-job-element .sje-link > div:last-child {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .v-job-boxes .inner-job-boxes .single-job-element .sje-link {
    flex-direction: column;
    align-items: flex-start;
  }
}
.v-job-boxes .inner-job-boxes .single-job-element .sje-link .sje-name {
  font-family: var(--inn-head-font);
  font-size: 1.6em;
}
@media only screen and (max-width: 767px) {
  .v-job-boxes .inner-job-boxes .single-job-element .sje-link .sje-name {
    font-size: 22px;
  }
}
.v-job-boxes .inner-job-boxes .single-job-element .sje-link .sje-name h2 {
  font-size: 100%;
  text-transform: none;
  margin-bottom: 0;
}
.v-job-boxes .inner-job-boxes .single-job-element .sje-link .sje-link-right {
  display: flex;
  text-transform: uppercase;
  grid-gap: 1em;
  justify-content: flex-end;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .v-job-boxes .inner-job-boxes .single-job-element .sje-link .sje-link-right {
    justify-content: flex-start;
    text-align: left;
  }
}
.v-job-boxes .inner-job-boxes .single-job-element .sje-link .sje-icon {
  transform: rotateZ(180deg);
  font-size: 150%;
}
@media only screen and (max-width: 767px) {
  .v-job-boxes .inner-job-boxes .single-job-element .sje-link .sje-icon {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-20%) rotateZ(180deg);
  }
}
.v-job-boxes .inner-job-boxes .single-job-element .sje-link.collapsed .sje-icon {
  transform: unset;
}
@media only screen and (max-width: 767px) {
  .v-job-boxes .inner-job-boxes .single-job-element .sje-link.collapsed .sje-icon {
    transform: translateY(-20%);
  }
}
.v-job-boxes .inner-job-boxes .sje-card-body .inner-sje-body {
  margin-top: 30px;
}
.v-job-boxes .inner-job-boxes .sje-card-body .inner-sje-body .sje-text {
  max-width: 650px;
}
.v-job-boxes .inner-job-boxes .sje-card-body .inner-sje-body h3 {
  font-family: var(--inn-main-font);
  text-transform: none;
}
.v-job-boxes .inner-job-boxes .sje-card-body .inner-sje-body .sje-lower-text-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media only screen and (max-width: 767px) {
  .v-job-boxes .inner-job-boxes .sje-card-body .inner-sje-body .sje-lower-text-container {
    grid-template-columns: 1fr;
  }
}
.v-job-boxes .inner-job-boxes .sje-card-body .inner-sje-body .sje-lower-text-container .sje-button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media only screen and (max-width: 1000px) {
  .v-desktop-10 {
    display: none;
  }
}
@media only screen and (min-width: 999px) {
  .v-mobile-10 {
    display: none;
  }
}
.v-service-boxes .inner-service-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 50px;
}
@media only screen and (max-width: 1100px) {
  .v-service-boxes .inner-service-boxes {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 800px) {
  .v-service-boxes .inner-service-boxes {
    grid-template-columns: 1fr;
  }
}
.v-service-boxes .inner-service-boxes .single-service-box:nth-child(2) .ssb-inner {
  background: var(--inn-primary);
}
.v-service-boxes .inner-service-boxes .single-service-box:nth-child(3) .ssb-inner {
  background: var(--inn-lightgrey);
}
.single-service-box {
  padding-top: 5px;
  border-top: 6px solid var(--inn-primary);
  display: flex;
  height: 100%;
}
.single-service-box .ssb-inner {
  background: var(--inn-neutral);
  color: white;
  position: relative;
  padding: 25px;
  width: 100%;
}
.single-service-box .ssb-inner .ssb-upper {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.single-service-box .ssb-inner .ssb-upper h3 {
  margin-top: 0.6em;
  line-height: 1.3;
}
.widget-submit a {
  text-transform: uppercase;
  border-radius: 10px;
  padding: 11px 30px !important;
  min-width: 150px !important;
  font-weight: 400 !important;
}
.widget-submit.v-secondary a {
  background: var(--inn-secondary);
  color: var(--inn-neutral) !important;
}
.widget-submit.v-white a {
  background: transparent !important;
  color: white !important;
}
.widget-submit.v-white-full a {
  background: white!important;
  color: var(--inn-neutral) !important;
}
.widget-submit.v-neutral a {
  background: transparent !important;
  color: var(--inn-neutral) !important;
  border-color: var(--inn-neutral) !important;
}
.widget-submit > a,
.widget-submit > a.button,
.widget-submit button {
  width: auto!important;
  display: inline-block;
  border: 2px solid var(--inn-neutral);
  padding: 5px 5px;
  color: var(--inn-neutral);
  background: transparent;
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
}
.widget-submit > a:hover,
.widget-submit > a.button:hover,
.widget-submit button:hover {
  background: var(--inn-neutral);
  transition: 0.5s all ease-in-out;
  color: white;
  text-decoration: none;
}
.widget-submit.v-primary > a,
.widget-submit.v-primary button {
  border: 2px solid var(--inn-primary);
  background: var(--inn-primary);
  color: white;
}
.widget-submit.v-primary > a:hover,
.widget-submit.v-primary button:hover {
  background: transparent;
  color: var(--inn-primary);
}
.widget-submit.v-secondary > a,
.widget-submit.v-secondary button {
  border: 2px solid var(--inn-secondary);
  background: var(--inn-secondary);
  color: white;
}
.widget-submit.v-secondary > a:hover,
.widget-submit.v-secondary button:hover {
  background: transparent;
  color: var(--inn-secondary);
}
.widget-submit.v-neutral > a,
.widget-submit.v-neutral button {
  border: 2px solid var(--inn-neutral);
  background: var(--inn-neutral);
  color: white;
}
.widget-submit.v-neutral > a:hover,
.widget-submit.v-neutral button:hover {
  background: transparent;
  color: var(--inn-neutral);
}
.widget-submit.v-white > a,
.widget-submit.v-white button {
  border: 2px solid white;
  background: white;
  color: var(--inn-neutral);
}
.widget-submit.v-white > a:hover,
.widget-submit.v-white button:hover {
  background: transparent;
  color: white;
}
.widget-submit p {
  margin-bottom: 0;
}
.widget-submit.v-whatsapp-button a {
  background: #39AE41;
  color: white;
  border-color: #39AE41;
}
.widget-submit.v-whatsapp-button a:hover {
  background: transparent;
  color: #39AE41;
}
.widget-submit > a,
.widget-submit button {
  border: 2px solid var(--inn-primary);
  background: var(--inn-primary);
  color: white;
}
.widget-submit > a:hover,
.widget-submit button:hover {
  background: transparent;
  color: var(--inn-primary);
}
.custom-pagination-container .pagination-inside {
  margin-top: 30px;
}
.custom-pagination-container .pagination-inside .swiper-pagination {
  position: static;
  display: flex;
  align-items: center;
  grid-gap: 0.1em;
  justify-content: center;
}
.custom-pagination-container .pagination-inside .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  background: var(--inn-lightgrey);
}
.custom-pagination-container .pagination-inside .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--inn-primary);
}
.v-newsticker {
  width: 100%;
  bottom: 0;
  color: white;
  overflow: hidden;
  z-index: 555;
  left: 0;
  display: block;
  transition: 0.5s all ease-in-out;
  text-transform: uppercase;
}
.v-newsticker:hover {
  color: white;
}
.v-newsticker.v-uncollapsed {
  margin-top: 5em;
}
@media only screen and (max-width: 767px) {
  .v-newsticker {
    bottom: 0!important;
    top: auto!important;
  }
}
.v-newsticker p {
  margin-bottom: 0;
}
.newsticker-text {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  white-space: nowrap;
  padding-right: 0;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(100vw, 0, 0);
    transform: translate3d(100vw, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.collapse:not(.show) {
  display: none;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media screen and (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
p {
  margin-top: 0;
}
picture {
  display: block;
}
picture img {
  vertical-align: bottom;
  max-width: 100%;
  box-sizing: border-box;
}
.burger-container .burger-icon.burger-x {
  display: none;
}
.burger-container.burger-opened .burger-icon.burger-bars {
  display: none;
}
.burger-container.burger-opened .burger-icon.burger-x {
  display: block;
}
.v-accordion-element {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--inn-primary);
}
.v-accordion-element .v-accordion-head .v-accordion-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--inn-h4-font-size);
  font-weight: var(--inn-headline-font-weight-h4);
  line-height: 1;
}
.v-accordion-element .v-accordion-head .v-accordion-link p {
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .v-accordion-element .v-accordion-head .v-accordion-link {
    font-size: var(--inn-h4-font-size-mobile);
  }
}
.v-accordion-element .v-accordion-head .v-accordion-link .v-accordion-icon {
  color: var(--inn-primary);
}
.v-accordion-element .v-accordion-head .v-accordion-link .v-accordion-icon-close {
  display: none;
}
.v-accordion-element .v-accordion-head .v-accordion-link:not(.collapsed) .v-accordion-icon-open {
  display: none;
}
.v-accordion-element .v-accordion-head .v-accordion-link:not(.collapsed) .v-accordion-icon-close {
  display: block;
}
.v-accordion-element .v-accordion-body {
  padding-left: 20px;
  padding-top: 20px;
}
.v-accordion-outer {
  display: grid;
  grid-gap: 20px;
}
.v-swiper .swiper-arrow-container .bh-button-prev,
.v-swiper .swiper-arrow-container .bh-button-next {
  position: absolute;
  z-index: 777;
  color: white;
  top: 50%;
  font-size: 2em;
  transform: translateY(-100%);
}
.v-swiper .swiper-arrow-container .bh-button-prev {
  left: 10px;
}
.v-swiper .swiper-arrow-container .bh-button-next {
  right: 10px;
}
.v-swiper .custom-pagination-container .pagination-inside .swiper-pagination {
  display: flex;
  grid-gap: 4px;
}
.v-swiper .custom-pagination-container .pagination-inside .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border: 2px solid var(--inn-primary);
  opacity: 1;
  background: transparent;
}
.v-swiper .custom-pagination-container .pagination-inside .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--inn-primary) !important;
}
.subcolumns > div {
  width: 100%!important;
}
.subcolumns > div > div {
  justify-content: flex-start;
}
.subcolumns.v-section-jf-sb > div > div {
  justify-content: space-between;
}
.subcolumns.v-section-center > div > div {
  justify-content: center;
}
.v-page-divider {
  margin-top: 60px;
  margin-bottom: 60px;
}
.v-page-divider .v-divider-line {
  height: 2px;
  width: 100%;
  background: var(--inn-primary);
}
.v-bg-primary {
  background: var(--inn-primary);
}
.v-bg-secondary {
  background: var(--inn-secondary);
}
.v-bg-neutral {
  background: var(--inn-neutral);
}
.v-bg-lightgrey {
  background: var(--inn-lightgrey);
}
.v-color-white {
  color: white;
}
.v-color-primary {
  color: var(--inn-primary);
}
.v-color-secondary {
  color: var(--inn-secondary);
}
h1,
h2,
h3 {
  margin: 0;
}
nav ul {
  margin: 0;
}
.header-nav-vertical ul {
  list-style: none;
  flex-direction: column;
  align-items: flex-start;
  grid-gap: 10px;
  font-weight: 700;
}
#header {
  background: var(--inn-header-bg);
  color: var(--inn-header-color);
}
#footer {
  background: var(--inn-footer-bg);
  color: var(--inn-footer-color);
}
.inside {
  padding-top: var(--inn-container-padding);
  padding-bottom: var(--inn-container-padding);
}
@media only screen and (max-width: 767px) {
  .inside {
    padding-top: var(--inn-container-padding-mobile);
    padding-bottom: var(--inn-container-padding-mobile);
  }
}
#header-icons-mod #header-icons-inh .icons-container {
  display: flex;
  align-items: center;
  grid-gap: 24px;
  font-size: 24px;
}
#header-nav-mod {
  width: 100%;
  overflow: visible;
}
#header-nav-mod #header-nav-inh {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header-nav-mod #header-nav-inh .header-right {
  display: flex;
  align-items: center;
}
.v-arrow-button a {
  display: inline-flex;
  align-items: center;
  grid-gap: 10px;
}
.v-arrow-button a:after {
  content: "\eb0d";
  font-family: 'lineicons';
}
.v-arrow-button.v-arrow-left a {
  flex-direction: row-reverse;
}
.v-arrow-button.v-arrow-left a:after {
  transform: rotateZ(180deg);
}
.v-location-icon {
  display: flex;
  align-items: center;
}
.v-location-icon:before {
  content: "\ea27";
  font-family: "lineicons";
}
.v-secondary-bg,
.v-bg-secondary {
  background: var(--inn-secondary);
  color: white;
}
.v-page-divider {
  margin-top: var(--inn-container-padding) !important;
  margin-bottom: var(--inn-container-padding) !important;
}
.v-page-divider .inner-page-divider {
  height: 2px;
  width: 100%;
  background: var(--inn-neutral);
}
.v-button p {
  margin-bottom: 0;
}
.v-nav-box-grid-element {
  overflow: visible;
}
.v-single-nav-grid-element {
  background: var(--inn-secondary);
  color: white;
  padding: 30px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 350px;
  box-sizing: border-box;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .v-single-nav-grid-element {
    align-items: center;
    text-align: center;
    min-height: unset;
  }
  .v-single-nav-grid-element .v-snge-upper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.v-single-nav-grid-element > div {
  position: relative;
  z-index: 55;
}
.v-single-nav-grid-element .v-snge-icon {
  background: white;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 1px solid #707070;
  margin-bottom: 45px;
}
.v-single-nav-grid-element .v-snge-arrow {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 2em;
}
.v-single-nav-grid-element:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--inn-secondary);
  transition: 0.5s all ease-in-out;
  border-radius: 20px;
}
.v-single-nav-grid-element:hover {
  color: White;
}
.v-single-nav-grid-element:hover:before {
  top: -20px;
  bottom: -20px;
  right: -10px;
  left: -10px;
  background: var(--inn-primary);
}
@media only screen and (max-width: 767px) {
  .v-single-nav-grid-element:hover:before {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
.ce_text h1,
.ce_text h2,
.ce_text h3 {
  margin-bottom: 30px;
}
.v-step-box-grid-element {
  overflow: visible;
}
.v-single-step-grid-element {
  position: relative;
  padding: 0 25px;
  background: var(--inn-lightgrey);
  border-radius: 20px;
}
.v-single-step-grid-element .v-single-step-grid-element-inner {
  position: relative;
  padding: 80px 0;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.v-single-step-grid-element .v-single-step-grid-element-inner .v-ssge-headline {
  margin-bottom: 30px;
}
.v-single-step-grid-element .v-single-step-grid-element-inner .v-ssge-headline h3 {
  min-height: 3em;
}
.v-single-step-grid-element .v-single-step-grid-element-inner .v-ssge-headline h3 p {
  margin-bottom: 0;
}
.v-single-step-grid-element .v-ssge-step-number-container {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  font-size: var(--inn-h2-font-size);
  font-weight: var(--inn-headline-font-weight-h2);
  line-height: 1;
  font-size: var(--inn-h2-font-size) !important;
  width: 1.3em;
  height: 1.3em;
  background: var(--inn-secondary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
@media only screen and (max-width: 767px) {
  .v-single-step-grid-element .v-ssge-step-number-container {
    font-size: var(--inn-h2-font-size-mobile);
  }
}
.v-button.v-whatsapp-button a {
  background: #39AE41;
  color: white;
  border-color: #39AE41;
}
.v-button.v-whatsapp-button a:hover {
  background: transparent;
  color: #39AE41;
}
.widget-fineuploader {
  order: 11;
  background: var(--inn-lightgrey);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-fineuploader a {
  text-transform: uppercase;
  border-radius: 10px;
  padding: 11px 30px !important;
  min-width: 150px !important;
  font-weight: 400 !important;
}
.widget-fineuploader.v-secondary a {
  background: var(--inn-secondary);
  color: var(--inn-neutral) !important;
}
.widget-fineuploader.v-white a {
  background: transparent !important;
  color: white !important;
}
.widget-fineuploader.v-white-full a {
  background: white!important;
  color: var(--inn-neutral) !important;
}
.widget-fineuploader.v-neutral a {
  background: transparent !important;
  color: var(--inn-neutral) !important;
  border-color: var(--inn-neutral) !important;
}
.widget-fineuploader > a,
.widget-fineuploader > a.button,
.widget-fineuploader button {
  width: auto!important;
  display: inline-block;
  border: 2px solid var(--inn-neutral);
  padding: 5px 5px;
  color: var(--inn-neutral);
  background: transparent;
  transition: 0.5s all ease-in-out;
  z-index: 9999;
  min-width: 10em;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
}
.widget-fineuploader > a:hover,
.widget-fineuploader > a.button:hover,
.widget-fineuploader button:hover {
  background: var(--inn-neutral);
  transition: 0.5s all ease-in-out;
  color: white;
  text-decoration: none;
}
.widget-fineuploader.v-primary > a,
.widget-fineuploader.v-primary button {
  border: 2px solid var(--inn-primary);
  background: var(--inn-primary);
  color: white;
}
.widget-fineuploader.v-primary > a:hover,
.widget-fineuploader.v-primary button:hover {
  background: transparent;
  color: var(--inn-primary);
}
.widget-fineuploader.v-secondary > a,
.widget-fineuploader.v-secondary button {
  border: 2px solid var(--inn-secondary);
  background: var(--inn-secondary);
  color: white;
}
.widget-fineuploader.v-secondary > a:hover,
.widget-fineuploader.v-secondary button:hover {
  background: transparent;
  color: var(--inn-secondary);
}
.widget-fineuploader.v-neutral > a,
.widget-fineuploader.v-neutral button {
  border: 2px solid var(--inn-neutral);
  background: var(--inn-neutral);
  color: white;
}
.widget-fineuploader.v-neutral > a:hover,
.widget-fineuploader.v-neutral button:hover {
  background: transparent;
  color: var(--inn-neutral);
}
.widget-fineuploader.v-white > a,
.widget-fineuploader.v-white button {
  border: 2px solid white;
  background: white;
  color: var(--inn-neutral);
}
.widget-fineuploader.v-white > a:hover,
.widget-fineuploader.v-white button:hover {
  background: transparent;
  color: white;
}
.widget-fineuploader p {
  margin-bottom: 0;
}
.widget-fineuploader.v-whatsapp-button a {
  background: #39AE41;
  color: white;
  border-color: #39AE41;
}
.widget-fineuploader.v-whatsapp-button a:hover {
  background: transparent;
  color: #39AE41;
}
.widget-fineuploader > a,
.widget-fineuploader button {
  border: 2px solid var(--inn-primary);
  background: var(--inn-primary);
  color: white;
}
.widget-fineuploader > a:hover,
.widget-fineuploader button:hover {
  background: transparent;
  color: var(--inn-primary);
}
#wrapper {
  overflow: hidden;
}
div {
  box-sizing: border-box;
}
body.v-body-show-container-lines {
  position: relative;
}
body.v-body-show-container-lines:before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 100%;
  background: lightblue;
  left: 50%;
  transform: translateX(-650px);
  top: 0;
  z-index: 8888;
  opacity: 0.2;
}
body.v-body-show-container-lines:after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 100%;
  background: lightblue;
  left: 50%;
  transform: translateX(650px);
  top: 0;
  z-index: 8888;
  opacity: 0.2;
}
body.v-body-show-container-lines #wrapper {
  position: relative;
}
body.v-body-show-container-lines #wrapper:before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 100%;
  background: lightblue;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 8888;
  opacity: 0.2;
}
.v-hover-article {
  border: 2px solid red!important;
}
.inn_dev_env_banner {
  background: white!important;
  border: 2px solid black;
  color: black;
  padding: 20px;
}
.inn-dev-env-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.inn-dev-env-colors .inn-dev-env-color {
  display: flex;
  align-items: center;
  grid-gap: 5px;
}
.inn-dev-env-colors .inn-dev-env-color .inn-dev-env-color-box {
  width: 1em;
  min-width: 1em;
  height: 1em;
}
@media (max-width: 1300px) {
  .v-hide-1300 {
    display: none!important;
  }
}
@media (min-width: calc(1300px + 1px)) {
  .v-show-1300 {
    display: none!important;
  }
}
@media (max-width: 1290px) {
  .v-hide-1290 {
    display: none!important;
  }
}
@media (min-width: calc(1290px + 1px)) {
  .v-show-1290 {
    display: none!important;
  }
}
@media (max-width: 1280px) {
  .v-hide-1280 {
    display: none!important;
  }
}
@media (min-width: calc(1280px + 1px)) {
  .v-show-1280 {
    display: none!important;
  }
}
@media (max-width: 1270px) {
  .v-hide-1270 {
    display: none!important;
  }
}
@media (min-width: calc(1270px + 1px)) {
  .v-show-1270 {
    display: none!important;
  }
}
@media (max-width: 1260px) {
  .v-hide-1260 {
    display: none!important;
  }
}
@media (min-width: calc(1260px + 1px)) {
  .v-show-1260 {
    display: none!important;
  }
}
@media (max-width: 1250px) {
  .v-hide-1250 {
    display: none!important;
  }
}
@media (min-width: calc(1250px + 1px)) {
  .v-show-1250 {
    display: none!important;
  }
}
@media (max-width: 1240px) {
  .v-hide-1240 {
    display: none!important;
  }
}
@media (min-width: calc(1240px + 1px)) {
  .v-show-1240 {
    display: none!important;
  }
}
@media (max-width: 1230px) {
  .v-hide-1230 {
    display: none!important;
  }
}
@media (min-width: calc(1230px + 1px)) {
  .v-show-1230 {
    display: none!important;
  }
}
@media (max-width: 1220px) {
  .v-hide-1220 {
    display: none!important;
  }
}
@media (min-width: calc(1220px + 1px)) {
  .v-show-1220 {
    display: none!important;
  }
}
@media (max-width: 1210px) {
  .v-hide-1210 {
    display: none!important;
  }
}
@media (min-width: calc(1210px + 1px)) {
  .v-show-1210 {
    display: none!important;
  }
}
@media (max-width: 1200px) {
  .v-hide-1200 {
    display: none!important;
  }
}
@media (min-width: calc(1200px + 1px)) {
  .v-show-1200 {
    display: none!important;
  }
}
@media (max-width: 1190px) {
  .v-hide-1190 {
    display: none!important;
  }
}
@media (min-width: calc(1190px + 1px)) {
  .v-show-1190 {
    display: none!important;
  }
}
@media (max-width: 1180px) {
  .v-hide-1180 {
    display: none!important;
  }
}
@media (min-width: calc(1180px + 1px)) {
  .v-show-1180 {
    display: none!important;
  }
}
@media (max-width: 1170px) {
  .v-hide-1170 {
    display: none!important;
  }
}
@media (min-width: calc(1170px + 1px)) {
  .v-show-1170 {
    display: none!important;
  }
}
@media (max-width: 1160px) {
  .v-hide-1160 {
    display: none!important;
  }
}
@media (min-width: calc(1160px + 1px)) {
  .v-show-1160 {
    display: none!important;
  }
}
@media (max-width: 1150px) {
  .v-hide-1150 {
    display: none!important;
  }
}
@media (min-width: calc(1150px + 1px)) {
  .v-show-1150 {
    display: none!important;
  }
}
@media (max-width: 1140px) {
  .v-hide-1140 {
    display: none!important;
  }
}
@media (min-width: calc(1140px + 1px)) {
  .v-show-1140 {
    display: none!important;
  }
}
@media (max-width: 1130px) {
  .v-hide-1130 {
    display: none!important;
  }
}
@media (min-width: calc(1130px + 1px)) {
  .v-show-1130 {
    display: none!important;
  }
}
@media (max-width: 1120px) {
  .v-hide-1120 {
    display: none!important;
  }
}
@media (min-width: calc(1120px + 1px)) {
  .v-show-1120 {
    display: none!important;
  }
}
@media (max-width: 1110px) {
  .v-hide-1110 {
    display: none!important;
  }
}
@media (min-width: calc(1110px + 1px)) {
  .v-show-1110 {
    display: none!important;
  }
}
@media (max-width: 1100px) {
  .v-hide-1100 {
    display: none!important;
  }
}
@media (min-width: calc(1100px + 1px)) {
  .v-show-1100 {
    display: none!important;
  }
}
@media (max-width: 1090px) {
  .v-hide-1090 {
    display: none!important;
  }
}
@media (min-width: calc(1090px + 1px)) {
  .v-show-1090 {
    display: none!important;
  }
}
@media (max-width: 1080px) {
  .v-hide-1080 {
    display: none!important;
  }
}
@media (min-width: calc(1080px + 1px)) {
  .v-show-1080 {
    display: none!important;
  }
}
@media (max-width: 1070px) {
  .v-hide-1070 {
    display: none!important;
  }
}
@media (min-width: calc(1070px + 1px)) {
  .v-show-1070 {
    display: none!important;
  }
}
@media (max-width: 1060px) {
  .v-hide-1060 {
    display: none!important;
  }
}
@media (min-width: calc(1060px + 1px)) {
  .v-show-1060 {
    display: none!important;
  }
}
@media (max-width: 1050px) {
  .v-hide-1050 {
    display: none!important;
  }
}
@media (min-width: calc(1050px + 1px)) {
  .v-show-1050 {
    display: none!important;
  }
}
@media (max-width: 1040px) {
  .v-hide-1040 {
    display: none!important;
  }
}
@media (min-width: calc(1040px + 1px)) {
  .v-show-1040 {
    display: none!important;
  }
}
@media (max-width: 1030px) {
  .v-hide-1030 {
    display: none!important;
  }
}
@media (min-width: calc(1030px + 1px)) {
  .v-show-1030 {
    display: none!important;
  }
}
@media (max-width: 1020px) {
  .v-hide-1020 {
    display: none!important;
  }
}
@media (min-width: calc(1020px + 1px)) {
  .v-show-1020 {
    display: none!important;
  }
}
@media (max-width: 1010px) {
  .v-hide-1010 {
    display: none!important;
  }
}
@media (min-width: calc(1010px + 1px)) {
  .v-show-1010 {
    display: none!important;
  }
}
@media (max-width: 1000px) {
  .v-hide-1000 {
    display: none!important;
  }
}
@media (min-width: calc(1000px + 1px)) {
  .v-show-1000 {
    display: none!important;
  }
}
@media (max-width: 990px) {
  .v-hide-990 {
    display: none!important;
  }
}
@media (min-width: calc(990px + 1px)) {
  .v-show-990 {
    display: none!important;
  }
}
@media (max-width: 980px) {
  .v-hide-980 {
    display: none!important;
  }
}
@media (min-width: calc(980px + 1px)) {
  .v-show-980 {
    display: none!important;
  }
}
@media (max-width: 970px) {
  .v-hide-970 {
    display: none!important;
  }
}
@media (min-width: calc(970px + 1px)) {
  .v-show-970 {
    display: none!important;
  }
}
@media (max-width: 960px) {
  .v-hide-960 {
    display: none!important;
  }
}
@media (min-width: calc(960px + 1px)) {
  .v-show-960 {
    display: none!important;
  }
}
@media (max-width: 950px) {
  .v-hide-950 {
    display: none!important;
  }
}
@media (min-width: calc(950px + 1px)) {
  .v-show-950 {
    display: none!important;
  }
}
@media (max-width: 940px) {
  .v-hide-940 {
    display: none!important;
  }
}
@media (min-width: calc(940px + 1px)) {
  .v-show-940 {
    display: none!important;
  }
}
@media (max-width: 930px) {
  .v-hide-930 {
    display: none!important;
  }
}
@media (min-width: calc(930px + 1px)) {
  .v-show-930 {
    display: none!important;
  }
}
@media (max-width: 920px) {
  .v-hide-920 {
    display: none!important;
  }
}
@media (min-width: calc(920px + 1px)) {
  .v-show-920 {
    display: none!important;
  }
}
@media (max-width: 910px) {
  .v-hide-910 {
    display: none!important;
  }
}
@media (min-width: calc(910px + 1px)) {
  .v-show-910 {
    display: none!important;
  }
}
@media (max-width: 900px) {
  .v-hide-900 {
    display: none!important;
  }
}
@media (min-width: calc(900px + 1px)) {
  .v-show-900 {
    display: none!important;
  }
}
@media (max-width: 890px) {
  .v-hide-890 {
    display: none!important;
  }
}
@media (min-width: calc(890px + 1px)) {
  .v-show-890 {
    display: none!important;
  }
}
@media (max-width: 880px) {
  .v-hide-880 {
    display: none!important;
  }
}
@media (min-width: calc(880px + 1px)) {
  .v-show-880 {
    display: none!important;
  }
}
@media (max-width: 870px) {
  .v-hide-870 {
    display: none!important;
  }
}
@media (min-width: calc(870px + 1px)) {
  .v-show-870 {
    display: none!important;
  }
}
@media (max-width: 860px) {
  .v-hide-860 {
    display: none!important;
  }
}
@media (min-width: calc(860px + 1px)) {
  .v-show-860 {
    display: none!important;
  }
}
@media (max-width: 850px) {
  .v-hide-850 {
    display: none!important;
  }
}
@media (min-width: calc(850px + 1px)) {
  .v-show-850 {
    display: none!important;
  }
}
@media (max-width: 840px) {
  .v-hide-840 {
    display: none!important;
  }
}
@media (min-width: calc(840px + 1px)) {
  .v-show-840 {
    display: none!important;
  }
}
@media (max-width: 830px) {
  .v-hide-830 {
    display: none!important;
  }
}
@media (min-width: calc(830px + 1px)) {
  .v-show-830 {
    display: none!important;
  }
}
@media (max-width: 820px) {
  .v-hide-820 {
    display: none!important;
  }
}
@media (min-width: calc(820px + 1px)) {
  .v-show-820 {
    display: none!important;
  }
}
@media (max-width: 810px) {
  .v-hide-810 {
    display: none!important;
  }
}
@media (min-width: calc(810px + 1px)) {
  .v-show-810 {
    display: none!important;
  }
}
@media (max-width: 800px) {
  .v-hide-800 {
    display: none!important;
  }
}
@media (min-width: calc(800px + 1px)) {
  .v-show-800 {
    display: none!important;
  }
}
@media (max-width: 790px) {
  .v-hide-790 {
    display: none!important;
  }
}
@media (min-width: calc(790px + 1px)) {
  .v-show-790 {
    display: none!important;
  }
}
@media (max-width: 780px) {
  .v-hide-780 {
    display: none!important;
  }
}
@media (min-width: calc(780px + 1px)) {
  .v-show-780 {
    display: none!important;
  }
}
@media (max-width: 770px) {
  .v-hide-770 {
    display: none!important;
  }
}
@media (min-width: calc(770px + 1px)) {
  .v-show-770 {
    display: none!important;
  }
}
@media (max-width: 760px) {
  .v-hide-760 {
    display: none!important;
  }
}
@media (min-width: calc(760px + 1px)) {
  .v-show-760 {
    display: none!important;
  }
}
@media (max-width: 750px) {
  .v-hide-750 {
    display: none!important;
  }
}
@media (min-width: calc(750px + 1px)) {
  .v-show-750 {
    display: none!important;
  }
}
@media (max-width: 740px) {
  .v-hide-740 {
    display: none!important;
  }
}
@media (min-width: calc(740px + 1px)) {
  .v-show-740 {
    display: none!important;
  }
}
@media (max-width: 730px) {
  .v-hide-730 {
    display: none!important;
  }
}
@media (min-width: calc(730px + 1px)) {
  .v-show-730 {
    display: none!important;
  }
}
@media (max-width: 720px) {
  .v-hide-720 {
    display: none!important;
  }
}
@media (min-width: calc(720px + 1px)) {
  .v-show-720 {
    display: none!important;
  }
}
@media (max-width: 710px) {
  .v-hide-710 {
    display: none!important;
  }
}
@media (min-width: calc(710px + 1px)) {
  .v-show-710 {
    display: none!important;
  }
}
@media (max-width: 700px) {
  .v-hide-700 {
    display: none!important;
  }
}
@media (min-width: calc(700px + 1px)) {
  .v-show-700 {
    display: none!important;
  }
}
@media (max-width: 690px) {
  .v-hide-690 {
    display: none!important;
  }
}
@media (min-width: calc(690px + 1px)) {
  .v-show-690 {
    display: none!important;
  }
}
@media (max-width: 680px) {
  .v-hide-680 {
    display: none!important;
  }
}
@media (min-width: calc(680px + 1px)) {
  .v-show-680 {
    display: none!important;
  }
}
@media (max-width: 670px) {
  .v-hide-670 {
    display: none!important;
  }
}
@media (min-width: calc(670px + 1px)) {
  .v-show-670 {
    display: none!important;
  }
}
@media (max-width: 660px) {
  .v-hide-660 {
    display: none!important;
  }
}
@media (min-width: calc(660px + 1px)) {
  .v-show-660 {
    display: none!important;
  }
}
@media (max-width: 650px) {
  .v-hide-650 {
    display: none!important;
  }
}
@media (min-width: calc(650px + 1px)) {
  .v-show-650 {
    display: none!important;
  }
}
@media (max-width: 640px) {
  .v-hide-640 {
    display: none!important;
  }
}
@media (min-width: calc(640px + 1px)) {
  .v-show-640 {
    display: none!important;
  }
}
@media (max-width: 630px) {
  .v-hide-630 {
    display: none!important;
  }
}
@media (min-width: calc(630px + 1px)) {
  .v-show-630 {
    display: none!important;
  }
}
@media (max-width: 620px) {
  .v-hide-620 {
    display: none!important;
  }
}
@media (min-width: calc(620px + 1px)) {
  .v-show-620 {
    display: none!important;
  }
}
@media (max-width: 610px) {
  .v-hide-610 {
    display: none!important;
  }
}
@media (min-width: calc(610px + 1px)) {
  .v-show-610 {
    display: none!important;
  }
}
@media (max-width: 600px) {
  .v-hide-600 {
    display: none!important;
  }
}
@media (min-width: calc(600px + 1px)) {
  .v-show-600 {
    display: none!important;
  }
}
@media (max-width: 590px) {
  .v-hide-590 {
    display: none!important;
  }
}
@media (min-width: calc(590px + 1px)) {
  .v-show-590 {
    display: none!important;
  }
}
@media (max-width: 580px) {
  .v-hide-580 {
    display: none!important;
  }
}
@media (min-width: calc(580px + 1px)) {
  .v-show-580 {
    display: none!important;
  }
}
@media (max-width: 570px) {
  .v-hide-570 {
    display: none!important;
  }
}
@media (min-width: calc(570px + 1px)) {
  .v-show-570 {
    display: none!important;
  }
}
@media (max-width: 560px) {
  .v-hide-560 {
    display: none!important;
  }
}
@media (min-width: calc(560px + 1px)) {
  .v-show-560 {
    display: none!important;
  }
}
@media (max-width: 550px) {
  .v-hide-550 {
    display: none!important;
  }
}
@media (min-width: calc(550px + 1px)) {
  .v-show-550 {
    display: none!important;
  }
}
@media (max-width: 540px) {
  .v-hide-540 {
    display: none!important;
  }
}
@media (min-width: calc(540px + 1px)) {
  .v-show-540 {
    display: none!important;
  }
}
@media (max-width: 530px) {
  .v-hide-530 {
    display: none!important;
  }
}
@media (min-width: calc(530px + 1px)) {
  .v-show-530 {
    display: none!important;
  }
}
@media (max-width: 520px) {
  .v-hide-520 {
    display: none!important;
  }
}
@media (min-width: calc(520px + 1px)) {
  .v-show-520 {
    display: none!important;
  }
}
@media (max-width: 510px) {
  .v-hide-510 {
    display: none!important;
  }
}
@media (min-width: calc(510px + 1px)) {
  .v-show-510 {
    display: none!important;
  }
}
@media (max-width: 500px) {
  .v-hide-500 {
    display: none!important;
  }
}
@media (min-width: calc(500px + 1px)) {
  .v-show-500 {
    display: none!important;
  }
}
@media (max-width: 490px) {
  .v-hide-490 {
    display: none!important;
  }
}
@media (min-width: calc(490px + 1px)) {
  .v-show-490 {
    display: none!important;
  }
}
@media (max-width: 480px) {
  .v-hide-480 {
    display: none!important;
  }
}
@media (min-width: calc(480px + 1px)) {
  .v-show-480 {
    display: none!important;
  }
}
@media (max-width: 470px) {
  .v-hide-470 {
    display: none!important;
  }
}
@media (min-width: calc(470px + 1px)) {
  .v-show-470 {
    display: none!important;
  }
}
@media (max-width: 460px) {
  .v-hide-460 {
    display: none!important;
  }
}
@media (min-width: calc(460px + 1px)) {
  .v-show-460 {
    display: none!important;
  }
}
@media (max-width: 450px) {
  .v-hide-450 {
    display: none!important;
  }
}
@media (min-width: calc(450px + 1px)) {
  .v-show-450 {
    display: none!important;
  }
}
@media (max-width: 440px) {
  .v-hide-440 {
    display: none!important;
  }
}
@media (min-width: calc(440px + 1px)) {
  .v-show-440 {
    display: none!important;
  }
}
@media (max-width: 430px) {
  .v-hide-430 {
    display: none!important;
  }
}
@media (min-width: calc(430px + 1px)) {
  .v-show-430 {
    display: none!important;
  }
}
@media (max-width: 420px) {
  .v-hide-420 {
    display: none!important;
  }
}
@media (min-width: calc(420px + 1px)) {
  .v-show-420 {
    display: none!important;
  }
}
@media (max-width: 410px) {
  .v-hide-410 {
    display: none!important;
  }
}
@media (min-width: calc(410px + 1px)) {
  .v-show-410 {
    display: none!important;
  }
}
@media (max-width: 400px) {
  .v-hide-400 {
    display: none!important;
  }
}
@media (min-width: calc(400px + 1px)) {
  .v-show-400 {
    display: none!important;
  }
}
@media (max-width: 390px) {
  .v-hide-390 {
    display: none!important;
  }
}
@media (min-width: calc(390px + 1px)) {
  .v-show-390 {
    display: none!important;
  }
}
@media (max-width: 380px) {
  .v-hide-380 {
    display: none!important;
  }
}
@media (min-width: calc(380px + 1px)) {
  .v-show-380 {
    display: none!important;
  }
}
@media (max-width: 370px) {
  .v-hide-370 {
    display: none!important;
  }
}
@media (min-width: calc(370px + 1px)) {
  .v-show-370 {
    display: none!important;
  }
}
@media (max-width: 360px) {
  .v-hide-360 {
    display: none!important;
  }
}
@media (min-width: calc(360px + 1px)) {
  .v-show-360 {
    display: none!important;
  }
}
@media (max-width: 350px) {
  .v-hide-350 {
    display: none!important;
  }
}
@media (min-width: calc(350px + 1px)) {
  .v-show-350 {
    display: none!important;
  }
}
@media (max-width: 340px) {
  .v-hide-340 {
    display: none!important;
  }
}
@media (min-width: calc(340px + 1px)) {
  .v-show-340 {
    display: none!important;
  }
}
@media (max-width: 330px) {
  .v-hide-330 {
    display: none!important;
  }
}
@media (min-width: calc(330px + 1px)) {
  .v-show-330 {
    display: none!important;
  }
}
@media (max-width: 320px) {
  .v-hide-320 {
    display: none!important;
  }
}
@media (min-width: calc(320px + 1px)) {
  .v-show-320 {
    display: none!important;
  }
}
@media (max-width: 310px) {
  .v-hide-310 {
    display: none!important;
  }
}
@media (min-width: calc(310px + 1px)) {
  .v-show-310 {
    display: none!important;
  }
}
@media (max-width: 300px) {
  .v-hide-300 {
    display: none!important;
  }
}
@media (min-width: calc(300px + 1px)) {
  .v-show-300 {
    display: none!important;
  }
}
@media (max-width: 290px) {
  .v-hide-290 {
    display: none!important;
  }
}
@media (min-width: calc(290px + 1px)) {
  .v-show-290 {
    display: none!important;
  }
}
@media (max-width: 280px) {
  .v-hide-280 {
    display: none!important;
  }
}
@media (min-width: calc(280px + 1px)) {
  .v-show-280 {
    display: none!important;
  }
}
@media (max-width: 270px) {
  .v-hide-270 {
    display: none!important;
  }
}
@media (min-width: calc(270px + 1px)) {
  .v-show-270 {
    display: none!important;
  }
}
@media (max-width: 260px) {
  .v-hide-260 {
    display: none!important;
  }
}
@media (min-width: calc(260px + 1px)) {
  .v-show-260 {
    display: none!important;
  }
}
@media (max-width: 250px) {
  .v-hide-250 {
    display: none!important;
  }
}
@media (min-width: calc(250px + 1px)) {
  .v-show-250 {
    display: none!important;
  }
}
@media (max-width: 240px) {
  .v-hide-240 {
    display: none!important;
  }
}
@media (min-width: calc(240px + 1px)) {
  .v-show-240 {
    display: none!important;
  }
}
@media (max-width: 230px) {
  .v-hide-230 {
    display: none!important;
  }
}
@media (min-width: calc(230px + 1px)) {
  .v-show-230 {
    display: none!important;
  }
}
@media (max-width: 220px) {
  .v-hide-220 {
    display: none!important;
  }
}
@media (min-width: calc(220px + 1px)) {
  .v-show-220 {
    display: none!important;
  }
}
@media (max-width: 210px) {
  .v-hide-210 {
    display: none!important;
  }
}
@media (min-width: calc(210px + 1px)) {
  .v-show-210 {
    display: none!important;
  }
}
@media (max-width: 200px) {
  .v-hide-200 {
    display: none!important;
  }
}
@media (min-width: calc(200px + 1px)) {
  .v-show-200 {
    display: none!important;
  }
}
@media (max-width: 190px) {
  .v-hide-190 {
    display: none!important;
  }
}
@media (min-width: calc(190px + 1px)) {
  .v-show-190 {
    display: none!important;
  }
}
@media (max-width: 180px) {
  .v-hide-180 {
    display: none!important;
  }
}
@media (min-width: calc(180px + 1px)) {
  .v-show-180 {
    display: none!important;
  }
}
@media (max-width: 170px) {
  .v-hide-170 {
    display: none!important;
  }
}
@media (min-width: calc(170px + 1px)) {
  .v-show-170 {
    display: none!important;
  }
}
@media (max-width: 160px) {
  .v-hide-160 {
    display: none!important;
  }
}
@media (min-width: calc(160px + 1px)) {
  .v-show-160 {
    display: none!important;
  }
}
@media (max-width: 150px) {
  .v-hide-150 {
    display: none!important;
  }
}
@media (min-width: calc(150px + 1px)) {
  .v-show-150 {
    display: none!important;
  }
}
@media (max-width: 140px) {
  .v-hide-140 {
    display: none!important;
  }
}
@media (min-width: calc(140px + 1px)) {
  .v-show-140 {
    display: none!important;
  }
}
@media (max-width: 130px) {
  .v-hide-130 {
    display: none!important;
  }
}
@media (min-width: calc(130px + 1px)) {
  .v-show-130 {
    display: none!important;
  }
}
@media (max-width: 120px) {
  .v-hide-120 {
    display: none!important;
  }
}
@media (min-width: calc(120px + 1px)) {
  .v-show-120 {
    display: none!important;
  }
}
@media (max-width: 110px) {
  .v-hide-110 {
    display: none!important;
  }
}
@media (min-width: calc(110px + 1px)) {
  .v-show-110 {
    display: none!important;
  }
}
@media (max-width: 100px) {
  .v-hide-100 {
    display: none!important;
  }
}
@media (min-width: calc(100px + 1px)) {
  .v-show-100 {
    display: none!important;
  }
}
@media (max-width: 90px) {
  .v-hide-90 {
    display: none!important;
  }
}
@media (min-width: calc(90px + 1px)) {
  .v-show-90 {
    display: none!important;
  }
}
@media (max-width: 80px) {
  .v-hide-80 {
    display: none!important;
  }
}
@media (min-width: calc(80px + 1px)) {
  .v-show-80 {
    display: none!important;
  }
}
@media (max-width: 70px) {
  .v-hide-70 {
    display: none!important;
  }
}
@media (min-width: calc(70px + 1px)) {
  .v-show-70 {
    display: none!important;
  }
}
@media (max-width: 60px) {
  .v-hide-60 {
    display: none!important;
  }
}
@media (min-width: calc(60px + 1px)) {
  .v-show-60 {
    display: none!important;
  }
}
@media (max-width: 50px) {
  .v-hide-50 {
    display: none!important;
  }
}
@media (min-width: calc(50px + 1px)) {
  .v-show-50 {
    display: none!important;
  }
}
@media (max-width: 40px) {
  .v-hide-40 {
    display: none!important;
  }
}
@media (min-width: calc(40px + 1px)) {
  .v-show-40 {
    display: none!important;
  }
}
@media (max-width: 30px) {
  .v-hide-30 {
    display: none!important;
  }
}
@media (min-width: calc(30px + 1px)) {
  .v-show-30 {
    display: none!important;
  }
}
.v-default-pagination ul {
  list-style: none;
  display: flex;
  justify-content: center;
  grid-gap: 20px;
}
.v-default-pagination ul .v-pagination-page {
  color: var(--inn-primary);
  width: 1.7em;
  height: 1.7em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-default-pagination ul .v-pagination-page.active {
  background: var(--inn-primary);
  color: white;
}
.v-default-pagination ul .v-pagination-next-container,
.v-default-pagination ul .v-pagination-prev-container {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 5px;
  min-width: 1.9em;
  min-height: 10px;
}
.v-default-pagination ul .v-pagination-pages-container {
  display: flex;
  align-items: center;
  grid-gap: 5px;
}
#top-bar {
  display: none;
}
.skiptranslate {
  display: none!important;
}
.single-icon p {
  margin-bottom: 0;
}
.v-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
@media only screen and (max-width: 767px) {
  .v-form-grid-2 {
    grid-template-columns: 1fr;
  }
}
.flex-container {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.items-baseline {
  align-items: baseline;
}
.gap-0 {
  gap: 0;
}
.gap-4 {
  gap: 4px;
}
.gap-8 {
  gap: 8px;
}
.gap-12 {
  gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.gap-20 {
  gap: 20px;
}
.gap-24 {
  gap: 24px;
}
.gap-32 {
  gap: 32px;
}
.gap-40 {
  gap: 40px;
}
.gap-48 {
  gap: 48px;
}
.gap-56 {
  gap: 56px;
}
.gap-64 {
  gap: 64px;
}
.gap-80 {
  gap: 80px;
}
.gap-y-0 {
  row-gap: 0;
}
.gap-y-4 {
  row-gap: 4px;
}
.gap-y-8 {
  row-gap: 8px;
}
.gap-y-12 {
  row-gap: 12px;
}
.gap-y-16 {
  row-gap: 16px;
}
.gap-y-20 {
  row-gap: 20px;
}
.gap-y-24 {
  row-gap: 24px;
}
.gap-y-32 {
  row-gap: 32px;
}
.gap-y-40 {
  row-gap: 40px;
}
.gap-x-0 {
  column-gap: 0;
}
.gap-x-4 {
  column-gap: 4px;
}
.gap-x-8 {
  column-gap: 8px;
}
.gap-x-12 {
  column-gap: 12px;
}
.gap-x-16 {
  column-gap: 16px;
}
.gap-x-20 {
  column-gap: 20px;
}
.gap-x-24 {
  column-gap: 24px;
}
.gap-x-32 {
  column-gap: 32px;
}
.gap-x-40 {
  column-gap: 40px;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}
.flex-grow {
  flex-grow: 1;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.self-baseline {
  align-self: baseline;
}
@media only screen and (min-width: 720px) and (max-width: 1024px) {
  .flex-row-t {
    flex-direction: row;
  }
  .flex-row-reverse-t {
    flex-direction: row-reverse;
  }
  .flex-col-t {
    flex-direction: column;
  }
  .flex-col-reverse-t {
    flex-direction: column-reverse;
  }
  .flex-wrap-t {
    flex-wrap: wrap;
  }
  .flex-wrap-reverse-t {
    flex-wrap: wrap-reverse;
  }
  .flex-nowrap-t {
    flex-wrap: nowrap;
  }
  .justify-start-t {
    justify-content: flex-start;
  }
  .justify-end-t {
    justify-content: flex-end;
  }
  .justify-center-t {
    justify-content: center;
  }
  .justify-between-t {
    justify-content: space-between;
  }
  .justify-around-t {
    justify-content: space-around;
  }
  .justify-evenly-t {
    justify-content: space-evenly;
  }
  .items-start-t {
    align-items: flex-start;
  }
  .items-end-t {
    align-items: flex-end;
  }
  .items-center-t {
    align-items: center;
  }
  .items-stretch-t {
    align-items: stretch;
  }
  .items-baseline-t {
    align-items: baseline;
  }
  .gap-0-t {
    gap: 0;
  }
  .gap-4-t {
    gap: 4px;
  }
  .gap-8-t {
    gap: 8px;
  }
  .gap-12-t {
    gap: 12px;
  }
  .gap-16-t {
    gap: 16px;
  }
  .gap-20-t {
    gap: 20px;
  }
  .gap-24-t {
    gap: 24px;
  }
  .gap-32-t {
    gap: 32px;
  }
  .gap-40-t {
    gap: 40px;
  }
  .flex-1-t {
    flex: 1 1 0%;
  }
  .flex-auto-t {
    flex: 1 1 auto;
  }
  .flex-none-t {
    flex: none;
  }
}
@media only screen and (max-width: 767px) {
  .flex-row-m {
    flex-direction: row;
  }
  .flex-row-reverse-m {
    flex-direction: row-reverse;
  }
  .flex-col-m {
    flex-direction: column;
  }
  .flex-col-reverse-m {
    flex-direction: column-reverse;
  }
  .flex-wrap-m {
    flex-wrap: wrap;
  }
  .flex-wrap-reverse-m {
    flex-wrap: wrap-reverse;
  }
  .flex-nowrap-m {
    flex-wrap: nowrap;
  }
  .justify-start-m {
    justify-content: flex-start;
  }
  .justify-end-m {
    justify-content: flex-end;
  }
  .justify-center-m {
    justify-content: center;
  }
  .justify-between-m {
    justify-content: space-between;
  }
  .justify-around-m {
    justify-content: space-around;
  }
  .justify-evenly-m {
    justify-content: space-evenly;
  }
  .items-start-m {
    align-items: flex-start;
  }
  .items-end-m {
    align-items: flex-end;
  }
  .items-center-m {
    align-items: center;
  }
  .items-stretch-m {
    align-items: stretch;
  }
  .items-baseline-m {
    align-items: baseline;
  }
  .gap-0-m {
    gap: 0;
  }
  .gap-4-m {
    gap: 4px;
  }
  .gap-8-m {
    gap: 8px;
  }
  .gap-12-m {
    gap: 12px;
  }
  .gap-16-m {
    gap: 16px;
  }
  .gap-20-m {
    gap: 20px;
  }
  .gap-24-m {
    gap: 24px;
  }
  .gap-32-m {
    gap: 32px;
  }
  .flex-1-m {
    flex: 1 1 0%;
  }
  .flex-auto-m {
    flex: 1 1 auto;
  }
  .flex-none-m {
    flex: none;
  }
}
.max-w-100 {
  max-width: 100px;
}
.max-w-150 {
  max-width: 150px;
}
.max-w-200 {
  max-width: 200px;
}
.max-w-250 {
  max-width: 250px;
}
.max-w-300 {
  max-width: 300px;
}
.max-w-350 {
  max-width: 350px;
}
.max-w-400 {
  max-width: 400px;
}
.max-w-450 {
  max-width: 450px;
}
.max-w-500 {
  max-width: 500px;
}
.max-w-600 {
  max-width: 600px;
}
.max-w-700 {
  max-width: 700px;
}
.max-w-800 {
  max-width: 800px;
}
.max-w-900 {
  max-width: 900px;
}
.max-w-1000 {
  max-width: 1000px;
}
.max-w-1100 {
  max-width: 1100px;
}
.max-w-1200 {
  max-width: 1200px;
}
.max-w-1400 {
  max-width: 1400px;
}
.max-w-full {
  max-width: 100%;
}
.max-w-screen {
  max-width: 100vw;
}
.max-w-none {
  max-width: none;
}
.min-w-100 {
  min-width: 100px;
}
.min-w-150 {
  min-width: 150px;
}
.min-w-200 {
  min-width: 200px;
}
.min-w-250 {
  min-width: 250px;
}
.min-w-300 {
  min-width: 300px;
}
.min-w-350 {
  min-width: 350px;
}
.min-w-400 {
  min-width: 400px;
}
.min-w-450 {
  min-width: 450px;
}
.min-w-500 {
  min-width: 500px;
}
.min-w-600 {
  min-width: 600px;
}
.min-w-700 {
  min-width: 700px;
}
.min-w-800 {
  min-width: 800px;
}
.min-w-900 {
  min-width: 900px;
}
.min-w-1000 {
  min-width: 1000px;
}
.min-w-1100 {
  min-width: 1100px;
}
.min-w-1200 {
  min-width: 1200px;
}
.min-w-1400 {
  min-width: 1400px;
}
.min-w-full {
  min-width: 100%;
}
.min-w-screen {
  min-width: 100vw;
}
.min-w-none {
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .max-w-100-m {
    max-width: 100px;
  }
  .max-w-150-m {
    max-width: 150px;
  }
  .max-w-200-m {
    max-width: 200px;
  }
  .max-w-250-m {
    max-width: 250px;
  }
  .max-w-300-m {
    max-width: 300px;
  }
  .max-w-350-m {
    max-width: 350px;
  }
  .max-w-400-m {
    max-width: 400px;
  }
  .max-w-450-m {
    max-width: 450px;
  }
  .max-w-500-m {
    max-width: 500px;
  }
  .max-w-600-m {
    max-width: 600px;
  }
  .max-w-700-m {
    max-width: 700px;
  }
  .max-w-800-m {
    max-width: 800px;
  }
  .max-w-full-m {
    max-width: 100%;
  }
  .max-w-screen-m {
    max-width: 100vw;
  }
  .max-w-none-m {
    max-width: none;
  }
  .min-w-100-m {
    min-width: 100px;
  }
  .min-w-150-m {
    min-width: 150px;
  }
  .min-w-200-m {
    min-width: 200px;
  }
  .min-w-250-m {
    min-width: 250px;
  }
  .min-w-300-m {
    min-width: 300px;
  }
  .min-w-350-m {
    min-width: 350px;
  }
  .min-w-400-m {
    min-width: 400px;
  }
  .min-w-full-m {
    min-width: 100%;
  }
  .min-w-screen-m {
    min-width: 100vw;
  }
  .min-w-none-m {
    min-width: 0;
  }
}
@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .show-desktop-only {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .show-tablet-only {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .show-tablet-only {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .show-mobile-only {
    display: none !important;
  }
}
.show-tablet-only.show-mobile-only {
  display: block !important;
}
@media (min-width: 1024px) {
  .show-tablet-only.show-mobile-only {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet-only.show-mobile-only {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .show-tablet-only.show-mobile-only {
    display: block !important;
  }
}
.show-desktop-only.show-tablet-only {
  display: block !important;
}
@media (min-width: 1024px) {
  .show-desktop-only.show-tablet-only {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-desktop-only.show-tablet-only {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .show-desktop-only.show-tablet-only {
    display: none !important;
  }
}
.show-desktop-only.show-mobile-only {
  display: block !important;
}
@media (min-width: 1024px) {
  .show-desktop-only.show-mobile-only {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-desktop-only.show-mobile-only {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .show-desktop-only.show-mobile-only {
    display: block !important;
  }
}
.show-desktop-only.show-tablet-only.show-mobile-only {
  display: block !important;
}
@media only screen and (min-width: 720px) and (max-width: 1024px) {
  .hide-tablet-down {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .hide-tablet-down {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .hide-mobile-only {
    display: none !important;
  }
}
/* =============================================================================
   FAQ-Items — EINZIGE Stelle für Card-/Frage-/Linien-Styling
   Layout-Varianten (Grid/Stack/Section) liegen in custom.less (.a-faq-grid etc.).
   ============================================================================= */
.faq-start-accordion {
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
}
.faq-card {
  width: 100%;
  border-bottom: 0;
  padding-bottom: 0;
}
.faq-card .faq-card-header {
  font-weight: 400;
}
.faq-card .faq-card-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 28px);
  width: 100%;
  padding: 0 0 clamp(8px, 1.2vw, 10px);
  /* HRS-288/289/290 (27.10.2026): war 2px. Der Entwurf fuehrt die Linie
       mit 1,5px; ein Rahmen kann das nicht (computed 1px, auch auf scharfen
       Displays). Die Designerin nennt 2px zu breit — also 1px, und zwar an
       allen vier Stellen dieser Rolle gemeinsam (siehe korrekturen.less). */
  border-bottom: 1px solid var(--inn-primary);
  /* rot · 1px — überall gleich */
  transition: border-color 0.25s ease;
}
.faq-card .faq-card-link:hover {
  cursor: pointer;
}
.faq-card .faq-card-link .question {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--inn-primary);
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  text-transform: none;
  border-bottom: 0;
}
.faq-card .faq-card-link .faq-icon {
  position: relative;
  width: clamp(28px, 4vw, 36px);
  height: clamp(28px, 4vw, 36px);
  flex-shrink: 0;
  margin-left: 0;
}
.faq-card .faq-card-link .faq-icon i,
.faq-card .faq-card-link .faq-icon .faq-icon-sign {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  font-family: var(--inn-main-font);
  font-size: clamp(32px, 4vw, 45px);
  line-height: 1;
  font-weight: 300;
  color: var(--inn-primary);
  transition: opacity 0.25s ease, transform 0.25s ease;
  user-select: none;
}
.faq-card .faq-card-link .faq-icon .faq-icon-plus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-card .faq-card-link .faq-icon .faq-icon-minus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.faq-card .faq-card-link:not(.collapsed) .faq-icon .faq-icon-plus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-card .faq-card-link:not(.collapsed) .faq-icon .faq-icon-minus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-card .faq-card-body {
  padding-top: clamp(14px, 2vw, 20px);
  padding-bottom: clamp(2px, 0.6vw, 6px);
  color: var(--inn-neutral);
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
}
.faq-card .faq-card-body p {
  margin: 0 0 0.75rem;
}
.faq-card .faq-card-body p:last-child {
  margin-bottom: 0;
}
.faq-page-accordion--stack .faq-card:not(:last-child),
.faq-start-accordion .faq-card:not(:last-child) {
  margin-bottom: clamp(22px, 3vw, 32px);
}
.faq-page-accordion {
  margin-top: 0;
  margin-bottom: 0;
}
.faq-headline {
  color: var(--inn-primary);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 30px;
}
.faq-half-container {
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
  align-items: flex-start;
  height: auto;
}
/* Legacy Start-FAQ Tabs */
.faq-desktop {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-gap: 70px;
}
@media only screen and (max-width: 1000px) {
  .faq-desktop {
    grid-template-columns: 100%;
  }
}
.faq-desktop ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin: 0;
}
.faq-desktop .faq-tabs {
  display: flex;
  flex-direction: column;
  grid-gap: 30px;
  border: none;
}
.faq-desktop .faq-tabs .nav-item {
  background: transparent;
  border: none;
}
.faq-desktop .faq-tabs .nav-item .nav-link {
  background: var(--inn-primary);
  border: 2px solid var(--inn-primary);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 20px;
  margin-right: 75px;
  transition: 0.5s all ease-in-out;
  border-radius: 0;
  padding: 18px;
  padding-left: 40px;
  text-transform: uppercase;
  font-size: var(--inn-h4-font-size);
  font-weight: var(--inn-headline-font-weight-h4);
  line-height: 1;
  font-weight: 700;
}
.faq-desktop .faq-tabs .nav-item .nav-link .v-plus-icon {
  font-size: 28px;
  color: var(--inn-secondary);
  transition: all 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .faq-desktop .faq-tabs .nav-item .nav-link {
    margin-right: 30px;
  }
}
.faq-desktop .faq-tabs .nav-item .nav-link.active,
.faq-desktop .faq-tabs .nav-item .nav-link:hover {
  margin-right: 0;
}
.faq-desktop .faq-tabs .nav-item .nav-link .faq-plus {
  opacity: 1;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}
.faq-desktop .faq-tabs .nav-item .nav-link .faq-minus {
  opacity: 0;
  transform: rotate(-90deg);
  position: absolute;
  transition: all 0.3s ease;
}
.faq-desktop .faq-tabs .nav-item .nav-link.active .faq-plus {
  opacity: 0;
  transform: rotate(90deg);
}
.faq-desktop .faq-tabs .nav-item .nav-link.active .faq-minus {
  opacity: 1;
  transform: rotate(0deg);
  position: relative;
}
@media only screen and (max-width: 767px) {
  .faq-desktop .faq-tabs .nav-item .nav-link {
    font-size: var(--inn-h4-font-size-mobile);
  }
}
.faq-desktop .faq-tabs .nav-item.v-cat-id-2 .nav-link {
  background: var(--inn-third);
  border-color: var(--inn-third);
  color: var(--inn-neutral);
}
.faq-desktop .faq-tabs .nav-item.v-cat-id-3 .nav-link {
  background: var(--inn-secondary);
  border-color: var(--inn-secondary);
  color: var(--inn-neutral);
}
.faq-desktop .faq-tabs .nav-item.v-cat-id-4 .nav-link {
  background: var(--inn-fourth);
  border-color: var(--inn-fourth);
  color: var(--inn-neutral);
}
.faq-desktop .faq-tab-questions .inner-faq-tab-pane {
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
}
.faq-desktop .faq-container .v-plus-icon {
  font-size: 28px;
  color: var(--inn-secondary);
}
.faq-desktop .faq-container .faq-tab-card {
  border-radius: 0;
}
.faq-desktop .faq-container .faq-tab-card .faq-link .faq-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.faq-desktop .faq-container .faq-tab-card .faq-link .faq-plus,
.faq-desktop .faq-container .faq-tab-card .faq-link .faq-minus {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 28px;
  color: var(--inn-secondary);
  transition: all 0.3s ease;
}
.faq-desktop .faq-container .faq-tab-card .faq-link .faq-plus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-desktop .faq-container .faq-tab-card .faq-link .faq-minus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.faq-desktop .faq-container .faq-tab-card .faq-link.collapsed .faq-plus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-desktop .faq-container .faq-tab-card .faq-link.collapsed .faq-minus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.faq-desktop .faq-container .faq-tab-card .faq-link:not(.collapsed) .faq-plus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-desktop .faq-container .faq-tab-card .faq-link:not(.collapsed) .faq-minus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-desktop .faq-container .faq-tab-card .faq-link .question {
  display: flex;
  justify-content: space-between;
  /* HRS-288/289/290: siehe oben. Das `!important` stammt nicht von
             uns und bleibt unangetastet, nur der Wert aendert sich. */
  border-bottom: 1px solid var(--inn-primary) !important;
  align-items: center;
  padding-bottom: 8px;
  font-weight: 700;
}
.faq-desktop .faq-container .faq-tab-card .faq-body {
  padding-top: 20px;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
/* HRS-78: Auf „Fuer Unternehmen" traegt die Sektion die Ueberschrift
   „Frage & Antwort" — der Kategorie-Titel des Moduls entfaellt dort (Entwurf).
   Per Artikelklasse, weil andere Seiten den Titel weiter zeigen. */
.a-faq--ohne-kategorie .faq-category-label {
  display: none;
}
/* „Jetzt entdecken" unter „Sie haben noch eine Frage?" — Entwurf
   hotel-riessersee-faq (1920px). Die Anordnung der drei Spalten teilt sich
   die Sektion mit den Tagungspauschalen (custom.less); hier nur, was der
   FAQ-Entwurf eigen hat: 210px unter der Trennerkante beginnt die
   Augenbraue, unter dem Text stehen 50px bis zum Button (dort keine Listen). */
.a-faq-entdecken {
  padding-top: clamp(96px, 10.9vw, 210px);
  padding-bottom: clamp(96px, 11.2vw, 215px);
}
.a-faq-entdecken .v-media-cta-card__text {
  margin-bottom: 50px;
}
body {
  font-size: var(--inn-body-font-size);
  color: var(--inn-neutral);
  font-family: var(--inn-main-font);
  font-weight: var(--inn-body-font-weight);
  /* Fliesstext im Entwurf durchgehend 18px/23px. Ohne Grundwert erbten
     Absaetze den Browserwert (~1,2 = 21,6px) und wirkten gedraengt —
     Modultexte hatten 23px, einfache Textelemente nicht. */
  line-height: 1.27777778;
  overflow-x: hidden;
  max-width: 100vw;
}
@media only screen and (max-width: 767px) {
  body {
    font-weight: var(--inn-body-font-weight-mobile);
  }
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  color: inherit;
}
.content-wrapper {
  box-sizing: border-box;
  max-width: var(--inn-container-width);
  width: 100%;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.inside {
  max-width: var(--inn-container-width);
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  margin: auto;
}
.inside section:last-child,
.inside div:last-child {
  margin-bottom: 0;
}
.swiper-container {
  padding-left: 0!important;
  padding-right: 0!important;
}
img {
  width: 100%;
  vertical-align: bottom;
  display: block;
}
.logo-loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 99999999;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: 0.5s all ease-in-out;
}
.logo-loader.loaded {
  opacity: 0;
  z-index: -1;
}
.logo-loader img {
  width: 50vw;
}
section {
  padding-top: var(--inn-section-padding-top, 80px);
  padding-bottom: var(--inn-section-padding-bottom, 80px);
}
@media only screen and (max-width: 767px) {
  section {
    padding-top: var(--inn-section-padding-top-mobile, 40px);
    padding-bottom: var(--inn-section-padding-bottom-mobile, 40px);
  }
}
section > div {
  display: flex;
}
section > div > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  section.colcount_2 .col_1 {
    margin-bottom: 40px;
  }
  section > div {
    margin-bottom: 40px;
  }
  section > div:last-of-type {
    margin-bottom: 0;
  }
}
body.v-link-underline a:not(.btn):not(.button):not([class*="button"]):not(.v-trenner__contact-link):not(.v-contact-block__item):not(.v-accordion-list-head):not(.a-kulinarik-pills__item):not([href^="mailto:"]):not([href^="tel:"]) {
  text-decoration: underline;
}
body.v-link-underline a:not(.btn):not(.button):not([class*="button"]):not(.v-trenner__contact-link):not(.v-contact-block__item):not(.v-accordion-list-head):not(.a-kulinarik-pills__item):not([href^="mailto:"]):not([href^="tel:"]):hover {
  text-decoration: none;
}
/*Header*/
#header {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 9999;
  height: var(--inn-header-height);
  background: var(--inn-header-bg);
  color: var(--inn-header-color);
  transition: all 0.3s ease-in-out;
}
#header .inside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--inn-header-padding-top, 10px);
  padding-bottom: var(--inn-header-padding-bottom, 10px);
}
#header .inside .logo {
  max-width: var(--inn-logo-max-width, 200px);
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
  #header .inside .logo {
    max-width: var(--inn-logo-max-width-mobile, 150px);
  }
}
#header .inside .logo img {
  width: 100%;
}
#header .inside .v-logo-2 {
  display: none;
}
#header .inside .header-nav li {
  display: inline-block;
}
#header .inside .header-nav a,
#header .inside .header-nav strong {
  color: inherit;
  text-decoration: none;
}
body:not(.v-header-sticky) #header {
  position: relative;
}
body.v-header-transparent #header {
  background: transparent;
}
body.v-header-transparent #header.scrolled-header {
  background: var(--inn-header-bg);
}
#header-nav-mod {
  width: 100%;
  overflow: visible;
}
#header-nav-mod #header-nav-inh {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#header-nav-mod #header-nav-inh .header-nav ul {
  grid-gap: var(--inn-header-nav-gap, 20px);
}
/*Header end*/
/*Footer*/
#footer {
  background: var(--inn-footer-bg);
  color: var(--inn-footer-color);
  padding-top: var(--inn-footer-padding-top, 50px);
  padding-bottom: var(--inn-footer-padding-bottom, 50px);
}
#footer .inside {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#footer .inside .footer-lower-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  #footer .inside .footer-lower-container {
    flex-direction: column;
  }
}
#footer .inside .v-logo {
  max-width: 200px;
}
#footer .inside #footer-mod {
  width: 100%;
}
#footer .inside #footer-mod #footer-inh {
  width: 100%;
}
#footer .inside .footer-nav ul {
  display: flex;
  flex-direction: row;
}
@media only screen and (max-width: 767px) {
  #footer .inside .footer-nav ul {
    flex-wrap: wrap;
  }
}
#footer .inside .footer-nav ul li {
  display: flex;
  align-items: center;
}
#footer .inside .footer-nav ul li:after {
  content: "|";
  display: block;
  margin-left: 10px;
  margin-right: 10px;
}
#footer .inside .footer-nav ul li:last-child:after {
  display: none;
}
#footer .inside .footer-nav ul li a {
  text-decoration: none;
}
/*Footer end*/
/*Slider*/
#slider-start .inside {
  max-width: 100%;
  padding: 0;
}
/*Slider end*/
.preloader-wrap {
  width: 100%;
  height: 100%;
  position: fixed!important;
  top: 0;
  bottom: 0;
  background: white;
  left: 0;
  z-index: 9999999999!important;
}
.percentage {
  z-index: 100;
  text-align: center;
  color: var(--inn-neutral);
  line-height: 30px;
  font-size: 15px;
}
.loader {
  height: 13vw;
  max-width: 15vw;
  font-weight: 300;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto !important;
}
@media only screen and (max-width: 767px) {
  .loader {
    max-width: 50vw;
    height: 30vw;
  }
}
.loader svg {
  width: 100%;
  height: auto;
}
.percentage {
  position: relative;
  z-index: 99999;
  font-family: var(--inn-head-font);
  font-size: 200%;
  color: var(--inn-primary);
}
.loader:after,
.percentage:after {
  content: "";
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.trackbar {
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 30px;
  overflow: hidden;
  position: relative;
}
#Rectangle {
  width: 0;
  fill: var(--inn-primary);
}
.loadbar {
  display: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: flicker 5s infinite;
  overflow: hidden;
}
.glow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: white;
}
@keyframes animation {
  10% {
    opacity: 0.9;
  }
  30% {
    opacity: 0.86;
  }
  60% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.75;
  }
}
#loader {
  height: 0;
}
#loader .inside {
  padding: 0!important;
  height: 0!important;
}
@media (min-width: 1000px) {
  .v-mobile-header-icons,
  .navigation,
  .burger,
  .burger-container,
  .v-burger-container {
    display: none !important;
  }
}
@media (max-width: 1000px) {
  .header-nav {
    display: none;
  }
  .v-burger-container,
  .burger-container {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .v-desktop {
    display: none !important;
  }
}
@media only screen and (min-width: 960px) {
  .v-mobile {
    display: none !important;
  }
}
@media only screen and (max-width: 768px) {
  section {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  section.reverse-sec-mobile {
    flex-direction: column-reverse;
  }
  section > div {
    width: 100%!important;
    padding: 0;
    margin: 0;
  }
}
/*Burger mobile navigation - vollständig konfigurierbar über Root-Page*/
.burger {
  display: inline-block;
  border: 0;
  background: none;
  outline: 0;
  padding: 0;
  cursor: pointer;
  border-bottom: var(--inn-burger-icon-thickness, 4px) solid var(--inn-burger-icon-color, white);
  width: 28px;
  transition: border-bottom 1s ease-in-out;
  -webkit-transition: border-bottom 1s ease-in-out;
  position: relative;
  z-index: 9999;
  margin-bottom: 0;
}
.burger::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.burger:before {
  content: "";
  display: block;
  border-bottom: var(--inn-burger-icon-thickness, 4px) solid var(--inn-burger-icon-color, white);
  width: 100%;
  margin-bottom: 5px;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
  content: "";
  display: block;
  border-bottom: var(--inn-burger-icon-thickness, 4px) solid var(--inn-burger-icon-color, white);
  width: 100%;
  margin-bottom: 5px;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check {
  display: none;
}
.burger-check:checked ~ .burger {
  border-bottom: var(--inn-burger-icon-thickness, 4px) solid transparent;
  transition: border-bottom 0.8s ease-in-out;
  -webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger-check:checked ~ .burger:before {
  transform: rotate(-405deg) translateY(1px) translateX(-3px);
  -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:after {
  transform: rotate(405deg) translateY(-4px) translateX(-5px);
  -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.navigation ul li:after {
  content: "";
  width: 45%;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  background: var(--inn-mobile-nav-separator-color, white);
  height: 2px;
  display: block;
}
.navigation ul li:last-child:after {
  display: none;
}
.navigation ul li:last-child {
  padding-right: 0px!important;
}
.navigation li a.nav-active {
  border-bottom: 0px solid blue!important;
}
.navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden !important;
  height: 100vh;
  transition: all 0.5s ease-in-out;
  background: var(--inn-mobile-nav-bg, var(--inn-neutral));
  position: fixed;
  left: 0;
  top: -150%;
  z-index: 7777;
}
.navigation li {
  color: var(--inn-mobile-nav-text-color, white);
  text-align: center;
  display: block;
}
.navigation li a,
.navigation li strong {
  color: var(--inn-mobile-nav-text-color, white);
  text-decoration: none;
}
.navigation li:after {
  display: none!important;
}
.navigation ul {
  display: flex;
  flex-direction: column;
  grid-gap: 20px;
}
.navigation ul li a:hover,
.navigation ul li strong {
  border-bottom: 2px solid var(--inn-mobile-nav-hover-color, var(--inn-primary));
}
.navigation ul li a.u-kontakt-button {
  background: white;
  color: var(--inn-primary);
  padding: 0.1em 0.7em;
  transition: 0.5s all ease-in-out;
}
.navigation ul li a.u-kontakt-button:hover {
  background: var(--inn-primary);
  color: white;
}
.burger-check:checked ~ .navigation,
.navigation.show-nav {
  display: flex;
  align-items: center;
  top: 0;
}
.burger-check:checked ~ .navigation ul li {
  opacity: 1!important;
  -webkit-transition: opactiy 0.3s ease-in-out;
  transition: opactiy 0.3s ease-in-out;
}
/* =============================================================================
   Hotel Riessersee — Design-Tokens & globale Utilities (Phase 0)
   Quelle: MCP get_design_tokens + _docs/sql/01_design_config_hotel-riessersee.sql
   ============================================================================= */
/* Rundumschatten. Stand bis 05.10.2026 auf `0 4px 10px` — 4px nach unten
   versetzt und damit an den Seitenkanten praktisch unsichtbar. Genau das hat
   die Designerin zweimal gemeldet:
     HRS-30 (/zimmer.html)      „bitte schatten rundum damit man die box erkennt"
     HRS-57 (/firmenevents.html) „Schatten auch an der linken kante der box"
   Beide Tickets standen auf „Erledigt", die Ursache war aber nie behoben —
   auf beiden Seiten lag weiter der versetzte Schatten. Der Wert entspricht
   jetzt dem Rundumschatten, der fuer die Bewertungskarten bereits im Einsatz
   ist (0 0 18px), und gilt damit fuer alle 233 Kartenschatten einheitlich.
   Der XD gibt hier nichts vor: Er enthaelt keinen einzigen Schlagschatten,
   jede box-shadow dort ist `inset`, also ein Strich. Massgeblich sind die
   Tickets — vgl. CLAUDE.md, „Tickets schlagen das XD". */
/* Weißer Rahmen um randabfallende Medien (Hero + Inset-Trenner).
   XD Startseite: Bild x=35 / w=1850 auf 1920 → 35px ≙ 1.82vw. (HRS-9/14/17) */
/* Buttons nie rund — Design-Config-Default überschreiben */
.v-button > a,
.v-button a {
  border-radius: 0 !important;
}
/* --- Swiper-Navigation (global — .v-swiper-nav + Modifier) ------------------- */
.v-swiper-nav {
  display: flex;
  gap: 1.75rem;
  margin-top: var(--inn-swiper-nav-gap, 48px);
}
.v-swiper-nav .bh-button-prev,
.v-swiper-nav .bh-button-next {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
}
.v-swiper-nav--red .bh-button-prev,
.v-swiper-nav--red .bh-button-next {
  width: 44px;
  height: 44px;
  font-size: 0;
  line-height: 0;
}
.v-swiper-nav--red .bh-button-prev img,
.v-swiper-nav--red .bh-button-next img {
  display: block;
  width: 18px;
  height: auto;
}
.v-swiper-nav--chevron {
  gap: 1.25rem;
}
.v-swiper-nav--chevron .bh-button-prev,
.v-swiper-nav--chevron .bh-button-next {
  color: #681d33;
  font-size: 1.35rem;
}
/* --- v-link-underline: Header/Nav/inn-nav-link/Hero ausnehmen ---------------- */
body.v-link-underline #header .v-button > a,
body.v-link-underline .inn-nav-link,
body.v-link-underline .inn-nav-link *,
body.v-link-underline #mobile-nav-mod a,
body.v-link-underline #mobile-nav-mod a *,
body.v-link-underline .v-menu-overlay-career,
body.v-link-underline .v-menu-overlay-career *,
body.v-link-underline .v-start-hero a,
body.v-link-underline .v-start-hero__label,
body.v-link-underline .v-news-card__title a,
body.v-link-underline .v-news-card__title a:hover,
body.v-link-underline .v-contact-phone-mail a,
body.v-link-underline .v-contact-phone-mail a *,
body.v-link-underline .v-button > a,
body.v-link-underline .v-button a,
body.v-link-underline .v-button a * {
  text-decoration: none !important;
}
body.v-link-underline #header .v-button > a:hover,
body.v-link-underline .inn-nav-link:hover,
body.v-link-underline .inn-nav-link *:hover,
body.v-link-underline #mobile-nav-mod a:hover,
body.v-link-underline #mobile-nav-mod a *:hover,
body.v-link-underline .v-menu-overlay-career:hover,
body.v-link-underline .v-menu-overlay-career *:hover,
body.v-link-underline .v-start-hero a:hover,
body.v-link-underline .v-start-hero__label:hover,
body.v-link-underline .v-news-card__title a:hover,
body.v-link-underline .v-news-card__title a:hover:hover,
body.v-link-underline .v-contact-phone-mail a:hover,
body.v-link-underline .v-contact-phone-mail a *:hover,
body.v-link-underline .v-button > a:hover,
body.v-link-underline .v-button a:hover,
body.v-link-underline .v-button a *:hover {
  text-decoration: none !important;
}
/* --- Section-Hintergründe (cssClass auf tl_article) ------------------------ */
.bg-white {
  background-color: #fff !important;
}
.bg-surface {
  background-color: #faf6f7 !important;
}
.bg-beige {
  background-color: #efddce !important;
}
.bg-mauve {
  background-color: #c2a4ad !important;
}
.bg-primary {
  background-color: #681d33 !important;
  color: #fff !important;
}
/* --- Typografie-Slots (Werte aus Design-Config / MCP) --------------------- */
.rs-eyebrow {
  display: block;
  font-family: var(--inn-main-font);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #681d33;
  margin-bottom: 0.75em;
}
.rs-headline {
  font-family: var(--inn-main-font);
  font-size: var(--inn-h2-font-size);
  /* XD Section 65 — aus Design-Config */
  line-height: 1.15;
  font-weight: 300;
  color: #681d33;
}
.rs-script {
  font-family: var(--inn-head-font);
  font-size: 120px;
  /* XD Sub-Hero Licorice Desktop */
  line-height: 1;
  font-weight: 400;
  color: #681d33;
}
@media only screen and (max-width: 767px) {
  .rs-headline {
    font-size: var(--inn-h2-font-size-mobile);
  }
  /* XD iPhone Section 45 */
  .rs-script {
    font-size: var(--inn-h1-font-size-mobile);
  }
  /* XD iPhone Hero Licorice 55 */
}
/* --- Fließtext-Normalisierung (HRS-16) -------------------------------------
   Aus Word/Pages eingefügter Text bringt eigene Inline-Styles (font-family,
   font-size, font-weight, color) mit — der Fließtext sah dadurch je nach Absatz
   anders aus. TinyMCE filtert das beim Einfügen (be_tinyMCE.html5), hier die
   Absicherung für bereits gespeicherte Inhalte.
   Semantik (<strong>/<em>/Listen) bleibt bewusst erhalten.                     */
.rte,
.content-text,
.ce_text {
  /* Klassen-basierte Auszeichnungen aus dem Styles-Dropdown bleiben wirksam */
}
.rte span[style],
.content-text span[style],
.ce_text span[style],
.rte p[style],
.content-text p[style],
.ce_text p[style],
.rte div[style],
.content-text div[style],
.ce_text div[style],
.rte li[style],
.content-text li[style],
.ce_text li[style],
.rte font,
.content-text font,
.ce_text font {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  background: none !important;
  text-transform: inherit !important;
}
.rte span[class*="text-"][style],
.content-text span[class*="text-"][style],
.ce_text span[class*="text-"][style] {
  color: revert !important;
}
/* --- Karten & Buttons (Basis) ---------------------------------------------- */
.rs-card {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  border-radius: 10px;
}
.rs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 1.3;
  padding: 14px 32px;
  border: 2px solid #681d33;
  border-radius: 0;
  color: #681d33;
  text-decoration: none !important;
  transition: background 0.25s ease, color 0.25s ease;
}
.rs-btn:hover {
  background: #681d33;
  color: #fff;
}
/* Mehrzeiliger Plaintext — nur mit formatMultilineText(), NICHT nl2br() */
.rs-btn--solid {
  background: #681d33;
  color: #fff;
}
.rs-btn--solid:hover {
  background: #501627;
}
.rs-icon-arrow {
  display: inline-block;
  width: 1.1em;
  height: 0.55em;
  flex-shrink: 0;
  background: currentColor;
  mask: url('/files/contao_files/Bilder/-svg/right-arrow.svg') center / contain no-repeat;
  -webkit-mask: url('/files/contao_files/Bilder/-svg/right-arrow.svg') center / contain no-repeat;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* --- Scroll-Hint (Partial rs-scroll-hint.html5) ---------------------------- */
/* Asset scroll-down.svg: 23×229.5px — Linie 221px, Kreis 23px (2px Stroke #681d33) */
/* Label absolut oben an der Linie (nicht am Kreis) — Gap = Abstand Text↔Linie */
.rs-scroll-hint {
  display: flex;
  justify-content: center;
  padding: 3rem 0 4rem;
  color: #681d33;
}
.rs-scroll-hint__track {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.rs-scroll-hint__label {
  position: absolute;
  top: 0;
  right: 100%;
  margin: 0 8px 0 0;
  font-family: var(--inn-main-font);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #681d33;
  white-space: nowrap;
  /* sideways-lr = Lesrichtung unten→oben, ohne transform:rotate (Position bleibt top:0) */
  writing-mode: sideways-lr;
  transform: none;
}
.rs-scroll-hint__icon {
  display: block;
  width: 23px;
  height: auto;
}
.rs-scroll-hint--on-dark {
  color: #fff;
}
.rs-scroll-hint--on-dark .rs-scroll-hint__label {
  color: #fff;
}
.rs-scroll-hint--on-dark .rs-scroll-hint__icon {
  filter: brightness(0) invert(1);
}
/* --- Quote-Band (Partial rs-quote-band.html5) ------------------------------ */
/* XD: max-width 1040px zentriert, Text linksbündig, 30/45 + Autor 18 uppercase */
.rs-quote-band {
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  text-align: left;
  border: none;
  box-sizing: border-box;
  /* HRS-3: Schreibmaschinen-Effekt (rs-motion.js).
     __ghost haelt Hoehe + zugaenglichen Text, __typed liegt darueber. */
}
.rs-quote-band__inner {
  width: 100%;
}
.rs-quote-band__text {
  position: relative;
  font-family: var(--inn-main-font);
  font-size: 30px;
  line-height: 45px;
  font-weight: 400;
  font-style: italic;
  color: #4a4a49;
  margin: 0 0 1.25rem;
}
.rs-quote-band__ghost {
  opacity: 0;
}
.rs-quote-band__typed {
  position: absolute;
  inset: 0;
}
.rs-quote-band__typed.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  vertical-align: -0.08em;
  background: currentColor;
  animation: rs-caret-blink 0.9s steps(1) infinite;
}
.rs-quote-band__author {
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 24.3px;
  font-weight: 400;
  font-style: normal;
  /* <cite> ist browserseitig italic — Autor regular */
  color: #681d33;
  text-transform: uppercase;
  letter-spacing: 0;
}
/* --- Hotel-Karte (rsce_hotel_map) ------------------------------------------- */
/* XD §Riessersee: Marker 31px / Zahl 22px, Label 18px uppercase, Wasserzeichen Licorice 120px */
.v-hotel-map {
  /* Ecken-Anker: gewählte Box-Ecke sitzt im Marker-Mittelpunkt (50%/50%) */
  /* Mobile: Karte breiter als Viewport + eigene Scrollbar (XD) */
}
.v-hotel-map__stage {
  position: relative;
  width: 100%;
  line-height: 0;
}
.v-hotel-map__image {
  display: block;
  width: 100%;
  height: auto;
}
.v-hotel-map__watermark {
  /* Temporär aus: Text steckt bereits im Karten-SVG → sonst Doppelung */
  display: none;
  position: absolute;
  left: 48%;
  bottom: 10%;
  font-family: var(--inn-head-font);
  font-size: 120px;
  line-height: 81px;
  color: #878787;
  transform: rotate(-10deg);
  transform-origin: center center;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
.v-hotel-map__spot {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
}
.v-hotel-map__marker {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #681d33;
  color: #fff;
  cursor: pointer;
  font-family: var(--inn-main-font);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v-hotel-map__marker:hover,
.v-hotel-map__marker:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(104, 29, 51, 0.35);
  outline: none;
}
.v-hotel-map__label {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: max-content;
  min-width: 160px;
  max-width: 380px;
  min-height: 0;
  padding: 12px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  box-sizing: border-box;
}
.v-hotel-map__label-glass {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 8px 24px rgba(0, 0, 0, 0.1);
}
.v-hotel-map__label-text {
  position: relative;
  z-index: 1;
  font-family: var(--inn-main-font);
  font-size: 18px;
  /* HRS-4: Regular statt Light (Body-Default 300 wirkt im Hover zu dünn) */
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: #681d33;
  text-align: left;
  white-space: pre;
}
.v-hotel-map__spot--anchor-bottomleft .v-hotel-map__label {
  left: 50%;
  top: 50%;
  transform: translate(0, -100%);
}
.v-hotel-map__spot--anchor-topleft .v-hotel-map__label {
  left: 50%;
  top: 50%;
  transform: translate(0, 0);
}
.v-hotel-map__spot--anchor-bottomright .v-hotel-map__label {
  left: 50%;
  top: 50%;
  transform: translate(-100%, -100%);
}
.v-hotel-map__spot--anchor-topright .v-hotel-map__label {
  left: 50%;
  top: 50%;
  transform: translate(-100%, 0);
}
.v-hotel-map__spot:hover .v-hotel-map__label,
.v-hotel-map__spot:focus-within .v-hotel-map__label {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.v-hotel-map--labels-show_all .v-hotel-map__label {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.v-hotel-map__scroll-wrap {
  width: 100%;
}
.v-hotel-map__scrollbar {
  display: none;
  margin-top: 1.5rem;
}
.v-hotel-map__scrolltrack {
  position: relative;
  height: 23px;
  margin-bottom: 0.85rem;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.v-hotel-map__scrollline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #681d33;
  pointer-events: none;
}
.v-hotel-map__scrollthumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 23px;
  height: 23px;
  margin: 0;
  margin-top: -11.5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #681d33;
  cursor: grab;
  z-index: 2;
  will-change: transform;
}
.v-hotel-map__scrollthumb:active,
.v-hotel-map__scrollthumb.is-dragging {
  cursor: grabbing;
}
.v-hotel-map__scrollthumb:focus-visible {
  outline: 2px solid #681d33;
  outline-offset: 3px;
}
.v-hotel-map__scrollhint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-family: var(--inn-main-font);
  font-size: 14px;
  line-height: 18.9px;
  color: #7F8883;
}
.v-hotel-map__scrollhint-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid #681d33;
  border-radius: 50%;
  font-family: var(--inn-main-font);
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  color: #681d33;
}
@media (max-width: 991px) {
  .v-hotel-map__scroll-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .v-hotel-map__scroll-wrap::-webkit-scrollbar {
    display: none;
  }
  .v-hotel-map__stage {
    width: 170%;
    min-width: 170%;
  }
  .v-hotel-map__scrollbar {
    display: block;
  }
  .v-hotel-map__scrollbar[hidden] {
    display: none;
  }
  .v-hotel-map__watermark {
    font-size: 72px;
    line-height: 1;
  }
}
/* --- Riessersee-Sektion (Startseite) --------------------------------------- */
.a-riessersee {
  padding: 3rem 20px 4.5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
}
.a-riessersee .v-headline {
  margin-bottom: 1.75rem;
  max-width: none;
  overflow: visible;
}
.a-riessersee .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
.a-riessersee .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
  overflow: visible;
}
.a-riessersee .v-riessersee-body {
  position: relative;
}
.a-riessersee .v-riessersee-intro {
  margin-top: 2.5rem;
  max-width: 630px;
}
@media (min-width: 992px) {
  .a-riessersee .v-riessersee-intro {
    margin-left: auto;
    margin-right: 0;
  }
}
.a-riessersee .v-riessersee-intro .v-headline {
  margin-bottom: 1rem;
}
.a-riessersee .v-riessersee-intro .v-headline-type-h3 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 400;
  color: #681d33;
  margin: 0;
  overflow: visible;
}
.a-riessersee .v-riessersee-intro .content-text,
.a-riessersee .v-riessersee-intro p {
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #4a4a49;
  max-width: 630px;
  margin: 0 0 1rem;
}
.a-riessersee .v-riessersee-intro .v-button {
  margin-top: 1.25rem;
}
/* --- Gestaffeltes 3-Spalten-Grid (global, z. B. Jetzt entdecken) -------------- */
/* XD: Mittlere Karte oben, linke + rechte versetzt nach unten */
.v-stagger-3col > :nth-child(1) {
  margin-top: 154px;
}
.v-stagger-3col > :nth-child(2) {
  margin-top: 0;
}
.v-stagger-3col > :nth-child(3) {
  margin-top: 224px;
}
@media (max-width: 991px) {
  .v-stagger-3col > * {
    margin-top: 0 !important;
  }
}
/* Berg-Badge auf Artikel-Ebene (cssClass: has-rs-berg-badge am mod_article) */
.mod_article.has-rs-berg-badge,
.mod_article_container.has-rs-berg-badge {
  position: relative;
  overflow: visible;
  padding-top: 3.5rem;
}
.rs-berg-badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}
.rs-berg-badge__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #681d33;
  border: 4px solid #fff;
  box-shadow: 0 8px 28px rgba(104, 29, 51, 0.22);
}
.rs-berg-badge__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.rs-berg-badge__icon {
  display: block;
  width: 58%;
  max-width: 52px;
  height: auto;
}
.bg-mauve {
  background-color: #c2a4ad;
}
/* --- Unsere Angebote (rsce_offers_teaser) ----------------------------------- */
.mod_article.a-angebote,
.mod_article_container.a-angebote {
  position: relative;
  overflow-x: visible;
  overflow-y: visible;
  z-index: 0;
}
.mod_article.a-angebote::before,
.mod_article_container.a-angebote::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: rgba(194, 164, 173, 0.1);
  pointer-events: none;
}
/* HRS-8: Auf der Startseite folgt auf die Angebote das Outdoor-Zwischenbild —
   ein PNG-Freisteller mit durchsichtiger Oberkante. Ohne Gegenmaßnahme scheint
   dort der weiße Seitenhintergrund durch und es entsteht ein weißer Balken.
   Der Sektions-Hintergrund wird deshalb nach unten verlängert und liegt HINTER
   dem Bild — das Bild selbst bleibt unbeschnitten und voll sichtbar.

   Maß (im Browser am gerenderten Bild gemessen, nicht geschätzt):
   die oberen 14,2 % der Bildhöhe sind durchsichtig (Alpha < 128 bis Zeile 97,
   ab Zeile 98 deckend). Bei einem Seitenverhältnis von 3858:1804 entspricht das
   14,2 % / 2,139 = 6,65vw. Mit Reserve → 7.5vw; ein Zuviel ist folgenlos, weil
   die Fläche hinter den deckenden Bildbereich läuft.

   Bewusst nur hier (#s-angebote) — .a-angebote wird auch auf /zimmer genutzt. */
@media (min-width: 992px) {
  .mod_article.a-angebote#s-angebote::before,
  .mod_article_container.a-angebote#s-angebote::before {
    bottom: -7.5vw;
  }
}
.a-angebote {
  position: relative;
  padding: 3.5rem 20px 5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
  /* HRS-7 / XD: Headline, Intro und Button starten bündig mit dem Slider,
     also um Icon-Rail (220px) + Gap (40px) eingerückt. */
}
.a-angebote .v-offers-teaser__body--rail-left {
  overflow: visible;
}
.a-angebote .ce_rsce_offers_teaser.block {
  overflow: visible;
}
.a-angebote .v-headline {
  margin-bottom: clamp(4rem, 6vw, 6rem);
  max-width: 752px;
}
.a-angebote .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
.a-angebote .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
}
@media (min-width: 992px) {
  .a-angebote .v-headline,
  .a-angebote .v-offers-teaser__intro,
  .a-angebote .v-offers-teaser__cta {
    margin-left: 260px;
  }
}
.v-offers-teaser {
  position: relative;
  /* Contao .block + Swiper default = overflow:hidden — hier Breakout nach rechts */
}
.v-offers-teaser.block {
  overflow: visible;
}
.v-offers-teaser__body,
.v-offers-teaser__slider {
  overflow: visible;
}
.v-offers-teaser__swiper,
.v-offers-teaser .swiper-container {
  overflow: visible;
}
.v-offers-teaser__intro {
  max-width: 752px;
  margin: 0;
  font-family: var(--inn-main-font);
  font-size: 18px;
  font-weight: 400;
  color: #4a4a49;
  line-height: 23px;
}
.v-offers-teaser__cta {
  max-width: 752px;
  margin-top: 50px;
  margin-bottom: 100px;
}
.v-offers-teaser__body {
  display: grid;
  gap: 2.5rem;
  align-items: stretch;
}
.v-offers-teaser__body--rail-left {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2.5rem;
}
.v-offers-teaser__body--rail-left .v-offers-teaser__icons {
  flex: 0 0 220px;
  max-width: 220px;
  position: relative;
  z-index: 5;
  align-self: stretch;
}
.v-offers-teaser__body--rail-left .v-offers-teaser__slider {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  box-sizing: border-box;
}
.v-offers-teaser__body--icons-top {
  grid-template-columns: 1fr;
  /* HRS-73: Entwurf (Angebote, 1920) — die drei Eintraege stehen
         linksbuendig bei x=523 / 851 / 1180, Abstand 328px. Das ist dieselbe
         Konstruktion wie hier: 220px breite Eintraege, Block mittig (Mitte
         960) — nur mit 108px statt 48px Zwischenraum und links ausgerichtetem
         Inhalt. Ergibt 522 / 850 / 1178.
         Die Variante kommt nur auf der Angebote-Seite vor (32 Seiten geprueft);
         Startseite und Zimmer nutzen die Leisten-Variante. */
}
.v-offers-teaser__body--icons-top .v-offers-teaser__icons {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem clamp(3rem, 5.625vw, 108px);
  padding-top: 0;
  min-height: 0;
  height: auto;
}
.v-offers-teaser__body--icons-top .v-offers-teaser__icon-item {
  align-items: flex-start;
  text-align: left;
  flex: 0 1 220px;
}
.v-offers-teaser__icons {
  list-style: none;
  margin: 0;
  padding: 28px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 444px;
  height: 100%;
  box-sizing: border-box;
}
.v-offers-teaser__icon-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.v-offers-teaser__icon-art {
  display: block;
  width: 30px;
  height: auto;
}
.v-offers-teaser__icon-text {
  font-family: var(--inn-main-font);
  font-size: 18px;
  font-weight: 400;
  color: #681d33;
  line-height: 22px;
}
.v-offers-teaser__swiper {
  position: relative;
  min-width: 0;
  width: 100%;
  overflow: visible;
  /* HRS-69: Der Zuschnitt verbirgt die Loop-Klone links. Er lag aber oben,
       unten und links buendig auf 0 und schnitt damit den Kartenschatten der
       sichtbaren Karten gleich mit weg — die Karten wirkten flach, der Schatten
       war vorhanden, aber unsichtbar.

       Gemessen am 22.09.2026: Schatten `0 4px 10px`, reicht 9px nach unten,
       1px nach oben, 5px zur Seite. Der Abstand zwischen letztem Klon und
       erster Karte betraegt 30px, der Klonschatten endet 5px hinter dessen
       Kante — links lassen sich also bis zu 25px freigeben, ohne dass ein Klon
       sichtbar wird. 8px genuegen und lassen 17px Sicherheitsabstand. */
  clip-path: inset(-8px -100vw -14px -8px);
}
.v-offers-teaser__swiper .swiper-slide {
  width: 440px;
  max-width: calc(100vw - 40px);
  height: auto;
  box-sizing: border-box;
}
.v-offers-teaser__slider {
  --inn-swiper-nav-gap: 48px;
}
@media (max-width: 991px) {
  .v-offers-teaser__body--rail-left {
    flex-direction: column;
  }
  .v-offers-teaser__body--rail-left .v-offers-teaser__icons {
    flex: 1 1 auto;
    max-width: none;
  }
  .v-offers-teaser__body--rail-left .v-offers-teaser__slider {
    flex: 1 1 auto;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
  }
  .v-offers-teaser__swiper {
    clip-path: none;
  }
  .v-offers-teaser__swiper .swiper-slide {
    width: 100%;
    max-width: none;
  }
  .v-offers-teaser__icons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    padding-top: 0;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
  }
  .v-offers-teaser__icon-item {
    flex: 1 1 140px;
  }
}
.v-offer-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: none;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  overflow: visible;
  /* 50 % Bild / 50 % Body — wie Blog-Cards */
}
.v-offer-card__media {
  position: relative;
  z-index: 1;
  /* Datums-Badge über dem weißen Body */
  width: 100%;
  aspect-ratio: 440 / 235;
  flex-shrink: 0;
  overflow: visible;
  /* Datums-Badge 50 % nach unten sichtbar */
  background: #efddce;
}
.v-offer-card__image {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.v-offer-card__image picture,
.v-offer-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-offer-card__badge {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  max-width: 105px;
}
.v-offer-card__badge img {
  display: block;
  width: 100%;
  height: auto;
}
.v-offer-card__date {
  position: absolute;
  left: 1.75rem;
  bottom: 0;
  z-index: 2;
  transform: translateY(50%);
  background: #4a4a49;
  color: #fff;
  padding: 0.65rem 1rem;
  min-height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.v-offer-card__date-text {
  font-family: var(--inn-main-font);
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}
.v-offer-card__body {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Platz für die überlappende Datumsbox (~27px) + Abstand zum Titel */
  padding: 2.75rem 1.75rem 1.75rem;
}
.v-offer-card__title {
  margin: 0 0 1rem;
  padding: 0;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 35px;
  font-weight: 400;
  color: #4a4a49;
  white-space: pre-line;
}
.v-offer-card__teaser {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  line-height: 23px;
}
.v-offer-card__button {
  margin-top: auto;
  padding-top: 0.5rem;
}
.rs-list-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rs-list-bullets li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.85rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  /* wie der uebrige Fliesstext: 18px/23px (Entwurf) */
  line-height: 1.27777778;
}
.rs-list-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #681d33;
}
/* Detail-URL /angebote/{alias}: Listing-Sektionen ausblenden */
body:has(.v-offer-detail) .mod_article.hide-on-autoitem {
  display: none !important;
}
/* Globale H2/H3: Lato (überschreibt tiny.less body h1–h6 → @headfont).
   Licorice nur auf Trenner-Titeln (.v-trenner__title--script) und Hero-Script. */
body h2,
.v-headline-type-h2 .v-headline-text,
.v-headline.v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
body h3 {
  font-family: var(--inn-main-font);
  color: #681d33;
}
/* Section-Headlines: Größen aus Design-Config / Root (tl_inn_design_config).
   XD: H2 Desktop 65 · Mobile 45 (iPhone „Massagen & Kosmetik“, „Auf einen Blick“…).
   Mobile !important schlägt die vielen section-spezifischen font-size:65px. */
.v-headline-type-h1 .v-headline-text,
.v-headline.v-headline-type-h1 .v-headline-text {
  font-size: var(--inn-h1-font-size);
}
.v-headline-type-h2 .v-headline-text,
.v-headline.v-headline-type-h2 .v-headline-text {
  font-size: var(--inn-h2-font-size);
}
.v-headline-type-h3 .v-headline-text,
.v-headline.v-headline-type-h3 .v-headline-text {
  font-size: var(--inn-h3-font-size);
}
.v-headline-type-h4 .v-headline-text,
.v-headline.v-headline-type-h4 .v-headline-text {
  font-size: var(--inn-h4-font-size);
}
@media only screen and (max-width: 767px) {
  .v-headline-type-h1 .v-headline-text,
  .v-headline.v-headline-type-h1 .v-headline-text,
  body .v-headline-type-h1 .v-headline-text {
    font-size: var(--inn-h1-font-size-mobile) !important;
  }
  .v-headline-type-h2 .v-headline-text,
  .v-headline.v-headline-type-h2 .v-headline-text,
  body .v-headline-type-h2 .v-headline-text,
  body h2.v-headline-text {
    font-size: var(--inn-h2-font-size-mobile) !important;
  }
  .v-headline-type-h3 .v-headline-text,
  .v-headline.v-headline-type-h3 .v-headline-text,
  body .v-headline-type-h3 .v-headline-text {
    font-size: var(--inn-h3-font-size-mobile) !important;
  }
  /* `!important` am 05.10.2026 entfernt (nur im H4-Zweig). Es erschlug die
     seitenspezifischen H4-Regeln von „Regionale Erlebnisse", die mit 28px den
     Entwurf treffen (display-16: iphone-14-pro-30 y1092 „Sehenswürdigkeiten",
     y2672 „Aktiv in den Bergen", y6917 „Badeseen in der Umgebung").
     Desktop stimmte dort, mobil nicht — dieselbe Regel, nur unten wirkungslos.
     Geprüft: Mobil setzt ausser `.a-regionale-*` niemand eine H4-Grösse, es
     leckt also nichts vom Desktop herunter. H1/H2/H3 behalten ihr
     `!important` — dort begründet es der Kommentar oben. */
  .v-headline-type-h4 .v-headline-text,
  .v-headline.v-headline-type-h4 .v-headline-text,
  body .v-headline-type-h4 .v-headline-text {
    font-size: var(--inn-h4-font-size-mobile);
  }
}
.v-offer-detail {
  background: #fff;
  /*
   * HRS-169: Die Linie lief ueber die ganze Fensterbreite. Bestellt ist der
   * Blog-Zustand — „Linie nur innerhalb vom Container". Die Werte sind
   * deshalb dieselben wie bei `.v-news-detail__rule` (Entwurf: 1300x2 auf
   * Containerbreite; der Container misst 1340 inklusive Innenabstand).
   *
   * Die senkrechte Lage bleibt bewusst unveraendert. Der Blog setzt dort
   * 101px Abstand zum Bild — fuer das Angebot gibt es dafuer keine
   * Bestellung, und eine ungefragte Verschiebung waere eine zweite
   * Aenderung in einem Ticket, das nur die Breite beanstandet.
   */
  /* H1 für SEO, Optik = H2 (projektweite H2-Scale) */
}
.v-offer-detail__hero {
  width: 100%;
  max-width: none;
  margin: 150px auto 3rem;
  /* Abstand oben + guter Abstand zur Linie */
  max-height: 600px;
  overflow: hidden;
  box-sizing: border-box;
}
.v-offer-detail__hero picture,
.v-offer-detail__hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
}
.v-offer-detail__rule {
  width: calc(100% - 40px);
  max-width: calc(var(--inn-container-width) - 40px);
  height: 2px;
  margin: 0 auto;
  background: #681d33;
  box-sizing: border-box;
}
.v-offer-detail__rule--footer {
  margin-bottom: 2rem;
}
.v-offer-detail__inner {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}
.v-offer-detail__header {
  margin-bottom: 2rem;
}
.v-offer-detail__headline {
  margin: 0;
  max-width: none;
}
.v-offer-detail__headline .v-headline-subtext {
  font-family: var(--inn-main-font);
  color: rgba(74, 74, 73, 0.55);
  text-transform: uppercase;
  letter-spacing: normal;
  margin-bottom: 0.75rem;
}
.v-offer-detail__headline .v-headline-type-h2 .v-headline-text,
.v-offer-detail__headline.v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
  margin: 0;
  white-space: pre-line;
}
.v-offer-detail__body {
  margin-bottom: 0;
  /* Semantisch H2 (unter Seiten-H1), Optik = H3 */
}
.v-offer-detail__body .row.ce_rowStart {
  align-items: start;
  column-gap: clamp(24px, 4vw, 48px);
  row-gap: 1.5rem;
}
.v-offer-detail__body .ce_text,
.v-offer-detail__body .content-text,
.v-offer-detail__body .v-offer-detail__intro {
  font-family: var(--inn-main-font);
  color: #4a4a49;
  line-height: 23px;
}
.v-offer-detail__body h2,
.v-offer-detail__body .v-offer-detail__benefits-title {
  margin: 0 0 1.25rem;
  font-family: var(--inn-main-font) !important;
  color: #681d33;
  font-size: var(--inn-h3-font-size) !important;
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .v-offer-detail__body h2,
  .v-offer-detail__body .v-offer-detail__benefits-title {
    font-size: var(--inn-h3-font-size-mobile) !important;
  }
}
.v-offer-detail__body .rs-list-bullets {
  margin-top: 0.5rem;
}
.v-offer-detail__body .v-button {
  margin-top: 1.5rem;
}
@media (max-width: 991px) {
  .v-offer-detail__body .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
}
.v-offer-detail__validity {
  margin: 0 0 1.5rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  line-height: 23px;
}
.v-offer-detail__cta {
  margin-top: 1.5rem;
}
.v-offer-detail__contact {
  background: transparent;
  padding: 0 20px;
  box-sizing: border-box;
}
.v-offer-detail__contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  padding: 2.5rem clamp(1.5rem, 3vw, 2.75rem);
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  box-sizing: border-box;
}
.v-offer-detail__contact-title {
  margin: 0 0 0.75rem;
  font-family: var(--inn-main-font) !important;
  color: #681d33;
  font-size: var(--inn-h3-font-size) !important;
  /* 28px — H3-Optik, semantisch H2 */
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .v-offer-detail__contact-title {
    font-size: var(--inn-h3-font-size-mobile) !important;
  }
}
.v-offer-detail__contact-text {
  margin: 0;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  line-height: 23px;
  max-width: 520px;
}
.v-offer-detail__contact-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.v-offer-detail__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: #4a4a49;
}
.v-offer-detail__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #681d33;
  flex-shrink: 0;
}
.v-offer-detail__contact-icon img {
  display: block;
  width: 22px;
  height: auto;
}
.v-offer-detail__contact-label {
  font-family: var(--inn-main-font);
  color: #4a4a49;
  line-height: 23px;
}
.v-offer-detail__footer {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}
.v-offer-detail__back {
  margin-top: 0;
}
@media (max-width: 991px) {
  .v-offer-detail__headline.v-headline-type-h2 .v-headline-text {
    font-size: 40px;
  }
  .v-offer-detail__hero {
    margin-top: 80px;
  }
  .v-offer-detail__contact-inner {
    grid-template-columns: 1fr;
  }
}
.v-offers-list.block {
  overflow: visible;
}
.v-offers-list__grid {
  display: grid;
  gap: 2rem;
  align-items: stretch;
}
.v-offers-list__grid--cols-1 {
  grid-template-columns: 1fr;
}
.v-offers-list__grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v-offers-list__grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.v-offers-list__grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.v-offers-list__pagination {
  margin-top: 2.5rem;
}
.v-offers-list__empty {
  font-family: var(--inn-main-font);
  color: #4a4a49;
  line-height: 23px;
  text-align: center;
}
@media (max-width: 991px) {
  .v-offers-list__grid--cols-2,
  .v-offers-list__grid--cols-3,
  .v-offers-list__grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-offers-list__grid--cols-2,
  .v-offers-list__grid--cols-3,
  .v-offers-list__grid--cols-4 {
    grid-template-columns: 1fr;
  }
}
/* --- Trenner (rsce_trenner) — global, Overrides via RSCE-cssClass / .a-trenner / #s-* */
/* XD Mobile-Panel Outdoor-Trenner */
/* Hoehe des mobilen Trennerbands. Stand bis 15.10.2026 auf 1198px — das war
   die Summe aus Panel- und Medienhoehe des *geteilten* Aufbaus und damit fuer
   den Overlay-Aufbau falsch. Entwurfswert: 825px. Siehe Kommentar bei
   `&--mobile-overlay`. */
.a-trenner {
  padding: 0 !important;
  overflow: visible;
  background: transparent;
  max-width: none !important;
  width: 100%;
}
.a-trenner-inset {
  padding: 0 !important;
  overflow: visible;
  background: transparent;
  max-width: none !important;
  width: 100%;
}
/* Weißer Rahmen um den Inset-Trenner — XD: 35px links/rechts/unten (HRS-9/14).
   Nur im Desktop-Layout; mobil bleibt der gestapelte Split-Aufbau unberührt. */
.mod_article.a-trenner-inset,
.mod_article_container.a-trenner-inset {
  background: #fff;
}
@media (min-width: 992px) {
  .mod_article.a-trenner-inset,
  .mod_article_container.a-trenner-inset {
    padding-left: clamp(12px, 1.82vw, 35px) !important;
    padding-right: clamp(12px, 1.82vw, 35px) !important;
    padding-bottom: clamp(12px, 1.82vw, 35px) !important;
  }
}
.a-trenner-impressionen .v-trenner__title {
  font-size: 120px;
  line-height: 108px;
  margin-bottom: 28px;
}
@media (max-width: 991px) {
  .a-trenner-impressionen {
    /* Impressionen mobil: Text auf Bild (Overlay), auch wenn RSCE noch „split“ hat */
  }
  .a-trenner-impressionen .v-trenner__title {
    font-size: 70px;
    line-height: 1.04;
    margin-bottom: 24px;
  }
  .a-trenner-impressionen .v-trenner {
    position: relative;
    flex-direction: column;
    min-height: 860px;
    height: auto;
    overflow: hidden;
  }
  .a-trenner-impressionen .v-trenner .v-trenner__inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 860px;
    align-items: flex-start;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background: transparent;
  }
  .a-trenner-impressionen .v-trenner .v-trenner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    flex: none;
    height: 100%;
  }
  .a-trenner-impressionen .v-trenner .v-trenner__bg--mobile {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .a-trenner-impressionen .v-trenner .v-trenner__bg--mobile img {
    object-position: center 32%;
  }
}
.mod_article.a-trenner,
.mod_article_container.a-trenner {
  max-width: none;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.mod_article.a-trenner-inset,
.mod_article_container.a-trenner-inset {
  max-width: none;
  width: 100%;
}
.v-trenner {
  position: relative;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Textfarben (global) */
  /* HRS-137: `.v-trenner__text` stand hier frueher mit drin und faerbte den
     Fliesstext mit ein. Die Designerin hat das am Trenner „Alpine Beauty Spa"
     beanstandet: „Fliesstext bitte nicht rot sondern grau (#4A4A49)" —
     Augenbraue und Titel sollen bordeaux bleiben.
     Geprueft: Auf allen 16 Hotelseiten gibt es genau einen Trenner mit
     Fliesstext in dieser Option; alle uebrigen laufen auf `--text-white`.
     Die Aenderung trifft also nur die beanstandete Stelle. */
  /* Inset-Breite: 20px Seitenabstand via .inside */
  /* Licorice-Titel (z. B. Sommerurlaub) */
  /* Typ-Presets (Farben + Buttons — ergänzt Einzelfelder) */
  /* Desktop Bild-Fit */
  /* Mobile Panel-Hintergründe (Split-Layout) */
  /* HRS-88: optionale Glasflaeche + Logo (Feld „Unscharfe Flaeche links“ /
     „Logo oben rechts“). Entwurf Gruppen-Trenner: Glas 1101/1920 breit,
     backdrop blur(30px) brightness(1.15), Toenung #4a4a49; Logo 412x133,
     80px unter der Oberkante, 210px vom rechten Rand. Mobil: Glas volle Breite. */
  /* Mobil (Entwurf): Glas nur hinter dem Textblock, darunter bleibt das
     Foto sichtbar */
  /* Desktop: Bild + Text im selben Grid — vertikal zentriert */
}
.v-trenner__media {
  pointer-events: none;
}
.v-trenner__bg picture,
.v-trenner__bg img {
  display: block;
  width: 100%;
  height: 100%;
}
.v-trenner__bg--mobile {
  display: none;
}
.v-trenner__inner {
  box-sizing: border-box;
  width: 100%;
}
.v-trenner__inner.inside {
  box-sizing: border-box;
  width: 100%;
}
.v-trenner__content {
  max-width: 630px;
}
.v-trenner__eyebrow {
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: normal;
  font-size: 14px;
  line-height: 18.9px;
}
.v-trenner__title {
  margin: 0 0 38px;
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  white-space: pre-line;
}
.v-trenner__text {
  margin-bottom: 49px;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  white-space: pre-line;
}
.v-trenner__cta {
  margin-top: 0;
}
.v-trenner__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: center;
  margin-top: 0;
}
.v-trenner__contacts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
}
.v-trenner__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}
.v-trenner__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #681d33;
}
.v-trenner__contact-icon img {
  display: block;
  width: 24px;
  height: auto;
}
.v-trenner__contact-label {
  font-family: var(--inn-main-font);
  line-height: 23px;
}
.v-trenner--text-white .v-trenner__eyebrow,
.v-trenner--text-white .v-trenner__title,
.v-trenner--text-white .v-trenner__text,
.v-trenner--text-white .v-trenner__contact-link,
.v-trenner--text-white .v-trenner__contact-label {
  color: #fff;
}
.v-trenner--text-primary .v-trenner__eyebrow,
.v-trenner--text-primary .v-trenner__title,
.v-trenner--text-primary .v-trenner__contact-link,
.v-trenner--text-primary .v-trenner__contact-label {
  color: #681d33;
}
.v-trenner--text-primary .v-trenner__text {
  color: #4a4a49;
}
.v-trenner--width-inset {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.v-trenner--width-inset .v-trenner__eyebrow {
  font-size: 18px;
  line-height: 18.9px;
  /* XD Sommer-Trenner: kein Tracking, etwas kräftiger als Default-Eyebrow */
  letter-spacing: 0;
  font-weight: 600;
}
@media (min-width: 992px) {
  .v-trenner--width-inset {
    min-height: 880px;
    grid-template-rows: minmax(880px, auto);
  }
  .v-trenner--width-inset .v-trenner__media {
    min-height: 880px;
  }
}
.v-trenner--title-script .v-trenner__title {
  font-family: var(--inn-head-font);
  font-size: 120px;
  line-height: 108px;
  font-weight: 400;
  margin-bottom: 28px;
}
.v-trenner--text-neutral .v-trenner__eyebrow,
.v-trenner--text-neutral .v-trenner__title,
.v-trenner--text-neutral .v-trenner__text,
.v-trenner--text-neutral .v-trenner__contact-link,
.v-trenner--text-neutral .v-trenner__contact-label {
  color: #4a4a49;
}
.v-trenner--type-full-white .v-trenner__eyebrow,
.v-trenner--type-full-white .v-trenner__title,
.v-trenner--type-full-white .v-trenner__text,
.v-trenner--type-full-white .v-trenner__contact-link,
.v-trenner--type-full-white .v-trenner__contact-label {
  color: #fff;
}
.v-trenner--type-full-white .v-trenner__cta-row .v-button.v-outline-white a {
  border-color: #fff;
  color: #fff;
}
.v-trenner--type-full-white .v-trenner__cta-row .v-button.v-primary a {
  background: #fff;
  color: #681d33;
}
.v-trenner--type-inset-script .v-trenner__eyebrow,
.v-trenner--type-inset-script .v-trenner__title,
.v-trenner--type-inset-script .v-trenner__text,
.v-trenner--type-inset-script .v-trenner__contact-link,
.v-trenner--type-inset-script .v-trenner__contact-label {
  color: #681d33;
}
.v-trenner--type-inset-script .v-trenner__title {
  font-family: var(--inn-head-font);
  font-size: 120px;
  line-height: 108px;
  font-weight: 400;
  margin-bottom: 28px;
}
.v-trenner--type-inset-script .v-trenner__cta-row .v-button.v-outline a {
  border-color: #681d33;
  color: #681d33;
}
.v-trenner--type-cta-primary .v-trenner__eyebrow,
.v-trenner--type-cta-primary .v-trenner__title,
.v-trenner--type-cta-primary .v-trenner__text,
.v-trenner--type-cta-primary .v-trenner__contact-link,
.v-trenner--type-cta-primary .v-trenner__contact-label {
  color: #681d33;
}
.v-trenner--type-cta-primary .v-trenner__title {
  font-family: var(--inn-head-font);
  font-size: clamp(72px, 10vw, 120px);
  line-height: 1;
  font-weight: 400;
  margin-bottom: 28px;
}
.v-trenner--type-cta-primary .v-trenner__cta-row .v-button.v-primary a {
  background: #681d33;
  color: #fff;
}
.v-trenner--type-cta-primary .v-trenner__cta-row .v-button.v-outline a {
  border-color: #681d33;
  color: #681d33;
}
@media (max-width: 991px) {
  .v-trenner--type-inset-script .v-trenner__title,
  .v-trenner--type-cta-primary .v-trenner__title {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 20px;
  }
}
.v-trenner--bg-contain .v-trenner__bg--desktop img {
  object-fit: contain;
  object-position: center center;
}
.v-trenner--bg-cover .v-trenner__bg--desktop img {
  object-fit: cover;
  object-position: center center;
}
.v-trenner--mobile-panel-sky {
  --v-trenner-panel-bg: #8eb0ca;
}
.v-trenner--mobile-panel-deep {
  --v-trenner-panel-bg: #286294;
}
.v-trenner--mobile-panel-primary {
  --v-trenner-panel-bg: #681d33;
}
.v-trenner--mobile-panel-neutral {
  --v-trenner-panel-bg: #4a4a49;
}
.v-trenner--mobile-panel-white {
  --v-trenner-panel-bg: #fff;
}
.v-trenner--mobile-panel-beige {
  --v-trenner-panel-bg: #efddce;
}
.v-trenner--mobile-panel-mauve {
  --v-trenner-panel-bg: #c2a4ad;
}
.v-trenner__glass {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 57.34%;
  z-index: 1;
  background: rgba(74, 74, 73, 0.3);
  backdrop-filter: blur(30px) brightness(1.15);
  -webkit-backdrop-filter: blur(30px) brightness(1.15);
  pointer-events: none;
}
.v-trenner__logo {
  position: absolute;
  top: clamp(24px, 4.17vw, 80px);
  right: 10.94%;
  z-index: 3;
  width: clamp(160px, 21.46vw, 412px);
  pointer-events: none;
}
.v-trenner__logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 991px) {
  .v-trenner {
    /* .v-trenner.v-trenner--glass: Artikelklassen wie .a-trenner-cta setzen
       width/max-width am Textblock mit gleicher Spezifitaet, stehen spaeter */
  }
  .v-trenner__glass {
    display: none;
  }
  .v-trenner.v-trenner--glass .v-trenner__content {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding: 32px 20px;
    background: rgba(74, 74, 73, 0.3);
    backdrop-filter: blur(30px) brightness(1.15);
    -webkit-backdrop-filter: blur(30px) brightness(1.15);
  }
  .v-trenner__logo {
    top: 16px;
    right: 20px;
    width: 150px;
  }
}
@media (min-width: 992px) {
  .v-trenner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(clamp(480px, 42vw, 722px), auto);
    min-height: clamp(480px, 42vw, 722px);
    background: transparent;
    /* HRS-65: Beim vollbreiten Trenner ist das Band nicht fest hoch, sondern
       folgt dem Seitenverhaeltnis des Hintergrundbilds (3858/1804). Bei 2200px
       Fensterbreite sind das 1029px statt der 722px aus dem Entwurf. Ein fester
       Abstand von oben schrumpft dadurch von 19,5% auf 13,6% der Bandhoehe —
       der Text wandert sichtbar nach oben, je breiter der Bildschirm wird.

       Der Entwurf verteilt den freien Raum 140,5px oben zu 293,3px unten, also
       0,324 zu 0,676. Als Flex-Verhaeltnis gilt diese Aufteilung bei jeder
       Bandhoehe — das ist das "relativ zentriert wie im Design" aus dem Ticket.

       Die Inset-Trenner bleiben bewusst unberuehrt: Dort ist die obere
       Ausrichtung ausdruecklich bestellt (HRS-9/HRS-14: "Headline immer im
       oberen linken Bereich"), und ihr Band ist mit 880px fest — dort tritt das
       Problem gar nicht auf. */
  }
  .v-trenner__media {
    grid-area: 1 / 1;
    position: relative;
    z-index: 0;
    min-height: clamp(480px, 42vw, 722px);
  }
  .v-trenner__bg {
    position: absolute;
    inset: 0;
  }
  .v-trenner__bg--desktop {
    display: block;
  }
  .v-trenner__inner {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    align-self: center;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }
  .v-trenner--valign-top .v-trenner__inner {
    align-self: start;
    /* .inside liefert `margin: auto` — Auto-Margins schlagen align-self im
           Grid und zentrierten den Block vertikal (HRS-9/HRS-14). */
    margin-top: 0;
    margin-bottom: auto;
    padding-top: var(--v-trenner-offset-top, 130px);
    align-items: flex-start;
  }
  .v-trenner--valign-top.v-trenner--width-full .v-trenner__inner {
    align-self: stretch;
    margin-bottom: 0;
    padding-top: 0;
    flex-direction: column;
  }
  .v-trenner--valign-top.v-trenner--width-full .v-trenner__inner::before {
    content: "";
    flex: 0.324 1 0;
  }
  .v-trenner--valign-top.v-trenner--width-full .v-trenner__inner::after {
    content: "";
    flex: 0.676 1 0;
  }
}
@media (max-width: 991px) {
  .v-trenner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /*
     * HRS-188/191/203/206/218/223/239/242/243 — „Trenner zu hoch, Flaeche
     * falsch platziert".
     *
     * Neun Meldungen auf neun Seiten, eine Ursache: Hier stand die Hoehe fest
     * auf 1198px. Das ist rechnerisch
     * `@rs-trenner-mobile-panel-height (528) + @rs-trenner-mobile-media-height
     * (670)` — also die Gesamthoehe des **geteilten** Aufbaus, angewendet auf
     * den **Overlay**-Aufbau, bei dem das Bild ohnehin schon die ganze Hoehe
     * fuellt. Bezeichnend: Die 528er-Variable wird im gesamten Stylesheet
     * sonst nirgends benutzt.
     *
     * Der Entwurf zeigt 825px. Gemessen waren alle zehn Overlay-Trenner exakt
     * 1198px hoch, der Text begann 273 bis 605px unterhalb der Oberkante —
     * weil `align-items: center` ihn in ein 373px zu hohes Band mittig setzt.
     * Beides zusammen ergibt genau die zwei Beanstandungen.
     *
     * `height: auto` statt fester Hoehe, damit ein laengerer Text das Band
     * wachsen laesst statt herauszulaufen. Die eingerueckte Variante direkt
     * darunter macht es seit jeher so.
     */
  }
  .v-trenner__media {
    position: static;
  }
  .v-trenner__inner {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
  }
  .v-trenner__title {
    font-size: 42px;
    margin-bottom: 24px;
  }
  .v-trenner__text {
    margin-bottom: 32px;
  }
  .v-trenner__bg--desktop {
    display: none;
  }
  .v-trenner__bg--mobile {
    display: block;
    position: relative;
    height: 100%;
  }
  .v-trenner__bg--mobile img {
    object-fit: cover;
    object-position: center center;
  }
  .v-trenner--mobile-split {
    /* DOM: Media zuerst — optisch Text-Panel oben, Bild darunter (XD) */
    flex-direction: column-reverse;
    height: auto;
    min-height: 0;
  }
  .v-trenner--mobile-split .v-trenner__inner {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    padding-top: 2rem;
    padding-bottom: 0;
    background-color: var(--v-trenner-panel-bg, #8eb0ca);
  }
  .v-trenner--mobile-split .v-trenner__media {
    flex: 0 0 670px;
    height: 670px;
    max-height: 670px;
  }
  .v-trenner--width-inset.v-trenner--mobile-split {
    width: 100%;
    max-width: 100%;
  }
  .v-trenner--width-inset.v-trenner--mobile-split .v-trenner__media {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .v-trenner--title-script .v-trenner__title {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 20px;
  }
  .v-trenner--mobile-overlay {
    position: relative;
    min-height: 825px;
    height: auto;
  }
  .v-trenner--mobile-overlay .v-trenner__inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 825px;
    /*
         * Entwurf: Eyebrow 52px unter der Oberkante, 41px Luft unter dem
         * letzten Element. Mittig zentriert war der Text nur deshalb, weil
         * das Band zu hoch war.
         */
    align-items: flex-start;
    padding-top: 52px;
    padding-bottom: 40px;
    background: transparent;
  }
  .v-trenner--mobile-overlay .v-trenner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    flex: none;
    height: 100%;
  }
  .v-trenner--mobile-overlay .v-trenner__bg--mobile {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .v-trenner--width-inset.v-trenner--mobile-overlay {
    min-height: 860px;
    height: auto;
  }
  .v-trenner--width-inset.v-trenner--mobile-overlay .v-trenner__inner {
    min-height: 860px;
    align-items: flex-start;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .v-trenner--width-inset.v-trenner--mobile-overlay .v-trenner__bg--mobile img {
    object-position: center 32%;
  }
}
/*
 * Outdoor-Läuferin-Trenner (Startseite + Angebote):
 * PNG 3858×1804 mit Transparenz-Rändern — Container hält exakt dieses Seitenverhältnis,
 * damit cover die volle Figur zeigt und kein Letterboxing (kein blauer Mobile-Panel-BG).
 */
@media (min-width: 992px) {
  #s-trenner-trail .v-trenner,
  #s-angebote-trenner .v-trenner {
    aspect-ratio: 3858 / 1804;
    min-height: 0 !important;
    height: auto;
    grid-template-rows: minmax(0, 1fr);
    background: transparent;
    /* nie @rs-trenner-deep auf Desktop — nur Mobile-Panel */
  }
  #s-trenner-trail .v-trenner .v-trenner__media,
  #s-angebote-trenner .v-trenner .v-trenner__media {
    min-height: 0 !important;
    height: 100%;
  }
  #s-trenner-trail .v-trenner .v-trenner__bg--desktop,
  #s-angebote-trenner .v-trenner .v-trenner__bg--desktop {
    /* PNG-Alpha-Ränder: unter dem Foto keine Fremdfarbe */
    background: transparent;
  }
  #s-trenner-trail .v-trenner .v-trenner__bg--desktop img,
  #s-angebote-trenner .v-trenner .v-trenner__bg--desktop img {
    object-fit: cover;
    object-position: center center;
    /* Parallax-scale (1.06) abschalten — sonst Kopf/Fuß abgeschnitten */
    transform: none !important;
  }
}
/* --- Split-Brand (rsce_split_brand) — global, Overrides via Artikel-Klassen / #s-* */
.a-seehaus,
.a-feste-feiern {
  position: relative;
  padding: 3.5rem 20px 0;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  overflow: visible;
}
.a-seehaus .v-headline,
.a-feste-feiern .v-headline {
  margin-bottom: 0;
  max-width: none;
  overflow: visible;
}
.a-seehaus .v-headline-subtext,
.a-feste-feiern .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
.a-seehaus .v-headline-type-h2 .v-headline-text,
.a-feste-feiern .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
  overflow: visible;
}
.a-feste-feiern {
  padding-bottom: 5rem;
}
.a-feste-feiern .row.ce_rowStart {
  align-items: flex-start;
}
.a-feste-feiern .ce_column:first-child .v-headline {
  margin-bottom: 1.5rem;
}
.a-feste-feiern .ce_column:first-child .ce_text {
  max-width: 630px;
  margin-bottom: 32px;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #4a4a49;
}
.a-feste-feiern .ce_column:last-child .content-image {
  max-width: 437px;
  margin-left: auto;
}
.a-feste-feiern .ce_column:last-child .content-image figure,
.a-feste-feiern .ce_column:last-child .content-image picture,
.a-feste-feiern .ce_column:last-child .content-image img {
  display: block;
  width: 100%;
  height: auto;
}
/* --- Für Unternehmen (Startseite §10) — Grid + Badge + Link-Triple --- */
.a-unternehmen {
  position: relative;
  padding: 3.5rem 20px 5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  background: transparent;
  overflow: visible;
}
.a-unternehmen .v-headline {
  margin-bottom: 0;
  max-width: none;
  overflow: visible;
}
.a-unternehmen .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
.a-unternehmen .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
  overflow: visible;
}
.a-unternehmen .row.ce_rowStart {
  align-items: center;
}
.a-unternehmen .ce_column:first-child .v-headline {
  margin-bottom: 1.5rem;
}
.a-unternehmen .ce_column:first-child .ce_text,
.a-unternehmen .ce_column:first-child .content-text {
  max-width: 630px;
  margin-bottom: 32px;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #4a4a49;
}
.a-unternehmen .ce_column:last-child {
  position: relative;
}
.a-unternehmen .ce_column:last-child .content-image.a-unternehmen__photo {
  max-width: 630px;
  margin-left: auto;
}
.a-unternehmen .ce_column:last-child .content-image.a-unternehmen__photo figure,
.a-unternehmen .ce_column:last-child .content-image.a-unternehmen__photo picture,
.a-unternehmen .ce_column:last-child .content-image.a-unternehmen__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.a-unternehmen .ce_column:last-child .content-image.a-unternehmen__badge {
  position: absolute;
  right: 0;
  bottom: -24px;
  width: 121px;
  max-width: 121px;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.a-unternehmen .ce_column:last-child .content-image.a-unternehmen__badge figure,
.a-unternehmen .ce_column:last-child .content-image.a-unternehmen__badge picture,
.a-unternehmen .ce_column:last-child .content-image.a-unternehmen__badge img {
  display: block;
  width: 100%;
  height: auto;
}
.a-unternehmen .v-link-triple {
  padding-top: 6.5rem;
  padding-bottom: 0;
}
.mod_article.a-unternehmen,
.mod_article_container.a-unternehmen {
  position: relative;
  overflow-x: visible;
  overflow-y: visible;
  z-index: 0;
}
.mod_article.a-unternehmen::before,
.mod_article_container.a-unternehmen::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: #faf6f7;
  pointer-events: none;
}
.v-link-triple {
  box-sizing: border-box;
}
.v-link-triple__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  column-gap: 96px;
  padding: 0 84px;
  align-items: stretch;
}
.v-link-triple__divider {
  width: 1px;
  background-color: #681d33;
  align-self: stretch;
  /* HRS-10 / XD: Trennlinien 158px hoch */
  min-height: 158px;
}
.v-link-triple__cell {
  display: flex;
  /* XD: Text vertikal mittig zwischen den Linien */
  align-items: center;
  min-width: 0;
  min-height: 158px;
}
.v-link-triple__link,
.v-link-triple__text {
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 33px;
  font-weight: 400;
  color: #681d33;
  text-align: left;
  white-space: pre-line;
}
.v-link-triple__link {
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.v-link-triple__link:hover,
.v-link-triple__link:focus-visible {
  opacity: 0.72;
}
@media (max-width: 991px) {
  .v-link-triple__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    column-gap: 0;
    padding: 0;
  }
  .v-link-triple__divider {
    width: 100%;
    height: 1px;
    min-height: 0;
    margin: 28px 0;
  }
  .v-link-triple__cell {
    min-height: 0;
    padding: 0 20px;
  }
  .v-link-triple__link,
  .v-link-triple__text {
    font-size: 25px;
    line-height: 31px;
  }
}
/* --- Nachhaltigkeit-Seite: H1/H2 in #52684F (nur diese Seite) ---------------- */
body.v-page-nachhaltigkeit .v-sub-hero {
  color: #52684F;
}
body.v-page-nachhaltigkeit .v-sub-hero__title.rs-script,
body.v-page-nachhaltigkeit .v-sub-hero .rs-script,
body.v-page-nachhaltigkeit .v-sub-hero__subline {
  color: #52684F;
}
body.v-page-nachhaltigkeit .v-headline-type-h2 .v-headline-text,
body.v-page-nachhaltigkeit .v-headline.v-headline-type-h2 .v-headline-text {
  color: #52684F;
}
body.v-page-nachhaltigkeit .a-nachhaltigkeit .v-headline-type-h2 .v-headline-text {
  color: #52684F;
}
/* --- Illustration + Feature-Karte (rsce_illu_feature_box) -------------------- */
.a-nachhaltigkeit {
  position: relative;
  padding: 4rem 20px 5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
  /* HRS-93: Im Entwurf liegt hinter der ganzen Sektion ein durchgehendes
     Band #c2a4ad mit 10 % Deckkraft (1923x1450). Der Artikel ist auf
     Containerbreite begrenzt, deshalb als Full-Bleed-Ebene dahinter. */
}
.a-nachhaltigkeit::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background: rgba(194, 164, 173, 0.1);
  pointer-events: none;
}
.a-nachhaltigkeit .v-headline {
  margin-bottom: 2.5rem;
  max-width: none;
}
.a-nachhaltigkeit .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
}
.a-nachhaltigkeit .v-headline-text-container {
  max-width: 630px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  /* HRS-109: war fade(@rs-text, 80%) — die Designerin verlangt ausdruecklich
       #4A4A49 in voller Deckkraft, weil dieser Text sonst heller wirkt als der
       uebrige Fliesstext („schriftfarbe oben dunkler wie unten"). */
  color: #4a4a49;
}
.a-nachhaltigkeit .v-illu-feature {
  margin-top: 3rem;
  /* Logos + Text: etwas weiter nach links und unten (XD) */
}
.a-nachhaltigkeit .v-illu-feature .v-illu-feature__card {
  margin-top: 120px;
  margin-left: -48px;
}
.a-nachhaltigkeit .rs-list-bullets li {
  margin-bottom: 1.05rem;
}
@media (max-width: 991px) {
  .a-nachhaltigkeit .v-illu-feature .v-illu-feature__card {
    margin-top: 0;
    margin-left: 0;
  }
}
.v-illu-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 790px) minmax(480px, 1fr);
  gap: 40px;
  align-items: start;
}
.v-illu-feature__illu-art {
  display: block;
  width: 100%;
  height: auto;
}
.v-illu-feature__card {
  box-sizing: border-box;
  background: #fff;
  padding: 32px 36px 36px;
  margin-top: 80px;
}
.v-illu-feature__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.v-illu-feature__badge {
  display: block;
  width: 100px;
  height: auto;
  max-width: 100px;
  object-fit: contain;
}
.v-illu-feature__title {
  margin: 0 0 20px;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 35px;
  font-weight: 400;
  color: #681d33;
}
.v-illu-feature__list {
  margin-bottom: 28px;
}
.v-illu-feature__cta {
  margin-top: 0;
}
@media (max-width: 991px) {
  .v-illu-feature__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .v-illu-feature__card {
    padding: 28px 24px 32px;
    margin-top: 0;
  }
}
.mod_article.a-blog-teaser,
.mod_article_container.a-blog-teaser {
  overflow: visible;
}
.a-blog-teaser {
  position: relative;
  padding: 3.5rem 20px 5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
  background: #fff;
  /* Contao .block = overflow:hidden — Swiper-Breakout rechts erlauben */
}
.a-blog-teaser .mod_newslist.block {
  overflow: visible;
}
.a-blog-teaser .v-headline {
  margin-bottom: 38px;
  max-width: 752px;
}
.a-blog-teaser .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
.a-blog-teaser .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
}
.a-blog-teaser .v-headline-text-container {
  max-width: 752px;
  font-family: var(--inn-main-font);
  font-size: 18px;
  font-weight: 400;
  color: #4a4a49;
  line-height: 23px;
}
.a-blog-teaser .ce_rsce_button.block {
  max-width: 752px;
  margin-bottom: 50px;
}
.a-blog-teaser .news-swiper-wrapper {
  overflow: visible;
}
.a-blog-teaser .news-swiper-slider {
  --inn-swiper-nav-gap: 48px;
  --rs-news-slide-width: 410px;
  position: relative;
  overflow: visible;
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  box-sizing: border-box;
  /* Loop-Klone links überdecken — wie Angebote-Swiper */
}
.a-blog-teaser .news-swiper-slider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100vw;
  background: #fff;
  z-index: 5;
  pointer-events: none;
}
.a-blog-teaser .news-swiper-slider .news-swiper {
  position: relative;
  min-width: 0;
  width: 100%;
  overflow: visible;
}
.a-blog-teaser .news-swiper-slider .news-swiper .swiper-slide {
  width: var(--rs-news-slide-width, 410px);
  max-width: calc(100vw - 40px);
  height: auto;
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .a-blog-teaser .news-swiper-slider {
    margin-right: 0;
    padding-right: 0;
  }
  .a-blog-teaser .news-swiper-slider::before {
    display: none;
  }
  .a-blog-teaser .news-swiper-slider .news-swiper .swiper-slide {
    width: 100%;
    max-width: none;
  }
}
.v-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 410px;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  overflow: visible;
  box-sizing: border-box;
}
.v-news-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 410 / 235;
  flex-shrink: 0;
  overflow: visible;
  background: #efddce;
}
.v-news-card__image {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.v-news-card__image picture,
.v-news-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-news-card__date {
  position: absolute;
  right: 1rem;
  bottom: 0;
  z-index: 2;
  transform: translateY(50%);
  background: #681d33;
  color: #fff;
  padding: 0.55rem 0.85rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.v-news-card__date-text {
  font-family: var(--inn-main-font);
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}
.v-news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Oben knapp unter dem Datums-Badge; L/R enger */
  padding: 1.35rem 1.1rem 1.5rem;
  background: #fff;
  box-sizing: border-box;
}
.v-news-card__tag {
  margin: 0 0 0.85rem;
  font-family: var(--inn-main-font);
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--inn-neutral);
}
.v-news-card__title {
  margin: 0 0 1rem;
  padding: 0;
  padding-right: 2.75rem;
  /* etwas Luft zum Datums-Badge, früher weniger Umbruch */
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 35px;
  font-weight: 400;
  color: #4a4a49;
}
.v-news-card__title a,
.v-news-card__title a:hover,
.v-news-card__title a:focus {
  color: inherit;
  text-decoration: none !important;
}
.v-news-card__title a:hover {
  color: #681d33;
}
.v-news-card__button {
  margin-top: auto;
  padding-top: 0.5rem;
}
/* --- Infocenter Übersicht (.a-infocenter-list) ----------------------------- */
.a-infocenter-list {
  position: relative;
  padding: 3.5rem 20px 5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
}
.a-infocenter-list .v-headline {
  margin-bottom: 38px;
  max-width: 752px;
}
.a-infocenter-list .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
}
.a-infocenter-list .v-headline-text-container {
  max-width: 752px;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.a-infocenter-list .mod_newslist.block {
  overflow: visible;
}
.v-news-list__filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 10px;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.v-news-list__filter {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  border: 2px solid #681d33;
  background: #fff;
  color: #681d33;
  font-family: var(--inn-main-font);
  text-align: center;
  padding: 16px 12px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.v-news-list__filter:hover,
.v-news-list__filter:focus-visible {
  background: rgba(104, 29, 51, 0.06);
  outline: none;
}
.v-news-list__filter.is-active {
  background: #681d33;
  border-color: #681d33;
  color: #fff;
}
.v-news-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px) 15px;
  align-items: stretch;
}
.v-news-list__grid .v-news-card {
  max-width: none;
  width: 100%;
}
.v-news-list__empty {
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-news-list__pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  font-family: var(--inn-main-font);
}
.v-news-list__page-label {
  margin: 0 0.35rem 0 0;
  color: #4a4a49;
}
.v-news-list__page-current {
  min-width: 1.25em;
  text-align: center;
  color: #681d33;
}
.v-news-list__page-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #681d33;
  padding: 0.15rem 0.2rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--inn-main-font);
  line-height: 1;
  transition: opacity 0.2s ease;
}
.v-news-list__page-btn:hover:not(:disabled),
.v-news-list__page-btn:focus-visible:not(:disabled) {
  opacity: 0.7;
  outline: none;
}
.v-news-list__page-btn:disabled,
.v-news-list__page-btn[aria-disabled='true'] {
  opacity: 0.3;
  cursor: not-allowed;
}
@media (max-width: 991px) {
  .v-news-list {
    /* HRS-254: Die Reihe brach mobil auf zwei Spalten x drei Reihen um
       (gemessen 156px je Feld bei 320px Innenbreite). Das Soll-Bild der
       Designerin zeigt EINE Reihe, rechts angeschnitten — dasselbe
       Verhalten, das die Kulinarik-Pillen schon haben. Also nicht
       umbrechen, sondern schieben. */
  }
  .v-news-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v-news-list__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
  }
  .v-news-list__filter {
    /* `1 1 calc(33.333% - 6px)` hat die Felder auf Drittel gezwungen und
         damit den Umbruch erst erzeugt. Inhaltsbreit wie auf dem Desktop. */
    flex: 0 0 auto;
  }
}
@media (max-width: 575px) {
  .v-news-list__grid {
    grid-template-columns: 1fr;
  }
  .v-news-list__filter {
    padding: 14px 10px;
  }
}
/* --- Infocenter Detail (.v-news-detail) ------------------------------------ */
.a-infocenter-detail {
  background: #fff;
}
.v-news-detail {
  background: #fff;
  /* Entwurf: Bild 1850x511 bei x35 — also 35px Rand links und rechts,
     nicht randlos, und 172px unter der Kopfzeile. */
  /* Entwurf: Linie 1300x2 auf Containerbreite, 101px unter dem Bild */
  /* Entwurf: Datum 14px bei y928, Titel 65px bei y952 */
  /* Der Beitragsinhalt fliesst wie in einem Artikel — die Anordnung macht die
     Redaktion mit Row + Columns aus dem Grid-Bundle.

     Hier stand bis 07.10.2026 ein festes Zwei-Spalten-Raster (630px links,
     Rest rechts), das die Spalte **nach Elementtyp** vergab: Absaetze und
     Zwischenueberschriften links, Listen, Bilder und `figure` rechts. Der
     Entwurf …infocenter-blog-detailseite zeigt genau dieses Bild, und als
     Abbild eines einzelnen Beitrags stimmte es auch.

     Als Regel war es unbrauchbar: Bild links und Text rechts ging nicht, zwei
     Bilder nebeneinander auch nicht — und niemand konnte sehen, warum ein Bild
     nach rechts sprang. Es gab auch keinen Hebel dagegen. In einem Beitrag lag
     deshalb bereits ein Spalten-Element herum, das nichts bewirkte.

     Jetzt gilt im Blog dasselbe wie ueberall sonst. Was hier bleibt, sind nur
     Abstaende — keine Anordnung. */
  /* Vorheriger Beitrag: vorbereitet, aktuell ausgeblendet */
}
.v-news-detail__hero {
  width: auto;
  max-width: none;
  /* Entwurf: 172px unter einer 112px hohen Kopfzeile. Live ist die
       Kopfzeile 90px hoch — derselbe Abstand wirkt dort zu gross, deshalb
       im gleichen Verhaeltnis: 172 x 90/112 = 138, plus Kopfzeilenhoehe. */
  margin: 228px 35px 0;
  overflow: hidden;
  box-sizing: border-box;
}
.v-news-detail__hero picture,
.v-news-detail__hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1850 / 511;
  object-fit: cover;
}
.v-news-detail__rule {
  width: calc(100% - 40px);
  /* Entwurf: 1300 breit — der Container misst 1340 inklusive Innenabstand */
  max-width: calc(var(--inn-container-width) - 40px);
  height: 2px;
  margin: 101px auto 0;
  background: #681d33;
  box-sizing: border-box;
  /* Im Entwurf gibt es unter dem Titel keine Linie */
}
.v-news-detail__rule--after-title {
  display: none;
}
.v-news-detail__rule--footer {
  margin-top: 0;
  margin-bottom: 100px;
}
.v-news-detail__inner {
  padding-top: 32px;
  padding-bottom: 0;
}
.v-news-detail__header {
  margin: 0;
}
.v-news-detail__date {
  margin: 0 0 5px;
  font-family: var(--inn-main-font);
  font-size: 14px;
  line-height: 18.9px;
  color: #4a4a49;
}
.v-news-detail__title {
  margin: 0;
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
}
@media only screen and (max-width: 767px) {
  .v-news-detail__title {
    font-size: 36px;
  }
}
.v-news-detail__body {
  font-family: var(--inn-main-font);
  color: #4a4a49;
  margin-top: 47px;
  /* Hervorgehobener Block wie im Entwurf („Unser Programm" mit
       PDF-Download) — im Beitrag als <div class="v-news-detail__panel">. */
}
@media (min-width: 992px) {
  .v-news-detail__body {
    /* Inhaltselemente bringen ihr eigenes DIV mit: Listen und Bilder darin
         sollen sich wie direkte Kinder verhalten. */
  }
  .v-news-detail__body > div > ul,
  .v-news-detail__body > div > ol {
    margin: 0;
  }
  .v-news-detail__body > h2,
  .v-news-detail__body > h3 {
    margin-top: 60px;
  }
  .v-news-detail__body > *:first-child {
    margin-top: 0;
  }
}
.v-news-detail__body h2,
.v-news-detail__body h3 {
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 37px;
  font-weight: 400;
  color: #681d33;
  margin: 0 0 20px;
}
.v-news-detail__body p {
  margin: 0 0 23px;
}
.v-news-detail__body img {
  display: block;
  width: 100%;
  height: auto;
}
.v-news-detail__body .v-news-detail__panel {
  grid-column: 1 / -1;
  background: #faf6f7;
  box-sizing: border-box;
  padding: 46px 40px;
  margin: 60px 0 0;
  /* Contao legt den Inhalt in ein .rte-DIV — ohne das hier stuende der
         Button unter dem Text statt daneben. */
}
.v-news-detail__body .v-news-detail__panel > .rte {
  display: contents;
}
@media (min-width: 992px) {
  .v-news-detail__body .v-news-detail__panel {
    display: grid;
    grid-template-columns: 630px minmax(0, 1fr);
    column-gap: 50px;
    align-items: center;
  }
  .v-news-detail__body .v-news-detail__panel > .rte > div:last-child,
  .v-news-detail__body .v-news-detail__panel > div:last-child {
    justify-self: start;
  }
}
.v-news-detail__body .v-news-detail__panel h3 {
  margin-top: 0;
}
.v-news-detail__body .v-news-detail__panel p:last-child {
  margin-bottom: 0;
}
.v-news-detail__footer {
  /* Entwurf: Linie 2437, Buttons 2537, Footer-Band 2788 */
  padding-top: 100px;
  padding-bottom: 150px;
}
.v-news-detail__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.v-news-detail__nav-item {
  flex: 0 1 auto;
}
.v-news-detail__nav-prev--hidden {
  display: none !important;
}
.v-news-detail__nav-back {
  margin-right: auto;
}
.v-news-detail__nav-next {
  margin-left: auto;
}
/* --- Bewertungen (§14 · rsce_reviews_swiper) -------------------------------- */
.a-bewertungen {
  position: relative;
  padding: 3.5rem 20px 5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
  background: #fff;
}
.a-bewertungen .v-headline {
  margin-bottom: 100px;
  max-width: 752px;
}
.a-bewertungen .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
.a-bewertungen .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
}
.a-bewertungen .v-reviews-swiper.block {
  overflow: visible;
}
.a-bewertungen .v-reviews-swiper__slider {
  /* HRS-13: Slider läuft nicht mehr randabfallend aus dem Container heraus.
       XD: 2 Karten à 630px + 40px Gap = 1300px Containerbreite.            */
  --inn-swiper-nav-gap: 48px;
  --rs-review-slide-width: calc((100% - 40px) / 2);
  position: relative;
  /* vertikaler Platz für den Kartenschatten, ohne horizontalen Breakout */
  overflow-x: clip;
  padding: 24px 0;
  margin-top: -24px;
  margin-bottom: -24px;
  box-sizing: border-box;
}
.a-bewertungen .v-reviews-swiper__slider .v-reviews-swiper__track {
  position: relative;
  min-width: 0;
  width: 100%;
  overflow: visible;
}
.a-bewertungen .v-reviews-swiper__slider .v-reviews-swiper__track .swiper-wrapper {
  align-items: stretch;
}
.a-bewertungen .v-reviews-swiper__slider .v-reviews-swiper__track .swiper-slide {
  display: flex;
  width: var(--rs-review-slide-width, 630px);
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .a-bewertungen .v-reviews-swiper__slider {
    --rs-review-slide-width: 100%;
  }
  .a-bewertungen .v-reviews-swiper__slider .v-reviews-swiper__track .swiper-slide {
    width: 100%;
    max-width: none;
  }
}
.v-review-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  /* XD-Kartenhöhe ~498px — kurze Texte sollen nicht „flach“ wirken */
  min-height: clamp(360px, 42vw, 498px);
  background: #fff;
  /* HRS-13: allseitiger, nicht nach unten geneigter Schatten */
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .v-review-card {
    min-height: 320px;
  }
}
.v-review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  /* XD: Datums-Box 187x55 sitzt buendig an der Kartenoberkante */
  min-height: 55px;
  padding: 0 30px 0 0;
  margin: 0 0 20px;
}
.v-review-card__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 30px;
  /* HRS-13: "luftiger" — XD 187x55, Datum 18px zentriert */
  min-width: 187px;
  min-height: 55px;
  padding: 0 24px;
  background: #ececec;
  color: #4a4a49;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  white-space: nowrap;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .v-review-card__date {
    min-width: 150px;
    min-height: 46px;
    padding: 0 18px;
    font-size: 16px;
  }
}
.v-review-card__source {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
}
.v-review-card__source img {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.v-review-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0 30px 30px;
  box-sizing: border-box;
}
.v-review-card__meta {
  margin: 0 0 10px;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  color: #4a4a49;
}
.v-review-card__title {
  margin: 0 0 16px;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 35px;
  /* XD: Regular, nicht Bold */
  font-weight: 400;
  color: #4a4a49;
}
.v-review-card__text {
  flex: 1 1 auto;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  color: #4a4a49;
}
.v-review-card__text p {
  margin: 0 0 1rem;
}
.v-review-card__text p:last-child {
  margin-bottom: 0;
}
/* --- Instagram (§15 · rsce_instafeed) --------------------------------------- */
.a-instagram {
  position: relative;
  padding: 3.5rem 20px 5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
}
.a-instagram .v-headline {
  margin-bottom: 38px;
  max-width: 752px;
}
.a-instagram .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
.a-instagram .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
}
.a-instagram .ce_rsce_button.block {
  max-width: 752px;
  margin-bottom: 50px;
}
.a-instagram .v-instafeed {
  width: 100%;
  overflow: hidden;
}
.a-instagram .v-instafeed .lightwidget-widget {
  display: block;
  width: 100%;
  border: 0;
  overflow: hidden;
}
.a-seehaus {
  padding-bottom: 5rem;
  overflow: visible;
}
.v-split-brand {
  /* Seehaus: nur Illustration Full-Bleed + Overlay-Box unten rechts */
  /* Feste feiern: Text links + Portrait rechts */
}
.v-split-brand__illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.v-split-brand__subheadline {
  margin: 0 0 24px;
  font-family: var(--inn-main-font);
  font-size: 30px;
  line-height: 23px;
  font-weight: 400;
  color: #681d33;
}
.v-split-brand__text {
  margin-bottom: 49px;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #4a4a49;
  white-space: pre-line;
}
.v-split-brand__cta {
  margin-top: 0;
}
.v-split-brand__photo picture,
.v-split-brand__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.v-split-brand--brand-hero {
  margin-top: 2.5rem;
  overflow: visible;
  padding-bottom: 5rem;
}
.v-split-brand--brand-hero .v-split-brand__stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  background: #fff;
  overflow: visible;
}
.v-split-brand--brand-hero .v-split-brand__illustration {
  background: #fff;
}
.v-split-brand--brand-hero .v-split-brand__illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.v-split-brand--brand-hero .v-split-brand__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transform: translateY(28%);
}
.v-split-brand--brand-hero .v-split-brand__overlay-inner {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 0;
  box-sizing: border-box;
}
.v-split-brand--brand-hero .v-split-brand__box {
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  margin-bottom: 0;
  padding: 2rem 2rem 2.25rem;
  background: #fff;
  box-sizing: border-box;
}
.v-split-brand--brand-hero .v-split-brand__text {
  max-width: 413px;
  margin-bottom: 32px;
}
.v-split-brand--text-image {
  margin-top: 2.5rem;
}
.v-split-brand--text-image .v-split-brand__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 437px;
  gap: 48px;
  align-items: start;
}
.v-split-brand--text-image .v-split-brand__text {
  max-width: 630px;
}
.v-split-brand--text-image .v-split-brand__photo {
  width: 437px;
  height: 639px;
}
@media (max-width: 991px) {
  .v-split-brand--brand-hero {
    margin-top: 0;
    padding-bottom: 0;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .v-split-brand--brand-hero .v-split-brand__stage {
    overflow: hidden;
  }
  .v-split-brand--brand-hero .v-split-brand__overlay {
    position: static;
    transform: none;
    margin-top: -1rem;
    padding: 0;
  }
  .v-split-brand--brand-hero .v-split-brand__overlay-inner {
    justify-content: stretch;
    padding: 0;
  }
  .v-split-brand--brand-hero .v-split-brand__box {
    max-width: none;
    margin-bottom: 0;
    padding: 1.5rem 20px 1.75rem;
    border-radius: 0;
  }
  .v-split-brand--brand-hero .v-split-brand__subheadline {
    font-size: 28px;
  }
  .v-split-brand--brand-hero .v-split-brand__text {
    max-width: none;
    margin-bottom: 24px;
  }
  .v-split-brand--text-image .v-split-brand__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .v-split-brand--text-image .v-split-brand__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 437 / 639;
    max-height: 70vh;
  }
  .v-split-brand--text-image .v-split-brand__text {
    max-width: none;
    margin-bottom: 32px;
  }
}
@media (max-width: 991px) {
  .a-seehaus,
  .a-feste-feiern,
  .a-unternehmen {
    padding-top: 2.5rem;
  }
  .a-seehaus .v-headline-type-h2 .v-headline-text,
  .a-feste-feiern .v-headline-type-h2 .v-headline-text,
  .a-unternehmen .v-headline-type-h2 .v-headline-text {
    font-size: 45px;
  }
  .a-seehaus {
    padding-top: 3.5rem;
    overflow: visible;
  }
  .a-feste-feiern {
    padding-bottom: 3.5rem;
  }
  .a-feste-feiern .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
  .a-feste-feiern .ce_column:last-child .content-image {
    max-width: none;
    margin-left: 0;
    margin-top: 2rem;
  }
  .a-feste-feiern .ce_column:first-child .ce_text {
    max-width: none;
  }
  .a-unternehmen {
    padding-bottom: 2.5rem;
  }
  .a-unternehmen .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
  .a-unternehmen .ce_column:last-child {
    margin-top: 2rem;
  }
  .a-unternehmen .ce_column:last-child .content-image.a-unternehmen__photo {
    max-width: none;
    margin-left: 0;
  }
  .a-unternehmen .ce_column:last-child .content-image.a-unternehmen__badge {
    right: 20px;
    bottom: -16px;
  }
  .a-unternehmen .ce_column:first-child .ce_text {
    max-width: none;
  }
  .a-unternehmen .v-link-triple {
    padding-top: 3.75rem;
    padding-bottom: 2.5rem;
  }
}
.a-angebote-listing {
  padding: 3.5rem 20px 4.5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-angebote-listing .v-headline {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.a-angebote-listing .v-headline-subtext {
  text-align: center;
  color: #4a4a49;
}
.a-angebote-listing .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-angebote-listing .v-headline-text-container {
  text-align: center;
  max-width: 752px;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(12px, 2vw, 20px);
  color: #4a4a49;
}
.a-angebote-listing .v-offers-teaser {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.a-angebote-listing .v-offers-teaser__icons {
  margin-bottom: 0;
}
.a-angebote-listing .v-offers-list__grid {
  gap: clamp(24px, 3vw, 40px);
}
/* Angebote-FAQ: Text links · Accordion rechts (einspaltig) */
.a-angebote-faq .v-headline {
  text-align: left;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.a-angebote-faq .v-headline-subtext {
  text-align: left;
}
.a-angebote-faq .row.ce_rowStart {
  align-items: start;
  gap: clamp(24px, 4vw, 48px);
}
.a-angebote-faq .row.ce_rowStart > .ce_column.col-6:first-child .ce_text {
  max-width: 520px;
  margin-bottom: 1.5rem;
  color: #4a4a49;
}
@media (max-width: 991px) {
  .a-angebote-faq .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
}
/* --- Jetzt entdecken (rsce_page_teaser_grid) -------------------------------- */
.a-entdecken {
  position: relative;
  padding: 3.5rem 20px 4.5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  overflow: visible;
}
.a-entdecken .v-headline {
  margin-bottom: 2.5rem;
  max-width: none;
  overflow: visible;
}
.a-entdecken .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
.a-entdecken .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
  overflow: visible;
}
.v-page-teaser-grid__desktop {
  display: block;
}
.v-page-teaser-grid__mobile {
  display: none;
}
.v-page-teaser-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px;
  align-items: start;
}
.v-page-teaser-grid__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.v-page-teaser-grid__media {
  position: relative;
  width: 100%;
  margin-bottom: 3rem;
}
.v-page-teaser-grid__image {
  display: block;
  width: 100%;
  overflow: hidden;
  background: #faf6f7;
}
.v-page-teaser-grid__image picture,
.v-page-teaser-grid__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}
.v-page-teaser-grid__card--short .v-page-teaser-grid__media {
  aspect-ratio: 380 / 500;
}
.v-page-teaser-grid__card--medium .v-page-teaser-grid__media {
  aspect-ratio: 380 / 570;
}
.v-page-teaser-grid__card--tall .v-page-teaser-grid__media {
  aspect-ratio: 380 / 670;
}
.v-page-teaser-grid__swiper {
  position: relative;
  width: 100%;
  height: 100%;
}
.v-page-teaser-grid__swiper .swiper-wrapper,
.v-page-teaser-grid__swiper .swiper-slide {
  height: 100%;
}
.v-page-teaser-grid__swiper .swiper-slide .v-page-teaser-grid__image {
  height: 100%;
}
.v-page-teaser-grid__pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.15rem;
  margin: 0;
  line-height: 0;
  z-index: 3;
}
.v-page-teaser-grid__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 5px !important;
  background: #fff;
  border: 1px solid #fff;
  opacity: 1;
  box-sizing: border-box;
}
.v-page-teaser-grid__pagination .swiper-pagination-bullet-active {
  background: transparent;
  border: 1px solid #fff;
}
.v-page-teaser-grid__title {
  margin: 0 0 1.15rem;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 23px;
  font-weight: 400;
  color: #681d33;
}
.v-page-teaser-grid__text {
  margin: 0 0 2rem;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #4a4a49;
}
.v-page-teaser-grid__button {
  margin-top: auto;
}
@media (max-width: 991px) {
  .v-page-teaser-grid__desktop {
    display: none;
  }
  .v-page-teaser-grid__mobile {
    display: block;
  }
  .v-page-teaser-grid__media {
    margin-bottom: 1.5rem;
  }
  .v-page-teaser-grid__card--short .v-page-teaser-grid__media,
  .v-page-teaser-grid__card--medium .v-page-teaser-grid__media,
  .v-page-teaser-grid__card--tall .v-page-teaser-grid__media {
    aspect-ratio: 1 / 1.25;
  }
  .v-page-teaser-grid__mobile-swiper .v-page-teaser-grid__pagination {
    position: static;
    margin-top: 1.25rem;
  }
}
/* Outline-Button (Weitere Details) — global */
.v-button.v-outline > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 160px;
  height: 50px;
  padding: 0 20px !important;
  border: 2px solid #681d33 !important;
  border-radius: 0;
  background: transparent !important;
  color: #681d33;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  text-align: center;
  text-transform: none !important;
  text-decoration: none !important;
}
.v-button.v-outline > a:hover {
  background: #681d33 !important;
  color: #fff;
  text-decoration: none !important;
}
.v-button.v-outline .v-button-label {
  text-transform: none !important;
  padding: 0;
  margin: 0;
}
/* Outline-Button weiß — global (Trenner, Hero auf Bild) */
.v-button.v-outline-white > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 160px;
  height: 50px;
  padding: 0 20px !important;
  border: 2px solid #fff !important;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  text-align: center;
  text-transform: none !important;
  text-decoration: none !important;
}
.v-button.v-outline-white > a:hover {
  background: #fff !important;
  color: #681d33;
  text-decoration: none !important;
}
.v-button.v-outline-white .v-button-label {
  text-transform: none !important;
  padding: 0;
  margin: 0;
}
/* --- Button Hover (Riessersee) — Theme-Default @neutral-Grau überschreiben -- */
.v-button > a:hover,
.v-button a:hover,
.v-button button:hover {
  text-decoration: none !important;
}
.v-button > a:hover .v-button-label,
.v-button a:hover .v-button-label,
.v-button button:hover .v-button-label {
  color: inherit !important;
}
/* Outline / Header-Nav-Linien → Primary-Fill + weiße Schrift */
.v-button.v-outline > a:hover,
.v-button.v-nav-line > a:hover,
.v-button.v-header-infocenter > a:hover,
.v-button.v-header-angebote > a:hover,
#header .v-button.v-outline > a:hover,
#header .v-button.v-nav-line > a:hover,
#header .v-button.v-header-infocenter > a:hover,
#header .v-button.v-header-angebote > a:hover,
body.v-page-sub:not(.v-menu-open) #header .v-button.v-nav-line > a:hover,
body.v-page-sub:not(.v-menu-open) #header .v-button.v-header-infocenter > a:hover,
body.v-page-sub:not(.v-menu-open) #header .v-button.v-header-angebote > a:hover,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-nav-line > a:hover,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-header-infocenter > a:hover,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-header-angebote > a:hover,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-nav-line > a:hover,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-header-infocenter > a:hover,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-header-angebote > a:hover,
body.v-menu-open #header .v-button.v-nav-line > a:hover,
body.v-menu-open #header .v-button.v-header-infocenter > a:hover,
body.v-menu-open #header .v-button.v-header-angebote > a:hover {
  background: #681d33 !important;
  color: #fff !important;
  border-color: #681d33 !important;
}
.v-button.v-outline > a:hover .v-button-label,
.v-button.v-nav-line > a:hover .v-button-label,
.v-button.v-header-infocenter > a:hover .v-button-label,
.v-button.v-header-angebote > a:hover .v-button-label,
#header .v-button.v-outline > a:hover .v-button-label,
#header .v-button.v-nav-line > a:hover .v-button-label,
#header .v-button.v-header-infocenter > a:hover .v-button-label,
#header .v-button.v-header-angebote > a:hover .v-button-label,
body.v-page-sub:not(.v-menu-open) #header .v-button.v-nav-line > a:hover .v-button-label,
body.v-page-sub:not(.v-menu-open) #header .v-button.v-header-infocenter > a:hover .v-button-label,
body.v-page-sub:not(.v-menu-open) #header .v-button.v-header-angebote > a:hover .v-button-label,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-nav-line > a:hover .v-button-label,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-header-infocenter > a:hover .v-button-label,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-header-angebote > a:hover .v-button-label,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-nav-line > a:hover .v-button-label,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-header-infocenter > a:hover .v-button-label,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-header-angebote > a:hover .v-button-label,
body.v-menu-open #header .v-button.v-nav-line > a:hover .v-button-label,
body.v-menu-open #header .v-button.v-header-infocenter > a:hover .v-button-label,
body.v-menu-open #header .v-button.v-header-angebote > a:hover .v-button-label {
  color: #fff !important;
}
/* Filled Primary: dunkler statt Invert (kein grauer Fallback) */
.v-button.v-primary > a:hover,
.v-button.v-primary button:hover {
  background: #481423 !important;
  color: #fff !important;
  border-color: #481423 !important;
}
/* Secondary */
.v-button.v-secondary > a:hover,
.v-button.v-secondary button:hover {
  background: #515f34 !important;
  color: #fff !important;
  border-color: #515f34 !important;
}
/* Outline weiß (auf Bild/Trenner): weiß füllen, Primary-Text */
.v-button.v-outline-white > a:hover {
  background: #fff !important;
  color: #681d33 !important;
  border-color: #fff !important;
}
.v-button.v-outline-white > a:hover .v-button-label {
  color: #681d33 !important;
}
/* White (transparent / Rahmen) → Primary-Fill */
.v-button.v-white > a:hover {
  background: #681d33 !important;
  color: #fff !important;
  border-color: #681d33 !important;
}
/* White-Full (weiße Fläche) → Primary-Fill */
.v-button.v-white-full > a:hover {
  background: #681d33 !important;
  color: #fff !important;
  border-color: #681d33 !important;
}
/* Neutral outline-artig */
.v-button.v-neutral > a:hover {
  background: #4a4a49 !important;
  color: #fff !important;
  border-color: #4a4a49 !important;
}
/* --- Arrow-Circle-Button (global, Backend: rsce_button style=arrow-circle) --- */
.v-button.v-arrow-circle > a {
  display: inline-flex !important;
  align-items: center;
  gap: 20px;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #681d33;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  text-align: left;
  text-transform: none !important;
  text-decoration: none !important;
}
.v-button.v-arrow-circle > a:hover {
  background: transparent !important;
  color: #681d33;
  text-decoration: none !important;
}
.v-button.v-arrow-circle > a:hover .v-button-arrow-circle {
  transform: translateX(3px);
}
.v-button.v-arrow-circle .v-button-row {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0;
}
.v-button.v-arrow-circle .v-button-label {
  text-transform: none !important;
  padding: 0;
  margin: 0;
}
.v-button.v-arrow-circle .v-button-arrow-circle {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.v-button.v-arrow-circle .v-button-arrow-circle img {
  display: block;
  width: 50px;
  height: 50px;
}
.rs-kreis-patch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
}
.rs-kreis-patch__glass {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 8px 32px rgba(0, 0, 0, 0.12);
}
.rs-kreis-patch__link {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rs-kreis-patch__link:hover {
  opacity: 0.92;
  transform: scale(1.02);
}
.rs-kreis-patch__art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
/* --- Sub-Hero (rsce_sub_hero) ---------------------------------------------- */
.a-sub-hero {
  padding: 0 !important;
  background: #fff;
  /* HRS-79: Laeuft der Artikel mit dem Standardtemplate (eigenes .inside, so
     auf Tagungen), setzt die globale Regel „.inside .inside" den Container
     des Titels zurueck — der Titel klebte am linken Fensterrand. Die uebrigen
     Unterseiten nutzen mod_article_container ohne .inside. */
}
.a-sub-hero > .inside {
  max-width: none;
  padding: 0;
}
.a-sub-hero > .inside .v-sub-hero__intro-wrap {
  max-width: var(--inn-container-width);
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}
.v-sub-hero {
  position: relative;
  color: #681d33;
  background: #fff;
  overflow: visible;
}
.v-sub-hero__intro-wrap {
  padding-top: clamp(88px, 12vw, 144px);
}
.v-sub-hero__intro {
  text-align: left;
  margin: 0 0 clamp(28px, 4vw, 52px);
  box-sizing: border-box;
}
.v-sub-hero__subline {
  font-family: var(--inn-main-font);
  font-size: 45px;
  line-height: 1.2;
  font-weight: 300;
  color: #681d33;
  margin: clamp(12px, 2vw, 20px) 0 0;
  text-transform: none;
  letter-spacing: 0;
}
.v-sub-hero__title {
  margin: 0;
}
.v-sub-hero__stage {
  position: relative;
  width: 100%;
  /* HRS-17 / XD: Header-Bild mit weißem Rahmen links + rechts
       (Startseite und Unterseiten gleich: Bild x=35, Breite 1850 auf 1920). */
  padding: 0 clamp(12px, 1.82vw, 35px);
  box-sizing: border-box;
}
.v-sub-hero__stage-anchor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--inn-container-width);
  height: 0;
  z-index: 3;
  pointer-events: none;
}
.v-sub-hero__badge {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  pointer-events: auto;
  width: clamp(140px, 14vw, 220px);
}
.v-sub-hero__badge .rs-kreis-patch {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.v-sub-hero__media {
  position: relative;
  z-index: 1;
  width: 100%;
}
.v-sub-hero__media--single {
  aspect-ratio: 1920 / 600;
  overflow: hidden;
  background: #efddce;
}
.v-sub-hero__media--single picture,
.v-sub-hero__media--single img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-sub-hero__media--triple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.v-sub-hero__cell {
  aspect-ratio: 617 / 511;
  overflow: hidden;
  background: #efddce;
}
.v-sub-hero__cell picture,
.v-sub-hero__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.v-sub-hero .rs-scroll-hint {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media only screen and (max-width: 767px) {
  .v-sub-hero__subline {
    font-size: 25px;
  }
  .v-sub-hero__badge {
    width: clamp(100px, 28vw, 160px);
  }
  .v-sub-hero__media--triple {
    grid-template-columns: 1fr;
  }
}
.mod_article#s-zimmer-angebote::before,
.mod_article_container#s-zimmer-angebote::before {
  display: none;
}
/* --- Zimmer-Tabs (rsce_room_tabs · tl_rs_rooms) ----------------------------- */
.a-zimmer-tabs {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: #fff;
  color: #4a4a49;
  /* Iconboxes = separates Modul unterhalb der Tabs */
}
.a-zimmer-tabs .v-headline {
  text-align: left;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.a-zimmer-tabs .v-headline-subtext {
  color: #4a4a49;
  text-align: left;
}
.a-zimmer-tabs .v-headline-main {
  text-align: left;
}
.a-zimmer-tabs .v-headline-type-h2 .v-headline-text {
  color: #681d33;
  font-family: var(--inn-main-font);
}
.a-zimmer-tabs .v-headline-text-container {
  text-align: left;
  color: #4a4a49;
  font-family: var(--inn-main-font);
  max-width: 720px;
  margin-top: clamp(12px, 2vw, 20px);
}
.a-zimmer-tabs .v-icons-container-element-wrapper {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  /* HRS-68: Hier stand ein `border-top: 1px solid fade(@rs-primary, 12%)`
       als Trennstrich ueber der Icon-Reihe. Der Entwurf kennt ihn nicht:
       Sektion 1 der Zimmer-Uebersicht fuehrt genau eine Linie, und das ist die
       *senkrechte* bei x=584,5 (0x758,5) zwischen Zimmerliste und Details.
       Ueber den Icons bei y=1345 ist keine Linie vorgesehen.
       Abstand bleibt — der Entwurf trennt dort ueber Weissraum, nicht ueber
       einen Strich. */
}
.a-zimmer-tabs .v-icons-container-element-wrapper .v-icons-container-inner {
  width: 100%;
}
.a-zimmer-tabs .v-icons-container-element-wrapper .v-icons-container-element {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  width: 100%;
  flex-direction: unset;
  align-items: stretch;
}
.a-zimmer-tabs .v-icons-container-element-wrapper .v-single-icon-wrapper {
  min-width: 0;
  height: auto;
}
.a-zimmer-tabs .v-icons-container-element-wrapper .single-icon,
.a-zimmer-tabs .v-icons-container-element-wrapper .v-inn-single-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  height: 100%;
  text-align: left;
  text-decoration: none;
  color: #681d33;
  font-family: var(--inn-main-font);
}
.a-zimmer-tabs .v-icons-container-element-wrapper .icon-img-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: 100%;
  min-height: 48px;
}
.a-zimmer-tabs .v-icons-container-element-wrapper .icon-img-container img,
.a-zimmer-tabs .v-icons-container-element-wrapper .icon-img-container svg {
  display: block;
  width: auto;
  height: 48px;
  max-width: 56px;
}
.a-zimmer-tabs .v-icons-container-element-wrapper .single-icon > span,
.a-zimmer-tabs .v-icons-container-element-wrapper .v-inn-single-icon > span,
.a-zimmer-tabs .v-icons-container-element-wrapper .v-inn-single-icon span p {
  margin: 0;
  color: #681d33;
  font-family: var(--inn-main-font);
  font-weight: 500;
  line-height: 1.35;
}
@media (max-width: 991px) {
  .a-zimmer-tabs .v-icons-container-element-wrapper .v-icons-container-element {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
}
@media (max-width: 575px) {
  .a-zimmer-tabs .v-icons-container-element-wrapper .v-icons-container-element {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.v-room-tabs__layout {
  display: grid;
  /* HRS-111: Die Spalte war 240px breit, dadurch brach „Ferienwohnung 1"
       auf zwei Zeilen um. Sollwert aus dem Artboard „Zimmer Übersicht":
       Beschriftungen beginnen bei x=310, die Trennlinie steht bei x=585
       → 275px. Dort stehen „Seehaus Familiensuite" und „Ferienwohnung 1"
       einzeilig, „Dreibettzimmer mit Balkon" weiterhin zweizeilig — genau so
       zeigt es der Entwurf. */
  grid-template-columns: minmax(200px, 275px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.v-room-tabs__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid #4a4a49;
  /* HRS-111: 32px liessen genau 243px fuer den Text — „Seehaus
       Familiensuite" braucht gemessen 244px und brach deshalb noch um.
       Die Trennlinie bleibt bei 275px stehen (Artboard x=585), nur der
       Abstand davor gibt 4px ab. */
  padding-right: clamp(20px, 2.5vw, 28px);
}
.v-room-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 18px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--inn-main-font);
  color: #B6B6B6;
  cursor: pointer;
  transition: color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.v-room-tabs__tab-label {
  flex: 1 1 auto;
  min-width: 0;
}
.v-room-tabs__tab::after {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  margin-left: 12px;
  opacity: 0;
  background: url('/files/contao_files/Bilder/-svg/pfeil-rot-rechts.svg') center / contain no-repeat;
  transition: opacity 0.2s ease;
}
.v-room-tabs__tab:hover {
  color: #4a4a49;
}
.v-room-tabs__tab.is-active {
  color: #681d33;
}
.v-room-tabs__tab.is-active::after {
  opacity: 1;
}
.v-room-tabs__panels {
  min-width: 0;
}
.v-room-tabs__panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 500px);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.v-room-tabs__headline {
  margin: 0 0 1.25rem;
  font-family: var(--inn-main-font);
  color: #681d33;
  line-height: 1.15;
}
.v-room-tabs__features {
  margin-bottom: 1.75rem;
}
.v-room-tabs__features.rs-list-bullets li {
  color: #4a4a49;
}
.v-room-tabs__cta {
  margin-bottom: 0;
}
.v-room-tabs__gallery-wrap {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
}
.v-room-tabs__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 11px;
  width: 100%;
  max-width: 500px;
}
.v-room-tabs__gallery-cell {
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 300px;
  overflow: hidden;
  background: #efddce;
}
.v-room-tabs__gallery-cell--hero {
  grid-column: 1 / -1;
  max-width: 500px;
  width: 100%;
  height: 320px;
}
.v-room-tabs__gallery-cell picture,
.v-room-tabs__gallery-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-room-tabs__price {
  position: absolute;
  top: clamp(12px, 1.5vw, 20px);
  right: 0;
  z-index: 2;
  max-width: 210px;
  pointer-events: none;
}
.v-room-tabs__price-inner {
  position: relative;
  z-index: 0;
  padding: 12px 16px;
  padding-right: 32px;
  font-family: var(--inn-main-font);
  line-height: 1.2;
  color: #4a4a49;
  isolation: isolate;
}
.v-room-tabs__price-inner::before,
.v-room-tabs__price-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.v-room-tabs__price-inner::before {
  z-index: -2;
  background: rgba(255, 255, 255, 0.3);
}
.v-room-tabs__price-inner::after {
  z-index: -1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.16);
}
.v-room-tabs__price-line {
  display: block;
}
.v-room-tabs__price-prefix,
.v-room-tabs__price-value {
  display: inline;
}
.v-room-tabs__price-prefix {
  margin-right: 0.35em;
  color: #4a4a49;
  font-size: 14px;
  font-weight: 300;
}
.v-room-tabs__price-value {
  color: #681d33;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}
.v-room-tabs__price-note {
  display: block;
  margin-top: 4px;
  color: #4a4a49;
  font-size: 14px;
  font-weight: 300;
}
.v-room-tabs__accordion-trigger {
  display: none;
}
.v-room-tabs__accordion-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.v-room-tabs__accordion-icon::before,
.v-room-tabs__accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.v-room-tabs__accordion-icon::before {
  width: 14px;
  height: 2px;
}
.v-room-tabs__accordion-icon::after {
  width: 2px;
  height: 14px;
}
@media (max-width: 991px) {
  .v-room-tabs__layout {
    grid-template-columns: 1fr;
  }
  .v-room-tabs__nav--desktop {
    display: none;
  }
  .v-room-tabs__panel {
    display: block;
    border-bottom: 1px solid rgba(104, 29, 51, 0.14);
  }
  .v-room-tabs__panel:not(.is-open) .v-room-tabs__accordion-body {
    display: none;
  }
  .v-room-tabs__accordion-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 18px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: var(--inn-main-font);
    color: rgba(74, 74, 73, 0.72);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .v-room-tabs__accordion-title {
    min-width: 0;
  }
  .v-room-tabs__accordion-price {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .v-room-tabs__accordion-price .v-room-tabs__price-inner {
    padding: 0;
    background: transparent;
  }
  .v-room-tabs__accordion-price .v-room-tabs__price-inner::before,
  .v-room-tabs__accordion-price .v-room-tabs__price-inner::after {
    display: none;
  }
  .v-room-tabs__accordion-price .v-room-tabs__price-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
  }
  .v-room-tabs__accordion-price .v-room-tabs__price-note {
    display: none;
  }
  .v-room-tabs__panel.is-open .v-room-tabs__accordion-trigger {
    color: #681d33;
  }
  .v-room-tabs__panel.is-open .v-room-tabs__accordion-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
  }
  .v-room-tabs__accordion-body {
    padding-bottom: 24px;
  }
  .v-room-tabs__panel-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .v-room-tabs__content {
    order: 2;
  }
  .v-room-tabs__gallery-wrap {
    order: 1;
  }
  .v-room-tabs__headline {
    display: none;
  }
  .v-room-tabs__gallery {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
  }
  .v-room-tabs__gallery-cell:not(.v-room-tabs__gallery-cell--hero) {
    display: none;
  }
  .v-room-tabs__gallery-cell--hero {
    grid-column: auto;
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 320;
  }
  .v-room-tabs__cta .v-button {
    width: 100%;
    max-width: none;
  }
  .v-room-tabs__cta .v-button.v-left,
  .v-room-tabs__cta .v-button.v-centered,
  .v-room-tabs__cta .v-button.v-right {
    text-align: center;
  }
  .v-room-tabs__cta .v-button a {
    display: block;
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 992px) {
  .v-room-tabs__panel[hidden],
  .v-room-tabs__panel:not(.is-active) {
    display: none;
  }
  .v-room-tabs__accordion-body {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .v-room-tabs__gallery-wrap {
    max-width: none;
    margin-left: 0;
  }
}
/* --- Content-Tabs (rsce_content_tabs) — Tab-Chrome wie Zimmer-Tabs ---------- */
.v-content-tabs {
  /* Desktop: Umbruch erlaubt (z. B. „1. Weihnachts- / Feiertag“);
     kein Break nach „1.“ — nbsp setzt rsce_content_tabs.html5 */
  /* Firmenevents-Collage: mehrzeilige Tab-Labels (Teambuilding …) */
  /* Flat-Modus: Copy links + Collage rechts (Firmenevents-Angebote)
     Nur Desktop. Ohne die Abfrage gewann diese Regel (0,2,0) mobil gegen
     `@media (max-width: 991px) { &__layout { grid-template-columns: 1fr } }`
     (0,1,0) oben — gemessen `275px 17px` mit 28px Lücke. Die 17px-Spur ist
     die auf `display: none` gesetzte Desktop-Reiterleiste: versteckt, aber
     die Rasterspur bleibt. Die 45px Totraum landeten alle rechts, deshalb
     stand das Akkordeon bei 20px links und 65px rechts
     (HRS-212 /feste-feiern, HRS-237 /firmenevents). */
  /* HRS-72: Reine Text-Menues ohne Bild — Weihnachten („Unsere Menues fuer die
     Festtage") und Kulinarik („Unser Halbpensionsmenue"). Beide Entwuerfe sind
     deckungsgleich (1920, Container x=310–1610): Linie der Tab-Leiste bei
     x=484,5, Inhalt ab x=545, zwei Spalten bei x=545 und x=1100 mit je 510px
     (Aufzaehlungspunkt 30 + Text 480), Gruppentitel 18px/400.

     Umgesetzt war: Leiste 250px (Linie bei 560), Inhalt ab 608, und __copy auf
     420px gekappt — die Kappung ist fuer den Flat-Modus MIT Bild gedacht (Text
     links, Bild rechts), griff aber auch hier. Ergebnis: zwei 186px schmale
     Spalten, die rechte Haelfte leer.

     Die Leiste war auf 250px verbreitert worden, „damit 1. Weihnachtsfeiertag
     einzeilig bleibt". Das Label bricht inzwischen ohnehin zweizeilig um
     („1. WEIHNACHTS- / FEIERTAG"), genau wie im Entwurf.

     Nur fuer Tab-Bausteine ohne Bild: Feste feiern und Firmenevents (mit
     Bildern) bleiben unberuehrt. */
}
.v-content-tabs__layout {
  display: grid;
  /* breiter, damit „1. Weihnachtsfeiertag“ einzeilig bleibt */
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: stretch;
  /* Nav-Linie so hoch wie Content rechts */
}
.v-content-tabs__nav {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 6px;
  border-right: 1px solid #4a4a49;
  padding-right: clamp(14px, 2vw, 22px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.v-content-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 18px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  font-style: normal;
  color: #B6B6B6;
  cursor: pointer;
  transition: color 0.2s ease, font-weight 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.v-content-tabs__tab-label {
  flex: 1 1 auto;
  min-width: 0;
}
.v-content-tabs__tab::after {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  margin-left: 10px;
  opacity: 0;
  background: url('/files/contao_files/Bilder/-svg/pfeil-rot-rechts.svg') center / contain no-repeat;
  transition: opacity 0.2s ease;
}
.v-content-tabs__tab:hover {
  color: #4a4a49;
}
.v-content-tabs__tab.is-active {
  color: #681d33;
  font-style: italic;
  font-weight: 700;
}
.v-content-tabs__tab.is-active::after {
  opacity: 1;
}
@media (min-width: 992px) {
  .v-content-tabs__tab {
    align-items: flex-start;
  }
  .v-content-tabs__tab-label {
    white-space: normal;
    overflow-wrap: break-word;
  }
  .v-content-tabs__tab::after {
    margin-top: 0.35em;
  }
}
@media (min-width: 992px) {
  .v-content-tabs--collage .v-content-tabs__tab {
    align-items: flex-start;
  }
  .v-content-tabs--collage .v-content-tabs__tab-label {
    white-space: pre-line;
  }
  .v-content-tabs--collage .v-content-tabs__tab::after {
    margin-top: 0.35em;
  }
}
.v-content-tabs__panels {
  min-width: 0;
  padding-bottom: clamp(32px, 4vw, 56px);
}
.v-content-tabs__headline {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--inn-main-font);
  color: #681d33;
}
.v-content-tabs__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 48px);
}
.v-content-tabs__group-title {
  margin: 0 0 0.75rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.v-content-tabs__list {
  margin: 0;
}
.v-content-tabs__list.rs-list-bullets li {
  color: #4a4a49;
}
.v-content-tabs__list.rs-list-bullets li::before {
  background: #4a4a49;
  /* neutral, nicht primary */
}
.v-content-tabs__accordion-trigger {
  display: none;
}
.v-content-tabs__accordion-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.v-content-tabs__accordion-icon::before,
.v-content-tabs__accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.v-content-tabs__accordion-icon::before {
  width: 14px;
  height: 2px;
}
.v-content-tabs__accordion-icon::after {
  width: 2px;
  height: 14px;
}
@media (max-width: 991px) {
  .v-content-tabs__layout {
    grid-template-columns: 1fr;
  }
  .v-content-tabs__nav--desktop {
    display: none;
  }
  .v-content-tabs__panel {
    display: block;
    border-bottom: 1px solid rgba(104, 29, 51, 0.14);
  }
  .v-content-tabs__panel:not(.is-open) .v-content-tabs__accordion-body {
    display: none;
  }
  .v-content-tabs__accordion-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 18px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: var(--inn-main-font);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    color: rgba(74, 74, 73, 0.72);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .v-content-tabs__panel.is-open .v-content-tabs__accordion-trigger {
    color: #681d33;
    font-style: italic;
    font-weight: 700;
  }
  .v-content-tabs__panel.is-open .v-content-tabs__accordion-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
  }
  .v-content-tabs__accordion-body {
    padding-bottom: 24px;
  }
  .v-content-tabs__groups {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 992px) {
  .v-content-tabs--collage .v-content-tabs__layout {
    grid-template-columns: minmax(200px, 275px) minmax(0, 1fr);
  }
}
.v-content-tabs__flat {
  display: block;
}
.v-content-tabs__flat--with-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 497px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.v-content-tabs__copy {
  min-width: 0;
  max-width: 420px;
}
@media (min-width: 992px) {
  .v-content-tabs:not(:has(.v-content-tabs__flat--with-media)):not(.v-content-tabs--collage) {
    /* HRS-72 (12.10.2026): Die Leiste ist 190 statt 174,5px breit — eine
         bewusste Abweichung vom Entwurf, auf ausdrueckliche Bestellung der
         Designerin („die ganz linke spalte breiter"). Bitte nicht auf den
         Entwurfswert zurueckstellen; die Begruendung steht in LEARNINGS.

         Der Anlass war kein Geschmack, sondern ein Fehler: Die Beschriftung
         hatte 132px (Reiter 160 minus 28 fuer den Pfeil). „WEIHNACHTS-" misst
         ungesetzt 126px und passte gerade noch — im **aktiven** Zustand wird
         der Reiter aber fett und kursiv, dann nicht mehr. Zusammen mit
         `overflow-wrap: break-word` am Label brach der Text daraufhin mitten
         im Wort („1. WEIHNACHT / S-FEIERTAG"). Deshalb traf es immer nur den
         gerade gewaehlten Reiter.

         Der Platz kommt aus der Luecke, nicht von den Inhaltsspalten: 60 → 45.
         310 + 190 + 45 = 545 — die Spalten stehen damit weiter exakt auf den
         Entwurfswerten (Inhalt ab 545, zweite Spalte 1100, je 510 breit).

         Der zweizeilige Umbruch am Bindestrich bleibt; den zeigt der Entwurf
         genauso. Beanstandet war der Bruch *innerhalb* des Wortes. */
    /* Mit der schmaleren Leiste brach „1. WEIHNACHTS-" mitten im Wort um
         („WEIHNAC / HTS-") und „HEILIG ABEND" wurde zweizeilig. Ursache war
         die globale Laufweite 0.08em — das XD fuehrt fuer diese Tab-Labels
         letterSpacingEm: null (Weihnachten, Kulinarik, Seehaus). Dazu hat die
         Leiste im Entwurf rund 13px Innenabstand statt 22px: Label und Pfeil
         enden dort bei 161px, die Linie liegt bei 174,5px. */
  }
  .v-content-tabs:not(:has(.v-content-tabs__flat--with-media)):not(.v-content-tabs--collage) .v-content-tabs__layout {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: clamp(28px, 2.35vw, 45px);
  }
  .v-content-tabs:not(:has(.v-content-tabs__flat--with-media)):not(.v-content-tabs--collage) .v-content-tabs__copy {
    max-width: none;
  }
  .v-content-tabs:not(:has(.v-content-tabs__flat--with-media)):not(.v-content-tabs--collage) .v-content-tabs__groups {
    column-gap: clamp(24px, 2.35vw, 45px);
  }
  .v-content-tabs:not(:has(.v-content-tabs__flat--with-media)):not(.v-content-tabs--collage) .v-content-tabs__group-title {
    font-size: 18px;
  }
  .v-content-tabs:not(:has(.v-content-tabs__flat--with-media)):not(.v-content-tabs--collage) .v-content-tabs__nav {
    padding-right: clamp(10px, 0.75vw, 14px);
  }
  .v-content-tabs:not(:has(.v-content-tabs__flat--with-media)):not(.v-content-tabs--collage) .v-content-tabs__tab {
    letter-spacing: normal;
  }
}
.v-content-tabs__cta {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.v-content-tabs__media {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.v-content-tabs__hero {
  position: relative;
  overflow: hidden;
  background: rgba(74, 74, 73, 0.06);
}
.v-content-tabs__hero img,
.v-content-tabs__hero picture {
  display: block;
  width: 100%;
  height: auto;
}
.v-content-tabs__hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 497 / 322;
}
.v-content-tabs__price {
  position: absolute;
  top: 22px;
  right: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  background: #faf1eb;
  padding: 18px 22px;
  box-sizing: border-box;
  min-width: 163px;
  justify-content: center;
}
.v-content-tabs__price-prefix {
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-content-tabs__price-value {
  font-family: var(--inn-main-font);
  font-weight: 700;
  color: #681d33;
}
.v-content-tabs__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.v-content-tabs__thumb {
  overflow: hidden;
  background: rgba(74, 74, 73, 0.06);
}
.v-content-tabs__thumb img,
.v-content-tabs__thumb picture {
  display: block;
  width: 100%;
  height: auto;
}
.v-content-tabs__thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 239 / 295;
}
@media (max-width: 991px) {
  .v-content-tabs__flat--with-media {
    grid-template-columns: 1fr;
  }
  .v-content-tabs__copy {
    max-width: none;
  }
}
@media (min-width: 992px) {
  .v-content-tabs__panel[hidden],
  .v-content-tabs__panel:not(.is-active) {
    display: none;
  }
  .v-content-tabs__accordion-body {
    display: block !important;
  }
}
/* --- Conference-Tabs (rsce_conference_room_tabs) — Tab-Chrome wie Content-/Room-Tabs --- */
.v-conference-tabs {
  /* Contao .block = overflow:hidden → sonst vertikaler Scroll durch Combine-Overlay */
}
.v-conference-tabs.block {
  overflow: visible;
}
.v-conference-tabs__layout {
  display: grid;
  /* Tab-Titel breiter, Raum-Panel schmäler — analog .v-content-tabs */
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: stretch;
}
.v-conference-tabs__nav {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 6px;
  border-right: 1px solid #4a4a49;
  padding-right: clamp(14px, 2vw, 22px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.v-conference-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 18px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  font-style: normal;
  color: #B6B6B6;
  cursor: pointer;
  transition: color 0.2s ease, font-weight 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.v-conference-tabs__tab-label {
  flex: 1 1 auto;
  min-width: 0;
}
.v-conference-tabs__tab::after {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  margin-left: 10px;
  opacity: 0;
  background: url('/files/contao_files/Bilder/-svg/pfeil-rot-rechts.svg') center / contain no-repeat;
  transition: opacity 0.2s ease;
}
.v-conference-tabs__tab:hover {
  color: #4a4a49;
}
.v-conference-tabs__tab.is-active {
  color: #681d33;
  font-style: italic;
  font-weight: 700;
}
.v-conference-tabs__tab.is-active::after {
  opacity: 1;
}
.v-conference-tabs__panels {
  min-width: 0;
  overflow: visible;
  padding-bottom: clamp(32px, 4vw, 56px);
}
.v-conference-tabs__headline {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--inn-main-font);
  color: #681d33;
}
.v-conference-tabs__cta {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.v-conference-tabs__accordion-trigger {
  display: none;
}
.v-conference-tabs__accordion-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.v-conference-tabs__accordion-icon::before,
.v-conference-tabs__accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.v-conference-tabs__accordion-icon::before {
  width: 14px;
  height: 2px;
}
.v-conference-tabs__accordion-icon::after {
  width: 2px;
  height: 14px;
}
@media (max-width: 991px) {
  .v-conference-tabs__layout {
    grid-template-columns: 1fr;
  }
  .v-conference-tabs__nav--desktop {
    display: none;
  }
  .v-conference-tabs__panel {
    display: block;
    border-bottom: 1px solid rgba(104, 29, 51, 0.14);
  }
  .v-conference-tabs__panel:not(.is-open) .v-conference-tabs__accordion-body {
    display: none;
  }
  .v-conference-tabs__accordion-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 18px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: var(--inn-main-font);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    color: rgba(74, 74, 73, 0.72);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .v-conference-tabs__panel.is-open .v-conference-tabs__accordion-trigger {
    color: #681d33;
    font-style: italic;
    font-weight: 700;
  }
  .v-conference-tabs__panel.is-open .v-conference-tabs__accordion-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
  }
  .v-conference-tabs__accordion-body {
    padding-bottom: 24px;
  }
}
@media (min-width: 992px) {
  .v-conference-tabs__panel[hidden],
  .v-conference-tabs__panel:not(.is-active) {
    display: none;
  }
  .v-conference-tabs__accordion-body {
    display: block !important;
  }
}
.v-conference-table {
  /* Desktop: kein Scroll-Container (overflow-x:auto erzwingt sonst auch overflow-y).
     Mobile: nur horizontal scrollen. */
}
.v-conference-table__scroll {
  overflow: visible;
}
@media (max-width: 991px) {
  .v-conference-table__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
.v-conference-table__table {
  width: 100%;
  max-width: 976px;
  border-collapse: collapse;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-conference-table thead th {
  padding: 0 8px 12px;
  font-weight: 400;
  text-align: left;
  vertical-align: bottom;
  color: #4a4a49;
  border-bottom: 0;
}
.v-conference-table__th-seat {
  text-align: center;
}
.v-conference-table__seat-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  object-fit: contain;
}
.v-conference-table__seat-label {
  display: block;
  text-align: center;
}
.v-conference-table__th-combine {
  width: 160px;
  min-width: 140px;
}
.v-conference-table__row td {
  padding: 0 8px;
  height: 45px;
  vertical-align: middle;
}
.v-conference-table__row.is-odd td {
  background: #ececec;
}
.v-conference-table__row.is-even td {
  background: #ffffff;
}
.v-conference-table__cell-name {
  min-width: 160px;
}
.v-conference-table__cell-size {
  white-space: nowrap;
}
.v-conference-table__cell-cap {
  text-align: center;
  white-space: nowrap;
}
.v-conference-table__cell-combine {
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  vertical-align: top !important;
}
.v-conference-combine {
  --combine-rows: 2;
  --row-h: 45.5px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--combine-rows) * var(--row-h));
  padding-left: 8px;
  pointer-events: none;
}
.v-conference-combine__bracket {
  width: 22px;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.v-conference-combine__dot {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: block;
  object-fit: contain;
}
.v-conference-combine__note {
  max-width: 110px;
  font-family: var(--inn-main-font);
  /* font-size: XD micro 14 — Theme/User */
  color: #4a4a49;
  line-height: 1.2;
}
.v-conference-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.v-conference-panel__media {
  min-width: 0;
}
.v-conference-panel__img {
  display: block;
  width: 100%;
  height: auto;
}
.v-conference-panel__intro {
  margin: 0 0 1.25rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-conference-panel__group-rooms {
  margin: 0 0 1.25rem;
}
.v-conference-panel__group-sqm {
  color: rgba(74, 74, 73, 0.7);
}
.v-conference-panel__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0 0 1.5rem;
}
.v-conference-panel__fact {
  margin: 0;
}
.v-conference-panel__fact dt {
  margin: 0;
  font-family: var(--inn-main-font);
  color: rgba(74, 74, 73, 0.7);
}
.v-conference-panel__fact dd {
  margin: 0.15rem 0 0;
  font-family: var(--inn-main-font);
  color: #681d33;
}
.v-conference-panel__subhead {
  margin: 0 0 0.75rem;
  font-family: var(--inn-main-font);
  color: #681d33;
}
.v-conference-panel__seating-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.v-conference-panel__seating-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-conference-panel__seating-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.v-conference-panel__seating-cap {
  font-weight: 700;
  color: #681d33;
}
@media (max-width: 991px) {
  .v-conference-panel {
    grid-template-columns: 1fr;
  }
  .v-conference-panel__facts,
  .v-conference-panel__seating-list {
    grid-template-columns: 1fr;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Tagungen — Sektions-Hilfen
   FAQ „Jetzt entdecken" hat dieselbe Anordnung: drei Spalten a 380px,
   Bilder 380x570 / 380x670 / 380x500, unten buendig, Titel auf einer Linie.
   Deshalb dieselben Regeln statt einer zweiten Kopie. */
.a-tagungen-pauschalen,
.a-faq-entdecken {
  /* HRS-81 — Entwurf (1.9.2026, 1920px): drei offene Spalten a 380px mit
     80px Abstand, keine Karten. Bilder 380x570 / 380x670 / 380x500, unten
     buendig, die mittlere 54px hoeher. Alle drei Titel auf einer Linie,
     49px unter der Bildkante. Frueher per margin-top 154/0/224 versetzt —
     das stimmte nur bei festen Bildhoehen. */
  /* Listen wie im Entwurf: durchgehend 23px Zeilenabstand, Leerzeile als
     Gruppenabstand, 30px Einzug, Punkt in Textfarbe */
  /* Mobil-Entwurf: eine Spalte, alle Bilder 352x528. Die allgemeine
     1-Spalten-Regel des Moduls (max-width 575px) verliert gegen die
     2-Spalten-Regel mit :not([data-cols]) — deshalb hier mit gleicher Kette. */
}
.a-tagungen-pauschalen .v-media-cta-cards__grid,
.a-faq-entdecken .v-media-cta-cards__grid {
  column-gap: clamp(40px, 4.17vw, 80px);
}
.a-tagungen-pauschalen .v-media-cta-card,
.a-faq-entdecken .v-media-cta-card {
  background: none;
  box-shadow: none;
  /* min-height: 0 — sonst setzt das Bild seine eigene Hoehe als Mindestmass
       gegen aspect-ratio durch (mobil 623 statt 528px) */
}
.a-tagungen-pauschalen .v-media-cta-card:hover,
.a-faq-entdecken .v-media-cta-card:hover {
  box-shadow: none;
}
.a-tagungen-pauschalen .v-media-cta-card .v-media-cta-card__media,
.a-faq-entdecken .v-media-cta-card .v-media-cta-card__media {
  min-height: 0;
}
.a-tagungen-pauschalen .v-media-cta-card:nth-child(1) .v-media-cta-card__media,
.a-faq-entdecken .v-media-cta-card:nth-child(1) .v-media-cta-card__media {
  aspect-ratio: 380 / 570;
}
.a-tagungen-pauschalen .v-media-cta-card:nth-child(2) .v-media-cta-card__media,
.a-faq-entdecken .v-media-cta-card:nth-child(2) .v-media-cta-card__media {
  aspect-ratio: 380 / 670;
}
.a-tagungen-pauschalen .v-media-cta-card:nth-child(3) .v-media-cta-card__media,
.a-faq-entdecken .v-media-cta-card:nth-child(3) .v-media-cta-card__media {
  aspect-ratio: 380 / 500;
}
.a-tagungen-pauschalen .v-media-cta-card__badge,
.a-faq-entdecken .v-media-cta-card__badge {
  left: 20px;
}
.a-tagungen-pauschalen .v-media-cta-card__body,
.a-faq-entdecken .v-media-cta-card__body {
  padding: 49px 0 0;
}
.a-tagungen-pauschalen .v-media-cta-card__title,
.a-faq-entdecken .v-media-cta-card__title {
  margin-bottom: 20px;
  color: #681d33;
}
.a-tagungen-pauschalen .v-media-cta-card__text,
.a-faq-entdecken .v-media-cta-card__text {
  margin-bottom: 23px;
  line-height: 23px;
}
.a-tagungen-pauschalen .v-media-cta-card__list.rs-list-bullets li,
.a-faq-entdecken .v-media-cta-card__list.rs-list-bullets li {
  margin-bottom: 0;
  padding-left: 30px;
  line-height: 23px;
}
.a-tagungen-pauschalen .v-media-cta-card__list.rs-list-bullets li::before,
.a-faq-entdecken .v-media-cta-card__list.rs-list-bullets li::before {
  top: 7.5px;
  background: #4a4a49;
}
.a-tagungen-pauschalen .v-media-cta-card__list.rs-list-bullets li.is-group-start,
.a-faq-entdecken .v-media-cta-card__list.rs-list-bullets li.is-group-start {
  margin-top: 23px;
}
@media (min-width: 992px) {
  .a-tagungen-pauschalen,
  .a-faq-entdecken {
    /* 54/380 der Spaltenbreite — Prozent-Margins beziehen sich auf die Breite */
  }
  .a-tagungen-pauschalen .v-media-cta-cards__grid,
  .a-faq-entdecken .v-media-cta-cards__grid {
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .a-tagungen-pauschalen .v-media-cta-card,
  .a-faq-entdecken .v-media-cta-card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    height: auto;
  }
  .a-tagungen-pauschalen .v-media-cta-card__media,
  .a-faq-entdecken .v-media-cta-card__media {
    align-self: end;
  }
  .a-tagungen-pauschalen .v-media-cta-card:nth-child(2) .v-media-cta-card__media,
  .a-faq-entdecken .v-media-cta-card:nth-child(2) .v-media-cta-card__media {
    margin-bottom: 14.21%;
  }
}
@media (max-width: 575px) {
  .a-tagungen-pauschalen .v-media-cta-cards:not([data-cols="1"]) .v-media-cta-cards__grid,
  .a-faq-entdecken .v-media-cta-cards:not([data-cols="1"]) .v-media-cta-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }
  .a-tagungen-pauschalen .v-media-cta-card:nth-child(n) .v-media-cta-card__media,
  .a-faq-entdecken .v-media-cta-card:nth-child(n) .v-media-cta-card__media {
    aspect-ratio: 352 / 528;
  }
}
.a-tagungen-cta-band {
  padding: 0 !important;
  max-width: none !important;
  width: 100%;
  overflow: hidden;
  background: #681d33;
  /* CSS-Marquee wie .a-weihnachten-newsticker — kein jConveyor nötig */
  /* Legacy: separater Button neben dem Ticker — ausblenden wenn Newsticker den Button trägt */
}
.a-tagungen-cta-band > .inside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  min-height: 100px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: clamp(20px, 3vw, 35px);
  padding-right: clamp(20px, 3vw, 35px);
}
.a-tagungen-cta-band .v-newsticker {
  --rk-ticker-h: 100px;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: var(--rk-ticker-h);
  min-height: var(--rk-ticker-h);
  display: block;
  background: transparent;
  color: #fff;
  /* standard.less setzt Ticker in Versalien; Entwurf (Tagungen, Fuer
       Unternehmen, Rahmenprogramm): normale Schreibung, 28px/400 */
  text-transform: none;
  overflow: hidden;
}
.a-tagungen-cta-band .v-newsticker__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.a-tagungen-cta-band .v-newsticker__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: rk-newsticker-scroll 80s linear infinite;
  will-change: transform;
}
.a-tagungen-cta-band .v-newsticker:hover .v-newsticker__track,
.a-tagungen-cta-band .v-newsticker:focus-within .v-newsticker__track {
  animation-play-state: paused;
}
.a-tagungen-cta-band .v-newsticker__seq {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 100%;
}
.a-tagungen-cta-band .v-newsticker__item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 0.75em;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 35px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  /* Im Entwurf steht vor dem Button kein Trennstrich */
}
.a-tagungen-cta-band .v-newsticker__item::after {
  content: '\00a0\00a0|\00a0\00a0';
  color: rgba(255, 255, 255, 0.85);
}
.a-tagungen-cta-band .v-newsticker__item:has(+ .v-newsticker__item--button)::after {
  content: none;
}
.a-tagungen-cta-band .v-newsticker__item--button {
  padding: 0 1.25em;
}
.a-tagungen-cta-band .v-newsticker__item--button::after {
  content: none;
}
.a-tagungen-cta-band .v-newsticker__item--button .v-button {
  margin: 0;
}
.a-tagungen-cta-band .v-newsticker__item--button .v-button a {
  white-space: nowrap;
}
.a-tagungen-cta-band .v-newsticker--with-button ~ .ce_rsce_button,
.a-tagungen-cta-band .v-newsticker--with-button ~ .v-button {
  display: none !important;
}
.a-tagungen-cta-band .ce_rsce_button,
.a-tagungen-cta-band .v-button {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .a-tagungen-cta-band > .inside {
    flex-direction: column;
    align-items: stretch;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .a-tagungen-cta-band .v-newsticker {
    --rk-ticker-h: 72px;
  }
  .a-tagungen-cta-band .v-newsticker__item {
    font-size: 20px;
    line-height: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .a-tagungen-cta-band .v-newsticker__track {
    animation: none;
  }
}
.v-tagungen-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 100px;
  padding: 25px 35px;
  color: #fff;
}
.v-tagungen-cta-band .inn-newsticker,
.v-tagungen-cta-band .v-newsticker {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
}
.v-tagungen-cta-band .v-button {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .v-tagungen-cta-band {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
}
.a-tagungen-natur .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-tagungen-natur .v-bleed-feature__side-cta {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.a-tagungen-natur .v-bleed-feature__title {
  color: #681d33;
}
/* Bewerten-CTA — XD: grauer Block 1300×435 im Container, nicht Full-Bleed
   Insets: L/R 60.5 · Top 70 · Bottom 54 (Content ab x 370.5 im 310→1610-Box)

   HRS-233: Die 60px seitlich galten auf jeder Breite. Auf 1920px sind sie
   3 % der Bildschirmbreite, auf 390px ein Drittel — der Text stand dort bei
   80 statt bei den 21px aus dem mobilen Artboard. Deshalb mitwachsend statt
   fest; ab etwa 1150px Fensterbreite sind es unveraendert 60px, Desktop
   bleibt also wie beschrieben. Kein neues `!important` — die vorhandene
   Deklaration wurde geaendert, nicht eine zweite danebengestellt. */
.mod_article.a-tagungen-bewerten,
.mod_article_container.a-tagungen-bewerten {
  max-width: var(--inn-container-width);
  width: min(var(--inn-container-width), calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(48px, 6vw, 88px);
  box-sizing: border-box;
  background: #ececec;
  padding: 70px clamp(20px, 5.2vw, 60px) 88px !important;
}
.a-tagungen-bewerten > .inside {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}
.a-tagungen-bewerten .v-headline {
  max-width: 728px;
  margin-bottom: 0;
}
.a-tagungen-bewerten .v-headline-subtext {
  color: #4a4a49;
}
.a-tagungen-bewerten .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-tagungen-bewerten .v-headline-text-container {
  max-width: 728px;
  text-align: left;
  /* XD: ~37px unter H2 */
  margin-top: 37px;
}
.a-tagungen-bewerten .ce_rsce_button,
.a-tagungen-bewerten .v-button {
  /* XD: ~40px unter Text */
  margin-top: 40px;
}
@media (max-width: 767px) {
  .a-tagungen-bewerten {
    width: calc(100% - 40px);
    padding: 40px 24px 56px !important;
    margin-bottom: clamp(40px, 8vw, 64px);
  }
  .a-tagungen-bewerten .v-headline-text-container {
    margin-top: 24px;
  }
  .a-tagungen-bewerten .ce_rsce_button,
  .a-tagungen-bewerten .v-button {
    margin-top: 28px;
  }
}
/* ==========================================================================
   Für Unternehmen (Übersicht) — /fuer-unternehmen
   ========================================================================== */
.v-contact-block {
  height: 100%;
  box-sizing: border-box;
}
.v-contact-block__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 40px);
  background: #ececec;
}
.v-contact-block__copy {
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-contact-block__copy h3 {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #4a4a49;
}
.v-contact-block__copy p {
  margin: 0 0 0.75rem;
}
.v-contact-block__copy p:last-child {
  margin-bottom: 0;
}
.v-contact-block__cta {
  /* CTA + Icons als Gruppe nach unten; Icons dicht am Button */
  margin-top: auto;
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.v-contact-block__items {
  list-style: none;
  margin: 0;
  padding: clamp(0.75rem, 1.5vw, 1.1rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px) clamp(24px, 3vw, 48px);
}
.v-contact-block__item-wrap {
  margin: 0;
  padding: 0;
}
.v-contact-block__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #681d33;
  font-family: var(--inn-main-font);
}
.v-contact-block__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #681d33;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.v-contact-block__icon picture,
.v-contact-block__icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.v-contact-block__label {
  color: #681d33;
}
.a-unternehmen-firmen {
  /* XD-Icons kompakt halten (SVGs sonst zu dominant) */
  /* Der frueher hier stehende 575px-Block hat die Iconliste mit `!important`
     auf EINE Spalte gezwungen — unerreichbar fuer jede spaetere Regel. Alle
     Mobil-Artboards zeigen zwei Spalten. Entfernt beim projektweiten
     Nachziehen der Icon-Kaesten (HRS-204/216/220/241, auf Ansage auch auf
     den Seiten ohne eigenes Ticket). */
}
.a-unternehmen-firmen .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-unternehmen-firmen .a-unternehmen-firmen__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.a-unternehmen-firmen .a-unternehmen-firmen__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 1.15rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.a-unternehmen-firmen .a-unternehmen-firmen__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a4a49;
}
.a-unternehmen-firmen .a-unternehmen-firmen__icons {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.a-unternehmen-firmen .v-icons-container-inner {
  width: 100%;
  --inn-cols-d: 4;
  --inn-cols-t: 2;
  --inn-cols-m: 1;
}
.a-unternehmen-firmen .v-icons-container-element.v-inn-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 32px) !important;
  width: 100%;
  flex-direction: unset !important;
  align-items: stretch;
}
.a-unternehmen-firmen .v-single-icon-wrapper {
  min-width: 0;
  height: auto;
  max-width: none !important;
  flex: unset !important;
}
.a-unternehmen-firmen .single-icon,
.a-unternehmen-firmen .v-inn-single-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}
.a-unternehmen-firmen .icon-img-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 40px;
}
.a-unternehmen-firmen .single-icon img,
.a-unternehmen-firmen .v-inn-single-icon img,
.a-unternehmen-firmen .icon-img-container img,
.a-unternehmen-firmen .icon-img-container svg {
  display: block;
  width: auto;
  height: 40px;
  max-width: 52px;
}
.a-unternehmen-firmen .v-icons-container-element-text,
.a-unternehmen-firmen .single-icon > span,
.a-unternehmen-firmen .v-inn-single-icon > span {
  font-family: var(--inn-main-font);
  color: #681d33;
  white-space: pre-line;
}
@media (max-width: 991px) {
  .a-unternehmen-firmen .v-icons-container-element.v-inn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 991px) {
  .a-unternehmen-firmen .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
}
.a-unternehmen-individuell {
  /* HRS-76: Button und Icons nicht an den Kachelboden druecken. Entwurf
     (Kachel 860x498): Textende 207 -> Button 246 (39px), Button-Ende 296 ->
     Icons 346 (50px), darunter bleiben 100px frei. */
}
.a-unternehmen-individuell .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-unternehmen-individuell .row.ce_rowStart {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.a-unternehmen-individuell .a-unternehmen-rahmen-card {
  height: 100%;
}
.a-unternehmen-individuell .v-contact-block {
  height: 100%;
}
.a-unternehmen-individuell .v-contact-block__cta {
  margin-top: 39px;
  padding-top: 0;
}
.a-unternehmen-individuell .v-contact-block__items {
  padding-top: 50px;
}
@media (max-width: 991px) {
  .a-unternehmen-individuell .row.ce_rowStart > .ce_column.col-4,
  .a-unternehmen-individuell .row.ce_rowStart > .ce_column.col-8 {
    grid-column: span 12;
  }
}
.mod_article.a-unternehmen-lage,
.mod_article_container.a-unternehmen-lage {
  /* wie Startseite .a-riessersee — Container + weiß, kein Mauve-Full-Bleed */
  max-width: var(--inn-container-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background: #fff;
  padding: 3rem 20px 4.5rem;
  /* Focus-Gallery Scale-Animation darf nicht abgeschnitten werden */
  overflow: visible;
}
.a-unternehmen-lage {
  overflow: visible;
  /* HRS-77: „Ein paar Eindruecke" braucht Luft nach oben. Entwurf: Bildende
     Auszeichnungen 6118 -> Titel 6465 = 347px (Desktop); mobil 76px. */
}
.a-unternehmen-lage.block,
.a-unternehmen-lage > .inside,
.a-unternehmen-lage .a-unternehmen-lage__gallery,
.a-unternehmen-lage .v-focus-gallery.a-unternehmen-lage__gallery,
.a-unternehmen-lage .ce_rsce_focus_gallery.block {
  overflow: visible;
}
.a-unternehmen-lage .v-headline-type-h2 .v-headline-text,
.a-unternehmen-lage .v-headline-type-h3 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-unternehmen-lage .v-headline {
  margin-bottom: 1.75rem;
}
.a-unternehmen-lage .row.ce_rowStart + .ce_rsce_headline {
  margin-top: clamp(76px, 18.07vw, 347px);
}
.a-unternehmen-lage .a-unternehmen-lage__map,
.a-unternehmen-lage .v-riessersee-body {
  position: relative;
}
.a-unternehmen-lage .v-hotel-map {
  margin-top: 0;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.a-unternehmen-lage .row.ce_rowStart {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.a-unternehmen-lage .a-unternehmen-lage__award-img {
  max-width: 100%;
}
.a-unternehmen-lage .a-unternehmen-lage__award-img figure,
.a-unternehmen-lage .a-unternehmen-lage__award-img picture,
.a-unternehmen-lage .a-unternehmen-lage__award-img img {
  display: block;
  width: 100%;
  height: auto;
}
.a-unternehmen-lage .a-unternehmen-lage__gallery {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  overflow: visible;
}
@media (max-width: 991px) {
  .a-unternehmen-lage .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
}
.a-unternehmen-faq {
  max-width: var(--inn-container-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 3.5rem 20px;
  /* 2-Spalten wie .a-faq-grid */
}
.a-unternehmen-faq .v-headline {
  text-align: left;
  margin-bottom: 104px;
}
.a-unternehmen-faq .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.15;
  font-weight: 300;
  color: #681d33;
}
.a-unternehmen-faq .faq-page-accordion--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(22px, 3vw, 32px);
  align-items: start;
}
.a-unternehmen-faq .faq-page-accordion--grid .faq-card {
  margin-bottom: 0 !important;
  width: 100%;
  min-width: 0;
}
.a-unternehmen-faq--no-headline > .inside > .ce_rsce_headline,
.a-unternehmen-faq--no-headline .v-headline {
  display: none !important;
}
@media (max-width: 767px) {
  .a-unternehmen-faq .v-headline {
    margin-bottom: clamp(48px, 8vw, 72px);
  }
  .a-unternehmen-faq .faq-page-accordion--grid {
    grid-template-columns: 1fr;
  }
}
.a-tagungen-services {
  /* v-inn-icons-flex setzt display:flex und überschreibt .v-inn-grid — 4er-Grid erzwingen */
  /* Projektstandard ~40px (wie .a-unternehmen-firmen) */
  /* Der frueher hier stehende 575px-Block hat die Iconliste mit `!important`
     auf EINE Spalte gezwungen — unerreichbar fuer jede spaetere Regel. Alle
     Mobil-Artboards zeigen zwei Spalten. Entfernt beim projektweiten
     Nachziehen der Icon-Kaesten (HRS-204/216/220/241, auf Ansage auch auf
     den Seiten ohne eigenes Ticket). */
}
.a-tagungen-services .v-icons-container-element-wrapper {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.a-tagungen-services .v-icons-container-inner {
  width: 100%;
  --inn-cols-d: 4;
  --inn-cols-t: 2;
  --inn-cols-m: 1;
  --inn-gap-d: 48px 24px;
  --inn-gap-t: 28px 20px;
  --inn-gap-m: 24px;
}
.a-tagungen-services .v-icons-container-element.v-inn-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px) !important;
  width: 100%;
  flex-direction: unset !important;
  align-items: stretch;
}
.a-tagungen-services .v-single-icon-wrapper {
  min-width: 0;
  height: auto;
  max-width: none !important;
  flex: unset !important;
}
.a-tagungen-services .single-icon,
.a-tagungen-services .v-inn-single-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}
.a-tagungen-services .icon-img-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 40px;
}
.a-tagungen-services .single-icon img,
.a-tagungen-services .v-inn-single-icon img,
.a-tagungen-services .icon-img-container img,
.a-tagungen-services .icon-img-container svg {
  display: block;
  width: auto;
  height: 40px;
  max-width: 52px;
}
.a-tagungen-services .single-icon > span,
.a-tagungen-services .v-inn-single-icon > span {
  white-space: pre-line;
}
@media (max-width: 991px) {
  .a-tagungen-services .v-icons-container-element.v-inn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
  }
}
.a-tagungen-raeume.block,
.a-tagungen-raeume .inside,
.a-tagungen-raeume .ce_rsce_conference_room_tabs.block {
  overflow: visible;
}
.a-tagungen-plan .content-image,
.a-tagungen-plan .a-tagungen-plan__img {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.a-tagungen-plan .content-image figure,
.a-tagungen-plan .a-tagungen-plan__img figure,
.a-tagungen-plan .content-image picture,
.a-tagungen-plan .a-tagungen-plan__img picture,
.a-tagungen-plan .content-image img,
.a-tagungen-plan .a-tagungen-plan__img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}
.a-tagungen-querverlinkung .v-headline-type-h2 .v-headline-text,
.a-tagungen-querverlinkung .v-headline.v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33 !important;
}
/* --- Media-CTA-Karten (rsce_media_cta_cards) ------------------------------- */
.v-media-cta-cards.block {
  overflow: visible;
}
.v-media-cta-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--v-media-cta-cols, 3), minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.v-media-cta-cards[data-cols="1"] .v-media-cta-cards__grid {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 991px) {
  .v-media-cta-cards:not([data-cols="1"]) .v-media-cta-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-media-cta-cards__grid {
    grid-template-columns: 1fr;
  }
}
.v-media-cta-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
}
.v-media-cta-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 235;
  flex-shrink: 0;
  overflow: visible;
  background: #efddce;
}
.v-media-cta-card__image {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.v-media-cta-card__image picture,
.v-media-cta-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-media-cta-card__badge {
  position: absolute;
  left: clamp(18px, 3vw, 30px);
  bottom: 0;
  z-index: 2;
  transform: translateY(50%);
  background: #4a4a49;
  color: #fff;
  padding: 0.55rem 0.95rem;
  min-height: 55px;
  min-width: 187px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.v-media-cta-card__badge-text {
  font-family: var(--inn-main-font);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.v-media-cta-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(2rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 1.9rem) clamp(1.5rem, 2.5vw, 2rem);
}
.v-media-cta-card__title {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #4a4a49;
}
.v-media-cta-card__text {
  margin: 0 0 1.25rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-media-cta-card__cta {
  margin-top: auto;
  padding-top: 0.5rem;
}
.v-media-cta-card__footnote {
  margin: 0.75rem 0 0;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-media-cta-card__list {
  margin: 0 0 1.25rem;
  padding: 0;
}
.v-media-cta-card__list.rs-list-bullets li {
  color: #4a4a49;
}
.v-media-cta-card__list.rs-list-bullets li::before {
  background: #4a4a49;
}
/* Rail + Slider-Variante (Firmenevents Kulinarik) */
.v-media-cta-cards--rail-slider.block {
  overflow: visible;
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__body {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  overflow: visible;
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__icons {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 220px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  /* HRS-83: Icons oben auf Bildhoehe, nicht mittig zur Sliderhoehe */
  justify-content: flex-start;
  gap: clamp(28px, 4vw, 48px);
  position: relative;
  z-index: 6;
  align-self: stretch;
  /*
     * Weiße Vorhang-Fläche hinter den Icons, über dem Slider:
     * deckt Loop-Karten ab (inkl. negativem margin-top der Medien).
     */
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__icons::before {
  content: '';
  position: absolute;
  top: -80px;
  bottom: -80px;
  right: -1.25rem;
  /* etwas in den Gap zum Slider */
  left: -100vw;
  background: #fff;
  z-index: 0;
  pointer-events: none;
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__icon-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__icon-art {
  width: 40px;
  height: auto;
  max-height: 40px;
  display: block;
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__icon-text {
  font-family: var(--inn-main-font);
  color: #681d33;
  /* Das Template setzt die Umbrueche bereits per nl2br — pre-line hat jeden
       Umbruch verdoppelt (Leerzeile zwischen den Zeilen, 66 statt 44px) */
  white-space: normal;
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__slider {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  box-sizing: border-box;
  /* Zusätzliche Abdeckung links (Fallback neben Icon-Vorhang) */
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__slider::before {
  content: '';
  position: absolute;
  top: -80px;
  bottom: -40px;
  right: 100%;
  width: 100vw;
  background: #fff;
  z-index: 2;
  pointer-events: none;
}
.v-media-cta-cards--rail-slider .v-media-cta-cards__swiper,
.v-media-cta-cards--rail-slider .swiper-container {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.v-media-cta-cards--rail-slider .swiper-slide {
  width: 420px;
  max-width: 85vw;
  height: auto;
}
.v-media-cta-cards--rail-slider .v-media-cta-card {
  min-height: 745px;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  border: 0;
}
.v-media-cta-cards--rail-slider .v-media-cta-card__media {
  margin-top: -28px;
}
@media (max-width: 991px) {
  .v-media-cta-cards--rail-slider .v-media-cta-cards__body {
    flex-direction: column;
  }
  .v-media-cta-cards--rail-slider .v-media-cta-cards__icons {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem 2rem;
  }
  .v-media-cta-cards--rail-slider .v-media-cta-cards__icons::before {
    display: none;
  }
  .v-media-cta-cards--rail-slider .v-media-cta-cards__icon-item {
    flex: 1 1 140px;
    max-width: 200px;
  }
  .v-media-cta-cards--rail-slider .v-media-cta-cards__slider {
    margin-right: 0;
    padding-right: 0;
    width: 100%;
  }
  .v-media-cta-cards--rail-slider .v-media-cta-cards__slider::before {
    display: none;
  }
  .v-media-cta-cards--rail-slider .swiper-slide {
    width: min(420px, 100%);
  }
  .v-media-cta-cards--rail-slider .v-media-cta-card {
    min-height: 0;
  }
  .v-media-cta-cards--rail-slider .v-media-cta-card__media {
    margin-top: 0;
  }
}
/* --- Weihnachten: Menüs für die Festtage ----------------------------------- */
.mod_article.a-weihnachten-menus,
.mod_article_container.a-weihnachten-menus {
  background: #faf6f7;
  overflow: visible;
}
.a-weihnachten-menus {
  background: #faf6f7;
  overflow: visible !important;
}
.a-weihnachten-menus > .inside {
  overflow: visible;
}
.a-weihnachten-menus .v-headline {
  text-align: left;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.a-weihnachten-menus .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-weihnachten-menus .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-weihnachten-menus .v-headline-text-container {
  text-align: left;
  max-width: 630px;
  margin-top: clamp(12px, 2vw, 20px);
  color: #4a4a49;
}
/* --- Weihnachten: Als extra Schmankerl ------------------------------------- */
.a-weihnachten-schmankerl {
  background: #fff;
  overflow: visible !important;
}
.a-weihnachten-schmankerl > .inside {
  overflow: visible;
}
.a-weihnachten-schmankerl .v-headline {
  text-align: left;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.a-weihnachten-schmankerl .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-weihnachten-schmankerl .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-weihnachten-schmankerl .v-headline-text-container {
  text-align: left;
  max-width: 630px;
  margin-top: clamp(12px, 2vw, 20px);
  color: #4a4a49;
}
.a-weihnachten-schmankerl .v-media-cta-cards {
  margin-top: clamp(8px, 1.5vw, 16px);
}
/* --- Zimmer-Übersicht: Panorama-Trenner (Core-Bild) ------------------------- */
.mod_article.a-trenner-bild,
.mod_article_container.a-trenner-bild {
  padding: 0 !important;
  max-width: none !important;
  width: 100%;
  overflow: hidden;
}
.a-trenner-bild {
  padding: 0 !important;
  overflow: hidden;
}
.a-trenner-bild .content-image,
.a-trenner-bild .ce_image {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.a-trenner-bild__media {
  margin: 0;
}
.a-trenner-bild__media figure {
  margin: 0;
}
.a-trenner-bild__media picture,
.a-trenner-bild__media img {
  display: block;
  width: 100%;
  min-height: 400px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767px) {
  .a-trenner-bild__media picture,
  .a-trenner-bild__media img {
    min-height: 240px;
  }
}
.a-zimmer-detail-reader {
  padding: 0 !important;
  overflow: visible !important;
}
.a-zimmer-detail-reader > .inside {
  max-width: none;
  padding: 0;
  overflow: visible;
}
.mod_rs_room_reader.block,
.mod_rs_room_reader .v-room-detail.block {
  overflow: visible;
}
.v-room-detail {
  color: #681d33;
  background: #fff;
  overflow: visible;
}
.v-room-detail__hero {
  position: relative;
  background: #fff;
  overflow: visible;
}
.v-room-detail__hero-intro {
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(24px, 4vw, 40px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
}
.v-room-detail__kicker {
  margin: 0;
  display: block;
  width: 100%;
  max-width: 100%;
}
.v-room-detail__h1 {
  font-family: var(--inn-main-font);
  color: #681d33;
  margin: clamp(8px, 1.5vw, 16px) 0 0;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 45px);
  line-height: 1.12;
  display: block;
  width: 100%;
  max-width: 100%;
}
.v-room-detail__hero-stage {
  display: block;
  position: relative;
  width: 100%;
  overflow: visible;
  background: #fff;
}
.v-room-detail__hero-anchor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--inn-container-width);
  height: 0;
  z-index: 3;
  pointer-events: none;
}
.v-room-detail__badge {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  pointer-events: auto;
  width: clamp(140px, 14vw, 220px);
  z-index: 4;
}
.v-room-detail__badge .rs-kreis-patch {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.v-room-detail__hero-media {
  display: block;
  width: 100vw;
  padding: 0;
  box-sizing: border-box;
  background: #fff;
}
.v-room-detail__hero-media-frame {
  width: auto;
  padding: 0 20px;
  aspect-ratio: 1920 / 600;
  overflow: hidden;
}
.v-room-detail__hero-media-frame picture,
.v-room-detail__hero-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-room-detail__facts-band {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.v-room-detail__facts-wrap {
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}
.v-room-detail__facts {
  margin: 0;
  padding: 52px;
  padding-right: 0;
  box-sizing: border-box;
  background: #faf6f7;
  font-family: var(--inn-main-font);
  color: #681d33;
  font-weight: 500;
  list-style: none;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  position: relative;
}
.v-room-detail__facts:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: calc(((100vw - 1300px) / 2) - 27.5px);
  background: #faf6f7;
}
.v-room-detail__facts-item {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.v-room-detail__facts-sep {
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: 56px;
  margin: 0 clamp(18px, 2.5vw, 32px);
  padding: 0;
  background: rgba(104, 29, 51, 0.28);
  list-style: none;
}
.v-room-detail__content {
  padding: 0;
}
.v-room-detail__content-inner {
  display: block;
}
.v-room-detail__section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
  text-align: left;
}
.v-room-detail__section-head .v-headline-subtext,
.v-room-detail__section-head .v-headline-main,
.v-room-detail__section-head .v-headline-text {
  text-align: left;
}
.v-room-detail__section-head.v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.15;
  font-weight: 300;
  color: #681d33;
  overflow: visible;
}
.v-room-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.v-room-detail__intro {
  font-family: var(--inn-main-font);
  color: #4a4a49;
  margin-bottom: 0;
}
.v-room-detail__cta {
  margin-top: clamp(24px, 3vw, 36px);
}
.v-room-detail__cta .v-button a,
.v-room-detail__cta .v-button a .v-button-label {
  text-decoration: none !important;
}
.v-room-detail__aside .rs-list-bullets {
  margin: 0;
}
.v-room-detail__aside .rs-list-bullets li::before {
  background: #4a4a49;
}
.v-room-detail__gallery-section {
  background: #fff;
  overflow: visible !important;
}
.v-room-detail__gallery-section .inside {
  overflow: visible !important;
}
.v-room-detail__gallery {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  --rd-gallery-gap: 11px;
  --rd-gallery-h: 360px;
  --rd-gallery-active-w: 780px;
  --rd-gallery-inactive-w-a: 360px;
  --rd-gallery-inactive-w-b: 480px;
  --rd-gallery-inactive-w-c: 420px;
  --rd-gallery-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --rd-gallery-duration: 0.5s;
}
.v-room-detail__gallery-viewport {
  position: relative;
  width: 100%;
  max-width: none;
  height: var(--rd-gallery-h);
  overflow: visible;
  outline: none;
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  box-sizing: content-box;
}
.v-room-detail__gallery-track {
  display: flex;
  align-items: stretch;
  gap: var(--rd-gallery-gap);
  height: 100%;
  will-change: transform;
  transition: transform var(--rd-gallery-duration) var(--rd-gallery-ease);
}
.v-room-detail__gallery-track.is-dragging {
  transition: none;
}
.v-room-detail__slide {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: var(--rd-gallery-h);
  width: var(--rd-gallery-inactive-w-a);
  max-width: none;
  overflow: hidden;
  background: #efddce;
  transition: width var(--rd-gallery-duration) var(--rd-gallery-ease);
}
.v-room-detail__slide[data-gallery-clone] {
  pointer-events: none;
}
.v-room-detail__slide.is-size-b:not(.is-active) {
  width: var(--rd-gallery-inactive-w-b);
}
.v-room-detail__slide.is-size-c:not(.is-active) {
  width: var(--rd-gallery-inactive-w-c);
}
.v-room-detail__slide.is-active {
  width: var(--rd-gallery-active-w);
  max-width: calc(100vw - 40px);
}
.v-room-detail__slide picture,
.v-room-detail__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-room-detail__price {
  position: absolute;
  top: clamp(12px, 1.5vw, 20px);
  right: 0;
  z-index: 2;
  max-width: 210px;
  pointer-events: none;
}
.v-room-detail__gallery-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(20px, 3vw, 32px);
}
.v-room-detail__nav {
  margin: 0;
  flex: 0 0 auto;
}
.v-room-detail__nav .v-swiper-nav {
  justify-content: flex-start;
  margin-top: 0;
  gap: 12px;
}
.v-room-detail__nav .bh-button-prev.is-disabled,
.v-room-detail__nav .bh-button-next.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.v-room-detail__gallery-note {
  margin: 0;
  margin-left: auto;
  flex: 0 1 auto;
  max-width: min(520px, 55%);
  font-family: var(--inn-main-font);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 300;
  color: rgba(74, 74, 73, 0.72);
  text-align: right;
}
@media (max-width: 991px) {
  .v-room-detail__gallery {
    --rd-gallery-h: 280px;
    --rd-gallery-active-w: 780px;
    --rd-gallery-inactive-w-a: 240px;
    --rd-gallery-inactive-w-b: 280px;
    --rd-gallery-inactive-w-c: 260px;
  }
  .v-room-detail__facts {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 12px;
    min-height: auto;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .v-room-detail__facts-sep {
    height: 32px;
  }
  .v-room-detail__grid {
    grid-template-columns: 1fr;
  }
  .v-room-detail__gallery-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .v-room-detail__gallery-note {
    margin-left: 0;
    max-width: none;
    text-align: left;
  }
}
@media (max-width: 767px) {
  .v-room-detail__badge {
    width: clamp(100px, 28vw, 160px);
  }
  .v-room-detail__hero-media {
    aspect-ratio: auto;
  }
  .v-room-detail__hero-media-frame {
    aspect-ratio: 4 / 3;
  }
}
.v-room-amenities {
  background: #fff;
}
.v-room-amenities__head {
  margin-bottom: clamp(28px, 4vw, 48px);
  text-align: left;
}
.v-room-amenities__head .v-headline-subtext,
.v-room-amenities__head .v-headline-main,
.v-room-amenities__head .v-headline-text {
  text-align: left;
}
.v-room-amenities__head.v-headline-type-h2 .v-headline-text,
.v-room-amenities__head .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.15;
  font-weight: 300;
  color: #681d33;
}
.v-room-amenities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.v-room-amenities__group-title {
  font-family: var(--inn-main-font);
  color: #681d33;
  margin: 0 0 1rem;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
}
.v-room-amenities__list {
  margin: 0;
}
.v-room-amenities__list li::before {
  background: #4a4a49;
}
@media (max-width: 991px) {
  .v-room-amenities__grid {
    grid-template-columns: 1fr;
  }
}
.v-inclusions-swiper {
  padding: 0 0 clamp(32px, 4vw, 48px);
  /* Contao .block + Swiper default = overflow:hidden — Schatten links/rechts sichtbar */
  /* Icon-Tag-Karten: 3 Slides im Container — Breite vom Swiper */
  /* Grid-Karten etwas breiter → Illustrationen dürfen überragen */
  /* Grid: kein Swiper-Overflow-Mask nötig */
  /* Feste Pixel-Quadrat-Box → immer Kreis (SVG beeinflusst die Größe nicht) */
  /* Im Entwurf (Inklusivleistungen, Export 1.9.2026) haben alle Kreise
     dieselbe Farbe #faf6f7 — die frueheren Toenungen je Kategorie gibt es
     dort nicht mehr. Klassen bleiben, falls sie wieder gebraucht werden. */
  /* Zusatzbox unter einer Kategorie (Entwurf: 630x326, weiss, Ueberschrift
     28px in Primaerfarbe, 31px unter der Kartenreihe) */
  /* Nachhaltigkeit „Unsere Werte“ — gleicher Card-Aufbau, Kreis #52684F @ 15 % */
  /* Illustration: absolut zentriert, max in Kreis; leichtes Überragen wie XD */
  /* User: H3-Optik (28px) — alle Labels starten auf gleicher Höhe */
  /* Kategorie-Grid (Übersichtsseite) — gleiche Cards, 3 Spalten */
}
.v-inclusions-swiper.block {
  overflow: visible;
}
.v-inclusions-swiper__slider {
  --rs-incl-mask-bg: #fff;
  position: relative;
  overflow: visible;
  margin-top: -10px;
  margin-bottom: -10px;
  padding: 10px 0;
  box-sizing: border-box;
  /* Loop-/Overflow-Karten links überdecken (wie News-/Reviews-Swiper) */
}
.v-inclusions-swiper__slider::before {
  content: '';
  position: absolute;
  /*
       * HRS-170/171: Die Maske deckte die Nachbarkarten ab, ihren Schatten
       * aber nicht. Gemessen: Der Kartenschatten ist `0 0 18px` breit, der
       * Slider polstert nur 10px — die restlichen 8px liefen oben und unten
       * an der Maske vorbei und standen als blasse Linie quer neben dem
       * Slider. Genau die hat die Designerin beanstandet; am Bild nachgemessen
       * lief sie ueber die vollen 310px links des Sliders.
       *
       * 24px ist derselbe Wert, mit dem an anderer Stelle bereits
       * `overflow-clip-margin` auf genau diesen Schatten eingestellt ist.
       */
  top: -24px;
  bottom: -24px;
  right: 100%;
  width: 100vw;
  background: var(--rs-incl-mask-bg, #fff);
  z-index: 5;
  pointer-events: none;
}
.v-inclusions-swiper__swiper,
.v-inclusions-swiper .swiper-container {
  overflow: visible !important;
}
.v-inclusions-swiper .swiper-wrapper {
  overflow: visible;
}
.v-inclusions-swiper .swiper-slide {
  display: flex;
  /* HRS-112 / HRS-143: Die Kacheln waren 300px breit, der Text dadurch
       gequetscht. Sollwert aus dem Artboard „Zimmer Kategorie Detailansicht":
       vier Kacheln à 410px bei x=310, 755, 1200 und 1645, also 35px Abstand.
       Die Regel trifft nur diese eine Stelle — auf allen anderen Seiten laeuft
       der Baustein in der Variante `v-icon-tag-cards` mit `width: auto`
       (nachgemessen: 415px, und die ist laut HRS-143 richtig so). */
  width: min(410px, 78vw);
  height: auto;
  box-sizing: border-box;
  overflow: visible;
}
.v-inclusions-swiper.v-icon-tag-cards .swiper-slide {
  width: auto;
}
.v-inclusions-swiper--grid .swiper-slide,
.v-inclusions-swiper--grid .v-inclusions-swiper__grid-item {
  overflow: visible;
}
.v-inclusions-swiper--grid .v-inclusions-swiper__slider::before {
  display: none;
}
.v-inclusions-swiper__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  box-sizing: border-box;
  overflow: visible;
}
.v-inclusions-swiper__media {
  position: relative;
  flex: 0 0 auto;
  height: 280px;
  min-height: 280px;
  /* Extra Luft unten zwischen Kreis/Illustration und Hashtag */
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 28px) clamp(56px, 6vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: visible;
  box-sizing: border-box;
}
.v-inclusions-swiper__circle {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #faf6f7;
  overflow: visible;
  flex: 0 0 180px;
  align-self: center;
  box-sizing: border-box;
}
@media (max-width: 575px) {
  .v-inclusions-swiper__circle {
    width: 150px;
    height: 150px;
    flex-basis: 150px;
  }
}
.v-inclusions-swiper__card--hotel .v-inclusions-swiper__circle {
  background: #faf6f7;
}
.v-inclusions-swiper__card--genuss .v-inclusions-swiper__circle,
.v-inclusions-swiper__card--wellness .v-inclusions-swiper__circle,
.v-inclusions-swiper__card--aktiv .v-inclusions-swiper__circle {
  background: #faf6f7;
}
.v-inclusions-swiper__note {
  /* nicht als Flex-Zeile erben — Ueberschrift steht ueber dem Text */
  display: block;
  max-width: 630px;
  margin: 31px 0 0;
  padding: 46px 40px;
  background: #fff;
  box-sizing: border-box;
}
.v-inclusions-swiper__note-title {
  margin: 0 0 20px;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 37px;
  font-weight: 400;
  color: #681d33;
}
.v-inclusions-swiper__note-text {
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #4a4a49;
}
.v-inclusions-swiper__note-text p {
  margin: 0 0 23px;
}
.v-inclusions-swiper__note-text p:last-child {
  margin-bottom: 0;
}
.v-inclusions-swiper__card--nachhalt .v-inclusions-swiper__circle {
  background: rgba(82, 104, 79, 0.15);
}
.v-inclusions-swiper__illu {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%) scale(1.08);
  transform-origin: center center;
  z-index: 1;
  pointer-events: none;
}
.v-inclusions-swiper__tag {
  position: absolute;
  left: clamp(14px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 18px);
  font-family: var(--inn-main-font);
  font-weight: 700;
  font-style: italic;
  color: #4a4a49;
  margin: 0;
  z-index: 2;
}
.v-inclusions-swiper__body {
  padding: 0 clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 24px);
  min-height: 120px;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
}
.v-inclusions-swiper__label {
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.25;
  color: #4a4a49;
  margin: 0;
  white-space: pre-line;
}
@media only screen and (max-width: 767px) {
  .v-inclusions-swiper__label {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.v-inclusions-swiper__nav {
  margin-top: 1.5rem;
  padding-top: 0!important;
  padding-bottom: 0!important;
}
.v-inclusions-swiper__nav .v-swiper-nav {
  justify-content: flex-start;
  margin-top: 0;
}
.v-inclusions-swiper--grid {
  padding-bottom: clamp(48px, 6vw, 80px);
}
.v-inclusions-swiper--grid .v-inclusions-swiper__group {
  margin-top: clamp(14px, 2vw, 24px);
}
.v-inclusions-swiper--grid .v-inclusions-swiper__group:first-child {
  margin-top: clamp(10px, 1.5vw, 16px);
}
.v-inclusions-swiper--grid .v-inclusions-swiper__category {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.25;
  color: #4a4a49;
}
@media only screen and (max-width: 767px) {
  .v-inclusions-swiper--grid .v-inclusions-swiper__category {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.v-inclusions-swiper--grid .v-inclusions-swiper__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.v-inclusions-swiper--grid .v-inclusions-swiper__grid-item {
  min-width: 0;
  display: flex;
}
.v-inclusions-swiper--grid .v-inclusions-swiper__card {
  width: 100%;
  min-height: 100%;
}
@media (max-width: 991px) {
  .v-inclusions-swiper--grid .v-inclusions-swiper__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-inclusions-swiper--grid .v-inclusions-swiper__grid {
    grid-template-columns: 1fr;
  }
}
.a-zimmer-lageplan {
  padding: clamp(48px, 6vw, 80px) 0;
}
.a-zimmer-lageplan .v-headline {
  text-align: left;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.a-zimmer-lageplan .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.15;
  font-weight: 300;
  color: #681d33;
}
.a-zimmer-lageplan .content-image {
  margin: 0;
  max-width: none;
}
.a-zimmer-lageplan .content-image picture,
.a-zimmer-lageplan .content-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.a-trenner-cta {
  /*
   * Verfügbarkeit-Trenner: Bild 2775×1320 — globale 722px-Höhe schneidet
   * zu stark zu. Aspect-Ratio + contain, damit der Ausschnitt stimmt.
   */
}
.a-trenner-cta .v-trenner__content {
  max-width: none;
  width: 100%;
}
.a-trenner-cta .v-trenner__text {
  max-width: none;
}
.a-trenner-cta .v-trenner__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: center;
}
.a-trenner-cta .v-button {
  width: auto !important;
}
.a-trenner-cta .v-button > a {
  border-radius: 0 !important;
  text-decoration: none !important;
  width: auto !important;
  min-width: 160px;
}
.a-trenner-cta .v-button .v-button-label {
  text-decoration: none !important;
}
@media (min-width: 992px) {
  .a-trenner-cta .v-trenner {
    aspect-ratio: 2775 / 1320;
    min-height: 0 !important;
    height: auto;
    grid-template-rows: minmax(0, 1fr);
  }
  .a-trenner-cta .v-trenner .v-trenner__media {
    min-height: 0 !important;
    height: 100%;
  }
  .a-trenner-cta .v-trenner .v-trenner__bg--desktop img {
    object-fit: cover;
    object-position: center 35%;
  }
}
.a-inclusions .v-headline {
  text-align: left;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.a-inclusions .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.15;
  font-weight: 300;
  color: #681d33;
}
.a-inclusions .v-button {
  margin-bottom: clamp(24px, 3vw, 36px);
}
.a-inclusions .v-button a,
.a-inclusions .v-button a .v-button-label {
  text-decoration: none !important;
}
.a-zimmer-faq,
.a-faq {
  /* Card-/Linien-Styles → faq.less (.faq-card) — hier nur Layout */
}
.a-zimmer-faq .v-headline,
.a-faq .v-headline {
  text-align: left;
}
.a-zimmer-faq .v-headline-type-h2 .v-headline-text,
.a-faq .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.15;
  font-weight: 300;
  color: #681d33;
}
.a-zimmer-faq .v-button a,
.a-faq .v-button a,
.a-zimmer-faq .v-button a .v-button-label,
.a-faq .v-button a .v-button-label {
  text-decoration: none !important;
}
.a-zimmer-faq .faq-page-accordion--stack,
.a-faq .faq-page-accordion--stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.a-zimmer-faq .faq-half-container,
.a-faq .faq-half-container {
  display: block;
  width: 100%;
}
/* FAQ 2-Spalten-Grid — Layout + Kategorie-Abstände (Items = faq.less) */
.a-faq-grid .v-headline {
  margin-bottom: 104px;
}
.a-faq-grid .faq-category-label {
  margin: 0 0 54px;
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  /* H3-Optik — Berg Wellness / Alpine Beauty Spa */
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.2;
  color: #4a4a49;
}
@media only screen and (max-width: 767px) {
  .a-faq-grid .faq-category-label {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.a-faq-grid .mod_faqpage {
  margin-top: 0;
}
.a-faq-grid .faq-page-accordion--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(22px, 3vw, 32px);
  align-items: start;
  margin-bottom: clamp(72px, 9vw, 120px);
}
.a-faq-grid .faq-page-accordion--grid:last-of-type {
  margin-bottom: 0;
}
.a-faq-grid .faq-page-accordion--grid .faq-card {
  margin-bottom: 0 !important;
  width: 100%;
  min-width: 0;
}
@media (max-width: 767px) {
  .a-faq-grid .v-headline {
    margin-bottom: clamp(48px, 8vw, 72px);
  }
  .a-faq-grid .faq-category-label {
    margin-bottom: clamp(28px, 5vw, 40px);
  }
  .a-faq-grid .faq-page-accordion--grid {
    grid-template-columns: 1fr;
    margin-bottom: clamp(56px, 10vw, 80px);
  }
}
/* FAQ-Seite: Kategorie-Titel = semantisch H2, Optik H3 */
.a-faq-page .faq-category-label {
  font-size: var(--inn-h3-font-size);
  /* 28px — User/XD */
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.2;
  color: #4a4a49;
}
@media only screen and (max-width: 767px) {
  .a-faq-page .faq-category-label {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
/* FAQ-CTA: Artikel transparent · Box #ECECEC im Container */
.a-faq-cta {
  background: transparent !important;
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(48px, 6vw, 80px);
  /* normales v-headline H2 (wie FAQ-Liste), kein H3-Override */
}
.a-faq-cta .v-faq-cta-box {
  background: #ececec;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 70px) clamp(24px, 4vw, 60px);
}
.a-faq-cta .v-headline {
  text-align: left;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.a-faq-cta .row.ce_rowStart {
  align-items: center;
}
.a-faq-cta .content-text {
  margin-bottom: 1.5rem;
  max-width: 728px;
}
.a-faq-cta .content-text a {
  text-decoration: none !important;
}
.a-faq-cta .v-button a,
.a-faq-cta .v-button a .v-button-label {
  text-decoration: none !important;
}
@media (max-width: 991px) {
  .a-faq-cta .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
}
/* Shared Tel/Mail-Liste — Primary, keine Underlines */
.v-contact-phone-mail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.v-contact-phone-mail a,
.v-contact-phone-mail__link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none !important;
  color: #681d33 !important;
  border-bottom: 0 !important;
}
.v-contact-phone-mail a:hover,
.v-contact-phone-mail__link:hover,
.v-contact-phone-mail a:focus,
.v-contact-phone-mail__link:focus {
  text-decoration: none !important;
  color: #681d33 !important;
}
.v-contact-phone-mail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #681d33;
  flex-shrink: 0;
}
.v-contact-phone-mail__icon img {
  display: block;
  width: 22px;
  height: auto;
}
.v-contact-phone-mail__label {
  font-family: var(--inn-main-font);
  color: #681d33 !important;
  line-height: 23px;
  text-decoration: none !important;
}
/* --- Weihnachten: Trenner „Feste feiern“ (weiß, vertikal zentriert, links) --- */
.a-weihnachten-feste-trenner .v-trenner__content {
  max-width: 630px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
.a-weihnachten-feste-trenner .v-trenner__eyebrow,
.a-weihnachten-feste-trenner .v-trenner__title,
.a-weihnachten-feste-trenner .v-trenner__text {
  color: #fff;
}
.a-weihnachten-feste-trenner .v-trenner__cta-row {
  justify-content: flex-start;
}
/* --- Start-Hero (rsce_start_hero) ------------------------------------------ */
.a-start-hero {
  padding: 0 !important;
}
.a-start-hero > .inside {
  max-width: none;
  padding: 0;
}
.v-start-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
  /* HRS-17 / XD: Hero-Bild bzw. -Video mit weißem Rahmen links, rechts + oben.
     __media, __scrim und __side sind absolut positioniert und beziehen sich auf
     die Padding-Box — der Rahmen wirkt damit automatisch auf alle Ebenen.      */
  box-sizing: border-box;
  padding: clamp(12px, 1.82vw, 35px) clamp(12px, 1.82vw, 35px) 0;
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .v-start-hero {
    padding: 0;
  }
}
.v-start-hero__media {
  position: absolute;
  /* Absolut positionierte Kinder beziehen sich auf die Padding-Box inkl.
       Padding — der Rahmen muss hier explizit gesetzt werden (HRS-17). */
  inset: clamp(12px, 1.82vw, 35px) clamp(12px, 1.82vw, 35px) 0;
  z-index: 0;
  /* Ken-Burns skaliert das Bild um 5 % — ohne Clipping lief es über den Rahmen */
  overflow: hidden;
}
.v-start-hero__media picture,
.v-start-hero__media img,
.v-start-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .v-start-hero__media {
    inset: 0;
  }
}
.v-start-hero__scrim {
  /* liegt im Markup innerhalb von __media — Inset kommt bereits von dort */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
.v-start-hero__overlay {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
  padding: 120px 0 80px;
}
.v-start-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.v-start-hero__side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.v-start-hero__side--left {
  left: 20px;
}
.v-start-hero__side--right {
  right: 20px;
}
.v-start-hero__side--right .v-start-hero__label {
  transform: rotateZ(180deg) !important;
  transform-origin: center!important;
  position: relative;
}
.v-start-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: #fff;
}
.v-start-hero__line {
  display: block;
  font-family: var(--inn-head-font);
  color: #fff;
  font-size: 160px;
  line-height: 0.95;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.v-start-hero__line-row {
  display: block;
  margin-left: 77px;
  width: fit-content;
  max-width: 100%;
}
.v-start-hero__label {
  font-family: var(--inn-main-font);
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  text-decoration: none !important;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: color 0.25s ease, opacity 0.25s ease;
}
.v-start-hero__side--right .v-start-hero__label {
  transform: none;
}
.v-start-hero__label:hover {
  color: #efddce;
  text-decoration: none !important;
}
.v-start-hero__badge {
  /* Relativ zu __content → bündig am rechten Container-Rand */
  position: absolute;
  right: 0;
  left: auto;
  top: auto;
  bottom: 0;
  transform: translateY(-50%);
  z-index: 2;
}
.v-start-hero__badge .rs-kreis-patch {
  width: 213px;
  height: 213px;
}
.v-start-hero__badge--solo {
  position: relative;
  right: auto;
  bottom: auto;
  transform: none;
  margin-top: 1rem;
}
/* Unter ~1500px stoßen die vertikalen Seitenlabels an die Hero-Headline */
@media (max-width: 1500px) {
  .v-start-hero__side {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .v-start-hero {
    min-height: 85vh;
  }
  .v-start-hero__overlay {
    padding-top: 100px;
    padding-bottom: 48px;
  }
  .v-start-hero__line {
    font-size: 60px;
  }
  .v-start-hero__line-row {
    margin-left: 0;
  }
  .v-start-hero__badge {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 1rem;
  }
  .v-start-hero__badge .rs-kreis-patch {
    width: 140px;
    height: 140px;
  }
  .rs-quote-band {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* --- Headline-Atom (Vorlage, Riessersee-kompatibel) ------------------------ */
.v-headline .v-headline-subtext {
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  letter-spacing: normal;
}
.v-headline .upper-headline {
  display: inline-flex;
  flex-direction: column;
}
.v-headline .upper-headline h1,
.v-headline .upper-headline h2,
.v-headline .upper-headline h3,
.v-headline .upper-headline h4 {
  margin-right: 30px;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}
.v-headline .upper-headline .v-headline-line-container {
  display: flex;
  grid-gap: 12px;
  align-items: center;
  transform: translateY(-20%);
}
.v-headline .upper-headline .v-headline-line-container .v-headline-line {
  width: 100%;
  height: 1px;
  background: var(--inn-primary);
}
/* --- Header: Startseite transparent / Unterseiten solid (Föhrenhof-Pattern) -- */
#header {
  --rs-header-accent: #681d33;
  --rs-header-sep: rgba(74, 74, 73, 0.35);
  /* top wird mitanimiert: auf der Startseite sitzt der Header vor dem Scrollen
     um den Hero-Rahmen tiefer und faehrt beim Scrollen nach oben. */
  transition: background 0.35s ease, box-shadow 0.35s ease, top 0.35s ease;
  /* Top-Bar enthält aktuell den Langswitcher (Modul 27) */
  /* SVG-Burger aus Root-Page (inn_burger_icon / inn_burger_icon_opened) */
  /* Fallback: CSS-Linien, falls keine Root-SVGs gesetzt */
}
#header .header-container > .inside,
#header #top-bar .inside {
  padding-left: 20px;
  padding-right: 20px;
}
#header .inside {
  padding-top: 25px;
  padding-bottom: 25px;
}
#header #top-bar {
  display: block;
}
#header #top-bar .inside {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
#header .header-container > .inside {
  display: block;
}
#header #header-nav-mod {
  width: 100% !important;
  margin: 0 !important;
}
#header #header-nav-mod #header-nav-inh.boxes4ward_article {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  width: 100%;
}
#header .v-header-left,
#header .v-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
#header .v-header-left {
  justify-content: flex-start;
}
#header .v-header-right {
  justify-content: flex-end;
  flex-wrap: wrap;
}
#header .v-header-logo {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
#header .v-header-logo .v-logo-1 {
  display: block;
}
#header .v-header-logo .v-logo-2 {
  display: none;
}
#header .v-header-burger.v-burger-container,
#header .v-header-burger,
#header .v-header-burger .burger-container {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  z-index: 9999;
}
#header .v-header-burger .burger-container.has-svg-icons {
  width: 40px;
  height: 32px;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
#header .v-header-burger .burger-container.has-svg-icons .burger-icon {
  display: block;
  width: 40px;
  height: 18px;
  flex-shrink: 0;
  background-color: var(--inn-burger-icon-color, #fff);
  /* mask-Shorthand + var() ist in WebKit kaputt → Einzelproperties */
  -webkit-mask-image: var(--burger-icon-url);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-image: var(--burger-icon-url);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-mode: luminance;
  transition: opacity 0.2s ease, background-color 0.35s ease;
}
#header .v-header-burger .burger-container.has-svg-icons .burger-icon.burger-x {
  display: none;
  width: 28px;
  height: 28px;
}
#header .v-header-burger .burger-container.has-svg-icons.burger-opened {
  width: 32px;
  height: 32px;
}
#header .v-header-burger .burger-container.has-svg-icons.burger-opened .burger-icon.burger-bars {
  display: none;
}
#header .v-header-burger .burger-container.has-svg-icons.burger-opened .burger-icon.burger-x {
  display: block;
}
#header .v-header-burger .burger-container:not(.has-svg-icons) .burger {
  display: inline-block !important;
  width: 28px;
  cursor: pointer;
  border: 0;
  background: none;
  outline: 0;
  padding: 0;
  position: relative;
  border-bottom: var(--inn-burger-icon-thickness, 4px) solid var(--inn-burger-icon-color, #fff);
  margin-bottom: 5px;
  transition: border-bottom 0.35s ease-in-out;
}
#header .v-header-burger .burger-container:not(.has-svg-icons) .burger::before,
#header .v-header-burger .burger-container:not(.has-svg-icons) .burger::after {
  content: "";
  display: block;
  border-bottom: var(--inn-burger-icon-thickness, 4px) solid var(--inn-burger-icon-color, #fff);
  width: 100%;
  margin-bottom: 5px;
  transition: transform 0.35s ease-in-out;
}
#header .v-header-burger .burger-container:not(.has-svg-icons).burger-opened .burger {
  border-bottom-color: transparent;
}
#header .v-header-burger .burger-container:not(.has-svg-icons).burger-opened .burger::before {
  transform: rotate(-45deg) translateY(7px) translateX(0);
}
#header .v-header-burger .burger-container:not(.has-svg-icons).burger-opened .burger::after {
  transform: rotate(45deg) translateY(-7px) translateX(0);
  margin-bottom: 0;
}
#header .v-button.v-nav-line,
#header .v-button.v-header-infocenter,
#header .v-button.v-header-angebote {
  margin: 0;
}
#header .v-button.v-nav-line > a,
#header .v-button.v-header-infocenter > a,
#header .v-button.v-header-angebote > a {
  text-transform: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  font-weight: 400 !important;
  white-space: nowrap;
  text-decoration: none !important;
  color: inherit;
  border: 2px solid currentColor;
  padding: 10px 22px;
}
#header .v-header-gutschein-icon {
  margin: 0;
}
#header .v-header-gutschein-icon .v-iconboxes {
  gap: 0;
}
#header .v-header-gutschein-icon .single-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
#header .v-header-gutschein-icon .icon-img-container {
  width: 28px;
  height: 28px;
  background: #681d33;
  mask: url('/files/contao_files/Bilder/-svg/gutschein-icon-weiss.svg') center / contain no-repeat;
  -webkit-mask: url('/files/contao_files/Bilder/-svg/gutschein-icon-weiss.svg') center / contain no-repeat;
}
#header .v-header-gutschein-icon .icon-img-container img {
  opacity: 0;
}
#header .v-header-gsu {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
#header .v-header-gsu a.gflag {
  font-family: var(--inn-main-font);
  color: var(--rs-header-accent) !important;
  opacity: 1;
  text-decoration: none !important;
  padding: 0;
  background: none !important;
  display: inline !important;
  line-height: 1.2;
}
#header .v-header-gsu a.gflag:hover,
#header .v-header-gsu a.gflag.active {
  opacity: 0.65;
}
#header .v-header-gsu .v-gsu-sep {
  flex-shrink: 0;
  align-self: center;
  border: 0;
  border-right: 1px solid var(--rs-header-sep);
  /* HRS-19: XD setzt DE (310) und EN (357) 47px auseinander; mit 7px
         Rand waren es 39px. */
  margin: 0 11px;
  display: inline-block;
  width: 0;
  height: 1em;
  padding: 0;
}
#header .v-header-burger .burger-container {
  --inn-burger-icon-color: #681d33;
}
@media only screen and (max-width: 767px) {
  #header {
    /* XD Phone: DE|EN links · Logo mittig · Burger rechts */
    /* Gutschein nur bei geöffnetem Menü (XD: Gift neben X) */
  }
  #header .inside {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  #header #header-nav-mod #header-nav-inh.boxes4ward_article {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 12px;
  }
  #header .v-header-left {
    display: flex;
    justify-content: flex-start;
    gap: 0;
  }
  #header .v-header-logo {
    justify-content: center;
    margin: 0;
  }
  #header .v-header-right {
    justify-content: flex-end;
    gap: 14px;
  }
  #header .v-header-infocenter,
  #header .v-header-angebote {
    display: none !important;
  }
  #header .v-header-gutschein-icon {
    display: none !important;
  }
}
/* mobile menu-open overrides moved below body.v-menu-open block */
/* HRS-36: Der Schatten gehoert an den gescrollten Zustand. Vorher trug ihn
   jede Unterseite auch ganz oben — gewuenscht ist oben ohne, beim Scrollen
   mit. Steht hier statt in einer eigenen Datei, weil die Ursprungsregel
   `!important` traegt und sonst gewinnen wuerde. */
body:not(.v-menu-open) #header.scrolled-header,
body.v-page-home:not(.v-menu-open) #header.header-show-nav {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
}
/* Riessersee Header: Solid-Zustand (Unterseiten + Startseite gescrollt) — nicht bei offenem Menü */
body.v-page-sub:not(.v-menu-open) #header,
body.v-page-home:not(.v-menu-open) #header.scrolled-header,
body.v-page-home:not(.v-menu-open) #header.header-show-nav {
  --rs-header-accent: #681d33;
  --rs-header-sep: rgba(104, 29, 51, 0.35);
  background: #fff !important;
}
body.v-page-sub:not(.v-menu-open) #header .v-button.v-nav-line > a,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-nav-line > a,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-nav-line > a,
body.v-page-sub:not(.v-menu-open) #header .v-button.v-header-infocenter > a,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-header-infocenter > a,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-header-infocenter > a,
body.v-page-sub:not(.v-menu-open) #header .v-button.v-header-angebote > a,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-button.v-header-angebote > a,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-button.v-header-angebote > a {
  color: #681d33 !important;
  border-color: #681d33 !important;
}
body.v-page-sub:not(.v-menu-open) #header .v-header-logo img,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-header-logo img,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-header-logo img {
  filter: none !important;
}
body.v-page-sub:not(.v-menu-open) #header .v-header-gutschein-icon .icon-img-container,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-header-gutschein-icon .icon-img-container,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-header-gutschein-icon .icon-img-container {
  background: #681d33;
}
body.v-page-sub:not(.v-menu-open) #header .v-header-burger .burger-container,
body.v-page-home:not(.v-menu-open) #header.scrolled-header .v-header-burger .burger-container,
body.v-page-home:not(.v-menu-open) #header.header-show-nav .v-header-burger .burger-container {
  color: #681d33 !important;
  --inn-burger-icon-color: #681d33;
}
/* Menü geöffnet: Header transparent, Split-Background kommt vom Overlay darunter
   XD-Referenz (1920px, Artboard „Hotel Riessersee | Menü"):
   - Container 1340px zentriert, 20px Padding → Inhalt 310..1610
   - Roter Banner: x=1292 bis 1920 (= Viewport-Rand), volle Menühöhe
     → Breite = Viewport-Rest rechts vom Container + 338px
   - Bild 370×650 an der Container-Innenkante rechts (ragt 52px über Banner-Kante)
   - Social: 52px-Kreise, 20px Gap, rechtsbündig zum Bild, ~44px unter Bild
   - Nav-Spalten x=310/618/920 (3 Spalten à ~300px) */
/* --- Container-Inset: 1340px Box, 20px nur auf direktem .inside (1300px Inhalt) --- */
.inside .inside {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.mod_article[class*="a-"]:not(.a-start-hero):not(.a-sub-hero):not(.a-trenner):not(.a-trenner-inset):not(.a-trenner-bild):not(.a-tagungen-cta-band):not(.a-weihnachten-newsticker):not(.a-nachhalt-co2):not(.a-feste-feiern-info):not(.a-tagungen-bewerten),
.mod_article_container[class*="a-"]:not(.a-start-hero):not(.a-sub-hero):not(.a-trenner):not(.a-trenner-inset):not(.a-trenner-bild):not(.a-tagungen-cta-band):not(.a-weihnachten-newsticker):not(.a-nachhalt-co2):not(.a-feste-feiern-info):not(.a-tagungen-bewerten) {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.v-menu-open {
  overflow: hidden;
}
body.v-menu-open #header,
body.v-menu-open.v-page-sub #header,
body.v-menu-open.v-page-home #header.scrolled-header,
body.v-menu-open.v-page-home #header.header-show-nav {
  --rs-header-accent: #681d33;
  --rs-header-sep: rgba(104, 29, 51, 0.4);
  background: transparent !important;
  box-shadow: none !important;
  z-index: 9500;
}
body.v-menu-open #header .v-header-left .v-button.v-nav-line > a,
body.v-menu-open.v-page-sub #header .v-header-left .v-button.v-nav-line > a,
body.v-menu-open.v-page-home #header.scrolled-header .v-header-left .v-button.v-nav-line > a,
body.v-menu-open.v-page-home #header.header-show-nav .v-header-left .v-button.v-nav-line > a,
body.v-menu-open #header .v-header-left .v-button.v-header-infocenter > a,
body.v-menu-open.v-page-sub #header .v-header-left .v-button.v-header-infocenter > a,
body.v-menu-open.v-page-home #header.scrolled-header .v-header-left .v-button.v-header-infocenter > a,
body.v-menu-open.v-page-home #header.header-show-nav .v-header-left .v-button.v-header-infocenter > a {
  color: #681d33 !important;
  border-color: #681d33 !important;
}
body.v-menu-open #header .v-header-right .v-button.v-header-angebote > a,
body.v-menu-open.v-page-sub #header .v-header-right .v-button.v-header-angebote > a,
body.v-menu-open.v-page-home #header.scrolled-header .v-header-right .v-button.v-header-angebote > a,
body.v-menu-open.v-page-home #header.header-show-nav .v-header-right .v-button.v-header-angebote > a {
  color: #fff !important;
  border-color: #fff !important;
}
body.v-menu-open #header .v-header-right .v-header-gutschein-icon .icon-img-container,
body.v-menu-open.v-page-sub #header .v-header-right .v-header-gutschein-icon .icon-img-container,
body.v-menu-open.v-page-home #header.scrolled-header .v-header-right .v-header-gutschein-icon .icon-img-container,
body.v-menu-open.v-page-home #header.header-show-nav .v-header-right .v-header-gutschein-icon .icon-img-container {
  background: #fff;
}
body.v-menu-open #header .v-header-right .v-header-burger .burger-container,
body.v-menu-open.v-page-sub #header .v-header-right .v-header-burger .burger-container,
body.v-menu-open.v-page-home #header.scrolled-header .v-header-right .v-header-burger .burger-container,
body.v-menu-open.v-page-home #header.header-show-nav .v-header-right .v-header-burger .burger-container {
  color: #fff !important;
  --inn-burger-icon-color: #fff;
}
body.v-menu-open #header .v-header-logo img,
body.v-menu-open.v-page-sub #header .v-header-logo img,
body.v-menu-open.v-page-home #header.scrolled-header .v-header-logo img,
body.v-menu-open.v-page-home #header.header-show-nav .v-header-logo img {
  filter: none !important;
}
/* Mobile: offenes Menü — XD: Logo+X oben, DE|EN+Gift darunter; Primary-Icons */
@media only screen and (max-width: 767px) {
  body.v-menu-open {
    /* Notanker für das Overlay-Padding, falls main.js nicht läuft.
       Der operative Wert wird beim Öffnen des Menüs aus der ECHTEN
       Header-Höhe gemessen und als Inline-Variable auf <body> gesetzt
       (HRS-181/HRS-256). Hier stand 136px bei real 169px Header-Höhe —
       der erste Gruppentitel lag darunter und war halb verdeckt.
       Die Zahl hier ist absichtlich großzügig: zu viel Abstand schiebt
       nur, zu wenig verdeckt. */
    --rs-mobile-menu-header-offset: 181px;
  }
  body.v-menu-open #header,
  body.v-menu-open.v-page-sub #header,
  body.v-menu-open.v-page-home #header.scrolled-header,
  body.v-menu-open.v-page-home #header.header-show-nav {
    /* Mobil: Header deckt gescrollte Menüpunkte ab (nicht transparent) */
    background: #fff !important;
    box-shadow: none !important;
  }
  body.v-menu-open #header {
    /* 2-Zeilen-Header braucht Auto-Höhe (sonst 90px-Clip auf GSU/Gift) */
    height: auto !important;
    min-height: var(--inn-header-height);
    /* Kinder von .v-header-right als Grid-Items (Gift + X) */
  }
  body.v-menu-open #header .header-container > .inside,
  body.v-menu-open #header > .inside {
    padding-top: 12px;
    padding-bottom: 10px;
  }
  body.v-menu-open #header #header-nav-mod #header-nav-inh.boxes4ward_article {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo close" "lang gift";
    column-gap: 12px;
    row-gap: 22px;
    align-items: center;
  }
  body.v-menu-open #header .v-header-logo {
    grid-area: logo;
    justify-content: flex-start;
    margin: 0;
  }
  body.v-menu-open #header .v-header-left {
    grid-area: lang;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    padding-top: 4px;
  }
  body.v-menu-open #header .v-header-right {
    display: contents;
  }
  body.v-menu-open #header .v-header-burger {
    grid-area: close;
    justify-self: end;
    align-self: center;
  }
  body.v-menu-open #header .v-header-gutschein-icon {
    grid-area: gift;
    display: flex !important;
    justify-self: end;
    align-self: center;
    padding-top: 4px;
  }
  body.v-menu-open #header .v-header-gutschein-icon .icon-img-container {
    background: #681d33 !important;
  }
  body.v-menu-open #header .v-header-burger .burger-container {
    color: #681d33 !important;
    --inn-burger-icon-color: #681d33 !important;
  }
}
/* Startseite vor dem Scrollen: Der Hero hat oben einen weißen Rahmen von
   @rs-frame-inset (bei 1578px Fensterbreite gemessene 28,7px). Der Header ist
   fixed mit top: 0 und 90px hoch — seine Schaltflächen lagen damit genau auf
   der Rahmenkante, halb auf Weiß und halb im Bild. Er rutscht deshalb um den
   Rahmen nach unten und sitzt buendig im Bild.

   Nur vor dem Scrollen: sobald .scrolled-header gesetzt ist, gehoert der
   Header als Leiste an die Fensterkante und geht auf top: 0 zurueck. Der
   Uebergang ist ueber die transition auf #header animiert.

   Unterhalb von 768px entfaellt der Rahmen (siehe .v-start-hero), dort bleibt
   auch der Header oben. */
body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) {
  top: clamp(12px, 1.82vw, 35px);
}
@media only screen and (max-width: 767px) {
  body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) {
    top: 0;
  }
}
/* Startseite on-load: transparent, weiße CTAs/Icons — Logo unverändert */
body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) {
  --rs-header-accent: #fff;
  --rs-header-sep: rgba(255, 255, 255, 0.45);
  background: transparent !important;
  box-shadow: none !important;
}
body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) .v-button.v-nav-line > a,
body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) .v-button.v-header-infocenter > a,
body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) .v-button.v-header-angebote > a {
  color: #fff !important;
  border-color: #fff !important;
}
body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) .v-header-logo img {
  filter: none !important;
}
body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) .v-header-gutschein-icon .icon-img-container {
  background: #fff;
}
body.v-page-home:not(.v-menu-open) #header:not(.scrolled-header):not(.header-show-nav) .v-header-burger .burger-container {
  color: #fff !important;
  --inn-burger-icon-color: #fff;
}
/* Alte responsive.less-Regeln (.navigation top:-150%, display:none) nur für andere Navs */
.navigation:not(#mobile-nav-mod) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
body.v-menu-open .navigation:not(#mobile-nav-mod).show-nav {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* --- Menü-Overlay (Riessersee XD) ------------------------------------------ */
#mobile-nav-mod.navigation {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  background: #faf6f7 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 9000 !important;
  text-align: left;
  box-shadow: none !important;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  /* Roter Banner: eine Fläche, vom rechten Bildschirmrand bis 338px in den
     Container hinein (XD: x=1292..1920 bei 1920). Höhe = gesamter Menü-Inhalt. */
  /* Der Rahmen-Reset raeumt den Link-Unterstrich der Textlinks weg. Die runden
     Social-Buttons bringen ihren Rahmen selbst mit und verloeren sonst genau
     unten die Kante (HRS-19). */
  /* Container wie Header: 1340px zentriert, 20px Padding.
     2×2-Grid: [Nav | Bild] / [Karriere | Social] — Bild-Spalte fix 370px. */
  /* XD: Spalten-Pitch 308px, Gruppen-Zeilen 220/530 → Row-Gap ~113px */
  /* XD: Item-Pitch 42px bei 18px Schrift → ~23px Gap */
  /* XD: Text mittig im sichtbaren Banner-Streifen rechts vom Bild (~106px vom Rand) */
  /* Bild: 370×650, füllt Spalte 2 komplett — ragt automatisch ~52px über die
     linke Banner-Kante hinaus (XD: Bild x=1236, Banner x=1292). */
  /* Social: rechtsbündig unterm Bild (Box-Rechtskante = Bild-Rechtskante),
     Label linksbündig in der Box. XD: 52px-Kreise, 20px Gap, 40px unter Bild. */
  /* XD: Text (grün, uppercase) oben, darunter Logo + Kreis-Pfeil direkt daneben */
  /* Mobile CTA-Bar (nur ≤767px sichtbar, siehe unten) */
  /* --- Tablet (768–1100px): Bild + Banner ausblenden, Nav volle Breite ----- */
  /* --- Mobile (≤767px): Akkordeon-Nav + CTA im gemeinsamen Scroll ----------- */
}
#mobile-nav-mod.navigation::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(max(0px, (100vw - var(--inn-container-width, 1340px)) / 2) + 338px);
  background: #681d33;
  z-index: 0;
  pointer-events: none;
}
#mobile-nav-mod.navigation:not(.show-nav) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#mobile-nav-mod.navigation.show-nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#mobile-nav-mod.navigation ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-gap: 0;
}
#mobile-nav-mod.navigation ul li {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
}
#mobile-nav-mod.navigation ul li:after {
  display: none !important;
}
#mobile-nav-mod.navigation ul li a,
#mobile-nav-mod.navigation ul li a:hover,
#mobile-nav-mod.navigation ul li a:focus-visible,
#mobile-nav-mod.navigation ul li strong {
  text-decoration: none !important;
}
#mobile-nav-mod.navigation ul li a:not(.v-menu-overlay-social-link),
#mobile-nav-mod.navigation ul li a:not(.v-menu-overlay-social-link):hover,
#mobile-nav-mod.navigation ul li a:not(.v-menu-overlay-social-link):focus-visible,
#mobile-nav-mod.navigation ul li strong {
  border-bottom: none !important;
}
#mobile-nav-mod.navigation .boxes4ward_article,
#mobile-nav-mod.navigation .mod_article,
#mobile-nav-mod.navigation .v-menu-overlay-mod,
#mobile-nav-mod.navigation .v-menu-overlay-panel.block,
#mobile-nav-mod.navigation .v-menu-bottom.block {
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: visible !important;
}
#mobile-nav-mod.navigation .v-menu-overlay {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  padding: calc(var(--inn-header-height, 90px) + clamp(32px, 5.3vw, 102px)) 20px clamp(32px, 3vw, 60px);
  color: #4a4a49;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 3vw, 60px);
  row-gap: 40px;
  align-items: start;
}
#mobile-nav-mod.navigation .v-menu-overlay-main {
  display: contents;
}
#mobile-nav-mod.navigation .mod_navigation.block {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
}
#mobile-nav-mod.navigation .v-menu-overlay-edge {
  position: fixed;
  z-index: 2;
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  color: #681d33;
  letter-spacing: 0.08em;
}
#mobile-nav-mod.navigation .v-menu-overlay-edge--left {
  /* HRS-2 / XD: gleicher Randabstand wie rechts (Label-Kante bei 90px) */
  left: clamp(16px, 4.7vw, 90px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}
#mobile-nav-mod.navigation .v-menu-overlay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5.9vw, 113px) clamp(16px, 1.8vw, 36px);
  padding: 0;
  align-content: start;
  box-sizing: border-box;
}
#mobile-nav-mod.navigation .v-menu-overlay-group-title {
  font-family: var(--inn-main-font);
  font-size: clamp(22px, 1.56vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  color: #681d33;
  text-transform: uppercase;
  margin: 0 0 clamp(16px, 1.1vw, 21px);
}
#mobile-nav-mod.navigation .v-menu-overlay-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.2vw, 23px);
}
#mobile-nav-mod.navigation .v-menu-overlay-group {
  text-align: left;
}
#mobile-nav-mod.navigation .v-menu-overlay-group-title {
  text-align: left;
}
#mobile-nav-mod.navigation .v-menu-overlay-items {
  align-items: flex-start;
  width: 100%;
}
#mobile-nav-mod.navigation .v-menu-overlay-items > li {
  width: 100%;
}
#mobile-nav-mod.navigation .v-menu-overlay-link {
  display: block;
  width: 100%;
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  color: #4a4a49;
  text-decoration: none !important;
  text-align: left;
  /* Hervorhebung beim Ueberfahren: Farbe, Pfeil, Einzug.
     *
     * **Nur mit echter Maus.** Gemeldet am 29.10.2026: „am iPhone muss man
     * einen Menuepunkt 2x klicken, der 1. macht nur den Hover-Effekt."
     *
     * Safari auf dem iPhone macht aus dem ersten Antippen einen Hover. Weil
     * dieser Zustand hier das **Layout** veraendert — die Zeile rueckt um
     * @v-menu-arrow-slot ein und der Pfeil erscheint —, springt der Inhalt
     * unter dem Finger, und Safari verwirft den Klick. Erst das zweite
     * Antippen fuehrt weiter.
     *
     * Ein vorheriger Anlauf hat den `mouseenter`-Handler des Panelbildes
     * auf Touch abgemeldet (main.js). Das war eine zweite, echte Ursache,
     * aber nicht diese: Der Layoutsprung kommt aus dem Stylesheet.
     *
     * Mobil ist der Pfeil ohnehin ausgeblendet und der Einzug zurueckgenommen
     * (mobil-komponenten.less, HRS-270) — der Hover-Pfeil war dort nie ein
     * gewollter Zustand, sondern ein Nebeneffekt dieser gemeinsamen Regel.
     *
     * `:focus-visible` bleibt ohne Bedingung: Wer mit der Tastatur bedient,
     * braucht die Hervorhebung, und dort gibt es keinen Klick zu verlieren. */
}
#mobile-nav-mod.navigation .v-menu-overlay-link,
#mobile-nav-mod.navigation .v-menu-overlay-link * {
  text-decoration: none !important;
}
#mobile-nav-mod.navigation .v-menu-overlay-link .inn-nav-link__row {
  position: relative;
  display: block;
  padding-left: 0;
  transition: padding-left 0.25s ease;
}
#mobile-nav-mod.navigation .v-menu-overlay-link .inn-nav-link__icon {
  position: absolute;
  left: 0;
  top: 50%;
  width: 21px;
  margin: 0;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.25s ease;
  pointer-events: none;
}
#mobile-nav-mod.navigation .v-menu-overlay-link .inn-nav-link__icon img {
  display: block;
  width: 21px;
  height: auto;
}
#mobile-nav-mod.navigation .v-menu-overlay-link .inn-nav-link__label {
  display: inline-block;
  border-bottom: none !important;
  padding-bottom: 0;
  transition: color 0.25s ease;
}
#mobile-nav-mod.navigation .v-menu-overlay-link:focus-visible {
  color: #681d33;
}
#mobile-nav-mod.navigation .v-menu-overlay-link:focus-visible .inn-nav-link__row {
  padding-left: 31px;
}
#mobile-nav-mod.navigation .v-menu-overlay-link:focus-visible .inn-nav-link__icon {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  #mobile-nav-mod.navigation .v-menu-overlay-link:hover {
    color: #681d33;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-link:hover .inn-nav-link__row {
    padding-left: 31px;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-link:hover .inn-nav-link__icon {
    opacity: 1;
  }
}
#mobile-nav-mod.navigation .v-menu-overlay-panel {
  display: contents;
}
#mobile-nav-mod.navigation .v-menu-overlay-edge--panel {
  right: clamp(16px, 5.5vw, 106px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  color: #fff;
}
#mobile-nav-mod.navigation .v-menu-overlay-panel-image {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#mobile-nav-mod.navigation .v-menu-overlay-panel-image img,
#mobile-nav-mod.navigation .v-menu-overlay-panel-image .v-menu-panel-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 370 / 650;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
#mobile-nav-mod.navigation .v-menu-overlay-panel-image.is-swapping .v-menu-panel-img {
  opacity: 0.65;
}
#mobile-nav-mod.navigation .v-menu-overlay-social {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 2;
  justify-self: end;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: #fff;
  box-sizing: border-box;
}
#mobile-nav-mod.navigation .v-menu-overlay-social-label {
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  margin: 0 0 10px;
  letter-spacing: 0.06em;
  text-align: left;
}
#mobile-nav-mod.navigation .v-menu-overlay-social-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#mobile-nav-mod.navigation .v-menu-overlay-social-list > li {
  width: auto !important;
  margin: 0;
  padding: 0;
}
#mobile-nav-mod.navigation .v-menu-overlay-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #fff;
  box-shadow: none;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
#mobile-nav-mod.navigation .v-menu-overlay-social-link:hover {
  transform: scale(1.04);
  border-color: #fff;
}
#mobile-nav-mod.navigation .v-menu-overlay-social-link img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  filter: none;
}
#mobile-nav-mod.navigation .v-menu-bottom,
#mobile-nav-mod.navigation .v-menu-overlay-bottom {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  width: auto;
  max-width: none;
  /* HRS-2 / XD: 128px Abstand zwischen letzter Menü-Zeile und Karriere-Teaser */
  margin: clamp(24px, 2.1vw, 40px) 0 0;
  padding: 0;
  box-sizing: border-box;
}
#mobile-nav-mod.navigation .v-menu-overlay-career {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 24px;
  row-gap: 12px;
  width: 100%;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  color: #4a4a49;
  text-decoration: none !important;
  min-height: 0;
  box-shadow: none;
}
#mobile-nav-mod.navigation .v-menu-overlay-career-text {
  grid-column: 1 / -1;
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  color: #677943;
  flex: none;
  width: 100%;
}
#mobile-nav-mod.navigation .v-menu-overlay-career-logo img {
  max-height: 72px;
  width: auto;
  display: block;
}
#mobile-nav-mod.navigation .v-menu-overlay-career-arrow img {
  width: 56px;
  height: 56px;
  display: block;
}
#mobile-nav-mod.navigation .v-menu-mobile-cta {
  display: none;
}
@media (max-width: 1100px) and (min-width: 768px) {
  #mobile-nav-mod.navigation::after {
    display: none;
  }
  #mobile-nav-mod.navigation .v-menu-overlay {
    grid-template-columns: 1fr;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-panel-image,
  #mobile-nav-mod.navigation .v-menu-overlay-social,
  #mobile-nav-mod.navigation .v-menu-overlay-edge {
    display: none !important;
  }
  #mobile-nav-mod.navigation .mod_navigation.block {
    grid-column: 1;
    grid-row: 1;
  }
  #mobile-nav-mod.navigation .v-menu-bottom,
  #mobile-nav-mod.navigation .v-menu-overlay-bottom {
    grid-column: 1;
    grid-row: 2;
  }
}
@media only screen and (max-width: 767px) {
  #mobile-nav-mod.navigation {
    height: 100% !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background: #faf6f7 !important;
    /* Bild, Social, Karriere und Edge-Texte entfallen mobil (XD-Phone-Design) */
    /* Akkordeon: eine Spalte, Gruppen-Titel = Toggle mit Pfeil */
    /* XD: durchgehend @rs-surface, nur ausgeklappte Gruppe weiß — full-bleed */
    /* CTA-Bar: Primary-BG, weißer Kreis + Berg-Badge — im gleichen Scroll wie Nav */
  }
  #mobile-nav-mod.navigation::after {
    display: none;
  }
  #mobile-nav-mod.navigation.show-nav {
    display: flex !important;
    flex-direction: column;
  }
  #mobile-nav-mod.navigation .boxes4ward_article,
  #mobile-nav-mod.navigation .mod_article,
  #mobile-nav-mod.navigation .v-menu-overlay-mod {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: none;
    background: #faf6f7;
  }
  #mobile-nav-mod.navigation .v-menu-overlay {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    /* Ein Scroll-Container: Nav + Angebote/Zimmer gemeinsam */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Abstand unter dem 2-Zeilen-Header (Logo/X + DE|EN/Gift) */
    padding: calc(var(--rs-mobile-menu-header-offset, 181px)) 0 0;
    background: #faf6f7;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-main,
  #mobile-nav-mod.navigation .mod_navigation.block {
    display: block;
    width: 100%;
    max-width: none;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-main {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-panel-image,
  #mobile-nav-mod.navigation .v-menu-overlay-social,
  #mobile-nav-mod.navigation .v-menu-overlay-edge,
  #mobile-nav-mod.navigation .v-menu-overlay-career {
    display: none !important;
  }
  #mobile-nav-mod.navigation .v-menu-bottom,
  #mobile-nav-mod.navigation .v-menu-overlay-bottom {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-grid {
    display: block;
    padding: 0;
    width: 100%;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-group {
    margin: 0;
    width: 100%;
    background: transparent;
    transition: background 0.2s ease;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-group.is-open {
    background: #fff;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-group-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 18px 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: rgba(74, 74, 73, 0.75);
  }
  #mobile-nav-mod.navigation .v-menu-overlay-group-title::before {
    content: '';
    display: none;
    flex: 0 0 auto;
    width: 21px;
    /* HRS-182 „verschiedene pfeilgroessen": Stand auf 9px. Die Grafik
           ist 18 x 13,32 (Verhaeltnis 1,35) und wurde von `contain` in den
           21x9-Kasten gequetscht — sichtbar blieb ein 12x9 grosser Stummel,
           der wie ein dicker Strich aussieht. Der Pfeil vor dem aktiven
           Menuepunkt ist dagegen ein Bild mit 21x16 und zeigt die Grafik
           unverzerrt. 16px uebernimmt dessen Kasten, damit beide Pfeile
           gleich gross sind — 21 x 13,32/18 = 15,54, aufgerundet.
           Im Entwurfsexport des Menues gibt es kein Pfeil-Element, der
           Sollwert ist dort also nicht ablesbar; Bezug ist der vorhandene
           Pfeil am aktiven Punkt. */
    height: 16px;
    background: #681d33;
    mask: url('/files/contao_files/Bilder/-svg/pfeil-rot-rechts.svg') center / contain no-repeat;
    -webkit-mask: url('/files/contao_files/Bilder/-svg/pfeil-rot-rechts.svg') center / contain no-repeat;
    transform: none;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-group.is-open .v-menu-overlay-group-title {
    color: #681d33;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-group.is-open .v-menu-overlay-group-title::before {
    display: block;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-items {
    display: none;
    /* `width: 100%` weiter oben plus content-box ergab eine Außenbreite von
         48 + 360 + 20 = 428px bei 360px Bildschirm — die Unterpunkte und ihre
         Tippflächen endeten bei x = 408 statt 340, also 48px außerhalb des
         Bildschirms. Nur deshalb unsichtbar, weil `#mobile-nav-mod`
         `overflow-x: hidden` hat (HRS-256). */
    box-sizing: border-box;
    padding: 0 20px 20px 48px;
    gap: 14px;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-group.is-open .v-menu-overlay-items {
    display: flex;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-link {
    color: #681d33;
  }
  #mobile-nav-mod.navigation .v-menu-overlay-link .inn-nav-link__label {
    color: #681d33;
  }
  #mobile-nav-mod.navigation .v-menu-mobile-cta {
    display: block;
    position: relative;
    flex: 0 0 auto;
    margin: 24px 0 0;
    background: #681d33;
    padding: 56px var(--inn-container-padding-mobile) 28px;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
  }
  #mobile-nav-mod.navigation .v-menu-mobile-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    /* Berg-Motiv als Maske in Primary auf weißem Kreis */
    box-shadow: inset 0 0 0 0 transparent;
  }
  #mobile-nav-mod.navigation .v-menu-mobile-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 34px;
    margin-top: 0;
    background-color: #681d33;
    mask: url('/files/contao_files/Bilder/-svg/berge_kreis_badge.svg') center / contain no-repeat;
    -webkit-mask: url('/files/contao_files/Bilder/-svg/berge_kreis_badge.svg') center / contain no-repeat;
    pointer-events: none;
  }
  #mobile-nav-mod.navigation .v-menu-mobile-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  #mobile-nav-mod.navigation .v-menu-mobile-cta-buttons .v-button {
    margin: 0;
    flex: 1 1 0;
    max-width: 220px;
  }
  #mobile-nav-mod.navigation .v-menu-mobile-cta-buttons .v-button > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    color: #fff !important;
    border: 2px solid #fff !important;
    background: transparent !important;
    text-decoration: none !important;
    text-transform: none !important;
    border-radius: 0 !important;
    padding: 12px 18px;
  }
}
/* responsive.less versteckt .navigation ab @burger_breakpoint — Riessersee-Overlay ausnehmen */
@media (min-width: 1000px) {
  #mobile-nav-mod.navigation.show-nav {
    display: flex !important;
  }
}
/* --- Footer (Riessersee · XD hell) ----------------------------------------- */
#footer {
  padding: 0 !important;
  background: #faf6f7 !important;
  color: #4a4a49;
  overflow: visible;
}
#footer .inside {
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  overflow: visible;
}
#footer #footer-mod {
  width: 100%;
  max-width: none;
  overflow: visible;
}
#footer .inside .footer-nav ul {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px;
}
#footer .inside .footer-nav ul li {
  display: block !important;
  width: 100%;
}
#footer .inside .footer-nav ul li::after {
  display: none !important;
  content: none !important;
}
#footer-mod {
  background: #faf6f7;
  color: #4a4a49;
  overflow: visible;
  /* XD: Logo-Lockup 433px breit, die Wortmarke beginnt bei 24,5 % davon.
     Alle Spalten werden um genau diesen Betrag eingerückt, damit
     «Kontaktieren Sie uns» und «Rechtliches» senkrecht unter dem Logo-Text
     starten — das Logo selbst bleibt am Container-Rand. */
  /* Höhe des Spalten-Labels (18px × 1.35 + 16px Abstand) — der Nav-Block in
     Spalte 2 hat seine Überschrift als Geschwister, nicht als Kind. */
  /* .v-logo mitnehmen: main.less setzt `#footer .inside .v-logo { max-width: 200px }` */
  /* --- Desktop: zwei echte Zeilen (XD) ------------------------------------
     1  Kontakt · Nützliche Informationen · Follow & Like
     2  Rechtliches · DSV-Logo · Karriere
     Die Spalten-Wrapper lösen sich auf, damit ihre Kinder direkt im Raster
     liegen — nur so beginnt Zeile 2 in allen drei Spalten auf einer Linie. */
  /* Unter 992px stapeln die Spalten wie bisher. */
}
#footer-mod .v-footer-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 40px) clamp(32px, 4vw, 48px);
  box-sizing: border-box;
}
#footer-mod .v-footer-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  max-width: var(--inn-container-width);
  /* bündig zum Seiten-Container (.inside trägt 20px Innenabstand) */
  padding: 0 20px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  width: 100%;
  box-sizing: border-box;
}
#footer-mod .v-footer-greensign {
  /* HRS-15 / XD: Fahne haengt buendig an der Footer-Oberkante, rechts am Container */
  position: absolute;
  /* XD: Oberkante der Fahne liegt auf der Footer-Oberkante */
  top: calc(-1 * clamp(48px, 6vw, 72px));
  right: 20px;
  z-index: 1;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  pointer-events: none;
}
#footer-mod .v-footer-greensign .v-footer-greensign-inner img {
  display: block;
  width: clamp(100px, 8.5vw, 134px);
  height: auto;
}
#footer-mod .v-footer-main,
#footer-mod .v-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  max-width: var(--inn-container-width);
  padding: 0 20px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
#footer-mod .v-footer-col {
  min-width: 0;
}
#footer-mod .v-footer-section-label {
  font-family: var(--inn-main-font);
  font-size: 18px;
  font-weight: 400;
  /* XD Footer-Headlines */
  line-height: 1.35;
  color: #681d33;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 16px;
}
#footer-mod .v-footer-logo,
#footer-mod .v-footer-logo.v-logo {
  margin: 0;
  /* HRS-15 / XD: Wortmarken-Lockup 433x92 im 1300er Container.
       Die Breite muss am Flex-Item selbst stehen — als shrink-to-fit-Box
       lief width:100% am Bild ins Leere (SVG blieb auf Intrinsic-Größe). */
  flex: 0 0 auto;
  width: clamp(200px, 33vw, 433px);
  max-width: clamp(200px, 33vw, 433px);
}
#footer-mod .v-footer-logo .v-logo-img,
#footer-mod .v-footer-logo.v-logo .v-logo-img,
#footer-mod .v-footer-logo img,
#footer-mod .v-footer-logo.v-logo img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  filter: none;
}
#footer-mod .v-footer-contact-text {
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
#footer-mod .v-footer-contact-text p {
  margin: 0 0 10px;
}
#footer-mod .v-footer-contact-text a {
  color: #4a4a49;
  text-decoration: none;
}
#footer-mod .v-footer-contact-text a:hover {
  color: #681d33;
  text-decoration: underline;
}
#footer-mod .v-footer-legal-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--inn-main-font);
}
#footer-mod .v-footer-legal-links a {
  color: #4a4a49;
  text-decoration: none;
}
#footer-mod .v-footer-legal-links a:hover {
  color: #681d33;
  text-decoration: underline;
}
#footer-mod .v-footer-useful-nav,
#footer-mod .v-footer-useful-nav-mod,
#footer-mod .mod_navigation.footer-nav {
  margin: 0;
  padding: 0;
}
#footer-mod .v-footer-useful-nav .level_1,
#footer-mod .v-footer-useful-nav-mod .level_1,
#footer-mod .mod_navigation.footer-nav .level_1 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px;
}
#footer-mod .v-footer-useful-nav .level_1 > li,
#footer-mod .v-footer-useful-nav-mod .level_1 > li,
#footer-mod .mod_navigation.footer-nav .level_1 > li {
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 0;
}
#footer-mod .v-footer-useful-nav .level_1 > li::after,
#footer-mod .v-footer-useful-nav-mod .level_1 > li::after,
#footer-mod .mod_navigation.footer-nav .level_1 > li::after {
  display: none !important;
  content: none !important;
}
#footer-mod .v-footer-useful-nav .invisible,
#footer-mod .v-footer-useful-nav-mod .invisible,
#footer-mod .mod_navigation.footer-nav .invisible {
  display: none !important;
}
#footer-mod .v-footer-useful-link {
  /* HRS-15 / XD: Label links, Pfeil in fixer Spalte rechts (alle Pfeile buendig) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
  width: 100%;
  max-width: 229px;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  text-decoration: none;
}
#footer-mod .v-footer-useful-link:hover {
  color: #681d33;
}
#footer-mod .v-footer-useful-link:hover .v-footer-useful-link-arrow {
  transform: translateX(3px);
}
#footer-mod .v-footer-useful-link.is-active {
  color: #681d33;
  font-weight: inherit;
}
#footer-mod .v-footer-useful-link-label {
  min-width: 0;
}
#footer-mod .v-footer-useful-link-arrow {
  display: block;
  flex-shrink: 0;
  width: 1em;
  text-align: left;
  transition: transform 0.2s ease;
  color: #681d33;
}
#footer-mod .v-footer-partner {
  margin-top: auto;
}
#footer-mod .v-footer-partner-logo {
  display: block;
  max-width: min(100%, 200px);
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
#footer-mod .v-footer-partner-caption {
  font-family: var(--inn-main-font);
  color: #4a4a49;
  margin: 0;
  max-width: 260px;
}
#footer-mod .v-footer-social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer-mod .v-footer-social-list > li {
  margin: 0;
  padding: 0;
}
#footer-mod .v-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #681d33;
  box-sizing: border-box;
  transition: transform 0.2s ease, background 0.2s ease;
}
#footer-mod .v-footer-social-link:hover {
  transform: scale(1.04);
  background: #501627;
}
#footer-mod .v-footer-social-link img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}
#footer-mod .v-footer-career .v-menu-overlay-bottom {
  display: block;
  margin: 0;
  padding: 0;
}
#footer-mod .v-footer-career .v-menu-overlay-career {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 20px;
  row-gap: 12px;
  width: 100%;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  color: #4a4a49;
  text-decoration: none !important;
}
#footer-mod .v-footer-career .v-menu-overlay-career-text {
  grid-column: 1 / -1;
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  color: #677943;
  margin: 0;
}
#footer-mod .v-footer-career .v-menu-overlay-career-logo img {
  /* HRS-15 / XD: #team-Riessersee-Logo ~209x86 */
  max-height: 86px;
  width: auto;
  display: block;
}
#footer-mod .v-footer-career .v-menu-overlay-career-arrow img {
  width: 50px;
  height: 50px;
  display: block;
}
#footer-mod .v-footer-bottom {
  /* HRS-15 / XD: keine Trennlinie — Copyright schliesst die linke Spalte ab */
  max-width: var(--inn-container-width);
  margin: clamp(16px, 2vw, 22px) auto 0;
  padding: 0 20px;
  border-top: 0;
  box-sizing: border-box;
}
#footer-mod .v-footer-copyright,
#footer-mod .v-copy-right {
  margin: 0;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
#footer-mod .v-footer-copyright a,
#footer-mod .v-copy-right a {
  color: #4a4a49;
  text-decoration: none;
}
#footer-mod .v-footer-copyright a:hover,
#footer-mod .v-copy-right a:hover {
  color: #681d33;
  text-decoration: underline;
}
@media (min-width: 992px) {
  #footer-mod {
    /* Spalte 2, Zeile 1: Überschrift und Linkliste teilen sich eine Zelle.
       Die Liste rückt um die Label-Höhe nach unten und sitzt damit genauso
       dicht unter ihrer Überschrift wie die Kontaktdaten (XD: 42px). */
    /* Spezifität muss `.mod_navigation.footer-nav { margin: 0 }` schlagen. */
    /* `.v-footer-partner { margin-top: auto }` schob das DSV-Logo an den
       unteren Rand der Rasterzeile — hier gehört es an den Zeilenanfang. */
    /* Kein Rechts-Padding: im XD nutzt die dritte Spalte die volle Breite bis
       zum Container-Rand (1250→1610). Das frühere Padding quetschte den
       Karriere-Text auf drei Zeilen. */
  }
  #footer-mod .v-footer-main,
  #footer-mod .v-footer-inner {
    grid-template-rows: auto auto;
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: clamp(32px, 3.8vw, 49px);
    padding-left: calc(20px + calc(clamp(200px, 33vw, 433px) * 0.245));
  }
  #footer-mod .v-footer-col {
    display: contents;
  }
  #footer-mod .v-footer-contact-block {
    grid-area: 1 / 1;
  }
  #footer-mod .v-footer-social-block {
    grid-area: 1 / 3;
  }
  #footer-mod .v-footer-legal-block {
    grid-area: 2 / 1;
  }
  #footer-mod .v-footer-partner-block {
    grid-area: 2 / 2;
  }
  #footer-mod .v-footer-career {
    grid-area: 2 / 3;
  }
  #footer-mod .v-footer-contact-block,
  #footer-mod .v-footer-social-block,
  #footer-mod .v-footer-legal-block,
  #footer-mod .v-footer-partner-block,
  #footer-mod .v-footer-career {
    min-width: 0;
  }
  #footer-mod .v-footer-col-nav > .v-footer-section-label {
    grid-area: 1 / 2;
    align-self: start;
  }
  #footer-mod .v-footer-col-nav > .v-footer-useful-nav-mod {
    grid-area: 1 / 2;
    align-self: start;
    margin: 40px 0 0;
    min-width: 0;
  }
  #footer-mod .v-footer-partner-block.v-footer-partner {
    margin-top: 0;
  }
  #footer-mod .v-footer-social-block,
  #footer-mod .v-footer-career {
    padding-right: 0;
  }
  #footer-mod .v-footer-bottom {
    padding-left: calc(20px + calc(clamp(200px, 33vw, 433px) * 0.245));
  }
}
@media (max-width: 991px) {
  #footer-mod .v-footer-col-nav {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 48px);
  }
  #footer-mod .v-footer-col-social {
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 4vw, 56px);
  }
}
@media (max-width: 991px) {
  #footer-mod .v-footer-main,
  #footer-mod .v-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  #footer-mod .v-footer-col-brand {
    grid-column: 1 / -1;
  }
  #footer-mod .v-footer-col-social {
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  #footer-mod .v-footer-top {
    flex-wrap: wrap;
    align-items: center;
  }
  #footer-mod .v-footer-main,
  #footer-mod .v-footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  #footer-mod .v-footer-greensign {
    margin-left: auto;
  }
}
/* --- Weihnachten: Besinnliche Feiertage (Grid + PDF) ----------------------- */
/* XD: Image col-6 (volle Höhe) | Liste col-3 (volle Höhe) | 2 CTAs col-3 gestapelt */
.a-weihnachten-besinnlich {
  background: #fff;
  overflow: visible !important;
  /* contao-grid-bundle: .row.ce_rowStart — NICHT .ce_row-grid */
  /* Rechte Spalte: zwei Cards untereinander, je ~1 Row */
}
.a-weihnachten-besinnlich > .inside {
  overflow: visible;
}
.a-weihnachten-besinnlich .v-headline {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.a-weihnachten-besinnlich .v-headline-subtext {
  text-align: center;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.a-weihnachten-besinnlich .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-weihnachten-besinnlich .v-headline-text-container {
  text-align: center;
  max-width: 752px;
  margin-left: auto;
  margin-right: auto;
}
.a-weihnachten-besinnlich .row.ce_rowStart {
  --grid__gutter: 20px;
  gap: 20px;
  align-items: stretch;
  overflow: visible;
}
.a-weihnachten-besinnlich .row.ce_rowStart > .ce_column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  padding: 6px 0;
  /* Schatten der Cards nicht abschneiden */
}
.a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-3:last-child {
  gap: 20px;
}
.a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-3:last-child .v-festive-card {
  flex: 1 1 0;
  min-height: 0;
}
@media (max-width: 991px) {
  .a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-6,
  .a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-3 {
    grid-column: span 12;
  }
  .a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-3:last-child .v-festive-card {
    flex: 0 0 auto;
  }
}
.a-weihnachten-besinnlich .v-headline-type-h3 {
  text-align: left;
  margin-top: clamp(32px, 5vw, 56px);
}
.a-weihnachten-besinnlich .v-headline-type-h3 .v-headline-text-container {
  text-align: left;
  /* HRS-71: war `none` — der Text unter „Weihnachts- & Silvesterprogramm"
         lief ueber die vollen 1300px. Das Ticket verlangt die Haelfte des
         Containers. Im XD steht an dieser Stelle gar kein Text (nur Ueberschrift
         und „Programm herunterladen"), der Wert kommt deshalb aus dem Ticket. */
  max-width: 650px;
  margin-left: 0;
  margin-right: 0;
}
.a-weihnachten-besinnlich .v-headline-type-h3 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-weihnachten-besinnlich .v-headline-type-h3 + .v-button,
.a-weihnachten-besinnlich .v-headline-type-h3 ~ .v-button {
  margin-bottom: clamp(24px, 4vw, 40px);
}
.v-festive-image {
  width: 100%;
}
.v-festive-image__media {
  position: relative;
  width: 100%;
  background: #efddce;
}
.v-festive-image picture,
.v-festive-image img {
  display: block;
  width: 100%;
  height: auto;
  /* komplette Original-Aspect-Ratio, kein Crop */
}
.v-festive-image__overlay {
  position: absolute;
  left: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  margin: 0;
  color: #fff;
  font-family: var(--inn-head-font);
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.v-festive-card {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  /* Contao .block = overflow:hidden — Card-Schatten sichtbar lassen */
}
.v-festive-card.block {
  overflow: visible;
}
.v-festive-card__inner {
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 24px);
  display: flex;
  flex-direction: column;
}
.v-festive-card__title {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-family: var(--inn-main-font);
  font-weight: 500;
  color: #681d33;
}
.v-festive-card__text {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-festive-card__list {
  flex: 1 1 auto;
}
.v-festive-card__list li::before {
  background: #4a4a49;
}
.v-festive-card__cta {
  margin-top: auto;
  padding-top: 0.5rem;
}
.v-pdf-flipbook__stage {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 200px;
}
.v-pdf-flipbook__book {
  margin: 0 auto;
  max-width: 100%;
}
.v-pdf-flipbook__status {
  text-align: center;
  font-family: var(--inn-main-font);
  color: rgba(74, 74, 73, 0.7);
  padding: 1.5rem 0 0;
}
.v-pdf-flipbook__status--error {
  color: #541729;
}
.v-pdf-flipbook__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.v-pdf-flipbook__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.v-pdf-flipbook__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.v-pdf-flipbook__btn:hover:not(:disabled) {
  opacity: 0.85;
}
.v-pdf-flipbook__btn:active:not(:disabled) {
  transform: scale(0.94);
}
.v-pdf-flipbook__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.v-pdf-flipbook__btn img {
  display: block;
  width: 18px;
  height: 14px;
}
.v-pdf-flipbook__counter {
  min-width: 4.5rem;
  text-align: center;
  font-family: var(--inn-main-font);
  font-variant-numeric: tabular-nums;
  color: rgba(74, 74, 73, 0.75);
}
.v-pdf-flipbook .stf__item,
.v-pdf-flipbook .page {
  background: #fff;
}
/* --- Weihnachten: Newsticker (rotes Laufband, CSS-Marquee) ----------------- */
.mod_article.a-weihnachten-newsticker,
.mod_article_container.a-weihnachten-newsticker {
  padding: 0 !important;
  max-width: none !important;
  width: 100%;
  overflow: hidden;
  background: #681d33;
}
.a-weihnachten-newsticker {
  padding: 0 !important;
}
.a-weihnachten-newsticker > .inside {
  max-width: none;
  padding: 0;
}
.a-weihnachten-newsticker .v-newsticker {
  --rk-ticker-h: 100px;
  width: 100%;
  height: var(--rk-ticker-h);
  min-height: var(--rk-ticker-h);
  display: block;
  background: #681d33;
  color: #fff;
  text-transform: none;
  overflow: hidden;
}
.a-weihnachten-newsticker .v-newsticker__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.a-weihnachten-newsticker .v-newsticker__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: rk-newsticker-scroll 80s linear infinite;
  will-change: transform;
}
.a-weihnachten-newsticker .v-newsticker:hover .v-newsticker__track,
.a-weihnachten-newsticker .v-newsticker:focus-within .v-newsticker__track {
  animation-play-state: paused;
}
.a-weihnachten-newsticker .v-newsticker__seq {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 100%;
}
.a-weihnachten-newsticker .v-newsticker__item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 0.75em;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 35px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.a-weihnachten-newsticker .v-newsticker__item::after {
  content: '\00a0\00a0|\00a0\00a0';
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 767px) {
  .a-weihnachten-newsticker .v-newsticker {
    --rk-ticker-h: 72px;
  }
  .a-weihnachten-newsticker .v-newsticker__item {
    font-size: 20px;
    line-height: 26px;
  }
}
@keyframes rk-newsticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .a-weihnachten-newsticker .v-newsticker__track {
    animation: none;
  }
}
/* =============================================================================
   Erleben & Entdecken — Bleed-Features · Surface · Counters · Wanderkarte
   XD: hotel-riessersee-erleben-entdecken · Mobile: iphone-14-pro-22
   ============================================================================= */
/* Bleed nur Hauptbild: linker/rechter Rand = 20px vom Viewport */
/* --- Bleed-Feature-Blöcke (rsce_bleed_feature_blocks) ----------------------- */
.v-bleed-feature-blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
  margin-top: clamp(40px, 5vw, 72px);
  overflow: visible;
}
.v-bleed-feature {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  column-gap: 0;
  row-gap: 0;
  align-items: center;
  /* Panel vertikal zur gesamten Bildgruppe */
  overflow: visible;
  /* Kein Ueberstand mehr: Im aktuellen Entwurf (Export 1.9.2026) bleiben die
     Hauptbilder im Container und sind genauso breit wie die zwei Thumbs
     darunter — Kulinarik 650x321 ueber 2x 313x295, Erleben 630x311.
     Frueher ragte das Hauptbild bis 20px an den Fensterrand. */
}
.v-bleed-feature--image_right {
  flex-direction: row-reverse;
}
.v-bleed-feature__media {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  flex: 1 1 50%;
  width: 50%;
  max-width: 50%;
  margin: 0;
  padding: 0;
}
.v-bleed-feature__main {
  position: relative;
  overflow: hidden;
  background: #efddce;
  margin: 0;
  padding: 0;
}
.v-bleed-feature__main picture,
.v-bleed-feature__main img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 925 / 321;
  object-fit: cover;
}
.v-bleed-feature__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Entwurf: 2x 313 in 650 Breite = 24px dazwischen */
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.v-bleed-feature__thumb {
  overflow: hidden;
  background: #efddce;
  margin: 0;
}
.v-bleed-feature__thumb picture,
.v-bleed-feature__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 0.94;
  object-fit: cover;
}
.v-bleed-feature__panel {
  box-sizing: border-box;
  background: #faf6f7;
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 50px);
  /* endet im Container — kein Bleed */
  flex: 1 1 50%;
  width: 50%;
  max-width: 50%;
  margin: 0;
  height: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
}
.v-bleed-feature__title {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #4a4a49;
  white-space: pre-line;
}
.v-bleed-feature__text {
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-bleed-feature__text p {
  margin: 0 0 1rem;
}
.v-bleed-feature__text p:last-child {
  margin-bottom: 0;
}
.v-bleed-feature__list {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
.v-bleed-feature__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.85rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-bleed-feature__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a4a49;
}
.v-bleed-feature__list li:last-child {
  margin-bottom: 0;
}
.v-bleed-feature__cta {
  margin-top: auto;
  padding-top: 1.25rem;
}
.v-bleed-feature__overlay {
  position: absolute;
  left: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 3vw, 40px);
  margin: 0;
  font-family: var(--inn-head-font);
  /* font-size: XD Licorice 120 — User/Theme */
  color: #fff;
  line-height: 0.9;
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 992px) {
  .v-bleed-feature--side-cards {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 311px) minmax(260px, 309px);
    gap: 20px;
    align-items: stretch;
  }
  .v-bleed-feature--side-cards .v-bleed-feature__media {
    flex: none;
    width: auto;
    max-width: none;
  }
  .v-bleed-feature--side-cards .v-bleed-feature__main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .v-bleed-feature--side-cards .v-bleed-feature__main picture,
  .v-bleed-feature--side-cards .v-bleed-feature__main img {
    aspect-ratio: 639 / 499;
  }
  .v-bleed-feature--side-cards .v-bleed-feature__panel {
    flex: none;
    width: auto;
    max-width: none;
    background: #fff;
    padding: clamp(24px, 2.5vw, 36px) clamp(20px, 2vw, 30px);
    align-self: stretch;
    /* HRS-82: im Entwurf eine Karte ueber beide Zeilen, mit demselben
           Schatten wie die zwei Seitenkarten daneben */
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  }
  .v-bleed-feature--side-cards .v-bleed-feature__side-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .v-bleed-feature--side-cards .v-bleed-feature__side-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
    padding: clamp(20px, 2vw, 30px);
  }
  .v-bleed-feature--side-cards .v-bleed-feature__side-title {
    margin: 0 0 0.75rem;
    font-family: var(--inn-main-font);
    color: #681d33;
  }
  .v-bleed-feature--side-cards .v-bleed-feature__side-text {
    margin: 0;
    font-family: var(--inn-main-font);
    color: #4a4a49;
  }
  .v-bleed-feature--side-cards .v-bleed-feature__side-cta {
    margin-top: auto;
    padding-top: 1rem;
  }
}
@media (max-width: 991px) {
  .v-bleed-feature--side-cards .v-bleed-feature__side-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
  }
  .v-bleed-feature--side-cards .v-bleed-feature__side-card {
    background: #fff;
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
    padding: 24px;
  }
}
@media (min-width: 992px) {
  .v-bleed-feature:not(.v-bleed-feature--side-cards) .v-bleed-feature__main {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .v-bleed-feature:not(.v-bleed-feature--side-cards) .v-bleed-feature__main picture,
  .v-bleed-feature:not(.v-bleed-feature--side-cards) .v-bleed-feature__main img {
    aspect-ratio: 650 / 321;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .v-bleed-feature:not(.v-bleed-feature--side-cards) .v-bleed-feature__thumb picture,
  .v-bleed-feature:not(.v-bleed-feature--side-cards) .v-bleed-feature__thumb img {
    aspect-ratio: 313 / 295;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 991px) {
  .v-bleed-feature {
    flex-direction: column;
    align-items: stretch;
    /* Hauptbild: 20px zum Screen-Rand */
    /* Thumbs: Container-Breite (kein Bleed) */
  }
  .v-bleed-feature--image_right {
    flex-direction: column;
  }
  .v-bleed-feature .v-bleed-feature__media,
  .v-bleed-feature .v-bleed-feature__panel {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
  .v-bleed-feature .v-bleed-feature__main {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    margin-left: calc(50% - 50vw + 20px);
    margin-right: calc(50% - 50vw + 20px);
  }
  .v-bleed-feature .v-bleed-feature__thumbs {
    gap: 8px;
    width: 100%;
    margin: 16px 0 0;
  }
  .v-bleed-feature .v-bleed-feature__panel {
    margin-top: 0;
    padding: clamp(24px, 5vw, 36px) 0;
    width: 100%;
    max-width: 100%;
  }
}
/* --- Shared: Iconboxes auf Erleben-Seiten ---------------------------------- */
.a-erleben-sommer,
.a-erleben-winter {
  overflow: visible !important;
  /* XD: 4er-Grid (4 oben + 2 unten) — v-inn-grid liest --inn-cols-d/t/m */
}
.a-erleben-sommer > .inside,
.a-erleben-winter > .inside {
  overflow: visible;
}
.a-erleben-sommer .v-headline,
.a-erleben-winter .v-headline {
  text-align: left;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.a-erleben-sommer .v-headline-subtext,
.a-erleben-winter .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-erleben-sommer .v-headline-type-h2 .v-headline-text,
.a-erleben-winter .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-erleben-sommer .v-headline-text-container,
.a-erleben-winter .v-headline-text-container {
  text-align: left;
  max-width: 630px;
  margin-top: clamp(12px, 2vw, 20px);
  color: #4a4a49;
}
.a-erleben-sommer .v-icons-container-element-wrapper,
.a-erleben-winter .v-icons-container-element-wrapper {
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem);
  /* Der frueher hier stehende 575px-Block hat die Liste auf EINE Spalte
       gezwungen — mit `!important`, also unerreichbar fuer jede spaetere
       Regel. Der Entwurf (iPhone 14 Pro, 393px Board) zeigt auch bei
       Telefonbreite zwei Spalten à 166px. Entfernt fuer HRS-216; der
       991er-Block darueber gilt damit bis hinunter zu 320px. */
}
.a-erleben-sommer .v-icons-container-element-wrapper .v-icons-container-inner,
.a-erleben-winter .v-icons-container-element-wrapper .v-icons-container-inner {
  width: 100%;
  --inn-cols-d: 4;
  --inn-cols-t: 2;
  --inn-cols-m: 1;
  --inn-gap-d: 48px;
  --inn-gap-t: 28px;
  --inn-gap-m: 24px;
}
.a-erleben-sommer .v-icons-container-element-wrapper .v-icons-container-element.v-inn-grid,
.a-erleben-winter .v-icons-container-element-wrapper .v-icons-container-element.v-inn-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px) !important;
  width: 100%;
  flex-direction: unset !important;
  align-items: stretch;
}
.a-erleben-sommer .v-icons-container-element-wrapper .v-single-icon-wrapper,
.a-erleben-winter .v-icons-container-element-wrapper .v-single-icon-wrapper {
  min-width: 0;
  height: auto;
  max-width: none !important;
  flex: unset !important;
}
.a-erleben-sommer .v-icons-container-element-wrapper .single-icon,
.a-erleben-winter .v-icons-container-element-wrapper .single-icon,
.a-erleben-sommer .v-icons-container-element-wrapper .v-inn-single-icon,
.a-erleben-winter .v-icons-container-element-wrapper .v-inn-single-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}
.a-erleben-sommer .v-icons-container-element-wrapper .single-icon img,
.a-erleben-winter .v-icons-container-element-wrapper .single-icon img,
.a-erleben-sommer .v-icons-container-element-wrapper .v-inn-single-icon img,
.a-erleben-winter .v-icons-container-element-wrapper .v-inn-single-icon img {
  width: clamp(48px, 5vw, 64px);
  height: auto;
}
.a-erleben-sommer .v-icons-container-element-wrapper .single-icon > span,
.a-erleben-winter .v-icons-container-element-wrapper .single-icon > span,
.a-erleben-sommer .v-icons-container-element-wrapper .v-inn-single-icon > span,
.a-erleben-winter .v-icons-container-element-wrapper .v-inn-single-icon > span,
.a-erleben-sommer .v-icons-container-element-wrapper .v-inn-single-icon span p,
.a-erleben-winter .v-icons-container-element-wrapper .v-inn-single-icon span p {
  margin: 0;
  font-family: var(--inn-main-font);
  color: #681d33;
  white-space: pre-line;
}
@media (max-width: 991px) {
  .a-erleben-sommer .v-icons-container-element-wrapper .v-icons-container-element.v-inn-grid,
  .a-erleben-winter .v-icons-container-element-wrapper .v-icons-container-element.v-inn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* 20px in beide Richtungen wie im Entwurf (Kastenraster 195 bei
           175px Kastenhoehe). Stand auf 28px in der Zeile — ohne Kaesten
           fiel das nicht auf, mit Kaesten steht die Reihe sonst weiter
           auseinander als die Spalte. HRS-216. */
    gap: 20px !important;
  }
}
.a-erleben-zusatz .v-headline {
  text-align: left;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.a-erleben-zusatz .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-erleben-zusatz .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-erleben-zusatz .v-headline-text-container {
  text-align: left;
  max-width: 630px;
  margin-top: clamp(12px, 2vw, 20px);
}
.a-erleben-zusatz .v-media-cta-cards {
  margin-top: clamp(24px, 3vw, 40px);
}
/* --- Wandern + Counters (Surface #faf6f7) ---------------------------------- */
.mod_article.a-erleben-wandern,
.mod_article_container.a-erleben-wandern {
  background: #faf6f7;
  overflow: visible;
}
.a-erleben-wandern {
  background: #faf6f7;
  overflow: visible !important;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.a-erleben-wandern > .inside {
  overflow: visible;
}
.a-erleben-wandern .v-headline {
  text-align: left;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.a-erleben-wandern .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-erleben-wandern .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-erleben-wandern .v-erleben-info-card {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px);
  height: 100%;
  box-sizing: border-box;
}
.a-erleben-wandern .v-erleben-info-card h3 {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
}
.a-erleben-wandern .v-erleben-info-card p {
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.a-erleben-wandern .v-erleben-info-card .v-button {
  margin-top: 1.25rem;
}
.a-erleben-wandern .v-erleben-info-card .v-erleben-footnote {
  margin-top: 0.75rem;
}
.a-erleben-wandern .v-erleben-footnote {
  margin: 0.75rem 0 0;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.a-erleben-wandern .v-counter-boxes-element {
  margin-top: clamp(40px, 5vw, 72px);
}
@media (max-width: 991px) {
  .a-erleben-wandern .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
  .a-erleben-wandern .v-erleben-info-card {
    margin-top: 1.5rem;
  }
}
/* --- Counters (rsce_counters) — global (alle Seiten) ----------------------- */
.v-counter-boxes-element .counter-boxes.v-inn-grid,
.v-counter-boxes-element .counter-boxes {
  text-align: left;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
  --inn-cols-d: 4;
  --inn-cols-t: 2;
  --inn-cols-m: 1;
}
.v-counter-boxes-element .single-counter-container {
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: auto;
  max-width: none;
}
.v-counter-boxes-element .single-counter-animated-progress {
  display: none;
}
.v-counter-boxes-element .counter-number-container {
  font-family: var(--inn-main-font);
  font-weight: 300;
  font-size: 65px;
  line-height: 1.05;
  color: #681d33;
}
.v-counter-boxes-element .counter-timer,
.v-counter-boxes-element .counter-einheit {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.v-counter-boxes-element .counter-text-container,
.v-counter-boxes-element .counter-text {
  margin: 0.5rem 0 0;
  font-family: var(--inn-main-font);
  font-weight: 400;
  font-size: 18px;
  /* HRS-91: 18px Schrift mit 18px Zeilenhoehe klebte zusammen — 23px ist
       die Zeilenhoehe der Fliesstext-Rolle im Entwurf */
  line-height: 23px;
  color: #681d33;
  white-space: pre-line;
}
.v-counter-boxes-element .counter-text-container p,
.v-counter-boxes-element .counter-text p {
  margin: 0;
  font: inherit;
  color: inherit;
}
@media (max-width: 991px) {
  .v-counter-boxes-element .counter-boxes.v-inn-grid,
  .v-counter-boxes-element .counter-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-counter-boxes-element .counter-boxes.v-inn-grid,
  .v-counter-boxes-element .counter-boxes {
    grid-template-columns: 1fr;
  }
}
/* Erleben-Listen (Wandern + Revisionen + ggf. Bleed) — einheitlicher Abstand */
.v-erleben-list {
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}
.v-erleben-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1.35rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-erleben-list li:last-child {
  margin-bottom: 0;
}
.v-erleben-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a4a49;
}
.v-erleben-list li strong {
  color: inherit;
}
.v-erleben-surface {
  /* Wrapper-Klasse aus genericDiv — BG liegt am Article */
  display: block;
}
/* --- Wanderkarte + Patch-Badge --------------------------------------------- */
.mod_article.a-erleben-wanderkarte,
.mod_article_container.a-erleben-wanderkarte {
  background: #faf6f7;
  position: relative;
  overflow: visible;
  padding-top: clamp(48px, 5vw, 80px) !important;
  padding-bottom: clamp(48px, 5vw, 80px) !important;
}
.a-erleben-wanderkarte {
  background: #faf6f7;
  position: relative;
  overflow: visible !important;
  /* Fullscreen-Breite; Karte vollständig sichtbar (kein Cover-Crop) */
}
.a-erleben-wanderkarte > .inside {
  position: relative;
  overflow: visible;
}
.a-erleben-wanderkarte .v-trenner {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  grid-template-rows: none !important;
  background: transparent;
}
.a-erleben-wanderkarte .v-trenner__media {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
}
.a-erleben-wanderkarte .v-trenner__bg,
.a-erleben-wanderkarte .v-trenner__bg--desktop,
.a-erleben-wanderkarte .v-trenner__bg--mobile {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
.a-erleben-wanderkarte .v-trenner__bg img,
.a-erleben-wanderkarte .v-trenner__bg--desktop img,
.a-erleben-wanderkarte .v-trenner__bg--mobile img {
  position: relative !important;
  object-fit: contain !important;
  object-position: center center;
  width: 100%;
  height: auto !important;
  max-height: none;
}
.a-erleben-wanderkarte .v-trenner__inner {
  display: none;
  /* kein Text auf der Wanderkarte */
}
.a-erleben-wanderkarte .a-erleben-wanderpatch,
.a-erleben-wanderkarte .ce_image.a-erleben-wanderpatch {
  position: absolute;
  /* Badge am linken Rand des 1300er Containers */
  left: max(20px, calc((100vw - var(--inn-container-width, 1340px)) / 2));
  top: 0;
  z-index: 3;
  width: clamp(140px, 16vw, 244px);
  margin: 0;
  pointer-events: none;
}
.a-erleben-wanderkarte .a-erleben-wanderpatch figure,
.a-erleben-wanderkarte .ce_image.a-erleben-wanderpatch figure {
  margin: 0;
}
.a-erleben-wanderkarte .a-erleben-wanderpatch picture,
.a-erleben-wanderkarte .ce_image.a-erleben-wanderpatch picture,
.a-erleben-wanderkarte .a-erleben-wanderpatch img,
.a-erleben-wanderkarte .ce_image.a-erleben-wanderpatch img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .a-erleben-wanderkarte .a-erleben-wanderpatch,
  .a-erleben-wanderkarte .ce_image.a-erleben-wanderpatch {
    left: max(20px, calc((100vw - var(--inn-container-width, 1340px)) / 2));
    transform: none;
    top: -12px;
    width: 140px;
  }
}
/* --- Wintersport ----------------------------------------------------------- */
.a-erleben-winter {
  /* Mehr Luft vor „Ein paar Eindrücke“ */
}
.a-erleben-winter .a-erleben-dsv-logo,
.a-erleben-winter .ce_image.a-erleben-dsv-logo {
  max-width: 441px;
  margin-left: auto;
  margin-right: 0;
}
.a-erleben-winter .a-erleben-dsv-logo img,
.a-erleben-winter .ce_image.a-erleben-dsv-logo img {
  width: 100%;
  height: auto;
}
.a-erleben-winter .v-headline-type-h3 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
}
.a-erleben-winter .v-headline-type-h3 {
  margin-top: clamp(48px, 6vw, 96px);
}
.a-erleben-winter .a-erleben-winter-gallery,
.a-erleben-winter .v-focus-gallery.a-erleben-winter-gallery {
  margin-top: clamp(28px, 3vw, 48px);
  overflow: visible;
}
@media (max-width: 991px) {
  .a-erleben-winter .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
  .a-erleben-winter .a-erleben-dsv-logo,
  .a-erleben-winter .ce_image.a-erleben-dsv-logo {
    margin: 1.5rem auto 0;
    max-width: 280px;
  }
}
/* --- Revisionszeiten ------------------------------------------------------- */
.a-erleben-revisionen .v-headline {
  text-align: left;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.a-erleben-revisionen .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-erleben-revisionen .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-erleben-revisionen .v-erleben-info-card {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px);
  height: 100%;
  box-sizing: border-box;
}
.a-erleben-revisionen .v-erleben-info-card h3 {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
}
.a-erleben-revisionen .v-erleben-info-card .v-button {
  margin-top: 1.25rem;
}
.a-erleben-revisionen .v-erleben-info-card .v-erleben-footnote {
  margin-top: 0.75rem;
}
.a-erleben-revisionen .v-page-teaser-grid {
  margin-top: clamp(40px, 5vw, 72px);
}
@media (max-width: 991px) {
  .a-erleben-revisionen .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
  .a-erleben-revisionen .v-erleben-info-card {
    margin-top: 1.5rem;
  }
}
/* Focus-Gallery Wrapper (teilt Room-Detail-Gallery-Styles) */
.v-focus-gallery {
  overflow: visible;
}
.v-focus-gallery .v-room-detail__gallery-footer--nav-only {
  justify-content: flex-start;
}
/* --- Berg Wellness --------------------------------------------------------- */
.a-bergwellness-main {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.a-bergwellness-main .v-headline {
  text-align: left;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.a-bergwellness-main .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-bergwellness-main .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-bergwellness-main .v-headline-type-h3 {
  margin-top: clamp(48px, 6vw, 96px);
}
.a-bergwellness-main .v-headline-type-h3 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
}
.a-bergwellness-main .a-bergwellness-plan,
.a-bergwellness-main .ce_image.a-bergwellness-plan {
  max-width: 510px;
}
.a-bergwellness-main .a-bergwellness-plan img,
.a-bergwellness-main .ce_image.a-bergwellness-plan img {
  width: 100%;
  height: auto;
}
.a-bergwellness-main .v-bw-info-card {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px);
  margin-top: clamp(24px, 3vw, 40px);
  box-sizing: border-box;
}
.a-bergwellness-main .v-bw-info-card h3 {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
}
.a-bergwellness-main .v-bw-info-card p {
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.a-bergwellness-main .a-bergwellness-gallery,
.a-bergwellness-main .v-focus-gallery.a-bergwellness-gallery {
  margin-top: clamp(28px, 3vw, 48px);
  overflow: visible;
}
@media (max-width: 991px) {
  .a-bergwellness-main .row.ce_rowStart > .ce_column.col-5,
  .a-bergwellness-main .row.ce_rowStart > .ce_column.col-7 {
    grid-column: span 12;
  }
  .a-bergwellness-main .a-bergwellness-plan,
  .a-bergwellness-main .ce_image.a-bergwellness-plan {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
}
.v-bw-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px) clamp(24px, 3vw, 48px);
  margin: 0 0 clamp(8px, 1vw, 16px);
}
.v-bw-legend__col {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v-bw-legend li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-bw-legend__n {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #681d33;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--inn-main-font);
}
.v-bw-legend__n--muted {
  background: #4a4a49;
}
@media (max-width: 575px) {
  .v-bw-legend {
    grid-template-columns: 1fr;
  }
}
.mod_article.a-bergwellness-seebad,
.mod_article_container.a-bergwellness-seebad,
.mod_article.a-bergwellness-faq,
.mod_article_container.a-bergwellness-faq {
  background: rgba(194, 164, 173, 0.1);
}
/* Durchgängiger Mauve vom Slider-Halb bis Seebad — kein weißer Gap */
.mod_article.a-bergwellness-main,
.mod_article_container.a-bergwellness-main {
  padding-bottom: 0 !important;
}
.mod_article.a-bergwellness-main > .inside,
.mod_article_container.a-bergwellness-main > .inside,
.mod_article.a-bergwellness-main .inside,
.mod_article_container.a-bergwellness-main .inside {
  padding-bottom: 0 !important;
}
.a-bergwellness-main .a-bergwellness-gallery,
.a-bergwellness-main .v-focus-gallery.a-bergwellness-gallery {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  padding-bottom: 0;
  /* Mauve 10 % ab Slider-Mitte bis Artikelende (nahtlos zu Seebad) */
}
.a-bergwellness-main .a-bergwellness-gallery::after,
.a-bergwellness-main .v-focus-gallery.a-bergwellness-gallery::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 50%;
  background: rgba(194, 164, 173, 0.1);
  z-index: 0;
  pointer-events: none;
}
.a-bergwellness-main .a-bergwellness-gallery .v-room-detail__gallery,
.a-bergwellness-main .v-focus-gallery.a-bergwellness-gallery .v-room-detail__gallery {
  position: relative;
  z-index: 1;
}
.a-bergwellness-seebad,
.a-bergwellness-faq {
  background: rgba(194, 164, 173, 0.1);
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.a-bergwellness-seebad .v-headline,
.a-bergwellness-faq .v-headline {
  text-align: left;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.a-bergwellness-seebad .v-headline-subtext,
.a-bergwellness-faq .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-bergwellness-seebad .v-headline-type-h2 .v-headline-text,
.a-bergwellness-faq .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-bergwellness-seebad .v-bw-brochure,
.a-bergwellness-faq .v-bw-brochure {
  margin-top: clamp(40px, 5vw, 72px);
  max-width: 630px;
}
.a-bergwellness-seebad .v-bw-brochure h3,
.a-bergwellness-faq .v-bw-brochure h3 {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
}
.a-bergwellness-seebad .v-bw-brochure .v-button,
.a-bergwellness-faq .v-bw-brochure .v-button {
  margin-top: 1.25rem;
}
.a-bergwellness-seebad .a-bergwellness-flipbook,
.a-bergwellness-faq .a-bergwellness-flipbook,
.a-bergwellness-seebad .v-pdf-flipbook,
.a-bergwellness-faq .v-pdf-flipbook {
  margin-top: clamp(32px, 4vw, 56px);
}
.a-bergwellness-seebad .a-bergwellness-seebad-img figure,
.a-bergwellness-faq .a-bergwellness-seebad-img figure,
.a-bergwellness-seebad .ce_image.a-bergwellness-seebad-img figure,
.a-bergwellness-faq .ce_image.a-bergwellness-seebad-img figure,
.a-bergwellness-seebad .a-bergwellness-seebad-img picture,
.a-bergwellness-faq .a-bergwellness-seebad-img picture,
.a-bergwellness-seebad .ce_image.a-bergwellness-seebad-img picture,
.a-bergwellness-faq .ce_image.a-bergwellness-seebad-img picture,
.a-bergwellness-seebad .a-bergwellness-seebad-img img,
.a-bergwellness-faq .a-bergwellness-seebad-img img,
.a-bergwellness-seebad .ce_image.a-bergwellness-seebad-img img,
.a-bergwellness-faq .ce_image.a-bergwellness-seebad-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 991px) {
  .a-bergwellness-seebad .row.ce_rowStart > .ce_column.col-6,
  .a-bergwellness-faq .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
  .a-bergwellness-seebad .a-bergwellness-seebad-img,
  .a-bergwellness-faq .a-bergwellness-seebad-img,
  .a-bergwellness-seebad .ce_image.a-bergwellness-seebad-img,
  .a-bergwellness-faq .ce_image.a-bergwellness-seebad-img {
    margin-top: 1.5rem;
  }
}
.a-bergwellness-faq {
  padding-top: clamp(24px, 3vw, 40px);
}
.a-bergwellness-faq .mod_faqpage {
  margin-top: 0;
}
.a-bergwellness-beauty {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 96px);
  /* Der frueher hier stehende 575px-Block hat die Iconliste mit `!important`
     auf EINE Spalte gezwungen — unerreichbar fuer jede spaetere Regel. Alle
     Mobil-Artboards zeigen zwei Spalten. Entfernt beim projektweiten
     Nachziehen der Icon-Kaesten (HRS-204/216/220/241, auf Ansage auch auf
     den Seiten ohne eigenes Ticket). */
}
.a-bergwellness-beauty .v-headline {
  text-align: left;
  margin-bottom: 1rem;
}
.a-bergwellness-beauty .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-bergwellness-beauty .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-bergwellness-beauty .v-button {
  margin-top: 1.25rem;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.a-bergwellness-beauty .v-icons-container-element-wrapper {
  margin-top: clamp(20px, 3vw, 32px);
  margin-bottom: 0;
}
.a-bergwellness-beauty .v-icons-container-element-wrapper .v-icons-container-inner {
  width: 100%;
  --inn-cols-d: 3;
  --inn-cols-t: 3;
  --inn-cols-m: 1;
}
.a-bergwellness-beauty .v-icons-container-element-wrapper .v-icons-container-element.v-inn-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 3vw, 32px) clamp(16px, 2vw, 24px) !important;
  width: 100%;
  flex-direction: unset !important;
}
.a-bergwellness-beauty .v-icons-container-element-wrapper .v-single-icon-wrapper {
  min-width: 0;
  max-width: none !important;
  flex: unset !important;
}
.a-bergwellness-beauty .a-bergwellness-beauty-img,
.a-bergwellness-beauty .ce_image.a-bergwellness-beauty-img {
  max-width: 100%;
  margin-left: auto;
}
.a-bergwellness-beauty .a-bergwellness-beauty-img figure,
.a-bergwellness-beauty .ce_image.a-bergwellness-beauty-img figure,
.a-bergwellness-beauty .a-bergwellness-beauty-img picture,
.a-bergwellness-beauty .ce_image.a-bergwellness-beauty-img picture,
.a-bergwellness-beauty .a-bergwellness-beauty-img img,
.a-bergwellness-beauty .ce_image.a-bergwellness-beauty-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 991px) {
  .a-bergwellness-beauty .row.ce_rowStart > .ce_column.col-8,
  .a-bergwellness-beauty .row.ce_rowStart > .ce_column.col-4 {
    grid-column: span 12;
  }
  .a-bergwellness-beauty .v-icons-container-element-wrapper .v-icons-container-element.v-inn-grid {
    /* Stand auf drei Spalten auch mobil — bei 360px Bildschirm waeren das
         93px je Kasten. Zwei wie auf jedem Mobil-Artboard des Projekts;
         ein eigenes Artboard zu dieser Liste gibt es nicht, der Wert folgt
         dem durchgaengigen Muster. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .a-bergwellness-beauty .a-bergwellness-beauty-img,
  .a-bergwellness-beauty .ce_image.a-bergwellness-beauty-img {
    margin: 1.5rem auto 0;
    max-width: 420px;
  }
}
/* FAQ Kategorie-Label: immer Lato / Mainfont (nie Licorice) */
.faq-category-label {
  font-family: var(--inn-main-font) !important;
}
/* Team + Icons (Alpine Beauty Spa u. a.) */
.v-team-with-icons__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.v-team-with-icons--icons-only .v-team-with-icons__inner,
.v-team-with-icons--card-only .v-team-with-icons__inner {
  grid-template-columns: 1fr;
}
.v-team-with-icons--member_left .v-team-with-icons__member {
  order: 0;
}
.v-team-with-icons--member_right .v-team-with-icons__member {
  order: 2;
}
.v-team-with-icons__member {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  /* war 0 8px 32px/12% — eigene Rezeptur */
  overflow: hidden;
  max-width: 420px;
  width: 100%;
}
.v-team-with-icons__photo {
  position: relative;
  margin: 0;
}
.v-team-with-icons__photo picture,
.v-team-with-icons__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.v-team-with-icons__contact {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.v-team-with-icons__link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 52px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #681d33;
  border-radius: 26px;
  transition: max-width 0.28s ease, gap 0.28s ease, padding 0.28s ease;
  padding: 0;
}
.v-team-with-icons__link:hover,
.v-team-with-icons__link:focus-visible {
  max-width: 280px;
  gap: 10px;
  padding-right: 14px;
  text-decoration: none;
  color: #fff;
}
.v-team-with-icons__link.is-empty {
  pointer-events: none;
}
.v-team-with-icons__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.v-team-with-icons__link-icon img {
  width: 18px;
  height: 18px;
}
.v-team-with-icons__link-text {
  font-family: var(--inn-main-font);
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-width 0.28s ease;
}
.v-team-with-icons__link:hover .v-team-with-icons__link-text,
.v-team-with-icons__link:focus-visible .v-team-with-icons__link-text {
  opacity: 1;
  max-width: 220px;
}
.v-team-with-icons__meta {
  padding: 20px 24px 24px;
}
.v-team-with-icons__name {
  margin: 0 0 0.35rem;
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: 400;
  line-height: 1.25;
  color: #4a4a49;
}
@media only screen and (max-width: 767px) {
  .v-team-with-icons__name {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.v-team-with-icons__job {
  margin: 0;
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  color: #4a4a49;
}
.v-team-with-icons__quote {
  margin-top: 1.25rem;
  padding: 0 24px 24px;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-team-with-icons__icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px) clamp(16px, 2vw, 24px);
}
.v-team-with-icons__icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.v-team-with-icons__icon-media {
  display: block;
  width: clamp(40px, 5vw, 56px);
}
.v-team-with-icons__icon-media picture,
.v-team-with-icons__icon-media img {
  display: block;
  width: 100%;
  height: auto;
}
.v-team-with-icons__icon-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
@media (max-width: 991px) {
  .v-team-with-icons__inner {
    grid-template-columns: 1fr;
  }
  .v-team-with-icons--member_right .v-team-with-icons__member {
    order: 0;
  }
  .v-team-with-icons__member {
    max-width: 420px;
    margin: 0 auto;
  }
  .v-team-with-icons__icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-team-with-icons__icons {
    grid-template-columns: 1fr;
  }
}
/* Alpine Beauty Spa page shells */
.a-alpine-main,
.a-alpine-treatments,
.a-alpine-brochure,
.a-alpine-faq {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.a-alpine-main .v-headline,
.a-alpine-treatments .v-headline,
.a-alpine-brochure .v-headline,
.a-alpine-faq .v-headline {
  text-align: left;
}
.a-alpine-main .v-headline-type-h2 .v-headline-text,
.a-alpine-treatments .v-headline-type-h2 .v-headline-text,
.a-alpine-brochure .v-headline-type-h2 .v-headline-text,
.a-alpine-faq .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-alpine-main .v-headline-subtext,
.a-alpine-treatments .v-headline-subtext,
.a-alpine-brochure .v-headline-subtext,
.a-alpine-faq .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-alpine-main .a-alpine-icons-only,
.a-alpine-main .v-team-with-icons--icons-only {
  margin-top: clamp(24px, 3vw, 40px);
}
.a-alpine-main .a-alpine-team-card .v-team-with-icons__member {
  margin-left: auto;
}
@media (max-width: 991px) {
  .a-alpine-main .row.ce_rowStart > .ce_column.col-8,
  .a-alpine-main .row.ce_rowStart > .ce_column.col-4 {
    grid-column: span 12;
  }
  .a-alpine-main .a-alpine-team-card .v-team-with-icons__member {
    margin: 1.5rem auto 0;
  }
}
.a-alpine-brochure .v-alpine-brochure {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  /* war 0 8px 32px/10% — eigene Rezeptur */
  padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
  overflow: hidden;
}
.a-alpine-brochure .v-alpine-brochure h3 {
  margin: 0 0 0.75rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
}
.a-alpine-brochure .ce_column.col-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}
.a-alpine-brochure .ce_column.col-4 .v-button {
  margin: 0;
}
@media (max-width: 991px) {
  .a-alpine-brochure .row.ce_rowStart > .ce_column.col-8,
  .a-alpine-brochure .row.ce_rowStart > .ce_column.col-4 {
    grid-column: span 12;
  }
  .a-alpine-brochure .ce_column.col-4 {
    align-items: flex-start;
    margin-top: 1.25rem;
  }
}
.a-alpine-treatments .v-page-teaser-grid {
  margin-top: 0;
}
.a-alpine-bio .v-trenner {
  min-height: clamp(420px, 45vw, 721px);
}
.a-alpine-bio .v-trenner__cta-heading {
  margin: 1.25rem 0 0.75rem;
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: 400;
  line-height: 1.25;
  color: #681d33;
}
@media only screen and (max-width: 767px) {
  .a-alpine-bio .v-trenner__cta-heading {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.a-alpine-bio .v-trenner__contact-link {
  color: #681d33;
  text-decoration: none !important;
}
.a-alpine-bio .v-trenner__contact-link:hover,
.a-alpine-bio .v-trenner__contact-link:focus-visible {
  text-decoration: none !important;
}
.a-alpine-bio .v-trenner__contacts {
  margin-top: 1.25rem;
}
.a-alpine-bio .v-trenner__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #681d33;
  border-radius: 50%;
  flex-shrink: 0;
}
.a-alpine-bio .v-trenner__contact-icon img {
  width: 20px;
  height: 20px;
}
/* Der Mauve-Grund ist am 07.10.2026 entfallen: Der Entwurf
   `hotel-riessersee-alpine-beauty-spa` fuehrt in der Sektion „Frage & Antwort"
   (y5482) keine farbige Flaeche — im ganzen Artboard kommt #c2a4ad kein
   einziges Mal als Flaeche vor. Der Ton war hier also nie belegt; die Sektion
   gehoert auf Weiss. Entfernt statt ueberschrieben, damit nicht spaeter jemand
   die Herkunft sucht. */
.a-alpine-faq .mod_faqpage {
  margin-top: 0;
}
/* Trail-Trenner: volle Höhe wie XD (~722px) */
.a-erleben-trenner-trail .v-trenner__bg,
.a-erleben-trenner-trail .v-trenner__media {
  min-height: clamp(280px, 40vw, 722px);
}
/* Hilfreiche Links — Partner-Karten (Hochzeit) */
.a-feste-links-partners {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 96px);
}
.a-feste-links-partners .v-headline {
  text-align: left;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.a-feste-links-partners .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-feste-links-partners .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-feste-links-partners .v-headline-text-container {
  text-align: left;
  max-width: 780px;
  color: #4a4a49;
}
.a-feste-links-partners .v-headline-text-container a {
  color: #681d33;
  text-decoration: underline;
}
.v-partner-boxes-database {
  --v-partner-cols: 3;
  /* Die Gruppen sind <section>-Elemente und holten sich damit den globalen
     Sektions-Innenabstand (115px oben und unten) — daher die grossen
     Luecken zwischen den Kategorien. */
  /* Entwurf (Feste feiern · Hilfreiche Links): Ueberschrift 29 hoch, 39px
     ueber den Karten, 77px von den Karten zur naechsten Ueberschrift.
     Ohne margin-top holte sich die Ueberschrift den Standardabstand von h3
     und jede Kategorie wurde rund 115px zu hoch. */
}
.v-partner-boxes-database[data-cols='2'] {
  --v-partner-cols: 2;
}
.v-partner-boxes-database[data-cols='4'] {
  --v-partner-cols: 4;
}
.v-partner-boxes-database__group {
  /* zusaetzlich zum Innenabstand bringt die globale section-Regel ein
       Raster mit 50px Abstand mit — beides gehoert hier nicht hin */
  display: block;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: clamp(40px, 4vw, 77px);
}
.v-partner-boxes-database__group:first-child {
  margin-top: 0;
}
.v-partner-boxes-database__category {
  margin: 0 0 clamp(20px, 2.6vw, 39px);
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.25;
  color: #681d33;
}
@media only screen and (max-width: 767px) {
  .v-partner-boxes-database__category {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.v-partner-boxes-database__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--v-partner-cols), minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}
.v-partner-boxes-database__item {
  min-width: 0;
}
@media (max-width: 991px) {
  .v-partner-boxes-database__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-partner-boxes-database__grid {
    grid-template-columns: 1fr;
  }
}
/* XD: ~420×250 Card · Logo contain · Name + Pfeil */
.v-partner-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 250px;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  /* war 0 8px 32px/10% — eigene Rezeptur */
  border-radius: 0;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  /* XD-Card 420×250 → Logo-Fläche ~186px, Footer ~64px */
  /* wie Button: weißer Pfeil im Primary-Kreis */
}
.v-partner-card:hover,
.v-partner-card:focus-visible {
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 12px 40px rgba(74, 74, 73, 0.14);
}
.v-partner-card--static {
  cursor: default;
}
.v-partner-card__logo {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 186px;
  min-height: 186px;
  padding: 24px 32px;
  box-sizing: border-box;
}
.v-partner-card__logo picture {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}
.v-partner-card__logo img,
.v-partner-card__logo .v-partner-card__img {
  display: block;
  max-width: 100%;
  max-height: 140px;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  object-position: center;
}
.v-partner-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 18px;
  min-height: 56px;
  box-sizing: border-box;
}
.v-partner-card__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-partner-card__arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: url('/files/contao_files/Bilder/-svg/kreis-pfeil-rot-rechts.svg') center / contain no-repeat;
}
/* Inklusivleistungen-Übersicht */
.a-inklusiv-list {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.a-inklusiv-list .v-headline {
  text-align: left;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.a-inklusiv-list .v-headline-subtext {
  text-align: left;
  color: #4a4a49;
}
.a-inklusiv-list .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-inklusiv-list .v-headline-text-container {
  text-align: left;
  max-width: 640px;
  color: #4a4a49;
}
.a-inklusiv-staymate {
  /* Entwurf: letzte Kartenreihe endet 7654, Ueberschrift 7741 = 87px */
  padding: clamp(1.5rem, 2vw, 32px) 20px clamp(3rem, 5vw, 5rem);
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  /* Entwurf: „Alle Infos fuer Ihren Aufenthalt" steht in Textfarbe, nicht
     in Primaerfarbe — rot ist nur „Staymate App:" in der Box. */
}
.a-inklusiv-staymate > .inside > .v-headline {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.a-inklusiv-staymate .v-headline-type-h3 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 28px;
  font-weight: 400;
  color: #4a4a49;
}
.a-inklusiv-staymate .a-inklusiv-staymate__card {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  box-sizing: border-box;
  height: 100%;
}
.a-inklusiv-staymate .a-inklusiv-staymate__card .v-headline {
  margin-bottom: 0.75rem;
}
.a-inklusiv-staymate .a-inklusiv-staymate__card .rs-list-bullets {
  columns: 2;
  column-gap: 2rem;
  margin: 1rem 0 1.5rem;
}
.a-inklusiv-staymate .a-inklusiv-staymate__card .rs-list-bullets li {
  break-inside: avoid;
}
.a-inklusiv-staymate .a-inklusiv-staymate__photo {
  margin: 0;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
}
.a-inklusiv-staymate .a-inklusiv-staymate__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 442px;
  object-fit: cover;
}
@media (max-width: 991px) {
  .a-inklusiv-staymate .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
  .a-inklusiv-staymate .a-inklusiv-staymate__card .rs-list-bullets {
    columns: 1;
  }
  .a-inklusiv-staymate .a-inklusiv-staymate__photo {
    margin-top: 1.25rem;
  }
}
/* --- Downloads | Presse ----------------------------------------------- */
.a-downloads-guests,
.a-downloads-presse,
.a-downloads-meldungen {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
  overflow: visible;
}
.a-downloads-guests .v-headline,
.a-downloads-meldungen .v-headline {
  text-align: left;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.a-downloads-guests .v-headline-text-container,
.a-downloads-meldungen .v-headline-text-container {
  text-align: left;
  max-width: 650px;
  color: #4a4a49;
}
.a-downloads-presse .row.ce_rowStart {
  align-items: start;
}
.a-downloads-presse .v-headline {
  text-align: left;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.a-downloads-presse .v-headline-text-container {
  text-align: left;
  color: #4a4a49;
}
@media (max-width: 991px) {
  .a-downloads-presse .ce_column.col-6 {
    grid-column: span 12;
  }
}
.v-download-cards.block {
  overflow: visible;
}
.v-download-cards__heading {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.25;
  color: #4a4a49;
}
@media only screen and (max-width: 767px) {
  .v-download-cards__heading {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.v-download-cards__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
.v-download-cards__item {
  min-width: 0;
}
@media (max-width: 991px) {
  .v-download-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-download-cards__grid {
    grid-template-columns: 1fr;
  }
}
/* XD: ~420×137 weiße Card · Titel zentriert · Download-Icon unten */
.v-download-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  min-height: 137px;
  height: 100%;
  padding: 28px 24px 22px;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.v-download-card:hover,
.v-download-card:focus-visible {
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 8px 24px rgba(74, 74, 73, 0.18);
}
.v-download-card--static {
  cursor: default;
}
.v-download-card__title {
  display: block;
  text-align: center;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-download-card__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #681d33;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px auto;
}
.v-download-card__icon--download {
  background-image: url('/files/contao_files/Bilder/-svg/download-pfeil-weiss.svg');
}
.v-download-card__icon--external {
  background-color: transparent;
  background-image: url('/files/contao_files/Bilder/-svg/kreis-pfeil-rot-rechts.svg');
  background-size: contain;
}
.v-press-releases.block {
  overflow: visible;
}
.v-press-releases__year {
  margin-top: clamp(8px, 1.2vw, 16px);
  overflow: visible;
}
.v-press-releases__year:first-child {
  margin-top: clamp(6px, 1vw, 12px);
}
.v-press-releases__year-title {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.25;
  color: #4a4a49;
}
@media only screen and (max-width: 767px) {
  .v-press-releases__year-title {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.v-press-releases__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
  overflow: visible;
}
.v-press-releases__item {
  min-width: 0;
  overflow: visible;
}
@media (max-width: 991px) {
  .v-press-releases__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-press-releases__grid {
    grid-template-columns: 1fr;
  }
}
/* XD: Datum oben bündig · Titel · Download-Icon unten 50 % überstehend */
.v-press-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 180px;
  height: 100%;
  /* Oben 0 → Datums-BG liegt an der Kante; L/R normales Padding; unten Platz für Icon */
  padding: 0 24px 36px;
  overflow: visible;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow 0.2s ease;
}
.v-press-card:hover,
.v-press-card:focus-visible {
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 8px 24px rgba(74, 74, 73, 0.18);
}
.v-press-card--static {
  cursor: default;
}
.v-press-card__date {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 0.55rem 0.85rem;
  background: #faf6f7;
  /* #FAF6F7 */
  color: #681d33;
  font-family: var(--inn-main-font);
  font-weight: 500;
}
.v-press-card__title {
  display: block;
  flex: 1 1 auto;
  margin-top: 1rem;
  padding-bottom: 1.25rem;
  /* Luft zum Icon */
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-press-card__icon {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background-color: #681d33;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px auto;
  transform: translate(-50%, 50%);
  /* 50 % unter der Boxkante */
}
.v-press-card__icon--download {
  background-image: url('/files/contao_files/Bilder/-svg/download-pfeil-weiss.svg');
}
.v-press-card__icon--external {
  background-color: transparent;
  background-image: url('/files/contao_files/Bilder/-svg/kreis-pfeil-rot-rechts.svg');
  background-size: contain;
}
/* --- Impressionen: Filter-Galerie ------------------------------------- */
.a-impressionen-gallery {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.a-impressionen-gallery .v-headline {
  text-align: left;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.a-impressionen-gallery .v-headline-subtext {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-impressionen-gallery .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #681d33;
}
.a-impressionen-gallery .v-headline-text-container {
  text-align: left;
  max-width: 720px;
  color: #4a4a49;
}
.v-filter-gallery.block {
  overflow: visible;
}
.v-filter-gallery__filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 10px;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.v-filter-gallery__filter {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  border: 2px solid #681d33;
  background: #fff;
  color: #681d33;
  font-family: var(--inn-main-font);
  text-align: center;
  padding: 16px 12px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media (max-width: 767px) {
  .v-filter-gallery__filter {
    flex: 1 1 calc(50% - 10px);
    min-height: 44px;
  }
}
.v-filter-gallery__filter:hover,
.v-filter-gallery__filter:focus-visible {
  background: rgba(104, 29, 51, 0.06);
  outline: none;
}
.v-filter-gallery__filter.is-active {
  background: #681d33;
  border-color: #681d33;
  color: #fff;
}
.v-filter-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(200px, 22vw, 320px);
  gap: clamp(12px, 1.5vw, 20px);
}
.v-filter-gallery__item {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: rgba(74, 74, 73, 0.06);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.v-filter-gallery__item[hidden] {
  display: none !important;
}
.v-filter-gallery__item.is-enter {
  animation: v-filter-gallery-in 0.45s ease both;
}
.v-filter-gallery__item--col-4 {
  grid-column: span 4;
}
.v-filter-gallery__item--col-5 {
  grid-column: span 5;
}
.v-filter-gallery__item--col-7 {
  grid-column: span 7;
}
.v-filter-gallery__item--col-12 {
  grid-column: span 12;
}
@media (max-width: 991px) {
  .v-filter-gallery__item--col-4,
  .v-filter-gallery__item--col-5,
  .v-filter-gallery__item--col-7 {
    grid-column: span 6;
  }
}
@media (max-width: 575px) {
  .v-filter-gallery__item--col-4,
  .v-filter-gallery__item--col-5,
  .v-filter-gallery__item--col-7,
  .v-filter-gallery__item--col-12 {
    grid-column: span 12;
  }
}
.v-filter-gallery__link {
  display: block;
  height: 100%;
  text-decoration: none !important;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.v-filter-gallery__link:hover .v-filter-gallery__media img,
.v-filter-gallery__link:focus-visible .v-filter-gallery__media img {
  transform: scale(1.04);
}
.v-filter-gallery__media {
  display: block;
  width: 100%;
  height: 100%;
}
.v-filter-gallery__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.v-filter-gallery__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s ease;
}
.v-filter-gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-family: var(--inn-main-font);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.v-filter-gallery__link:hover .v-filter-gallery__caption,
.v-filter-gallery__link:focus-visible .v-filter-gallery__caption {
  opacity: 1;
  transform: none;
}
.v-filter-gallery__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.v-filter-gallery__more-btn {
  appearance: none;
  border: 2px solid #681d33;
  background: #fff;
  color: #681d33;
  font-family: var(--inn-main-font);
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.v-filter-gallery__more-btn:hover,
.v-filter-gallery__more-btn:focus-visible {
  background: #681d33;
  color: #fff;
  outline: none;
}
.v-filter-gallery__more-btn[hidden] {
  display: none !important;
}
@media (max-width: 991px) {
  .v-filter-gallery {
    /* HRS-251, baugleich zur Blog-Liste — siehe dort. */
  }
  .v-filter-gallery__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
  }
  .v-filter-gallery__filter {
    flex: 0 0 auto;
  }
  .v-filter-gallery__grid {
    grid-auto-rows: clamp(180px, 28vw, 260px);
  }
}
@media (max-width: 575px) {
  .v-filter-gallery__filter {
    padding: 14px 10px;
  }
  .v-filter-gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(220px, 56vw);
  }
  .v-filter-gallery__item--col-4,
  .v-filter-gallery__item--col-5,
  .v-filter-gallery__item--col-7,
  .v-filter-gallery__item--col-12 {
    grid-column: span 1;
  }
}
@keyframes v-filter-gallery-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* =============================================================================
   Contao-Formulare — nur Inputs (global für .ce_form)
   Label unter dem Feld · border-bottom · kein Placeholder-Look
   Überschreibt standard.less (volle Border-Boxen etc.)
   ============================================================================= */
.ce_form {
  /* Nur die Eingabefelder — Border-Bottom in Neutral */
  /* Select: schmaler Chevron rechts */
}
.ce_form .formbody {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ce_form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  width: 100%;
}
.ce_form .form-row--2 > .widget {
  flex: 1 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
}
@media (max-width: 767px) {
  .ce_form .form-row--2 > .widget {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.ce_form .widget {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 1.75rem;
  box-sizing: border-box;
  /* Label unter dem Input */
}
.ce_form .widget > label {
  order: 2;
  margin: 0.45rem 0 0;
  padding: 0;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  float: none !important;
  width: auto !important;
}
.ce_form .widget > input,
.ce_form .widget > select,
.ce_form .widget > textarea,
.ce_form .widget > .captcha_text {
  order: 1;
}
.ce_form .widget.widget-select.select-gender {
  max-width: 50%;
}
@media (max-width: 767px) {
  .ce_form .widget.widget-select.select-gender {
    max-width: 100%;
  }
}
.ce_form .widget.widget-captcha .captcha_text {
  order: 3;
  margin-top: 0.35rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.ce_form .widget.widget-submit {
  margin-top: 0.5rem;
  margin-bottom: 0;
  width: auto !important;
  max-width: max-content;
  align-self: flex-start;
}
.ce_form input.text,
.ce_form input.captcha,
.ce_form input[type='text'],
.ce_form input[type='email'],
.ce_form input[type='tel'],
.ce_form input[type='number'],
.ce_form input[type='password'],
.ce_form textarea,
.ce_form select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: auto;
  min-height: 2.5rem;
  margin: 0 !important;
  padding: 0.5rem 0 0.55rem !important;
  box-sizing: border-box;
  border: 0 !important;
  border-bottom: 1px solid #4a4a49 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  outline: none;
}
.ce_form input.text::placeholder,
.ce_form input.captcha::placeholder,
.ce_form input[type='text']::placeholder,
.ce_form input[type='email']::placeholder,
.ce_form input[type='tel']::placeholder,
.ce_form input[type='number']::placeholder,
.ce_form input[type='password']::placeholder,
.ce_form textarea::placeholder,
.ce_form select::placeholder {
  color: transparent;
  opacity: 0;
}
.ce_form input.text:focus,
.ce_form input.captcha:focus,
.ce_form input[type='text']:focus,
.ce_form input[type='email']:focus,
.ce_form input[type='tel']:focus,
.ce_form input[type='number']:focus,
.ce_form input[type='password']:focus,
.ce_form textarea:focus,
.ce_form select:focus {
  border-bottom-color: #681d33 !important;
}
.ce_form textarea {
  min-height: 7rem;
  resize: vertical;
}
.ce_form .widget-select select {
  padding-right: 1.75rem !important;
  cursor: pointer;
  color: #4a4a49;
}
.ce_form .widget-select select::-ms-expand {
  display: none;
}
.ce_form .widget-select::before {
  display: none !important;
  /* FontAwesome aus standard.less aus */
}
.ce_form .widget-select::after {
  content: '';
  position: absolute;
  right: 0.15rem;
  top: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid #4a4a49;
  border-bottom: 1.5px solid #4a4a49;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  z-index: 1;
}
.ce_form .widget-submit button,
.ce_form button.submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: max-content;
  min-width: 11.5rem;
  min-height: 50px;
  margin: 0;
  padding: 0.65rem 1.5rem;
  border: 2px solid #681d33;
  border-radius: 0;
  background: transparent;
  color: #681d33;
  font-family: var(--inn-main-font);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.ce_form .widget-submit button:hover,
.ce_form button.submit:hover,
.ce_form .widget-submit button:focus-visible,
.ce_form button.submit:focus-visible {
  background: #681d33;
  color: #fff;
  outline: none;
}
/* --- Kontaktseite ---------------------------------------------------------- */
.a-kontakt-form {
  position: relative;
  padding: 3.5rem 20px 5rem;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
}
.a-kontakt-form .v-headline {
  margin-bottom: 2.5rem;
  max-width: 752px;
}
.a-kontakt-form .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 65px;
  line-height: 1.12;
  font-weight: 300;
  color: #681d33;
}
.a-kontakt-form .v-headline-text-container {
  max-width: 752px;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
@media (max-width: 991px) {
  .a-kontakt-form .row.ce_rowStart > .ce_column.col-7,
  .a-kontakt-form .row.ce_rowStart > .ce_column.col-5 {
    grid-column: span 12;
  }
}
@media (min-width: 992px) {
  .a-kontakt-form .ce_column.col-5 {
    padding-left: clamp(1rem, 3vw, 2.5rem);
  }
}
@media (max-width: 991px) {
  .a-kontakt-form .ce_column.col-5 {
    margin-top: 2.5rem;
  }
}
.v-direktkontakt {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-sizing: border-box;
}
.v-direktkontakt__title {
  margin: 0 0 1.5rem;
  font-family: var(--inn-main-font) !important;
  color: #681d33;
  font-size: var(--inn-h3-font-size) !important;
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .v-direktkontakt__title {
    font-size: var(--inn-h3-font-size-mobile) !important;
  }
}
.v-direktkontakt__list {
  margin: 0;
  padding: 0;
}
.v-direktkontakt .v-contact-phone-mail__label {
  white-space: pre-line;
}
/* =============================================================================
   Nachhaltigkeit-Seite — Module & Sections
   ============================================================================= */
.v-greensign-stats {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.v-greensign-stats__ring-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}
.v-greensign-stats__ring {
  position: relative;
  width: min(330px, 72vw);
  aspect-ratio: 1;
}
.v-greensign-stats__svg {
  display: block;
  width: 100%;
  height: auto;
}
.v-greensign-stats__arc {
  stroke: #125e33;
  fill: none;
}
.v-greensign-stats__core {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: #125e33;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  color: #fff;
  text-align: center;
  padding: 0.65rem 0.5rem 0.85rem;
  box-sizing: border-box;
}
.v-greensign-stats__logo {
  display: block;
  width: min(140px, 68%);
  height: auto;
}
.v-greensign-stats__score {
  margin: 0;
  font-family: var(--inn-main-font);
  font-size: clamp(42px, 8vw, 58px);
  line-height: 1;
  font-weight: 700;
  color: #fff;
}
.v-greensign-stats__caption {
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: var(--inn-headline-font-weight-h3);
  line-height: 1.25;
  color: #681d33;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .v-greensign-stats__caption {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.v-greensign-stats__table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
@media (max-width: 767px) {
  .v-greensign-stats__table {
    grid-template-columns: 1fr;
  }
}
.v-greensign-stats__col {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v-greensign-stats__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 45px;
  padding: 0.55rem 0.75rem;
  box-sizing: border-box;
  background: #fff;
}
.v-greensign-stats__row.is-alt {
  background: rgba(18, 94, 51, 0.1);
}
.v-greensign-stats__label {
  font-family: var(--inn-main-font);
  font-weight: 700;
  color: #4a4a49;
}
.v-greensign-stats__value {
  font-family: var(--inn-main-font);
  color: #4a4a49;
  flex-shrink: 0;
}
.a-nachhalt-greensign {
  padding: clamp(3rem, 5vw, 4.5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-nachhalt-greensign .v-headline {
  margin-bottom: 1.25rem;
}
.a-nachhalt-greensign .row.ce_rowStart {
  margin-bottom: 1.25rem;
}
@media (max-width: 991px) {
  .a-nachhalt-greensign .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
}
.a-nachhalt-greensign .v-button {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.mod_article.a-nachhalt-co2,
.mod_article_container.a-nachhalt-co2 {
  background: #52684F;
  color: #fff;
  width: calc(100% - 40px);
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(3rem, 5vw, 4.5rem) 20px !important;
  box-sizing: border-box;
}
.mod_article.a-nachhalt-co2 > .inside,
.mod_article_container.a-nachhalt-co2 > .inside {
  max-width: var(--inn-container-width);
  margin: 0 auto;
  padding: 0;
}
.a-nachhalt-co2 .v-headline-subtext,
.a-nachhalt-co2 .v-headline-type-h2 .v-headline-text,
.a-nachhalt-co2 .v-headline.v-headline-type-h2 .v-headline-text,
.a-nachhalt-co2 .ce_text,
.a-nachhalt-co2 .ce_text p {
  color: #fff !important;
}
.a-nachhalt-co2 .v-headline {
  margin-bottom: 1rem;
}
@media (max-width: 991px) {
  .a-nachhalt-co2 .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
}
.a-nachhalt-co2 .v-button.v-outline a,
.a-nachhalt-co2 .v-button.v-white a {
  color: #fff !important;
  border-color: #fff !important;
  background: transparent !important;
}
.a-nachhalt-achten {
  padding: clamp(3rem, 5vw, 5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-nachhalt-achten .v-headline {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.v-feature-list-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}
@media (max-width: 991px) {
  .v-feature-list-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .v-feature-list-cards__grid {
    grid-template-columns: 1fr;
  }
}
.v-feature-list-card {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  box-sizing: border-box;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  min-height: 100%;
}
.v-feature-list-card--span-2 {
  grid-column: span 2;
}
@media (max-width: 575px) {
  .v-feature-list-card--span-2 {
    grid-column: span 1;
  }
}
.v-feature-list-card--image {
  padding: 0;
  overflow: hidden;
}
.v-feature-list-card--image .v-feature-list-card__media {
  height: 100%;
  min-height: 280px;
}
.v-feature-list-card--image .v-feature-list-card__media picture,
.v-feature-list-card--image .v-feature-list-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-feature-list-card__title {
  margin: 0 0 0.85rem;
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: 500;
  line-height: 1.25;
  color: #681d33;
}
@media only screen and (max-width: 767px) {
  .v-feature-list-card__title {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.v-feature-list-card__intro {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-feature-list-card__list {
  margin: 0;
}
.a-nachhalt-montana {
  padding: clamp(3rem, 5vw, 5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-nachhalt-montana .v-headline {
  margin-bottom: 1.25rem;
}
@media (max-width: 991px) {
  .a-nachhalt-montana .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
}
.a-nachhalt-montana .v-button {
  margin-top: 1.25rem;
}
.a-nachhalt-montana .content-image img {
  display: block;
  width: 100%;
  height: auto;
}
.a-nachhalt-werte {
  padding: clamp(3rem, 5vw, 5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible;
  /* Download-Karten: Spalte = Card, damit Text + Button gemeinsam drin liegen */
}
.a-nachhalt-werte .v-headline {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.a-nachhalt-werte .v-icon-tag-cards {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.a-nachhalt-werte .v-nachhalt-compact {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.a-nachhalt-werte .v-nachhalt-compact__title {
  margin: 0 0 0.75rem;
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: 500;
  line-height: 1.25;
  color: #681d33;
}
@media only screen and (max-width: 767px) {
  .a-nachhalt-werte .v-nachhalt-compact__title {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.a-nachhalt-werte .v-nachhalt-compact__text {
  margin: 0;
  max-width: 570px;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.a-nachhalt-werte .v-nachhalt-sdg {
  margin: 0 0 clamp(2rem, 3vw, 2.75rem);
}
.a-nachhalt-werte .v-nachhalt-sdg picture,
.a-nachhalt-werte .v-nachhalt-sdg img {
  display: block;
  width: 100%;
  height: auto;
}
.a-nachhalt-werte .row.ce_rowStart {
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
}
.a-nachhalt-werte .row.ce_rowStart > .ce_column.col-6 {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-sizing: border-box;
  min-width: 0;
}
@media (max-width: 991px) {
  .a-nachhalt-werte .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12;
  }
}
.a-nachhalt-werte .row.ce_rowStart > .ce_column.col-6 .v-nachhalt-dl {
  background: transparent;
  box-shadow: none;
  padding: 0;
  height: auto;
  flex: 1 1 auto;
}
.a-nachhalt-werte .row.ce_rowStart > .ce_column.col-6 .v-button {
  margin-top: 0.25rem;
}
.a-nachhalt-werte .v-nachhalt-dl {
  box-sizing: border-box;
}
.a-nachhalt-werte .v-nachhalt-dl__title {
  margin: 0 0 0.75rem;
  font-family: var(--inn-main-font);
  font-size: var(--inn-h3-font-size);
  font-weight: 400;
  line-height: 1.25;
  color: #681d33;
}
@media only screen and (max-width: 767px) {
  .a-nachhalt-werte .v-nachhalt-dl__title {
    font-size: var(--inn-h3-font-size-mobile);
  }
}
.a-nachhalt-werte .v-nachhalt-dl__text {
  margin: 0 0 1.25rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
/* ==========================================================================
   Über uns
   ========================================================================== */
.a-ueber-map {
  padding: clamp(3rem, 5vw, 5rem) 20px 0;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  /* HRS-90: Entwurf — Willkommen-Text endet 1810, Eyebrow „Riessersee
     Hotel" beginnt 2019. Die Klasse heisst v-centered, nicht
     v-headline-align-centered. */
}
.a-ueber-map .v-headline {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}
.a-ueber-map .v-headline.v-headline-align-centered,
.a-ueber-map .v-headline.v-centered {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.a-ueber-map .v-headline.v-centered {
  margin-bottom: clamp(64px, 10.88vw, 209px);
}
.a-ueber-map .v-hotel-map {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.v-ueber-map__coords {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  text-align: center;
  font-family: var(--inn-main-font);
  font-weight: 300;
  color: #4a4a49;
  text-transform: uppercase;
}
.a-ueber-counters {
  padding: clamp(2.5rem, 4vw, 3.5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-ueber-counters .v-counter-boxes-element {
  margin: 0;
}
.a-gastgeber {
  padding: clamp(2.5rem, 4vw, 4rem) 20px clamp(3rem, 5vw, 5rem);
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  /*
   * HRS-173 („button größe verändert sich?!"): Der Umschalter wechselte beim
   * Aufklappen gleich zweifach die Groesse.
   *
   * 1. Die jeweils andere Beschriftung wurde mit `display: none` aus dem
   *    Layout genommen. Der Knopf war dadurch einmal „Mehr anzeigen" und
   *    einmal „Weniger anzeigen" breit.
   * 2. Die 18px aus der Schaltflaechenregel hingen an `__more`, nicht an
   *    `__less` — im aufgeklappten Zustand fiel die Schrift deshalb auf die
   *    Browservorgabe fuer `<button>` (13,33px) zurueck.
   *
   * Beide Beschriftungen liegen jetzt in derselben Rasterzelle uebereinander
   * und bleiben im Layout; sichtbar ist immer nur eine. Der Knopf misst damit
   * in beiden Zustaenden die breitere der beiden — ohne geratene
   * Mindestbreite, die beim naechsten Textwechsel wieder falsch waere.
   */
  /* Collapsed: nur die ersten 6 Karten sichtbar */
  /*
   * HRS-172: Eingeklappt standen sieben Kacheln — sechs Personen und die
   * gruene „Komm ins Team"-Kachel. Bestellt sind genau sechs; die gruene
   * Kachel gehoert ans Ende und erscheint erst, wenn alles aufgeklappt ist.
   * Ihre Position in der Reihenfolge stimmt bereits, nur die Sichtbarkeit
   * war nicht an den Zustand gebunden.
   */
}
.a-gastgeber .v-headline {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.a-gastgeber .v-gastgeber-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
  align-items: stretch;
  /* Team-Modul-Wrapper auflösen → Karten + CTA als Grid-Zellen */
  /* Hover-Pills wie Alpine Beauty Spa (.v-team-with-icons) */
  /* HRS-92: Entwurf — weisse Flaeche 122px hoch: 26 oben, 32 seitlich,
       38 unter der Position */
}
.a-gastgeber .v-gastgeber-grid > .v-group-team-container,
.a-gastgeber .v-gastgeber-grid > .ce_rsce_team_group_from_table,
.a-gastgeber .v-gastgeber-grid .v-group-team-container,
.a-gastgeber .v-gastgeber-grid .v-team-group-inner,
.a-gastgeber .v-gastgeber-grid .v-team-group,
.a-gastgeber .v-gastgeber-grid .v-gastgeber-team {
  display: contents;
}
.a-gastgeber .v-gastgeber-grid .v-single-team {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  overflow: hidden;
}
.a-gastgeber .v-gastgeber-grid .team-image,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__photo {
  position: relative;
  aspect-ratio: 420 / 495;
  overflow: hidden;
  margin: 0;
  /* Nur das Porträt — nicht die Kontakt-Icons im Overlay */
}
.a-gastgeber .v-gastgeber-grid .team-image > picture,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__photo > picture,
.a-gastgeber .v-gastgeber-grid .team-image > picture img,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__photo > picture img,
.a-gastgeber .v-gastgeber-grid .team-image > img,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__contact {
  left: 12px;
  bottom: 12px;
  gap: 8px;
}
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link {
  max-width: 40px;
  border-radius: 20px;
}
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:hover,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:focus-visible {
  max-width: 260px;
  gap: 8px;
  padding-right: 12px;
}
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link-icon {
  width: 40px;
  height: 40px;
}
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.a-gastgeber .v-gastgeber-grid .team-content {
  padding: 26px 32px 38px;
}
.a-gastgeber .v-gastgeber-grid .team-title,
.a-gastgeber .v-gastgeber-grid .team-title h4 {
  margin: 0;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #4a4a49;
}
.a-gastgeber .v-gastgeber-grid .team-job {
  margin-top: 0.35rem;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  text-transform: uppercase;
}
.a-gastgeber .v-gastgeber-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  /* Gleiche Gesamtproportion wie Team-Karte (Foto 420×495 + Meta ~122) */
  aspect-ratio: 420 / 617;
  min-height: 100%;
  /* Entwurf (Kachel 420x617): Kicker 40/129, Logo 47/190 (323x162),
       Button 48/518, darunter 49 frei. Als Prozent der Kachelbreite, damit
       es in schmaleren Spalten mitskaliert. */
  padding: 30.7% 9.5% 11.7%;
  overflow: hidden;
  /* Entwurf: #3f470f — nicht das hellere @rs-green */
  background-color: #3f470f;
  /* Geschwungene Flaeche direkt im Stylesheet: die exportierte SVG hat eine
       456,9x653 grosse Zeichenflaeche mit 18,9/17px Versatz und einem
       Schlagschatten-Filter — skaliert auf die Kachel ergab das einen
       sichtbaren Rahmen an rechter und unterer Kante. Hier die beiden
       Entwurfsformen (weiss, 5,6 %) auf exakt 420x617. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 617' preserveAspectRatio='none'%3E%3Cpath d='M332.028,0H420V617H0s188.621-61.171,271.628-215.42S332.028,0,332.028,0Z' fill='%23fff' opacity='0.056'/%3E%3Cpath d='M294.082-25.085H372V591.7H-48.922s215.986-34.059,289.507-188.789S294.082-25.085,294.082-25.085Z' transform='translate%2848,25.09%29' fill='%23fff' opacity='0.056'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: #fff;
  box-sizing: border-box;
  text-align: left;
  /* Optionales Foto: Core-Image im CTA-Wrapper (Backend) */
  /* Der Textblock ist nicht automatisch so breit wie die Kachel —
       ohne das bleibt das Logo bei 60 % der Sollbreite. */
}
.a-gastgeber .v-gastgeber-cta > .content-image,
.a-gastgeber .v-gastgeber-cta > .ce_image,
.a-gastgeber .v-gastgeber-cta .v-gastgeber-cta__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}
.a-gastgeber .v-gastgeber-cta > .content-image picture,
.a-gastgeber .v-gastgeber-cta > .ce_image picture,
.a-gastgeber .v-gastgeber-cta .v-gastgeber-cta__photo picture,
.a-gastgeber .v-gastgeber-cta > .content-image img,
.a-gastgeber .v-gastgeber-cta > .ce_image img,
.a-gastgeber .v-gastgeber-cta .v-gastgeber-cta__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.a-gastgeber .v-gastgeber-cta:has(> .content-image img)::before,
.a-gastgeber .v-gastgeber-cta:has(> .ce_image img)::before,
.a-gastgeber .v-gastgeber-cta:has(.v-gastgeber-cta__photo img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(103, 121, 67, 0.7);
  pointer-events: none;
}
.a-gastgeber .v-gastgeber-cta:has(> .content-image img)::after,
.a-gastgeber .v-gastgeber-cta:has(> .ce_image img)::after,
.a-gastgeber .v-gastgeber-cta:has(.v-gastgeber-cta__photo img)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 617' preserveAspectRatio='none'%3E%3Cpath d='M332.028,0H420V617H0s188.621-61.171,271.628-215.42S332.028,0,332.028,0Z' fill='%23fff' opacity='0.056'/%3E%3Cpath d='M294.082-25.085H372V591.7H-48.922s215.986-34.059,289.507-188.789S294.082-25.085,294.082-25.085Z' transform='translate%2848,25.09%29' fill='%23fff' opacity='0.056'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
.a-gastgeber .v-gastgeber-cta .ce_text,
.a-gastgeber .v-gastgeber-cta .content-text {
  position: relative;
  z-index: 3;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  flex: 1 1 auto;
}
.a-gastgeber .v-gastgeber-cta__kicker {
  margin: 0;
  font-family: var(--inn-main-font);
  /* Entwurf: 28px/35 */
  font-size: clamp(18px, 1.46vw, 28px);
  line-height: 1.25;
  color: #fff;
}
.a-gastgeber .v-gastgeber-cta .rte,
.a-gastgeber .v-gastgeber-cta .ce_text > div {
  width: 100%;
}
.a-gastgeber .v-gastgeber-cta__logo {
  display: block;
  /* Entwurf: 323 von 340 Innenbreite, 26px unter dem Kicker */
  width: 95%;
  max-width: 323px;
  height: auto;
  margin: 7.6% 0 0;
}
.a-gastgeber .v-gastgeber-cta .v-button,
.a-gastgeber .v-gastgeber-cta .ce_rsce_button {
  position: relative;
  z-index: 3;
  margin: auto 0 0;
  align-self: flex-start;
}
.a-gastgeber .v-gastgeber-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  width: 100%;
}
.a-gastgeber .v-gastgeber-toggle-wrap::before,
.a-gastgeber .v-gastgeber-toggle-wrap::after {
  content: '';
  flex: 1 1 auto;
  height: 2px;
  background: #681d33;
  min-width: 2rem;
}
.a-gastgeber .v-gastgeber-toggle {
  appearance: none;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #681d33;
  font-family: var(--inn-main-font);
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-grid;
  grid-template-areas: 'beschriftung';
  align-items: center;
  justify-items: center;
}
.a-gastgeber .v-gastgeber-toggle .v-gastgeber-toggle__more,
.a-gastgeber .v-gastgeber-toggle .v-gastgeber-toggle__less {
  grid-area: beschriftung;
  /* `visibility` statt `display`: haelt den Platz und nimmt die
         verborgene Beschriftung trotzdem aus dem Vorlesebaum. */
  visibility: hidden;
}
.a-gastgeber .v-gastgeber-toggle .v-gastgeber-toggle__more {
  visibility: visible;
}
.a-gastgeber.is-expanded .v-gastgeber-toggle .v-gastgeber-toggle__more {
  visibility: hidden;
}
.a-gastgeber.is-expanded .v-gastgeber-toggle .v-gastgeber-toggle__less {
  visibility: visible;
}
.a-gastgeber:not(.is-expanded) .v-gastgeber-grid > .v-single-team:nth-child(n + 7),
.a-gastgeber:not(.is-expanded) .v-gastgeber-grid .v-single-team:nth-child(n + 7) {
  display: none;
}
.a-gastgeber:not(.is-expanded) .v-gastgeber-cta {
  display: none;
}
@media (max-width: 991px) {
  .a-gastgeber .v-gastgeber-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .a-gastgeber:not(.is-expanded) .v-gastgeber-grid .v-single-team:nth-child(n + 5) {
    display: none;
  }
}
@media (max-width: 575px) {
  .a-gastgeber .v-gastgeber-grid {
    grid-template-columns: 1fr;
  }
  .a-gastgeber:not(.is-expanded) .v-gastgeber-grid .v-single-team:nth-child(n + 4) {
    display: none;
  }
}
.a-geschichte {
  padding: clamp(3rem, 5vw, 5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-geschichte .v-headline {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 720px;
}
.v-history-timeline {
  /* Durchgehende Timeline-Linie über alle Einträge */
  /* 1887: Text links + Collage rechts */
  /* 1892: Headline/Text oben, Duo-Bilder darunter */
}
.v-history-timeline__title {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  color: #681d33;
}
.v-history-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 6vw, 5.5rem);
  position: relative;
}
.v-history-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 140px 24px minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
.v-history-timeline__year {
  margin: 0;
  padding-top: 0.1em;
  text-align: right;
  font-family: var(--inn-main-font);
  font-weight: 300;
  font-size: var(--inn-h2-font-size);
  color: #4a4a49;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .v-history-timeline__year {
    font-size: var(--inn-h2-font-size-mobile);
  }
}
.v-history-timeline__rail {
  position: relative;
  justify-self: center;
  width: 24px;
  align-self: stretch;
}
.v-history-timeline__list::before {
  content: '';
  position: absolute;
  top: 0.7em;
  bottom: 0;
  left: calc(140px + clamp(1rem, 2vw, 1.75rem) + 11px);
  width: 2px;
  background: rgba(74, 74, 73, 0.22);
  pointer-events: none;
}
.v-history-timeline__dot {
  position: absolute;
  top: 0.55em;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #681d33;
  transform: translate(-50%, 0);
  z-index: 1;
}
.v-history-timeline__body {
  min-width: 0;
}
.v-history-timeline__copy {
  min-width: 0;
}
.v-history-timeline__event {
  margin: 0 0 0.85rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #681d33;
}
.v-history-timeline__text {
  margin: 0;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-history-timeline__text p {
  margin: 0 0 0.75em;
}
.v-history-timeline__text p:last-child {
  margin-bottom: 0;
}
.v-history-timeline__media {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.v-history-timeline__media--duo {
  grid-template-columns: 1fr 1fr;
}
.v-history-timeline__media--single {
  grid-template-columns: 1fr;
  max-width: 640px;
}
.v-history-timeline__media--collage3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.v-history-timeline__media--collage3 .v-history-timeline__figure:first-child {
  grid-column: 1 / -1;
}
.v-history-timeline__item--collage3 .v-history-timeline__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.v-history-timeline__item--duo .v-history-timeline__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.v-history-timeline__item--duo .v-history-timeline__text {
  max-width: none;
}
.v-history-timeline__figure {
  margin: 0;
}
.v-history-timeline__figure img,
.v-history-timeline__figure picture,
.v-history-timeline__figure picture img {
  display: block;
  width: 100%;
  height: auto;
}
.v-history-timeline__caption {
  margin: 0.45rem 0 0;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
@media (max-width: 991px) {
  .v-history-timeline__item {
    grid-template-columns: 72px 18px minmax(0, 1fr);
    column-gap: 0.85rem;
  }
  .v-history-timeline__list::before {
    left: calc(72px + 0.85rem + 8px);
  }
  .v-history-timeline__item--collage3 .v-history-timeline__body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575px) {
  .v-history-timeline__item {
    grid-template-columns: 56px 14px minmax(0, 1fr);
    column-gap: 0.65rem;
  }
  .v-history-timeline__list::before {
    left: calc(56px + 0.65rem + 6px);
  }
  .v-history-timeline__year {
    text-align: left;
  }
  .v-history-timeline__media--collage3,
  .v-history-timeline__media--duo {
    grid-template-columns: 1fr;
  }
}
/* --- Kulinarik ---------------------------------------------------------------- */
.a-kulinarik-geniesser {
  padding: clamp(3rem, 5vw, 5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-kulinarik-geniesser .v-headline {
  margin-bottom: 1.5rem;
}
.a-kulinarik-geniesser .row.ce_rowStart {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.a-kulinarik-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding: 0;
  list-style: none;
}
.a-kulinarik-pills__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0.75rem 1.25rem;
  box-sizing: border-box;
  border: 1px solid rgba(104, 29, 51, 0.35);
  background: #fff;
  color: #681d33;
  font-family: var(--inn-main-font);
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.a-kulinarik-pills__item:hover,
.a-kulinarik-pills__item:focus-visible {
  background: #681d33;
  border-color: #681d33;
  color: #fff;
  text-decoration: none;
}
.mod_article.a-kulinarik-menue,
.mod_article_container.a-kulinarik-menue {
  background: #faf6f7;
  overflow: visible;
}
.a-kulinarik-menue {
  background: #faf6f7;
  overflow: visible !important;
  padding: clamp(3rem, 5vw, 5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
  /* „Ihre Vorteile": im Entwurf drei weisse Karten 410x714 mit 35px Abstand,
     darin oben mittig eine 210x210 grosse Icon-Flaeche in #faf6f7, darunter
     Titel (28px) und Text (18px) mit 20px Innenabstand. Die vorhandene Regel
     oben greift nur fuer die alte Iconbox-Auszeichnung (.v-iconbox-icon) —
     hier steht die neue (.icon-img-container), deshalb liefen die Icons
     ungebremst ueber die volle Breite. */
}
.a-kulinarik-menue .v-headline {
  margin-bottom: 1.25rem;
}
.a-kulinarik-menue .v-content-tabs {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.a-kulinarik-menue .v-iconboxes {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.a-kulinarik-menue .v-iconbox-icon img {
  max-height: 48px;
  width: auto;
}
.a-kulinarik-menue .ce_rsce_iconboxes {
  margin-top: clamp(24px, 3vw, 40px);
  /* Die Illustration bringt ihren hellen Kreis selbst mit (aus dem Entwurf
       geschnitten). Sie ist breiter als der Kreis, weil Teile — Pfannenstiel,
       Blaetter, der kleine Kreis oben — im Entwurf darueber hinausragen und
       nicht abgeschnitten werden duerfen. */
}
.a-kulinarik-menue .ce_rsce_iconboxes .v-icons-container-inner {
  width: 100%;
}
.a-kulinarik-menue .ce_rsce_iconboxes .v-icons-container-element.v-inn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px;
  align-items: stretch;
  width: 100%;
}
.a-kulinarik-menue .ce_rsce_iconboxes .v-single-icon-wrapper {
  min-width: 0;
  max-width: none;
  height: 100%;
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  padding: 33px 20px 40px;
  text-align: left;
}
.a-kulinarik-menue .ce_rsce_iconboxes .icon-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 330px;
  max-width: 100%;
  margin-bottom: 30px;
}
.a-kulinarik-menue .ce_rsce_iconboxes .icon-img-container img,
.a-kulinarik-menue .ce_rsce_iconboxes .icon-img-container svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 330px;
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span {
  display: block;
  width: 100%;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  /* Entwurf: Hashtag ueber dem Titel, in Textfarbe */
  /* Der Hashtag steht im Quelltext als letzter Absatz, im Entwurf aber
         ueber dem Titel — deshalb der Absatz, nicht die Auszeichnung selbst. */
  /* Button steht im Entwurf in der Karte, nicht darunter */
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span > div,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span p:has(> .a-kulinarik-menue__tag),
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span p:has(> .a-kulinarik-menue__tag) {
  order: -1;
  /* Entwurf: Hashtag 8546, Titel 8605 */
  margin: 0 0 36px;
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span .a-kulinarik-menue__tag,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span .a-kulinarik-menue__tag {
  color: #4a4a49;
  font-style: italic;
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span .a-kulinarik-menue__karten-cta,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span .a-kulinarik-menue__karten-cta {
  margin-top: auto;
  padding-top: 30px;
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span p,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span p {
  /* Entwurf: Titel 8605 (69 hoch) -> Text 8694 */
  margin: 0 0 20px;
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span p:last-child,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span p:last-child {
  margin-bottom: 0;
}
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span strong,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span strong {
  display: block;
  font-size: 28px;
  line-height: 37px;
  font-weight: 400;
}
@media (max-width: 991px) {
  .a-kulinarik-menue .ce_rsce_iconboxes .v-icons-container-element.v-inn-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.a-kulinarik-menue__tag {
  display: inline-block;
  color: #681d33;
  font-family: var(--inn-main-font);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.a-kulinarik-feste .v-trenner__content {
  max-width: 640px;
}
.a-kulinarik-feste .v-trenner__subtext {
  text-transform: uppercase;
  letter-spacing: normal;
}
@media (max-width: 991px) {
  .a-kulinarik-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 4px;
  }
  .a-kulinarik-pills__item {
    flex: 0 0 auto;
    min-height: 48px;
    white-space: nowrap;
  }
  .a-kulinarik-geniesser .ce_column.col-6 {
    grid-column: span 12;
  }
}
/* --- Firmenevents / Gruppen ----------------------------------------------- */
.a-firmenevents-intro,
.a-firmenevents-angebote,
.a-firmenevents-kulinarik,
.a-gruppen-anreise,
.a-gruppen-lageplan,
.a-gruppen-angebote {
  padding: clamp(3rem, 5vw, 5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-firmenevents-intro .v-headline-type-h2 .v-headline-text,
.a-firmenevents-angebote .v-headline-type-h2 .v-headline-text,
.a-firmenevents-kulinarik .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-firmenevents-intro .rs-list-bullets {
  margin: 0 0 1.5rem;
}
.a-firmenevents-intro .ce_rsce_button {
  margin-top: 0.5rem;
}
.a-firmenevents-angebote {
  /* Portrait + Namenskarte als Karte (XD); kein Team-Modul — statisches Motiv */
}
.a-firmenevents-angebote .v-content-tabs {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.a-firmenevents-angebote .v-contact-block {
  background: #ececec;
  padding: clamp(40px, 5vw, 56px) clamp(24px, 3vw, 40px);
  box-sizing: border-box;
  height: 100%;
}
.a-firmenevents-angebote .v-contact-block__copy h3 {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #4a4a49;
}
.a-firmenevents-angebote .a-firmenevents-kontakt__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.a-firmenevents-angebote .ce_column.col-4 .a-firmenevents-kontakt__photo,
.a-firmenevents-angebote .ce_column.col-4 .content-text:has(.a-firmenevents-kontakt__meta) {
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
}
.a-firmenevents-angebote .a-firmenevents-kontakt__photo {
  margin: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.a-firmenevents-angebote .a-firmenevents-kontakt__photo img {
  width: 100%;
  height: 100%;
  max-height: 494px;
  object-fit: cover;
  display: block;
}
.a-firmenevents-angebote .a-firmenevents-kontakt__meta {
  background: #fff;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  min-height: 122px;
  position: relative;
  z-index: 1;
}
.a-firmenevents-angebote .a-firmenevents-kontakt__meta strong {
  display: block;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #4a4a49;
  margin-bottom: 0.35rem;
}
.a-firmenevents-angebote .a-firmenevents-kontakt__meta span {
  display: block;
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4a4a49;
}
.a-firmenevents-kulinarik {
  /* Negatives media-margin (-28px) ausgleichen, damit die 100px wirklich sichtbar sind */
  /* HRS-83: erstes Icon buendig mit der Bildoberkante (Entwurf 6131/6133) —
     die 28px oben gelten nur dem ueberstehenden Kartenbild */
}
.a-firmenevents-kulinarik .a-firmenevents-kulinarik__illu {
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2rem, 4vw, 3.5rem);
  max-width: 1226px;
}
.a-firmenevents-kulinarik .a-firmenevents-kulinarik__illu img {
  width: 100%;
  height: auto;
  display: block;
}
.a-firmenevents-kulinarik .a-firmenevents-kulinarik__speis {
  max-width: 752px;
  /* HRS-83: Entwurf (1.9.) Button-Unterkante 6000 -> Kartenbilder 6133 */
  margin-bottom: 133px;
}
.a-firmenevents-kulinarik .a-firmenevents-kulinarik__speis .v-headline {
  margin-bottom: 1rem;
}
.a-firmenevents-kulinarik .a-firmenevents-kulinarik__speis .v-headline-type-h3 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.a-firmenevents-kulinarik .a-firmenevents-kulinarik__speis .content-text {
  margin-bottom: 1.25rem;
}
.a-firmenevents-kulinarik .v-media-cta-cards--rail-slider {
  margin-top: 0;
  padding-top: 28px;
}
.a-firmenevents-kulinarik .v-media-cta-cards__icons {
  margin-top: -28px;
}
.a-firmenevents-angebote .v-iconbox-icon img,
.a-firmenevents-kulinarik .v-iconbox-icon img,
.a-gruppen-anreise .v-iconbox-icon img {
  max-height: 40px;
  width: auto;
  max-width: 52px;
}
.a-gruppen-anreise {
  /* HRS-85 — Abstaende nach Entwurf (1.9.2026, 1920px, ab Oberkante H2):
     Text 105 · Button 49 unter dem Text · „Buchen Sie …" 92 unter dem Button ·
     Icons 67 unter dem Untertext · Icon 50 hoch, Text 25 darunter ·
     Reihenabstand 165. */
  /* Aufzaehlung rechts: Punkte in Textfarbe wie im Entwurf */
  /* Mobil-Entwurf: Icons zweispaltig */
}
.a-gruppen-anreise .a-gruppen-anreise__icons {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.a-gruppen-anreise > .inside > .ce_rsce_headline:first-child {
  margin-bottom: 40px;
}
.a-gruppen-anreise .ce_rsce_button,
.a-gruppen-anreise .v-button {
  margin-top: 49px;
}
.a-gruppen-anreise .row.ce_rowStart + .ce_rsce_headline {
  margin-top: 92px;
}
.a-gruppen-anreise .ce_rsce_iconboxes {
  margin-top: 67px;
}
.a-gruppen-anreise .rs-list-bullets li::before {
  background: #4a4a49;
}
.a-gruppen-anreise .v-icons-container-inner {
  width: 100%;
  --inn-cols-d: 4;
  --inn-cols-t: 2;
  --inn-cols-m: 1;
}
.a-gruppen-anreise .v-icons-container-element.v-inn-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 49px clamp(20px, 2.5vw, 32px) !important;
  width: 100%;
  flex-direction: unset !important;
  align-items: stretch;
}
.a-gruppen-anreise .v-single-icon-wrapper {
  min-width: 0;
  height: auto;
  max-width: none !important;
  flex: unset !important;
}
.a-gruppen-anreise .single-icon,
.a-gruppen-anreise .v-inn-single-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  text-align: left;
}
.a-gruppen-anreise .icon-img-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 50px;
}
.a-gruppen-anreise .single-icon img,
.a-gruppen-anreise .v-inn-single-icon img,
.a-gruppen-anreise .icon-img-container img,
.a-gruppen-anreise .icon-img-container svg {
  display: block;
  width: auto;
  height: 50px;
  max-width: 64px;
}
.a-gruppen-anreise .v-icons-container-element-text,
.a-gruppen-anreise .single-icon > span,
.a-gruppen-anreise .v-inn-single-icon > span {
  font-family: var(--inn-main-font);
  color: #681d33;
  white-space: pre-line;
}
@media (max-width: 991px) {
  .a-gruppen-anreise .v-icons-container-element.v-inn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 575px) {
  .a-gruppen-anreise .v-icons-container-element.v-inn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.a-gruppen-lageplan .v-hotel-map {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.a-gruppen-angebote {
  /* HRS-87: Icon-Leiste + Slider wie Firmenevents. Entwurf (1.9.2026):
     Ueberschrift-Unterkante 3747 -> Bilder und erstes Icon 3814 (67px),
     Icons 30px. Die 28px Innenabstand gelten dem ueberstehenden Kartenbild.
     Die weissen Abdeckflaechen links reichten 80px nach oben und schnitten
     die Ueberschrift an — hier nur ab Bildkante. */
}
.a-gruppen-angebote .v-media-cta-cards--rail-slider {
  margin-top: 67px;
  padding-top: 28px;
}
.a-gruppen-angebote .v-media-cta-cards__icons {
  margin-top: -28px;
}
.a-gruppen-angebote .v-media-cta-cards__icons::before {
  top: 0;
}
.a-gruppen-angebote .v-media-cta-cards__slider::before {
  top: 0;
}
.a-gruppen-angebote .v-media-cta-cards__icon-art {
  width: 30px;
  max-height: 30px;
}
@media (max-width: 991px) {
  .a-firmenevents-intro .ce_column.col-6,
  .a-firmenevents-angebote .ce_column.col-4,
  .a-firmenevents-angebote .ce_column.col-8,
  .a-gruppen-anreise .ce_column.col-6 {
    grid-column: span 12;
  }
}
/* --- Rahmenprogramm ------------------------------------------------------- */
.a-rahmenprogramm-team,
.a-rahmenprogramm-partner {
  padding: clamp(3rem, 5vw, 5rem) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-rahmenprogramm-team .ce_rsce_button {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.a-rahmenprogramm-partner .row.ce_rowStart {
  align-items: center;
  /* HRS-89: Entwurf Ueberschrift-Unterkante 5811 -> hoechstes Logo 5878 */
  margin-top: clamp(24px, 3.5vw, 67px);
}
.a-rahmenprogramm-partner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  /* HRS-89: 72px waren viel zu klein. Entwurf: Logos 224x224 bis
       313x235 (Riessersee Events 224x224 = Originaldatei). Rahmen 313x235,
       nie ueber die Originalgroesse hinaus. */
}
.a-rahmenprogramm-partner__logo img {
  max-height: 235px;
  width: auto;
  max-width: min(100%, 313px);
  object-fit: contain;
}
@media (max-width: 991px) {
  .a-rahmenprogramm-partner .ce_column.col-3 {
    grid-column: span 6;
  }
}
/* --- Feste feiern --------------------------------------------------------- */
/* Entwurf: zwischen den Sektionen liegen rund 320px (z. B. graue Box endet
   3251, naechste Sektion beginnt 3574) — je Seite also etwa 160. */
.a-feste-feiern-feier,
.a-feste-feiern-aufblick,
.a-feste-feiern-hochzeiten,
.a-feste-feiern-zimmer,
.a-feste-feiern-eindruecke,
.a-feste-feiern-faq {
  padding: clamp(48px, 8.3vw, 160px) 20px;
  max-width: var(--inn-container-width);
  margin: 0 auto;
  box-sizing: border-box;
}
.a-feste-feiern-feier {
  /* Entwurf: Text endet 2299, Fakten-Block 2445-2603, graue Box 2753 —
     also 146px darueber und 150px darunter. */
}
.a-feste-feiern-feier .rs-list-bullets li {
  margin-bottom: 1.15rem;
}
.a-feste-feiern-feier .v-link-triple {
  padding-top: clamp(48px, 7.6vw, 146px);
  margin-bottom: clamp(48px, 7.8vw, 150px);
}
.a-feste-feiern-feier .v-contact-block {
  background: #ececec;
  padding: clamp(40px, 5vw, 56px) clamp(24px, 3vw, 40px);
  box-sizing: border-box;
  /* HRS-94: so hoch wie das Foto daneben (Entwurf 860x498 neben
       Foto 420x494), nicht wie die ganze Spalte — unter dem Foto
       steht noch das Namensfeld. */
  height: auto;
  align-self: start;
  aspect-ratio: 860 / 498;
}
.a-feste-feiern-feier .v-contact-block__copy h3 {
  margin: 0 0 1rem;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #4a4a49;
}
@media (max-width: 991px) {
  .a-feste-feiern-feier .v-contact-block {
    aspect-ratio: auto;
  }
}
.a-feste-feiern-feier .ce_column.col-4 .a-feste-feiern-feier__photo,
.a-feste-feiern-feier .ce_column.col-4 .content-text:has(.a-feste-feiern-feier__meta) {
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
}
.a-feste-feiern-feier .a-feste-feiern-feier__photo {
  margin: 0;
  overflow: hidden;
}
.a-feste-feiern-feier .a-feste-feiern-feier__photo img {
  width: 100%;
  height: 100%;
  max-height: 494px;
  object-fit: cover;
  display: block;
}
.a-feste-feiern-feier .a-feste-feiern-feier__meta {
  background: #fff;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  min-height: 122px;
}
.a-feste-feiern-feier .a-feste-feiern-feier__meta strong {
  display: block;
  font-family: var(--inn-main-font);
  font-weight: 400;
  color: #4a4a49;
  margin-bottom: 0.35rem;
}
.a-feste-feiern-feier .a-feste-feiern-feier__meta span {
  display: block;
  font-family: var(--inn-main-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4a4a49;
}
.a-feste-feiern-aufblick .v-content-tabs__headline,
.a-feste-feiern-aufblick .v-content-tabs__group-title {
  font-family: var(--inn-main-font);
  font-size: 28px;
  font-weight: 400;
  color: #681d33;
  text-transform: none;
  letter-spacing: normal;
}
.a-feste-feiern-aufblick .v-content-tabs__groups {
  grid-template-columns: minmax(0, 1fr);
}
.a-feste-feiern-aufblick .v-content-tabs__flat--with-media .v-content-tabs__hero img {
  aspect-ratio: 497 / 476;
  object-fit: cover;
}
.a-feste-feiern-hochzeiten {
  overflow: visible;
}
.a-feste-feiern-hochzeiten > .inside > .ce_rsce_button.v-button,
.a-feste-feiern-hochzeiten > .inside > .v-button {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.a-feste-feiern-hochzeiten .v-media-cta-cards--rail-slider {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 28px;
  overflow: visible;
}
.mod_article.a-feste-feiern-hochzeiten,
.mod_article_container.a-feste-feiern-hochzeiten,
.mod_article.a-feste-feiern-eindruecke,
.mod_article_container.a-feste-feiern-eindruecke {
  overflow: visible;
}
.a-feste-feiern-factsheet {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  box-sizing: border-box;
  /* HRS-95: Im Entwurf 630x326 — so hoch wie der Inhalt, nicht wie der
     Text daneben. */
  height: auto;
  align-self: start;
}
.a-feste-feiern-factsheet .v-headline {
  margin-bottom: 1rem;
}
.a-feste-feiern-factsheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-top: 1.25rem;
}
.a-feste-feiern-factsheet__actions .v-button {
  margin: 0;
}
.a-feste-feiern-preis-card {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  box-sizing: border-box;
  height: 100%;
}
.a-feste-feiern-preise {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--inn-main-font);
  color: #4a4a49;
  margin: 1rem 0 1.25rem;
}
.a-feste-feiern-preise th,
.a-feste-feiern-preise td {
  padding: 0 0.75rem;
  height: 45px;
  border: 0;
  text-align: left;
  vertical-align: middle;
}
.a-feste-feiern-preise th {
  color: #681d33;
  font-weight: 500;
  background: transparent;
}
.a-feste-feiern-preise tbody tr:nth-child(odd) td {
  background: rgba(104, 29, 51, 0.06);
}
.a-feste-feiern-preise tbody tr:nth-child(even) td {
  background: #fff;
}
.a-feste-feiern-preise__note {
  margin-top: 0.75rem;
  font-family: var(--inn-main-font);
  color: rgba(74, 74, 73, 0.75);
}
.a-feste-feiern-hochzeiten__gallery {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.mod_article.a-feste-feiern-info,
.mod_article_container.a-feste-feiern-info {
  background: #681d33;
  color: #fff;
  width: calc(100% - 40px);
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(3rem, 5vw, 4.5rem) 20px !important;
  box-sizing: border-box;
}
.mod_article.a-feste-feiern-info > .inside,
.mod_article_container.a-feste-feiern-info > .inside {
  max-width: var(--inn-container-width);
  margin: 0 auto;
  padding: 0;
}
.a-feste-feiern-info .v-headline-subtext,
.a-feste-feiern-info .v-headline-type-h2 .v-headline-text,
.a-feste-feiern-info .v-headline.v-headline-type-h2 .v-headline-text,
.a-feste-feiern-info .ce_text,
.a-feste-feiern-info .ce_text p,
.a-feste-feiern-info .ce_text li,
.a-feste-feiern-info .rs-list-bullets li {
  color: #fff !important;
}
.a-feste-feiern-info .rs-list-bullets li::before {
  background: #fff;
}
.a-feste-feiern-info .v-headline {
  margin-bottom: 1rem;
}
@media (max-width: 991px) {
  .a-feste-feiern-feier .row.ce_rowStart > .ce_column.col-6,
  .a-feste-feiern-feier .row.ce_rowStart > .ce_column.col-4,
  .a-feste-feiern-feier .row.ce_rowStart > .ce_column.col-8,
  .a-feste-feiern-hochzeiten .row.ce_rowStart > .ce_column.col-7,
  .a-feste-feiern-hochzeiten .row.ce_rowStart > .ce_column.col-5,
  .a-feste-feiern-zimmer .row.ce_rowStart > .ce_column.col-6,
  .a-feste-feiern-info .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
}
/* --- Global grid stack (contao-grid: .row.ce_rowStart, nicht .ce_row) ------ */
@media (max-width: 991px) {
  .a-tagungen-intro .row.ce_rowStart > .ce_column.col-6,
  .a-tagungen-auszeichnung .row.ce_rowStart > .ce_column.col-6,
  .a-tagungen-natur .row.ce_rowStart > .ce_column.col-6,
  .a-unternehmen-firmen .row.ce_rowStart > .ce_column.col-6,
  .a-unternehmen-lage .row.ce_rowStart > .ce_column.col-6,
  .a-unternehmen-individuell .row.ce_rowStart > .ce_column.col-4,
  .a-unternehmen-individuell .row.ce_rowStart > .ce_column.col-8,
  .a-feste-feiern .row.ce_rowStart > .ce_column.col-6,
  .a-unternehmen .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
}
/* 4er Media-CTA-Karten: auf Tablet 2er, unter 575 1er (bereits global) */
@media (max-width: 1199px) {
  .v-media-cta-cards[data-cols="4"] .v-media-cta-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Preistabelle Feste feiern — horizontal scroll statt Overflow */
.a-feste-feiern-zimmer .ce_text {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.a-feste-feiern-zimmer .row.ce_rowStart + .row.ce_rowStart {
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.a-feste-feiern-preise {
  min-width: 480px;
}
/* --- Motion (rs-motion.js) — nur aktiv mit body.rs-motion ----------------- */
body.rs-motion {
  /* Artikel-Sektionen: nur Opacity — kein translate (sonst Layout-/Mess-Artefakte) */
  /* Hero Ken-Burns nur auf Standbild — Video hat eigene Bewegung */
  /* Trenner-Parallax: leichte Scale-Basis, JS setzt translateY */
  /* Karten-Hover */
}
body.rs-motion .rs-reveal,
body.rs-motion .rs-reveal-child {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
body.rs-motion .rs-reveal-section {
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: opacity;
}
body.rs-motion .rs-reveal.is-visible,
body.rs-motion .rs-reveal-section.is-visible,
body.rs-motion .rs-reveal-child.is-visible {
  opacity: 1;
  transform: none;
}
@media (min-width: 992px) {
  body.rs-motion .v-start-hero__media img {
    animation: rs-kenburns 14s ease-out forwards;
    transform-origin: center center;
  }
}
body.rs-motion .a-trenner-bild .a-trenner-bild__media,
body.rs-motion .a-trenner-bild .a-trenner-bild__media img {
  overflow: hidden;
}
body.rs-motion .a-trenner-bild .a-trenner-bild__media img {
  will-change: transform;
  transition: transform 0.15s linear;
}
body.rs-motion .v-media-cta-card__image img {
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.rs-motion .v-media-cta-card:hover .v-media-cta-card__image img {
  transform: scale(1.04);
}
body.rs-motion .v-media-cta-card {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
body.rs-motion .v-media-cta-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
/* --- Ruled-List Accordion (rsce_ruled_list) -------------------------------- */
.v-ruled-list__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.v-ruled-list__row {
  position: relative;
  margin: 0 0 2rem;
}
.v-ruled-list__row:last-child {
  margin-bottom: 0;
}
.v-ruled-list__trigger {
  display: block;
  width: 100%;
  max-width: 610px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.v-ruled-list__trigger:disabled {
  cursor: default;
}
.v-ruled-list__trigger:focus-visible {
  outline: 2px solid #681d33;
  outline-offset: 4px;
}
.v-ruled-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}
.v-ruled-list__title {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--inn-main-font);
  font-size: 18px;
  font-weight: 400;
  color: #681d33;
}
.v-ruled-list__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0.45rem;
  background: #681d33;
}
.v-ruled-list__icon {
  flex: 0 0 auto;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 1;
  color: #681d33;
  user-select: none;
}
.v-ruled-list__icon-minus {
  display: none;
}
.v-ruled-list__row.is-open .v-ruled-list__icon-plus {
  display: none;
}
.v-ruled-list__row.is-open .v-ruled-list__icon-minus {
  display: inline;
}
.v-ruled-list__panel {
  max-width: 610px;
  padding-top: 0.7rem;
}
.v-ruled-list__panel[hidden] {
  display: none;
}
.v-ruled-list__text {
  max-width: 610px;
  font-family: var(--inn-main-font);
  color: #4a4a49;
}
.v-ruled-list__text p {
  margin: 0 0 0.5rem;
}
.v-ruled-list__text p:last-child {
  margin-bottom: 0;
}
.v-ruled-list__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 2rem;
}
.v-ruled-list__media picture,
.v-ruled-list__media img {
  display: block;
  width: 100%;
  height: auto;
}
.v-ruled-list__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.v-ruled-list__wide {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .v-ruled-list__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (min-width: 992px) {
  .v-ruled-list--has-media .v-ruled-list__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 630px);
    column-gap: 70px;
  }
}
.v-media-cta-card__eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--inn-main-font);
  color: #c2a4ad;
}
/* Text-only Cards (z.B. Ausflüge-Grid) — Chrome abschalten */
.v-media-cta-card--text {
  box-shadow: none;
  background: transparent;
}
.v-media-cta-card--text .v-media-cta-card__body {
  padding-left: 0;
  padding-right: 0;
}
/* Regenwetter: full-bleed Primary-Band (wie Angebote, aber @rs-primary) */
.mod_article.a-regionale-regenwetter,
.mod_article_container.a-regionale-regenwetter {
  position: relative;
  overflow-x: visible;
  overflow-y: visible;
  z-index: 0;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.mod_article.a-regionale-regenwetter::before,
.mod_article_container.a-regionale-regenwetter::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: rgba(104, 29, 51, 0.06);
  pointer-events: none;
}
/* Ausflüge 3×2 Text-Grid — Zeitangaben neutral, Titel primary, dickere Trenner */
.a-regionale-ausfluege .v-media-cta-cards__grid {
  gap: 2.5rem 2.75rem;
}
.a-regionale-ausfluege .v-media-cta-card {
  box-shadow: none;
  background: transparent;
  position: relative;
  transition: none;
}
.a-regionale-ausfluege .v-media-cta-card:hover {
  box-shadow: none;
  transform: none;
}
.a-regionale-ausfluege .v-media-cta-card__body {
  padding: 0;
}
.a-regionale-ausfluege .v-media-cta-card__eyebrow {
  color: #4a4a49;
}
.a-regionale-ausfluege .v-media-cta-card__title {
  color: #681d33;
}
@media (min-width: 992px) {
  .a-regionale-ausfluege .v-media-cta-card:not(:nth-child(3n))::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1.35rem;
    width: 2px;
    height: 100%;
    background: #681d33;
  }
}
/* Ausflüge: Motion-Hover (Shadow) abschalten — Spezifität > body.rs-motion */
body.rs-motion .a-regionale-ausfluege .v-media-cta-card,
body.rs-motion .a-regionale-ausfluege .v-media-cta-card:hover {
  box-shadow: none;
  transform: none;
  transition: none;
}
.a-regionale-iframe-slot,
.a-regionale-gapa-slot {
  min-height: 320px;
  border: 1px dashed #c2a4ad;
  background: #faf6f7;
}
/* HRS-97: Im Entwurf ist die Box weiss (1300x231, Innenabstand 40/46) — sie
   liegt auf dem hellen Seitengrund und war bisher selbst hell. */
.a-regionale-consent {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: clamp(28px, 3vw, 46px) clamp(24px, 2.6vw, 40px);
  margin-top: 1.5rem;
}
.a-regionale-consent .v-headline-type-h4 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 28px;
  color: #681d33;
}
.a-regionale-gapa-logo {
  max-width: 412px;
  margin-left: auto;
}
.a-regionale-gapa-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.a-regionale-blocktitle .v-headline-text,
.a-regionale-vielfalt .v-headline-type-h4 .v-headline-text,
.a-regionale-aktiv .v-headline-type-h4 .v-headline-text,
.a-regionale-badeseen .v-headline-type-h4 .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 28px;
  color: #4a4a49;
}
@keyframes rs-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.rs-motion .rs-reveal,
  body.rs-motion-reduced .rs-reveal,
  body.rs-motion .rs-reveal-section,
  body.rs-motion-reduced .rs-reveal-section,
  body.rs-motion .rs-reveal-child,
  body.rs-motion-reduced .rs-reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.rs-motion .v-start-hero__media img,
  body.rs-motion-reduced .v-start-hero__media img {
    animation: none !important;
  }
  body.rs-motion .a-trenner-bild .a-trenner-bild__media img,
  body.rs-motion-reduced .a-trenner-bild .a-trenner-bild__media img,
  body.rs-motion .v-media-cta-card__image img,
  body.rs-motion-reduced .v-media-cta-card__image img,
  body.rs-motion .v-media-cta-card,
  body.rs-motion-reduced .v-media-cta-card {
    transition: none !important;
    transform: none !important;
  }
}
/* HRS-3: Cursor-Blinken fuer den Zitat-Tippeffekt */
@keyframes rs-caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}
/* ===========================================================================
   Designer-Feedback 15.09.2026 — HRS-11/13/15/16/19/21/23/24
   Alle Werte aus dem XD (hotel-riessersee-startseite-update-licorice bzw.
   hotel-riessersee-men, 1920er Artboard). Die Regeln stehen gesammelt hier,
   damit sie die aelteren Abschnitte gezielt ueberschreiben und als ein Block
   nachvollziehbar bleiben.
   =========================================================================== */
/* HRS-11: "Bildmarke wieder zu klein". XD: Kreis 86px (icon 917,10974),
   die Bergmarke darin 73x53 (icon-part 923,10991) — also ~85 % des Kreises,
   nicht 52px wie bisher. */
.rs-berg-badge .rs-berg-badge__icon {
  width: 85%;
  max-width: 73px;
}
/* HRS-13: Bewertungen */
/* HRS-78: Zwischen Bewertungskarten und grauem „Bewerten Sie uns"-Block
   liegen im Entwurf 109px (mobil 100px) — auf „Fuer Unternehmen" und
   „Tagungen" gleich. Live waren es 244px: Innenabstand 80 + Artikelabstand 80
   unter dem Slider. Die 24px bleiben fuer den Kartenschatten. */
.a-bewertungen:has(+ .a-tagungen-bewerten) {
  padding-bottom: 24px;
}
.a-bewertungen:has(+ .a-tagungen-bewerten) > .inside {
  padding-bottom: 0;
}
.a-bewertungen {
  /* HRS-66 (24.09.2026): Vorher fest auf 300 („Schriftart zu dick", HRS-16).
     Der Entwurf setzt Name, Titel und Text auf 400, und der Fliesstext folgt
     jetzt global der Design-Einstellung — diese Stellen ebenso. */
  /* "Schatten auch links und rechts" — overflow-x:clip schnitt den seitlichen
     Schatten an der Containerkante ab. Innenabstand + Gegenmargin geben ihm
     24px Platz; die naechste Karte liegt 40px weiter und bleibt verborgen. */
  /* "Google oder Tripadvisor Logo weiter runter, buendig mit Headline".
     Datumsbox 55 + 20 Abstand + Name 23 + 10 = Titel beginnt bei 108px;
     Logo (46px) mittig zur ersten Titelzeile (35px) → 102px. */
}
.a-bewertungen .v-review-card__meta,
.a-bewertungen .v-review-card__title,
.a-bewertungen .v-review-card__text {
  font-weight: var(--inn-body-font-weight);
}
.a-bewertungen .v-reviews-swiper__slider {
  padding-left: 24px;
  padding-right: 24px;
  margin-left: -24px;
  margin-right: -24px;
}
.a-bewertungen .v-review-card {
  position: relative;
}
.a-bewertungen .v-review-card__source {
  position: absolute;
  top: 102px;
  right: 30px;
}
.a-bewertungen .v-review-card__title {
  padding-right: 60px;
}
/* HRS-15: Footer */
#footer-mod {
  /* XD: Pfeile bei "Nuetzliche Informationen" grau und als Icon (18x13),
     nicht das Textzeichen in Bordeaux. Das Zeichen bleibt im Markup (ohne
     CSS lesbar) und wird hier durch die Maske ersetzt. */
  /* "DSV Logo etwas groesser" — XD: 284x87 (image 818,17374) statt 200px. */
}
#footer-mod .v-footer-useful-link .v-footer-useful-link-arrow {
  width: 18px;
  height: 13px;
  font-size: 0;
  color: transparent;
  background-color: #4a4a49;
  -webkit-mask: url('/files/contao_files/Bilder/-svg/pfeil-rot-rechts.svg') center / contain no-repeat;
  mask: url('/files/contao_files/Bilder/-svg/pfeil-rot-rechts.svg') center / contain no-repeat;
}
#footer-mod .v-footer-useful-link:hover .v-footer-useful-link-arrow {
  background-color: #681d33;
}
#footer-mod .v-footer-partner .v-footer-partner-logo {
  max-width: min(100%, 284px);
}
/* HRS-16 / HRS-66: Fliesstext unter Ueberschriften ueberall wie der normale
   Fliesstext. Das Gewicht stand hier fest auf 300; seit 24.09.2026 folgt der
   Fliesstext der Design-Einstellung (400), und diese Stellen folgen mit.

   HRS-109 (06.10.2026): Die 80 % Deckkraft bleiben NICHT mehr. Die Designerin
   hat genau diesen Text neben dem Nachhaltigkeits-Block fotografiert und
   geschrieben „schriftfarbe oben dunkler wie unten. Bitte #4A4A49 verwenden".
   Damit ist die frueher hier festgehaltene Entscheidung aufgehoben. */
.mod_article.a-blog-teaser .v-headline-text-container,
.a-angebote .v-headline-text-container,
.a-angebote .v-offers-teaser__intro {
  font-weight: var(--inn-body-font-weight);
  color: #4a4a49;
}
/* HRS-21: Angebote — "Textblock mit Headline etwas naeher an den Button".
   Der Einleitungstext steht im Headline-Element; dessen Aussenabstand
   (6rem = 96px) plus 50px Button-Abstand ergaben ~146px. XD: Intro endet bei
   5057, Button beginnt bei 5097 → 40px. */
.a-angebote .v-headline {
  margin-bottom: 0;
}
.a-angebote .v-offers-teaser__cta {
  /* Der letzte Absatz bringt 18px eigenen Abstand mit; 22 + 18 = 40px wie im
     XD (Intro endet 5057, Button beginnt 5097). Mit 40px waren es 58px. */
  margin-top: 22px;
}
/* HRS-23: Trennlinien der Dreierreihe so stark wie die Button-Rahmen (2px). */
.v-link-triple .v-link-triple__grid {
  grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr) 2px minmax(0, 1fr);
}
.v-link-triple .v-link-triple__divider {
  width: 2px;
}
/* HRS-23: Die kleine Zeile ueber der H2 ist im XD ueberall 14px — bei
   "Gewissenhaft. Bewusst. In mitten der Natur." (zentriert) waren es 18px,
   weil dieser Abschnitt als einziger keinen eigenen Wert setzte. */
.a-nachhaltigkeit .v-headline .v-headline-subtext {
  font-size: 14px;
  line-height: 18.9px;
  text-transform: uppercase;
  letter-spacing: normal;
}
/* HRS-24: Blog — Kartenschatten rundum wie bei den Bewertungen (vorher nur
   nach unten, Oberkante ohne Schatten). */
.a-blog-teaser .v-news-card {
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
}
/* HRS-19: Kreis-Patch im Hero — XD: Glasscheibe 213px (glass 1335,394),
   Stempelring 202px (surface 1341,400). Die helle Scheibe liegt also sichtbar
   UEBER den Ring hinaus und ist deutlich deckender als bisher (inset 6 %,
   18 % Weiss — die Scheibe war kleiner als der Ring und kaum zu sehen). */
.rs-kreis-patch .rs-kreis-patch__glass {
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Nur der Link skaliert — das Bild darin fuellt ihn (sonst 95 % von 95 %). */
.rs-kreis-patch .rs-kreis-patch__link {
  width: 95%;
}
.rs-kreis-patch .rs-kreis-patch__art {
  width: 100%;
}
/* HRS-19: Menue */
@media (min-width: 768px) {
  /* "Menue Fullscreen" — XD: Menue fuellt die ganze Flaeche (1920x1090).
     Die Hoehe richtete sich bisher nach dem Inhalt; auf grossen Bildschirmen
     schaute unten das Startbild heraus. */
  body #mobile-nav-mod.navigation {
    height: 100vh !important;
    height: 100dvh !important;
  }
}
/* "Vertikaler Text im Menue gleich wie Header" — XD: Lato 30px, normale
   Schreibweise (AlpinAktiv in Garmisch-Partenkirchen), wie die Seitenlabels
   im Start-Hero (.v-start-hero__label). */
body #mobile-nav-mod.navigation .v-menu-overlay-edge {
  font-size: 30px;
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}
body #mobile-nav-mod.navigation .v-menu-overlay-edge--left {
  color: rgba(74, 74, 73, 0.65);
}
/* Unter dieser Breite ist links neben dem Container kein Platz — der Text lag
   dort ueber der ersten Menuespalte.
   HRS-75: bisher 1500px, das Ticket bat um „ca. 100px eher". Gemessen bei
   geoeffnetem Menue: Bis 1600px ueberlappt der linke Text die erste Spalte noch
   (17–19 Ueberschneidungen), bei 1650 bleiben 13px, bei 1700 36px Abstand.
   1680 laesst rund 25px Luft. */
@media (max-width: 1680px) {
  body #mobile-nav-mod.navigation .v-menu-overlay-edge {
    display: none;
  }
}
/* HRS-11: "Abstaende zwischen den Sections bitte vergroessern" — XD: Von der
   Sektionskante (Mitte der Bildmarke) bis zur Eyebrow der Folgesektion sind es
   203px (Band endet 11017, "Gewissenhaft." beginnt 11220). Gemessen: ohne
   Padding liegen bereits 80px (Headline-/Inside-Abstaende) dazwischen, also
   123px Padding bei 1920 (6.4vw). Bisher 56px — die Eyebrow lag bei ~136px. */
.mod_article.has-rs-berg-badge,
.mod_article_container.has-rs-berg-badge {
  padding-top: clamp(80px, 6.4vw, 123px);
}
/* HRS-13 / HRS-21 / HRS-24: "Pagination-Pfeile naeher an den Slider" —
   XD: Pfeilmitte ~40px unter der Kartenunterkante, bisher ~70px. */
.a-bewertungen .v-reviews-swiper__slider,
.v-offers-teaser .v-offers-teaser__slider,
.a-blog-teaser .news-swiper-slider {
  --inn-swiper-nav-gap: 16px;
}
/* HRS-24: Die weisse Maske links neben dem Blog-Slider (verdeckt die
   Loop-Klone) begann exakt an der ersten Karte und schnitt deren Schatten
   hart ab — das war der "weisse Kasten" links.

   HRS-67 korrigiert die damalige Annahme, 12px Luft liessen den naechsten
   Klon verdeckt. Gemessen am 21.09.2026: Der Kartenschatten ist
   `0 0 18px` und reicht damit rund 9px ueber jede Kante hinaus.

   Seitlich: Klon-Rechtskante 435, Schatten bis 444, Maske endete bei 438
   (450 - 12) — 6px Schatten blieben sichtbar. 6px Versatz deckt den Klon
   vollstaendig und laesst der ersten Karte immer noch 6 ihrer 9 Schatten-
   pixel; abgeschnitten wird nur der fast unsichtbare Auslauf.

   Oben und unten: Die Maske lief `top: 0` bis `bottom: 0` des Sliders,
   der Schatten ragt aber darueber hinaus — das war der graue Streifen
   ueber der ganzen linken Flaeche. 12px Ueberstand deckt ihn ab. Links
   des Sliders liegt kein Inhalt, der dadurch verdeckt wuerde. */
.mod_article.a-blog-teaser .news-swiper-slider::before {
  right: calc(100% + 6px);
  top: -12px;
  bottom: -12px;
}
/* HRS-15: "Greensign-Patch ganz oben an den rosa Footer-Hintergrund pinnen".
   Das SVG (152.081 x 187.338) enthaelt links/rechts je 9 Einheiten und oben
   6 Einheiten Rand fuer den Schlagschatten — die weisse Fahne selbst ist
   134 breit (XD: surface 1476,16928 134x169) und beginnt erst bei y=6.
   Bisher wurde das ganze SVG auf 134px skaliert: Fahne zu schmal und ~5px
   unter der Footer-Oberkante. Jetzt: SVG so breit, dass die Fahne 134px hat,
   um den Schattenrand nach oben und rechts verschoben. */
#footer-mod .v-footer-greensign {
  right: calc(20px - clamp(113px, 7.92vw, 152px) * 0.0592);
}
#footer-mod .v-footer-greensign .v-footer-greensign-inner img {
  width: clamp(113px, 7.92vw, 152px);
  margin-top: calc(clamp(113px, 7.92vw, 152px) * -0.0395);
}
/* --- Regionale Erlebnisse: Abstaende nach Entwurf (HRS-96/97) --------------
   Gemessen von Inhalt zu Inhalt im Export vom 1.9.2026:
   Gipfel 213 · Aktiv 206 · Ausfluege 352 · Badeseen 156 · iframe 202 ·
   Gapa 203. Live lagen Gipfel bei 160, Ausfluege bei 232, Badeseen bei 197
   und der iframe-Block bei 160. */
.a-regionale-gipfel > .inside {
  padding-top: clamp(48px, 6.9vw, 133px);
}
.a-regionale-ausfluege > .inside {
  padding-top: clamp(64px, 10.4vw, 200px);
}
.a-regionale-badeseen > .inside {
  padding-top: clamp(32px, 2vw, 39px);
}
.a-regionale-iframe > .inside {
  padding-top: clamp(56px, 6.4vw, 122px);
}
/* Platzhalter fuer den iframe: im Entwurf 56px unter dem Text */
.a-regionale-iframe-slot {
  margin-top: 56px;
}
/* ===========================================================================
 * Trenner — die unscharfe Flaeche an einer Stelle
 * ---------------------------------------------------------------------------
 * WARUM ES DIESE DATEI GIBT
 *
 * Im Entwurf endet die getoente Flaeche dort, wo das Motiv des Fotos anfaengt.
 * Das ist auf jeder Seite ein anderer Punkt — beim Seehaus-Reservierungsband
 * bei 80 %, beim „Feste feiern"-Band bei 57 %. Bisher wurde dafuer je Seite
 * eine Zahl ins Stylesheet geschrieben (custom.less 57,34 %, seehaus.less
 * 80,3 %). Jede neue Beanstandung erzeugte damit eine weitere Sonderregel an
 * einer weiteren Stelle — und genau daher kommt die lange Reihe der
 * Trenner-Tickets (HRS-14, 34, 39, 56, 65, 179, 188, 218, 239, 242, 243,
 * 263, 271, 302).
 *
 * Hier steht die Geometrie deshalb **einmal**, gesteuert ueber zwei
 * Variablen. Gesetzt werden sie entweder im Backend am Trenner selbst
 * (Felder „Breite der unscharfen Flaeche" und „Weiche Kante ab") — dann
 * schreibt `rsce_trenner.html5` sie als Inline-Variablen — oder, solange das
 * Feld an einem Element noch leer ist, seitenweise als Variablenzuweisung.
 *
 * Eine Zahl gehoert ab jetzt ins Backend, nicht mehr ins LESS.
 *
 *   --v-trenner-glass-width   Breite der Flaeche, Vorgabe 57,34 % (Entwurf)
 *   --v-trenner-glass-solid   ab wo sie weich auslaeuft, Vorgabe 58 %
 *
 * WARUM EINE WEICHE KANTE UND KEINE KONTUR
 *
 * Im Artboard ist die Flaeche kein Rechteck: Sie folgt der Silhouette eines
 * freigestellten PNG, das darueber liegt. Diese Kontur laesst sich nicht
 * uebernehmen, solange das Foto randabfallend ist — die Schraege liegt dann
 * blank und schneidet sichtbar durchs Motiv (einmal probiert, siehe
 * LEARNINGS §90). Der weiche Auslauf bildet dasselbe Ergebnis ab, ohne
 * Kante: Die Toenung verliert sich dort, wo im Entwurf das Motiv beginnt.
 * ======================================================================== */
/* Ein Aufruf, zwei Stellen: der Modifikator aus dem Backend und — solange
   dort noch nichts gesetzt ist — die seitenweise Zuweisung. */
.v-trenner__glass {
  width: var(--v-trenner-glass-width, 57.34%);
}
/* Bildausschnitt, steuerbar ueber das Feld „Bildausschnitt" am Trenner.
 *
 * Das Band hat eine feste Hoehe; ein hoeheres Bild wird beschnitten. Bisher
 * immer mittig — bei einem Motiv am oberen Bildrand faellt davon oben etwas
 * weg, was man gerade sehen will. Gemeldet an der Weihnachtsseite: Banner
 * 1920x820 in einem 722er Band, die Rose oben angeschnitten.
 *
 * Vorgabe bleibt `50% 50%`, also unveraendert fuer alles Bestehende.
 *
 * **Die beiden langen Selektoren sind noetig, nicht schmueckend.** Der erste
 * Anlauf stand nur auf `.v-trenner__bg img` und blieb wirkungslos: In
 * custom.less setzen `.v-trenner--bg-cover .v-trenner__bg--desktop img` und
 * die Contain-Schwester `object-position: center center` — zwei Klassen
 * gegen eine, die gewinnen unabhaengig von der Reihenfolge (LEARNINGS §1).
 * Am Band stand die Variable, am Bild kam sie nie an.
 *
 * Gleiche Spezifitaet plus spaeterer Import reicht; kein `!important`. */
.v-trenner--bg-contain .v-trenner__bg--desktop img,
.v-trenner--bg-cover .v-trenner__bg--desktop img,
.v-trenner__bg img {
  object-position: var(--v-trenner-bg-pos, 50% 50%);
}
/* Nur ab 992px. Darunter liegt die Flaeche ueber die volle Breite und hat
   ihre Hoehe aus `calc(100% - 312px)` (mobil-komponenten.less, HRS-218) —
   dort darf nichts ausmaskiert werden. */
@media (min-width: 992px) {
  .v-trenner--glass-soft .v-trenner__glass {
    -webkit-mask-image: linear-gradient(to right, #000 var(--v-trenner-glass-solid, 58%), transparent 100%);
    mask-image: linear-gradient(to right, #000 var(--v-trenner-glass-solid, 58%), transparent 100%);
  }
}
/* --- Seitenregeln, die das Feld sonst schlagen --------------------------- */
/*
 * `.a-trenner-cta .v-trenner .v-trenner__bg--desktop img` setzt in
 * custom.less `object-position: center 35%` — drei Klassen gegen die zwei
 * der Regel oben, die gewinnen also unabhaengig von der Reihenfolge
 * (LEARNINGS §1). Gemessen am Kulinarik-Trenner: Feld auf „Oberkante"
 * gesetzt, am Bild kam trotzdem `50% 35%` an.
 *
 * Dieselbe Regel bekommt deshalb dieselbe Variable — mit ihrem bisherigen
 * Wert als Rueckfall. Wo das Feld leer ist, aendert sich nichts; wo es
 * gesetzt ist, greift es endlich.
 *
 * Nicht angefasst: `#s-angebote-trenner …` (Kennung statt Klasse, noch
 * spezifischer). Dort ist die mittige Lage ausdruecklich so gewollt
 * (rs-motion.js nimmt denselben Trenner von der Parallaxe aus). Wird dort
 * je ein Bildausschnitt gebraucht, muss diese Regel mit.
 */
.a-trenner-cta .v-trenner .v-trenner__bg--desktop img {
  object-position: var(--v-trenner-bg-pos, center 35%);
}
/* =============================================================================
   Das Seehaus — /seehaus
   Entwurf: hotel-riessersee-das-seehaus (Export 1.9.2026), Mobil iphone-14-pro-14
   Alle Sollwerte in Kommentaren beziehen sich auf den Desktop-Entwurf (1920).
   ============================================================================= */
/* --- Sektion „Das Seehaus" (Intro) ---------------------------------------- */
.a-seehaus-intro {
  /* Breite und Seitenrand liefert .inside des Artikeltemplates */
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  /* Entwurf: Eyebrow 1873, H2 1901, Text 630 breit zentriert */
  /* Illustration: 1226 breit, 180px unter dem Text */
  /* „Essen. Trinken. Panorama." rechts neben dem Seeufer der Illustration
     (Entwurf: x1173, 413 breit, 44px ueber der Illustrationskante) */
  /* Zwei Karten (Entwurf: 630x263, Abstand 40, Innenabstand 40/47) */
}
.a-seehaus-intro > .inside > .ce_rsce_headline:first-child {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.a-seehaus-intro .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-seehaus-intro__illu {
  margin: 180px auto 0;
  max-width: 1226px;
}
.a-seehaus-intro__illu img {
  width: 100%;
  height: auto;
  display: block;
}
.a-seehaus-intro__panorama {
  max-width: 413px;
  margin: -44px 0 0 auto;
}
.a-seehaus-intro__panorama .v-headline-text {
  font-family: var(--inn-main-font);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 400;
  color: #681d33;
}
.a-seehaus-intro__panorama .v-headline-text-container {
  margin-top: 18px;
}
.a-seehaus-intro__panorama-cta {
  max-width: 413px;
  margin: 24px 0 0 auto;
}
.a-seehaus-intro .row.ce_rowStart {
  margin-top: clamp(40px, 5vw, 90px);
  gap: 40px;
}
.a-seehaus-intro__karte {
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  box-sizing: border-box;
  padding: 47px 40px;
  height: 100%;
}
.a-seehaus-intro__karte h3 {
  margin: 0 0 26px;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 37px;
  font-weight: 400;
  color: #681d33;
}
.a-seehaus-intro__karte p {
  margin: 0 0 23px;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #4a4a49;
}
.a-seehaus-intro__karte p:last-child {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .a-seehaus-intro__illu {
    margin-top: clamp(48px, 12vw, 180px);
  }
  .a-seehaus-intro__panorama,
  .a-seehaus-intro__panorama-cta {
    max-width: none;
    margin-top: clamp(24px, 5vw, 44px);
    margin-left: 0;
  }
  .a-seehaus-intro .ce_column.col-6 {
    grid-column: span 12;
  }
}
/* --- Abendkarte (Wochenkarte mit Tag-Tabs) -------------------------------- */
.a-seehaus-speisekarte {
  /* Breite und Seitenrand liefert .inside des Artikeltemplates */
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  /* Ueberschrift bricht nach „Blick"; Ueberschrift und Fliesstext 650px */
  /* Entwurf: Ueberschrift 3477, Fliesstext 3670, Tabs ab 3860 */
}
.a-seehaus-speisekarte .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-seehaus-speisekarte .v-headline-main,
.a-seehaus-speisekarte .v-headline-text-container {
  max-width: 650px;
}
.a-seehaus-speisekarte .v-content-tabs {
  margin-top: clamp(32px, 4vw, 64px);
}
/* --- Das ist uns wichtig --------------------------------------------------- */
.a-seehaus-wichtig {
  /* Breite und Seitenrand liefert .inside des Artikeltemplates */
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  /* Portraet + Namensfeld als Karte (Entwurf: Foto 420 breit, Name 6312) */
  /* Vier Icons (Entwurf: x 310/640/970/1300, Text 18px in Primaerfarbe) */
}
.a-seehaus-wichtig .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-seehaus-wichtig .row.ce_rowStart {
  margin-top: clamp(24px, 3vw, 40px);
  align-items: start;
}
.a-seehaus-wichtig__foto {
  margin: 0;
}
.a-seehaus-wichtig__foto img {
  display: block;
  width: 100%;
  height: auto;
}
.a-seehaus-wichtig__meta {
  /* Palettenton statt eigenem Grau (Sollwert-Pruefer) */
  background: #f9f6f7;
  padding: 20px 24px;
}
.a-seehaus-wichtig__meta p {
  margin: 0;
}
.a-seehaus-wichtig__meta strong {
  display: block;
  font-family: var(--inn-main-font);
  font-size: 28px;
  line-height: 37px;
  font-weight: 400;
  color: #4a4a49;
}
.a-seehaus-wichtig__meta span {
  display: block;
  margin-top: 6px;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #4a4a49;
}
.a-seehaus-wichtig__icons {
  margin-top: clamp(40px, 5vw, 80px);
}
.a-seehaus-wichtig__icons .v-icons-container-inner {
  width: 100%;
}
.a-seehaus-wichtig__icons .v-icons-container-element.v-inn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 20px;
  width: 100%;
  align-items: start;
}
.a-seehaus-wichtig__icons .v-single-icon-wrapper {
  min-width: 0;
  max-width: none;
}
.a-seehaus-wichtig__icons .single-icon,
.a-seehaus-wichtig__icons .v-inn-single-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  text-align: left;
}
.a-seehaus-wichtig__icons .icon-img-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 50px;
}
.a-seehaus-wichtig__icons .icon-img-container img,
.a-seehaus-wichtig__icons .single-icon img {
  display: block;
  width: auto;
  height: 50px;
  max-width: 64px;
}
.a-seehaus-wichtig__icons .single-icon > span,
.a-seehaus-wichtig__icons .v-inn-single-icon > span {
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 23px;
  color: #681d33;
  white-space: pre-line;
}
@media (max-width: 991px) {
  .a-seehaus-wichtig .ce_column.col-6 {
    grid-column: span 12;
  }
  .a-seehaus-wichtig__icons .v-icons-container-element.v-inn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* --- Unsere Partner ------------------------------------------------------- */
.a-seehaus-partner {
  /* Breite und Seitenrand liefert .inside des Artikeltemplates */
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.a-seehaus-partner .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-seehaus-partner .row.ce_rowStart {
  align-items: center;
  margin-top: clamp(24px, 3.5vw, 67px);
}
.a-seehaus-partner .a-rahmenprogramm-partner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.a-seehaus-partner .a-rahmenprogramm-partner__logo img {
  max-height: 180px;
  width: auto;
  max-width: min(100%, 260px);
  object-fit: contain;
}
@media (max-width: 991px) {
  .a-seehaus-partner .ce_column.col-3 {
    grid-column: span 6;
  }
}
/* --- Seezeitung ----------------------------------------------------------- */
.a-seehaus-seezeitung {
  /* Breite und Seitenrand liefert .inside des Artikeltemplates */
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.a-seehaus-seezeitung .v-headline-type-h2 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-seehaus-seezeitung .v-headline-text-container {
  max-width: 630px;
}
.a-seehaus-seezeitung .ce_rsce_button {
  margin-top: clamp(24px, 3vw, 40px);
}
/* --- Ein paar Eindruecke -------------------------------------------------- */
.a-seehaus-eindruecke {
  /* Breite und Seitenrand liefert .inside des Artikeltemplates */
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  overflow: visible;
}
.a-seehaus-eindruecke .v-headline-type-h3 .v-headline-text {
  font-family: var(--inn-main-font);
  color: #681d33;
}
.a-seehaus-eindruecke .v-focus-gallery {
  margin-top: clamp(20px, 2.5vw, 32px);
}
/* --- Reservierung (Trenner) ----------------------------------------------- */
/* Entwurf: Eyebrow und Fliesstext in Textfarbe, Ueberschrift, Button und die
   Kontaktlinks unten links in Primaerfarbe — nicht das weisse Schema. */
.a-seehaus-reservierung {
  /* Entwurf: Glasflaeche 1542 von 1920 (80 %). Die globale Flaeche toent
     dunkel — das ist fuer weisse Schrift gedacht; hier steht dunkle Schrift
     darauf, deshalb weiss aufhellen wie im Entwurf (brightness 1.15). */
  /* HRS-263 — „die unscharfe hintergrundflaeche ist viel zu weit rechts"

     Die 80,3 % stimmen, aber nur fuer die Oberkante. Im Artboard laeuft die
     Flaeche nach unten schraeg zurueck (80,3 % → 69,4 % → 53,6 %), weil sie
     der Silhouette des freigestellten Fotos folgt. Live ist das Foto
     randabfallend; als Kontur nachgebaut schneidet die Schraege sichtbar
     durchs Motiv (LEARNINGS §90). Der weiche Auslauf bildet dasselbe ab.

     Werte statt Regeln: Breite und Auslaufpunkt stehen als Variablen, die
     Mechanik dahinter in trenner.less. Sobald am Element die Backend-Felder
     „Breite der unscharfen Flaeche" und „Weiche Kante ab" gefuellt sind,
     gewinnen diese (Inline-Variablen) und die drei Zeilen hier koennen
     ersatzlos weg. */
  --v-trenner-glass-width: 80.3%;
  --v-trenner-glass-solid: 58%;
}
.a-seehaus-reservierung .v-trenner__title {
  color: #681d33;
}
.a-seehaus-reservierung .v-trenner__contact-link,
.a-seehaus-reservierung .v-trenner__contact-label {
  color: #681d33;
}
.a-seehaus-reservierung .v-trenner__contacts {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.a-seehaus-reservierung .v-trenner__glass {
  background: rgba(255, 255, 255, 0.45);
}
@media (min-width: 992px) {
  .a-seehaus-reservierung .v-trenner__glass {
    -webkit-mask-image: linear-gradient(to right, #000 var(--v-trenner-glass-solid, 58%), transparent 100%);
    mask-image: linear-gradient(to right, #000 var(--v-trenner-glass-solid, 58%), transparent 100%);
  }
}
/* --- Seezeitung: Blaetter-PDF --------------------------------------------- */
.a-seehaus-seezeitung .ce_rsce_pdf_flipbook,
.a-seehaus-seezeitung .v-pdf-flipbook {
  margin-top: clamp(32px, 4vw, 64px);
}
/* „Erleben & Entdecken" — Entwurf vom 01.09.2026
   ------------------------------------------------------------------
   Der Entwurf wurde neu gebaut: aus den drei grossen Bloecken („Sommer in
   den Alpen") und den drei versetzten Karten („Revisionszeiten") sind
   Akkordeons mit Bildcollage geworden. Beide Muster sind identisch
   aufgebaut — Spalte mit Akkordeon, Spalte mit drei Bildern (630x311 oben,
   darunter zwei 303x286) — deshalb eine Regel fuer alle drei Vorkommen.

   Die Komponente `rsce_accordion_list` kommt aus dem Schwesterprojekt
   Foehrenhof; das Aussehen hier folgt dem Riessersee-Entwurf: Linie unter
   jeder Zeile, Plus/Minus in 45px Light am rechten Spaltenrand. */
/* --- Akkordeon-Liste ------------------------------------------------------ */
.v-accordion-list {
  box-sizing: border-box;
  min-width: 0;
  /* Plus/Minus wie im Entwurf: 45px Light, keine Grafik — der Entwurf setzt
     hier schlicht die Schriftzeichen. */
}
.v-accordion-list-title {
  font-family: var(--inn-main-font);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.21428571;
  color: #681d33;
  margin: 0 0 clamp(36px, 3.4vw, 64px);
}
.v-accordion-list-item + .v-accordion-list-item {
  margin-top: clamp(28px, 2.8vw, 46px);
}
.v-accordion-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 9px;
  border-bottom: 1px solid #681d33;
  text-decoration: none;
  cursor: pointer;
}
.v-accordion-list-item-title {
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 1.27777778;
  font-weight: 400;
  color: #681d33;
}
.v-accordion-list-icon {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  font-family: var(--inn-main-font);
  font-size: 45px;
  font-weight: 300;
  line-height: 0.5;
  color: #681d33;
}
.v-accordion-list-icon::before {
  content: "\2212";
  /* Minus */
}
.v-accordion-list-head.collapsed .v-accordion-list-icon::before {
  content: "+";
}
.v-accordion-list-body {
  padding: 20px 0 0;
  font-family: var(--inn-main-font);
  font-size: 18px;
  line-height: 1.27777778;
  color: #4a4a49;
}
.v-accordion-list-body > *:first-child {
  margin-top: 0;
}
.v-accordion-list-body > *:last-child {
  margin-bottom: 0;
}
.v-accordion-list-body p {
  margin: 0 0 23px;
}
.v-accordion-list-body ul {
  list-style: none;
  margin: 0 0 23px;
  padding: 0;
}
.v-accordion-list-body ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 23px;
}
.v-accordion-list-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #681d33;
}
.v-accordion-list-body ul li:last-child {
  margin-bottom: 0;
}
/* --- Bildcollage: 630x311 oben, darunter zwei 303x286 --------------------- */
.v-erleben-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px 24px;
  /* Die Bildelemente kommen als `.content-image` heraus, nicht als `.ce_image`
     — deshalb ueber die Kinder, nicht ueber die Contao-Klasse. */
}
.v-erleben-collage > * {
  margin: 0;
  min-width: 0;
}
.v-erleben-collage figure {
  margin: 0;
}
.v-erleben-collage img {
  width: 100%;
  display: block;
}
.v-erleben-collage > *:first-child {
  grid-column: 1 / -1;
}
.v-erleben-collage > *:first-child img {
  aspect-ratio: 630 / 311;
  object-fit: cover;
}
.v-erleben-collage > *:not(:first-child) img {
  aspect-ratio: 303 / 286;
  object-fit: cover;
}
@media (max-width: 575px) {
  .v-erleben-collage {
    grid-template-columns: minmax(0, 1fr);
  }
  .v-erleben-collage > *:first-child {
    grid-column: auto;
  }
  .v-erleben-collage img {
    aspect-ratio: 352 / 200;
  }
}
/* --- Zwei Spalten: Akkordeon 610 | Collage 630, Abstand 60 ---------------- */
.v-erleben-akkordeon-row {
  /* Collage links, Akkordeon rechts (Revisionen: „Skigebiete") */
}
.v-erleben-akkordeon-row.row.ce_rowStart {
  display: grid;
  grid-template-columns: minmax(0, 610fr) minmax(0, 630fr);
  gap: clamp(32px, 4.7vw, 60px);
  align-items: start;
}
.v-erleben-akkordeon-row.row.ce_rowStart > .ce_column {
  grid-column: auto;
  width: auto;
  max-width: none;
}
.v-erleben-akkordeon-row--media-left.row.ce_rowStart {
  grid-template-columns: minmax(0, 630fr) minmax(0, 610fr);
}
@media (max-width: 991px) {
  .v-erleben-akkordeon-row.row.ce_rowStart,
  .v-erleben-akkordeon-row--media-left.row.ce_rowStart {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 48px);
  }
}
/* --- Sommer: „Aktiv unterwegs" unter den Icon-Boxen ----------------------- */
.a-erleben-sommer .v-erleben-akkordeon-row {
  margin-top: clamp(56px, 7vw, 111px);
}
/* --- Wandern: Wanderkarte 998 | Wanderpatch 244 --------------------------- */
.v-erleben-karte-row {
  display: grid;
  grid-template-columns: minmax(0, 998fr) minmax(0, 244fr);
  gap: clamp(24px, 4.5vw, 58px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 89px);
}
.v-erleben-karte-row > * {
  margin: 0;
  min-width: 0;
}
.v-erleben-karte-row figure {
  margin: 0;
}
.v-erleben-karte-row img {
  width: 100%;
  display: block;
}
.v-erleben-karte-row > *:first-child img {
  aspect-ratio: 998 / 475;
  object-fit: cover;
}
@media (max-width: 767px) {
  .v-erleben-karte-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .v-erleben-karte-row > *:not(:first-child) {
    max-width: 180px;
  }
}
/* --- Revisionen: zwei Bloecke untereinander ------------------------------- */
.a-erleben-revisionen .v-erleben-akkordeon-row {
  margin-top: clamp(56px, 6.4vw, 102px);
}
/* --- Trailrunning: Gipfelhoehen ueber dem Bildband ------------------------ */
/* Entwurf: Die vier Hoehenangaben stehen auf demselben hellen Grund wie
   „Wandern" darueber (Band 0,3181 bis 5311), 141px ueber der Bildkante;
   unter dem Band bleiben 244px bis zur naechsten Sektion. */
.a-erleben-trenner-trail {
  padding-bottom: clamp(96px, 12.7vw, 244px);
}
.a-erleben-trenner-trail .v-counter-boxes-element {
  background: #faf6f7;
  padding: 0 0 clamp(64px, 7.3vw, 141px);
  margin: 0;
}
.a-erleben-trenner-trail > .inside {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.a-erleben-trenner-trail .v-counter-boxes-element .counter-boxes {
  max-width: var(--inn-container-width);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
/* --- Vertikaler Rhythmus nach dem Entwurf -------------------------------- */
/* Entwurf: Unter der Collage von „Sommer in den Alpen" stehen 278px bis zur
   Kante des hellen Bandes (dort sitzt die Berg-Plakette), danach 203px bis
   zur Augenbraue von „Wandern". Unter der Wanderkarte bleiben 213px. */
.a-erleben-sommer {
  padding-bottom: clamp(96px, 14.5vw, 278px);
}
/* HRS-281 (27.10.2026): „Hier ist sehr viel Platz zwischen dem Icon und dem
   Textblock der darunter, kann man den reduzieren?"

   Der Kopfabstand stand hier auf `clamp(72px, 10.6vw, 203px)`. Die 203 kamen
   aus dem Entwurf — dort aber als Abstand von der Bandoberkante BIS ZUR
   AUGENBRAUE, nicht als Innenabstand. Zwischen beiden liegen gemessen 119px
   fuer Plakette und Ueberschriftenabstand, der Wert war also um genau diese
   119px zu gross.

   Gemessen bei 1677px, Bandoberkante bis Augenbraue, alle Abschnitte mit
   Bergplakette:

     erleben / Wandern            296,7px   ← beanstandet
     erleben / Wintersport        226,2px
     kulinarik / Halbpension      226,2px
     zimmer / Angebote            226,2px
     regionale / Erlebnisse       226,2px

   Wandern war der einzige Ausreisser. Die eigene Kopfabstandsregel entfaellt
   deshalb; es gilt wieder die der Plakette (`clamp(80px, 6.4vw, 123px)`),
   und damit sitzt der Abschnitt auf denselben 226,2px wie seine vier
   Geschwister.

   Zum Entwurf bleiben 23px Luft — dieselben 23px, die alle vier anderen
   Abschnitte auch haben und die niemand beanstandet hat. Einheitlich
   schlaegt hier genau, sonst waere Wandern der neue Ausreisser.

   Der Fussabstand bleibt: Er ist eigens belegt (Entwurf 213px unter der
   Wanderkarte) und war nicht Gegenstand der Meldung. */
.mod_article.a-erleben-wandern,
.mod_article_container.a-erleben-wandern {
  padding-bottom: clamp(96px, 11.1vw, 213px);
}
/* Der Abstand unter dem Trailrunning-Bild sitzt an der Folgesektion:
   `.a-trenner` traegt `padding: 0 !important`, dagegen kaeme hier nur ein
   weiteres !important an. Entwurf: 244px bis zur Augenbraue. */
.a-erleben-zusatz {
  padding-top: clamp(96px, 12.7vw, 244px);
}
.a-erleben-zusatz > .inside {
  padding-top: 0;
}
/* Berg-Wellness, Alpine Beauty Spa, Nachhaltigkeit — HRS-98 bis HRS-103
   ------------------------------------------------------------------ */
/* HRS-98: Icons ohne eigene Sektionsregel liefen in ihrer Dateigroesse —
   270x359px statt der ueblichen 40 bis 64px. Diese Grundregel ist bewusst
   nur ein Notnagel (120px), keine Vorgabe: Sie faengt neu eingefuegte Icons
   ab, laesst aber die Sektionen unberuehrt, die ihre Groesse selbst setzen
   (etwa die 330px-Illustrationen bei „Ihre Vorteile" auf Kulinarik oder die
   64-89px-Icons auf „Erleben & Entdecken"). Die Entwurfsgroesse steht je
   Sektion darunter. */
.icon-img-container img,
.icon-img-container svg {
  max-width: 120px;
  max-height: 120px;
}
/* HRS-98: Beautybehandlung auf „Berg-Wellness" — Entwurf: Icons in einem
   64px hohen Band, unten buendig, damit die Bildunterschriften aller Spalten
   auf einer Linie beginnen. */
.a-bergwellness-beauty .icon-img-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: 64px;
  min-height: 0;
}
.a-bergwellness-beauty .icon-img-container img,
.a-bergwellness-beauty .icon-img-container svg {
  max-width: 64px;
  max-height: 64px;
}
/* HRS-103: Dieselbe Falle im Team-Modul — die Icons hatten feste Breite und
   freie Hoehe (25 bis 81px), dadurch standen die Texte einer Zeile versetzt. */
.v-team-with-icons__icon-media {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: clamp(40px, 5vw, 56px);
  height: clamp(48px, 4.2vw, 64px);
}
.v-team-with-icons__icon-media picture,
.v-team-with-icons__icon-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
/* HRS-99: Schreibschrift ueber dem Bild („Teil der Natur"), Entwurf 120px
   Licorice, linksbuendig auf der unteren Bildhaelfte. */
.v-feature-list-card__media {
  position: relative;
}
.v-feature-list-card__script {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  bottom: clamp(8px, 1.2vw, 16px);
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 6.3vw, 120px);
  line-height: 1;
  pointer-events: none;
}
/* HRS-101: Der Schatten der Team-Kachel war weicher und heller als der
   Projektschatten der uebrigen Karten (0 8px 32px / 12%) und auf Weiss kaum
   zu sehen. Jetzt derselbe Wert wie bei allen anderen Karten. */
.v-team-with-icons__member {
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
}
/* HRS-102: Entwurf — 79px vom letzten Icon-Text bis zur Broschueren-Box;
   live waren es 160px, weil beide Sektionen ihren vollen Abstand setzen.
   Der untere Abstand der Sektion darueber reicht. */
.a-alpine-brochure {
  padding-top: 0;
}
.a-alpine-brochure > .inside {
  padding-top: 0;
}
/* HRS-99: Anordnung wie im Entwurf — Bild oben links, darunter „Mobilität",
   rechts daneben „Wir geben unser Bestes" ueber beide Zeilen. Ohne feste
   Platzierung reiht das Raster die Karten der Reihe nach und die lange
   Liste rutscht unter das Bild. */
.a-nachhalt-achten {
  /* Das Bild traegt die Schreibschrift — im Entwurf 639x305, also flacher
     als die Mindesthoehe der Komponente. */
}
@media (min-width: 992px) {
  .a-nachhalt-achten .v-feature-list-card--image {
    grid-column: 1 / span 2;
    grid-row: 2;
  }
  .a-nachhalt-achten .v-feature-list-card--image + .v-feature-list-card {
    grid-column: 1 / span 2;
    grid-row: 3;
  }
  .a-nachhalt-achten .v-feature-list-card--image ~ .v-feature-list-card:last-child {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
  }
}
.a-nachhalt-achten .v-feature-list-card--image .v-feature-list-card__media {
  min-height: 0;
  aspect-ratio: 639 / 305;
}
/* Sammelkorrekturen aus dem Ticketdurchgang vom 24.09.2026
   ------------------------------------------------------------------
   Beim Durchgehen der offenen Tickets HRS-19 bis HRS-64 blieben diese
   Punkte uebrig, die live noch nicht dem Entwurf entsprechen. Jede Regel
   nennt ihr Ticket und den gemessenen Ist- und Sollwert. */
/* HRS-25 — Startseite „Jetzt entdecken": Die drei Kartentitel standen auf
   4178/4123/4177 statt wie im Entwurf alle auf 4153. Ursache: Jede Karte
   setzte ihr Bild direkt ueber den Titel, die mittlere ist 100px hoeher.
   Der Entwurf legt die Bilder in ein gemeinsames Band (724px bei 380px
   Spaltenbreite); die mittlere sitzt darin oben, die beiden anderen unten. */
@media (min-width: 992px) {
  .a-entdecken {
    /* Der Versatz kommt bisher von `.v-stagger-3col` als Aussenabstand der
       Karten (154/0/224px) — damit wandern auch die Titel mit. Er gehoert
       ins Bildband, nicht an die Karte. */
  }
  .a-entdecken .v-page-teaser-grid__card {
    margin-top: 0;
  }
  .a-entdecken .v-page-teaser-grid__media {
    aspect-ratio: 380 / 724;
    display: flex;
    align-items: flex-end;
  }
  .a-entdecken .v-page-teaser-grid__card--tall .v-page-teaser-grid__media {
    align-items: flex-start;
  }
  .a-entdecken .v-page-teaser-grid__image {
    width: 100%;
  }
  .a-entdecken .v-page-teaser-grid__card--tall .v-page-teaser-grid__image {
    aspect-ratio: 380 / 670;
  }
  .a-entdecken .v-page-teaser-grid__card--medium .v-page-teaser-grid__image {
    aspect-ratio: 380 / 570;
  }
  .a-entdecken .v-page-teaser-grid__card--short .v-page-teaser-grid__image {
    aspect-ratio: 380 / 500;
  }
}
/* HRS-27 — Die Augenbraue der Inset-Trenner lief mit 600, jede andere
   Augenbraue der Seite mit 300 (Entwurf: 400). Das war der Eindruck
   „groesser und fetter als die anderen". */
.v-trenner--width-inset .v-trenner__eyebrow {
  font-weight: 400;
}
/* HRS-31 — Zimmer-Facts: Entwurf 28px, Schnitt 400, Bordeaux; live 18px in
   Textgrau. */
.v-room-detail__facts-item {
  font-size: 28px;
  font-weight: 400;
  color: #681d33;
  line-height: 1.21428571;
}
@media only screen and (max-width: 767px) {
  .v-room-detail__facts-item {
    font-size: 22px;
  }
}
/* HRS-42 / HRS-51 — Icon-Texte: Der Entwurf setzt sie auf beiden Seiten in
   Bordeaux mit Schnitt 400; live standen sie in Textgrau mit 300 und wirkten
   deshalb „wie light". Andere Sektionen (z. B. Zimmer-Tabs) machen es
   bereits richtig. */
.a-unternehmen-firmen .single-icon > span,
.a-tagungen-services .single-icon > span,
.a-unternehmen-firmen .v-inn-single-icon > span,
.a-tagungen-services .v-inn-single-icon > span,
.a-unternehmen-firmen .v-inn-single-icon span p,
.a-tagungen-services .v-inn-single-icon span p {
  color: #681d33;
  font-weight: 400;
}
/* HRS-34 — Das schmale Trennerbild der Zimmer-Detailseite lief mit
   `object-fit: fill` und wurde dadurch verzerrt („reingezoomt"). */
.a-trenner-bild__media img,
#s-zimmer-trenner-strip img {
  object-fit: cover;
}
/* HRS-53 — Tagungen, „Direkt in der Natur": Der Schriftzug „kreativberg"
   liegt im Entwurf als Schreibschrift (Licorice 120px, weiss) ueber dem Bild.
   Live stand er als 18px-Fliesstext da — die Klasse hatte ueberhaupt keine
   Regel. Der Schatten der Boxen, der im selben Ticket steht, sitzt bereits. */
.v-bleed-feature__main {
  position: relative;
}
.v-bleed-feature__overlay {
  position: absolute;
  left: clamp(16px, 2.1vw, 32px);
  bottom: clamp(8px, 1.2vw, 20px);
  margin: 0;
  color: #fff;
  font-family: var(--inn-head-font);
  font-size: clamp(56px, 6.25vw, 120px);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}
/* HRS-55 — Teamkachel: Der Name steht im Entwurf auf 28px, live auf 18px und
   damit gleich gross wie die Funktion darunter. */
.a-firmenevents-kontakt__meta strong,
.a-firmenevents-kontakt__meta b {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.21428571;
}
/* HRS-55 — Telefon und E-Mail sitzen im Entwurf unten im Block (100px ueber
   der Kante), nicht direkt unter dem Text. Auf „Fuer Unternehmen" stimmt das
   schon, auf Firmenevents klebten sie 18px unter dem Absatz. */
.v-contact-block__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.v-contact-block__items {
  margin-top: auto;
  padding-bottom: clamp(24px, 3vw, 52px);
}
/* HRS-28 — Zimmer-Tabs: Die Ueberschrift im Tab-Inhalt („Zimmer Basic") lief
   mit 65px wie eine Sektionsueberschrift. Der Entwurf setzt sie auf 28px/400
   (display-16, x645); die Eintraege der Liste daneben bleiben bei 18px. */
.v-room-tabs__headline {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.21428571;
}
@media only screen and (max-width: 767px) {
  .v-room-tabs__headline {
    font-size: 22px;
  }
}
/* HRS-54/28 — Die Eintraege der Tab-Liste sind `<button>`-Elemente ohne
   font-size und liefen deshalb mit dem Browser-Standard von 13,33px. Der
   Entwurf setzt sie auf 18px; die Tab-Liste auf „Firmenevents" macht das
   bereits richtig. Das ist die Ungleichheit aus HRS-54. */
.v-room-tabs__tab,
.v-room-tabs__accordion-title {
  font-size: 18px;
}
/* ===========================================================================
   Mobil-Durchgang vom 24.09.2026
   Gemessen bei 360/393/768/1024px gegen die iPhone-14-Pro-Artboards.
   768px war sauber, bei 1024px nur die Galerie unten.
   =========================================================================== */
/* Dreier-Band: Die Mobilfassung steht seit je in custom.less (max-width: 991px,
   eine Spalte, liegende Trennlinien) — sie hat nur nie gewirkt. HRS-23 setzte
   danach `.v-link-triple .v-link-triple__grid` ohne Medienabfrage auf die
   Desktop-Spalten, und 0,2,0 schlaegt die 0,1,0 aus der Medienabfrage. Bei
   393px standen die drei Texte deshalb uebereinander gedruckt. LEARNINGS §1. */
@media (max-width: 991px) {
  .v-link-triple .v-link-triple__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 2px ist die Staerke aus HRS-23 — liegend ist das die Hoehe. */
  .v-link-triple .v-link-triple__divider {
    width: 100%;
    height: 2px;
  }
}
/* Contao-Raster: `.row.ce_rowStart` ist ein 12-Spalten-Gitter. Wird der
   Container schmal, klemmen die Tracks auf 0 und die Breite besteht nur noch
   aus den elf Zwischenraeumen — 11 x 40px = 440px in einem 353px breiten
   Container. Daran lief die Seehaus-Oeffnungszeitenkarte 67px ueber die Kante,
   bei 360px zusaetzlich Alpine Spa, FAQ, Nachhaltigkeit, Feste feiern und
   Firmenevents (11 x 30px = 330 > 320).

   Der Zwischenraum wird gedeckelt statt gestrichen: zwei Reihen bleiben auch
   bei 393px zweispaltig (Zimmer-Detail, Regionale Erlebnisse). Und er steht
   auf `.mod_article`, weil die seitenweisen Regeln (`.a-seehaus-intro
   .row.ce_rowStart`) mit 0,3,0 jede allgemeinere Regel schlagen wuerden. */
@media (max-width: 575px) {
  .mod_article .row.ce_rowStart,
  .mod_article_container .row.ce_rowStart {
    column-gap: min(30px, 7%);
  }
}
/* Seehaus, Oeffnungszeitenkarte: Der Entwurf iphone-14-pro-14 setzt die
   Ueberschrift auf x41 in einer 352 breiten Karte — also 20px Innenabstand,
   nicht 40. Der senkrechte Wert bleibt, dafuer gibt der Entwurf nichts her. */
@media (max-width: 575px) {
  .a-seehaus-intro__karte {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* Feste feiern, Preistabelle: Der Entwurf loest sie mobil auf — eine Karte je
   Location statt vier Spalten (iphone-14-pro-29, Sektionen 16-19, je 352x211).
   Vorher stand hier `min-width: 480px` ohne einen Bereich, der scrollt: die
   Spalte „Fr. – So." lag ausserhalb des Bildes und war nicht erreichbar, auf
   dem Handy fehlten also die Wochenendpreise.

   Sollwerte aus dem Artboard (Karte x20,45 breit 352):
     Band weiss, Hoehe 211          Ortsname x38,8  18px/700 versal, Bordeaux
     Pille x262,45 91x39 r20        Beschriftungen y+103, 18px/700, #4a4a49
     Graues Band x38,79 313,66x45   Werte darin, Spalten bei 25 und 221px

   Die Inhaltszellen tragen seit dem 24.09.2026 `data-label` und einen `<span>`
   um den Wert — nur damit laesst sich die Beschriftung ueber das Band setzen
   und der Wert hinein. Die Beschriftung kommt aus dem Inhalt, nicht aus dem
   Stylesheet: `content: attr(data-label)` bleibt uebersetzbar.

   HRS-214 (27.10.2026): Die Pille traegt im Entwurf ein Personen-Piktogramm
   vor der Zahl. Das fehlte, weil das Symbol nicht als Datei vorlag — die
   Designerin hat es angemahnt („personen icon fehlt noch vor der zahl").
   Der Pfad stand im Artboard-SVG (`iphone-14-pro-29.svg`, zwei deckungs-
   gleiche weisse Pfade) und liegt jetzt als `-svg/personen-weiss.svg`.
   Die frueher hier vermerkte Abweichung ist damit erledigt. */
@media (max-width: 575px) {
  .a-feste-feiern-preise {
    display: block;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    /* Ausdruecklich, damit lange Ortsnamen umbrechen statt unter die Pille
       zu laufen — „Galerie Restaurant (Haupthaus)" braucht zwei Zeilen. */
    white-space: normal;
    /* Die Streifen der Desktop-Tabelle ergeben auf Karten keinen Sinn. */
    /* Ortsname */
    /* Gaestezahl als Pille */
    /* Das graue Band liegt hinter den Werten, nicht hinter den
       Beschriftungen — deshalb als eigenes Rasterfeld in Zeile 4. */
  }
  .a-feste-feiern-preise thead {
    display: none;
  }
  .a-feste-feiern-preise tbody {
    display: block;
  }
  .a-feste-feiern-preise tbody tr {
    display: grid;
    /* 70/30 setzt die zweite Spalte auf 222px — im Entwurf beginnt sie
         bei 221px, gemessen an der Beschriftung „Fr. – So. *". */
    grid-template-columns: 70% 30%;
    /* Name/Pille | Luft | Beschriftungen | Luft | Preisband.
         Entwurf: Name endet y90, Beschriftung y103, Band y146 bis 191. */
    grid-template-rows: auto 13px 23px 20px 45px;
    align-items: start;
    background: #fff;
    padding: 30px 20px 20px 18px;
    margin-bottom: 20px;
  }
  .a-feste-feiern-preise tbody tr td {
    padding: 0;
    height: auto;
    background: none;
  }
  .a-feste-feiern-preise tbody tr:nth-child(odd) td,
  .a-feste-feiern-preise tbody tr:nth-child(even) td {
    background: transparent;
  }
  .a-feste-feiern-preise tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: #681d33;
  }
  .a-feste-feiern-preise tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .a-feste-feiern-preise tbody td:nth-child(2) > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 91px;
    height: 39px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 20px;
    background: #681d33;
    color: #fff;
    font-size: 18px;
    line-height: 23px;
    /* HRS-214 — Personen-Piktogramm vor der Zahl.

           Sollwerte aus `iphone-14-pro-29` („Locationzuschlag pro Tag",
           Pille x262,45): Symbol 16,91 x 15,66 bei x279,93, Zahl ab
           x308,50 — also 11,66px zwischen Symbol und Zahl und 17,48px
           Einzug ab der Pillenkante. Die 12px Innenabstand der Pille
           liefern davon den groesseren Teil.

           Nur mobil: Das Desktop-Artboard kennt diese Pille gar nicht,
           dort steht „18" als nackte Tabellenzelle.

           Platz reicht: 12 + 17 + 12 + rund 19 (zwei Ziffern) + 12 = 72
           von 91px. Die breiteste Zahl ist zweistellig.

           **Eingebettet statt als Datei.** `files/contao_files/Bilder` steht
           in `.gitignore` und ist in `tools/deploy/build-release.sh`
           ausdruecklich vom Release ausgenommen — eine dort abgelegte Datei
           kaeme nie auf den Server, und die Regel zeigte auf einen 404. Das
           faellt erst auf der ausgelieferten Seite auf. Eingebettet reist
           das Symbol mit dem Stylesheet, ist versioniert und kann nicht ins
           Leere zeigen; 3,7 KB in 828 KB sind 0,45 Prozent.

           Herkunft, falls es je neu gewonnen werden muss: Artboard-SVG
           `library/riessersee/artboards/iphone-14-pro-29.svg`, weisser Pfad
           mit `data-id="810501ce-…"` (zweimal deckungsgleich enthalten),
           Bounding-Box x -0,01..16,90 / y 24,92..40,58 — daher der
           verschobene viewBox. */
  }
  .a-feste-feiern-preise tbody td:nth-child(2) > span::before {
    content: "";
    flex: 0 0 17px;
    width: 17px;
    height: 16px;
    margin-right: 12px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-0.01 24.92 16.91 15.66'><path fill='%23ffffff' d='M 13.69 32.85 C 15.43 31.29 15.57 28.62 14.01 26.89 C 12.58 25.31 10.19 25.04 8.45 26.27 C 6.55 24.92 3.92 25.38 2.57 27.28 C 1.34 29.03 1.61 31.42 3.2 32.85 C 1.22 33.89 -0.01 35.94 0 38.17 L 0 39.98 C 0 40.31 0.27 40.58 0.6 40.58 L 16.29 40.58 C 16.62 40.58 16.89 40.31 16.89 39.98 L 16.89 38.17 C 16.9 35.94 15.67 33.89 13.69 32.85 Z M 10.86 26.71 C 12.52 26.71 13.87 28.05 13.87 29.72 C 13.88 30.9 13.18 31.98 12.1 32.47 C 12.05 32.49 12.01 32.51 11.96 32.53 C 11.81 32.59 11.66 32.63 11.5 32.67 C 11.47 32.68 11.44 32.68 11.41 32.69 C 11.23 32.72 11.06 32.74 10.88 32.74 C 10.8 32.74 10.72 32.73 10.64 32.73 C 10.61 32.73 10.58 32.73 10.55 32.72 C 10.2 32.68 9.87 32.58 9.56 32.43 C 9.55 32.42 9.53 32.42 9.52 32.42 C 9.46 32.39 9.4 32.37 9.35 32.33 C 9.35 32.33 9.36 32.32 9.36 32.31 C 9.64 31.96 9.86 31.56 10.01 31.14 L 10.03 31.09 C 10.1 30.88 10.15 30.68 10.19 30.47 C 10.19 30.44 10.2 30.41 10.2 30.37 C 10.24 30.16 10.25 29.94 10.26 29.72 C 10.25 29.51 10.24 29.29 10.2 29.08 C 10.2 29.05 10.19 29.02 10.19 28.98 C 10.15 28.77 10.1 28.56 10.03 28.36 L 10.01 28.31 C 9.86 27.89 9.64 27.49 9.36 27.13 C 9.36 27.13 9.35 27.12 9.35 27.12 C 9.81 26.85 10.33 26.71 10.86 26.71 Z M 3.02 29.72 C 3.01 28.06 4.36 26.71 6.02 26.71 C 6.8 26.71 7.55 27.01 8.11 27.54 C 8.14 27.58 8.18 27.61 8.21 27.65 C 8.31 27.76 8.41 27.87 8.5 27.99 C 8.52 28.03 8.55 28.07 8.57 28.11 C 8.66 28.24 8.73 28.38 8.79 28.52 C 8.81 28.55 8.82 28.59 8.83 28.62 C 8.9 28.78 8.95 28.94 8.98 29.1 C 8.99 29.12 8.99 29.14 8.99 29.16 C 9.07 29.53 9.07 29.92 8.99 30.29 C 8.99 30.31 8.99 30.33 8.98 30.35 C 8.95 30.51 8.9 30.67 8.83 30.83 C 8.82 30.87 8.81 30.9 8.79 30.93 C 8.73 31.08 8.66 31.21 8.57 31.34 C 8.55 31.38 8.52 31.42 8.5 31.46 C 8.41 31.58 8.31 31.7 8.21 31.8 C 8.18 31.84 8.14 31.87 8.11 31.91 C 7.86 32.14 7.58 32.33 7.27 32.47 C 7.23 32.49 7.18 32.51 7.13 32.53 C 6.98 32.59 6.83 32.63 6.68 32.67 C 6.64 32.68 6.6 32.68 6.56 32.69 C 6.4 32.72 6.23 32.74 6.07 32.74 L 6 32.74 C 5.83 32.74 5.67 32.72 5.5 32.69 C 5.46 32.68 5.43 32.68 5.39 32.67 C 5.23 32.63 5.09 32.59 4.94 32.53 C 4.89 32.51 4.84 32.49 4.79 32.47 C 3.71 31.98 3.02 30.91 3.02 29.72 Z M 10.86 39.38 L 1.21 39.38 L 1.21 38.17 C 1.2 36.12 2.49 34.3 4.42 33.62 C 5.45 34.05 6.62 34.05 7.65 33.62 C 7.85 33.7 8.05 33.78 8.24 33.88 C 8.36 33.95 8.48 34.02 8.6 34.1 C 8.68 34.14 8.76 34.19 8.83 34.25 C 8.95 34.33 9.06 34.42 9.17 34.51 C 9.24 34.57 9.31 34.63 9.37 34.69 C 9.47 34.79 9.56 34.89 9.65 34.99 C 9.72 35.06 9.78 35.14 9.84 35.21 C 9.92 35.31 10 35.42 10.07 35.52 C 10.13 35.61 10.18 35.71 10.23 35.8 C 10.29 35.91 10.35 36.01 10.4 36.12 C 10.45 36.23 10.49 36.34 10.54 36.46 C 10.58 36.56 10.62 36.66 10.65 36.76 C 10.69 36.9 10.72 37.05 10.75 37.19 C 10.77 37.28 10.79 37.36 10.8 37.45 C 10.84 37.69 10.86 37.93 10.86 38.17 L 10.86 39.38 Z M 15.68 39.38 L 12.07 39.38 L 12.07 38.17 C 12.07 37.98 12.05 37.79 12.04 37.61 C 12.03 37.55 12.02 37.5 12.02 37.45 C 12 37.31 11.98 37.18 11.96 37.05 C 11.95 36.99 11.94 36.94 11.92 36.88 C 11.89 36.75 11.86 36.61 11.82 36.48 C 11.81 36.44 11.8 36.39 11.79 36.35 C 11.62 35.81 11.37 35.3 11.06 34.83 L 11.03 34.79 C 10.93 34.64 10.82 34.49 10.7 34.35 L 10.7 34.34 C 10.58 34.19 10.45 34.05 10.31 33.91 C 10.32 33.91 10.33 33.91 10.33 33.91 C 10.5 33.93 10.68 33.94 10.85 33.94 L 10.88 33.94 C 11.04 33.94 11.2 33.93 11.36 33.91 C 11.41 33.91 11.45 33.9 11.5 33.89 C 11.63 33.87 11.76 33.85 11.88 33.81 C 11.92 33.8 11.96 33.8 11.99 33.79 C 12.16 33.74 12.32 33.69 12.47 33.62 C 14.4 34.3 15.69 36.12 15.68 38.17 L 15.68 39.38 Z'/></svg>") center / contain no-repeat;
  }
  .a-feste-feiern-preise tbody tr::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 5;
    /* `align-items: start` der Reihe gilt auch fuer dieses Feld — ohne
         `stretch` bliebe das Band 0px hoch. */
    align-self: stretch;
    background: #ececec;
  }
  .a-feste-feiern-preise tbody td:nth-child(3),
  .a-feste-feiern-preise tbody td:nth-child(4) {
    /* ueber Beschriftungs-, Abstands- und Bandzeile */
    grid-row: 3 / 6;
    display: grid;
    grid-template-rows: 23px 20px 45px;
    position: relative;
    font-size: 18px;
    line-height: 23px;
    color: #4a4a49;
  }
  .a-feste-feiern-preise tbody td:nth-child(3)::before,
  .a-feste-feiern-preise tbody td:nth-child(4)::before {
    content: attr(data-label);
    grid-row: 1;
    font-weight: 700;
  }
  .a-feste-feiern-preise tbody td:nth-child(3) > span,
  .a-feste-feiern-preise tbody td:nth-child(4) > span {
    grid-row: 3;
    align-self: center;
  }
  .a-feste-feiern-preise tbody td:nth-child(3) {
    grid-column: 1;
    /* Entwurf: Wert 24,7px hinter der linken Bandkante */
    padding-left: 25px;
  }
  .a-feste-feiern-preise tbody td:nth-child(4) {
    grid-column: 2;
  }
}
/* Zimmer-Detail, Galerie: `.inside` ist Flex-Element in einem Grid-Container
   und behaelt damit `min-width: auto` — es schrumpft nicht unter seine
   Inhaltsbreite und blieb auf 1340px, auch bei 1024px Viewport. Rechts fehlten
   296px, bei 1280px noch 40px samt Bildunterschrift. Erst ab 1440px war die
   Galerie vollstaendig zu sehen. */
.v-room-detail__gallery-section > .inside {
  min-width: 0;
}
/* Medien-Karten: Der Entwurf stapelt sie unter 576px — `.v-media-cta-cards__grid
   { grid-template-columns: 1fr }` steht auch so im Stylesheet. Gewirkt hat es
   nie: `.v-media-cta-cards:not([data-cols="1"]) .v-media-cta-cards__grid` setzt
   bis 991px zwei Spalten und schlaegt mit 0,3,0 die 0,1,0 der Mobilregel.

   Folge bei 393px: Karten von 165px Breite, in denen eine 187px breite
   Plakette („Neujahrspringen") und 150px breite Schaltflaechen stecken — beide
   ragten ueber die Karte und ueber den Bildrand hinaus. Auf
   `a-tagungen-pauschalen` war das schon einmal einzeln nachgezogen worden
   (0,4,0); hier gilt es fuer alle Vorkommen. LEARNINGS §1. */
@media (max-width: 575px) {
  .v-media-cta-cards:not([data-cols="1"]) .v-media-cta-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Kontaktblock: „veranstaltungen@riessersee-hotel.de" sind 35 Zeichen ohne
   Trennstelle und bei 360px 3px zu breit — das letzte Zeichen lief ueber die
   Kante. `anywhere` bricht erst, wenn es sonst nicht passt; ab 393px bleibt
   die Adresse deshalb einzeilig. */
.v-contact-block__label {
  overflow-wrap: anywhere;
}
/* ===========================================================================
   XD-Abgleich vom 05.10.2026 — Element für Element geprüft
   Werkzeug: inn-contao-website-builder/scripts/xd-elemente.mjs
   Jede Regel nennt die Zahl der betroffenen Stellen und die Fundstelle.
   =========================================================================== */
/* Die Augenbraue über den Überschriften steht im Entwurf auf 14px, versal,
   Zeilenhöhe 18,9px. Live lief sie auf 18px — gemessen an **126 Stellen auf
   23 Seiten**.

   Die Regel gab es längst, aber artikelweise kopiert: `.a-riessersee`,
   `.a-angebote`, `.a-feste-feiern`, `.a-unternehmen`, `.a-blog-teaser`,
   `.a-bewertungen`, `.a-instagram`, `.a-entdecken`, `.a-nachhaltigkeit` —
   neun Artikel der Startseite hatten sie, jede andere Seite erbte 18px.
   Das ist die Ursache hinter „die Headlines sind auf verschiedenen Seiten
   verschieden groß".

   Bewusst **nicht** auf `.v-headline-subtext` allgemein: Der Entwurf kennt
   zwei versale Augenbrauen-Größen (228x 14px, 151x 18px). Nur die Zeile
   **über** der Überschrift ist 14px, und die trägt `--top`. */
.v-headline .v-headline-subtext--top {
  font-size: 14px;
  line-height: 18.9px;
}
/* HRS-138: Hier stand `.rs-scroll-hint__label { color: #fff }` — global.
   Der eigene Klammerzusatz nannte die Ausnahme sogar („die Vorkommen auf
   hellem Grund weiter unten, nicht der Hero"), nur stand sie nie im
   Selektor. Auf der Startseite steht der Hinweis **unter** dem Bild auf
   Weiß und war damit unsichtbar.

   Die Unterscheidung gab es längst: `.rs-scroll-hint--on-dark` ist die
   Variante für weiße Schrift, der Grundzustand ist Bordeaux (#681d33).
   Das Partial setzt die Variante jetzt über `$scrollOnDark`, und der
   Sub-Hero — der einzige Ort, an dem der Hinweis auf dem Bild liegt —
   schaltet sie ein. Diese Regel entfällt ersatzlos. */
/* Karriere-Band im Menü-Overlay. Entwurf: 18px/400, Zeilenhöhe **25px** —
   live 23px, auf allen 28 Seiten. Die Farbe unterscheidet sich zwischen den
   Fassungen und bleibt deshalb getrennt: Desktop #687943 (so ist es live
   schon richtig), Mobil **#ffffff** (28 Stellen, live lief dort Grün).
   Fundstellen: alle Desktop-Artboards 18px/400/#687943/lh25,
   alle iPhone-Artboards 18px/400/#ffffff/lh25. */
.v-menu-overlay-career-text {
  line-height: 25px;
}
/* Die Farbe steht auf einem ID-Selektor (`#mobile-nav-mod.navigation`), gegen
   den eine Klassenregel nicht ankommt — deshalb hier mit derselben Kennung.
   Nur das Overlay: Das gleichnamige Band im Footer (`#footer-mod
   .v-footer-career`) ist im Entwurf gruen und bleibt es. */
/* Das sichtbare Band steht im Footer, nicht im Menue-Overlay (das zweite
   Vorkommen ist geschlossen und unsichtbar). Zustaendig ist dort
   `#footer-mod .v-footer-career …` mit einer ID — dagegen kommt eine
   Klassenregel nicht an. Mobil ist der Grund dunkel, der Entwurf setzt
   #ffffff; am Desktop bleibt es gruen. */
@media only screen and (max-width: 767px) {
  #footer-mod .v-footer-career .v-menu-overlay-career-text,
  #mobile-nav-mod.navigation .v-menu-overlay-career-text {
    color: #fff;
  }
}
/* FAQ-Plus/Minus: Der Entwurf setzt das Zeichen auf **45px** (Schnitt 300,
   Bordeaux) — auch mobil. Live stand `clamp(32px, 4vw, 45px)`; bei 393px
   liefert 4vw nur 15,7px, es griff also dauerhaft die Untergrenze 32px.
   65 Stellen auf 9 Seiten. Fundstelle: iphone-14-pro-26, 28x 45px/300. */
/* Spezifitaet: `.faq-card .faq-card-link .faq-icon .faq-icon-sign` (0,4,0)
   setzt den clamp — eine flache Regel kaeme nie an. */
.faq-card .faq-card-link .faq-icon .faq-icon-sign {
  font-size: 45px;
}
/* Filterschaltflächen der Listen tragen keine Schriftgröße und liefen
   deshalb mit dem Browser-Standard von 13,33px. Der Entwurf setzt 18px.
   22 Stellen auf 4 Seiten — dieselbe Ursache wie seinerzeit HRS-54. */
.v-news-list__filter,
.v-filter-gallery__filter {
  font-size: 18px;
}
/* Pressemitteilungen, Datum: Entwurf Schnitt 700, live 500. 19 Stellen. */
.v-press-card__date {
  font-weight: 700;
}
/* Hotelkarte, Nummern der Marker: Entwurf mobil 16px, live 22px. 15 Stellen. */
@media only screen and (max-width: 767px) {
  .v-hotel-map__marker-num {
    font-size: 16px;
  }
}
/* ===========================================================================
   XD-Abgleich 05.10.2026 — Tab-Beschriftungen, Preis-Praefix, Tagungstabelle
   Messbericht: scratchpad/xd-berichte/{zimmer,kulinarik,tagungen,index,blog}
   Breakpoint 991px, weil die drei Tab-Bausteine dort auf Akkordeon umschalten
   (custom.less:4803/5133/5496) — @mobile waere 767px und griffe zu spaet.
   =========================================================================== */
/* --- 1. Geschlossene Akkordeonzeile: #b6b6b6 statt rgba(#4a4a49,72%) -------
   Entwurf iphone-14-pro-3:119 / -15:139 / -9 (Tagungsraeume): die ruhenden
   Zeilen stehen auf 18px/400/#b6b6b6 — derselbe Wert, den die Tab-Liste am
   Desktop schon traegt (custom.less:4596, 4992, 5411). Nur die Mobilfassung
   setzte fade(@rs-text, 72%) — custom.less:4833, 5166, 5529. Die 0,1,0 aus
   korrekturen.less kommt zuletzt und schlaegt die gleich spezifische Regel in
   custom.less; die Offen-Regeln (0,3,0) bleiben unberuehrt. */
@media (max-width: 991px) {
  .v-room-tabs__accordion-trigger,
  .v-content-tabs__accordion-trigger,
  .v-conference-tabs__accordion-trigger {
    color: #b6b6b6;
  }
}
/* --- 2. Aktive Zimmer-Tab-Zeile: 700 kursiv --------------------------------
   Entwurf hotel-riessersee-zimmer-uebersicht:42 (y2267) und
   iphone-14-pro-3:118 (y1863): 18px/700/kursiv/#681d33. Content-Tabs
   (custom.less:5020/5174) und Conference-Tabs (5439/5537) machen das bereits,
   die Zimmer-Tabs sind der einzige der drei Bausteine ohne. */
.v-room-tabs__tab.is-active {
  font-style: italic;
  font-weight: 700;
}
@media (max-width: 991px) {
  .v-room-tabs__panel.is-open .v-room-tabs__accordion-trigger {
    font-style: italic;
    font-weight: 700;
  }
}
/* --- 3. Preisangabe der Zimmer-Tabs: 18px/400 statt 14px/300 --------------
   Entwurf hotel-riessersee-zimmer-uebersicht:66/67 (y2324/y2351): „ab" und
   „pro Nacht" stehen auf 18px/400/#4a4a49 — .type-body(). Live 14px/300
   (custom.less:4749/4763). Die Ausnahme „14px/300" in
   design-abweichungen.json deckt die Eyebrow, nicht diese Stelle: der Entwurf
   nennt hier 18px, nicht 14px. */
.v-room-tabs__price-prefix,
.v-room-tabs__price-note {
  font-size: 18px;
  font-weight: 400;
}
/* --- 4. Preis-Praefix in der Akkordeonzeile: #681d33 ----------------------
   Entwurf iphone-14-pro-3:160-171 — die dreizehn „ab" der Zeilenliste (x242)
   sind #681d33; nur das „ab" im geoeffneten Panel (x131,5) bleibt #4a4a49.
   Nur Zimmer-Tabs: rsce_room_tabs.html5:89 traegt den Preis in der Zeile,
   rsce_content_tabs.html5:150 nicht — dort gibt es kein Gegenstueck.
   0,2,0 schlaegt die Grundregel 0,1,0 ohne !important. */
@media (max-width: 991px) {
  .v-room-tabs__accordion-price .v-room-tabs__price-prefix {
    color: #681d33;
  }
}
/* --- 5. Tagungstabelle, Spaltenkoepfe ------------------------------------
   Entwurf hotel-riessersee-...-tagungen:231-234 (y2498): 18px/700/#4a4a49.
   Entwurf iphone-14-pro-9:160-166 (y3436): 14px/400. Live beides 18px/400 —
   die Zelle erbt nur `thead th { font-weight: 400 }` (custom.less:5590). Eine
   eigene Regel auf dem Span gewinnt gegen den geerbten Wert unabhaengig von
   Spezifitaet: Vererbung konkurriert nicht mit einer direkten Deklaration. */
.v-conference-table__seat-label {
  font-weight: 700;
  /* .type-micro() waere 14px/400 — bringt aber text-transform: uppercase mit,
     und der Entwurf schreibt „U-Form"/„Parlament" in Gross-/Kleinschreibung.
     Deshalb die beiden Werte einzeln. */
}
@media (max-width: 991px) {
  .v-conference-table__seat-label {
    font-size: 14px;
    font-weight: 400;
  }
}
/* --- 6. Tagungstabelle, Kapazitaetszahlen mobil: #681d33 -----------------
   Entwurf iphone-14-pro-9:162-168 (y3408): #681d33. Am Desktop fuehrt der
   Entwurf dieselben Zahlen als #4a4a49 (…-tagungen:395-398) — deshalb nur
   unter 991px. */
@media (max-width: 991px) {
  .v-conference-table__cell-cap {
    color: #681d33;
  }
}
/* --- 7. Kombinier-Hinweis: 14px/#681d33 ----------------------------------
   Entwurf …-tagungen, drei „miteinander kombinierbar" (y2568/y2658/y2822):
   14px/400/19px/#681d33. custom.less:5685 notiert „font-size: XD micro 14 —
   Theme/User" und laesst den Wert offen; geerbt werden 18px/#4a4a49. */
.v-conference-combine__note {
  /* ohne .type-micro(): dessen text-transform: uppercase passt nicht zu
     „miteinander kombinierbar". Zeilenhoehe bleibt wie sie ist — der Entwurf
     nennt 19px, das gehoert in den Zeilenhoehen-Durchgang, nicht hierher. */
  font-size: 14px;
  font-weight: 400;
  color: #681d33;
}
/* --- 8. Blog-Schlagwort: 18px/700 kursiv ---------------------------------
   Entwurf hotel-riessersee-startseite-update-licorice:183-186 (y13134),
   hotel-riessersee-infocenter-blog:35-38 (y2178) und iphone-14-pro-1:258 /
   -17:102: 18px/700/kursiv/35px/#4a4a49. Live 14px/400 (custom.less:2855).
   Einzige Regel auf dem Selektor, kein Spezifitaetskonflikt. */
.v-news-card__tag {
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  /* Zeilenhoehe nicht angetastet: der Entwurf nennt 35px, live sind es 18px —
     das ist ein Zeilenhoehen-Befund und gehoert in dessen Durchgang. */
}
/* ---------------------------------------------------------------------------
   Überschriftengrößen mobil — der Entwurf ist einheitlich, die Umsetzung war es
   nicht. Über alle 28 Mobil-Artboards gezählt: display-16 in 203 von 203
   Vorkommen 28px, display-11 in 288 von 288 Vorkommen 45px. Null Streuung.
   --------------------------------------------------------------------------- */
/* Die mobile H3 stand auf 30px — größer als die Desktop-H3 mit 28px. Der Wert
   kommt aus `tl_inn_design_config.inn_h3_font_size_mobile` und wird von
   `fe_page.html5` auf `:root` geschrieben, noch vor dem Stylesheet. Deshalb
   genügt hier gleiche Spezifität ohne `!important`.
   Die Konfiguration selbst wird zusätzlich auf 28 gesetzt; diese Zeile ist die
   Absicherung, falls jemand den Wert zurückdreht.
   Belege: iphone-14-pro-26 y6525 „Zimmer", iphone-14-pro-1 y2200
   „Berge. See. Kulinarik.", iphone-14-pro-15 y2259 „Unser Frühstücksbuffet". */
:root {
  --inn-h3-font-size-mobile: 28px;
}
@media only screen and (max-width: 767px) {
  /* Sub-Hero-Subline: custom.less:4425 führt 25px und ordnet sie `display-19`
     zu. Das Element ist im Entwurf durchgehend `display-16` — 24 von 24
     Mobil-Artboards, immer bei y204–208 / x21 (iphone-14-pro-23 y208,16
     „Alpine Beauty Spa", iphone-14-pro-3 y204,16 „Unsere Zimmerkategorien").
     Der Wert war damit zum zweiten Mal daneben: 24 → 25 → soll 28.
     Zeilenhöhe bleibt offen, der Kasten ist einzeilig. */
  .v-sub-hero__subline {
    font-size: 28px;
  }
  /* Menügruppen-Titel: Die 18px-Regel (custom.less:5246) liegt hinter
     `@media (min-width: 992px)` und greift mobil nie — das h4 fällt auf
     `var(--inn-h4-font-size-mobile)` = 24px zurück. Der Entwurf führt die
     Gruppen als Fließtext 18px/400 (iphone-14-pro-15 y7383,84 „Salat Buffet",
     y7603,84 „Vorspeisen"). `.a-feste-feiern-aufblick` bleibt spezifischer
     und damit unberührt — dort sind 28px nicht beanstandet. */
  .v-content-tabs__group-title {
    font-size: 18px;
  }
  /* Presse-Jahreszahlen und Feature-Listen-Titel lesen die H3-Token und landen
     deshalb bei 30px. Der Entwurf führt sie als Fließtext 18px, nicht als
     Überschrift (iphone-14-pro-20 y3472,14 „2026" 18px/700;
     iphone-14-pro-28 y5658,73 „Wir versuchen plastikfrei zu werden" 18px/700).
     Muss zusätzlich zum H3-Token stehen — der brächte sie nur auf 28px.
     Schnitt nicht angefasst: der Entwurf setzt hier selbst 700 und 400. */
  .v-press-releases__year-title,
  .v-feature-list-card__title {
    font-size: 18px;
  }
}
@media (max-width: 991px) {
  /* Trenner-Titel: 42px statt 45px. Dieselbe Messbreite wie die bestehende
     Regel (custom.less:2100), sonst bliebe es zwischen 768 und 991px bei 42px.
     Mehrzeilig belegt: iphone-14-pro-6 y4641,72 „Derzeit kein Angebot
     verfügbar?" (h144,8), iphone-14-pro-22 y6717,65 „Trailrunning Events". */
  .v-trenner__title {
    font-size: 45px;
  }
}
/* --- Nachlese: klar belegte Einzelposten ---------------------------------- */
/* Plus-Zeichen der Merkmalslisten — dieselbe Ursache wie beim FAQ-Zeichen:
   Entwurf 45px/300, live 18px/400. 23 Stellen. */
.v-ruled-list__icon-plus {
  font-size: 45px;
  font-weight: 300;
}
/* Zitatzeile und Bildunterschrift der Zeitleiste: Entwurf 14px, live 18px. */
.rs-quote-band__author,
.v-history-timeline__caption {
  font-size: 14px;
}
/* Teamkacheln: Entwurf 28px, live 18px (9 Stellen). */
.team-title,
.team-title h4 {
  font-size: 28px;
}
/* Versalien, die der Entwurf setzt und die Umsetzung nicht (19 Stellen).
   Die Schriftgrößen dieser drei stehen weiter oben bereits richtig.

   HRS-115: `.v-conference-table__cell-combine` stand hier zu Unrecht und ist
   wieder heraus. Die Zelle traegt den Kombinier-Hinweis, und der Entwurf
   schreibt ihn ausdruecklich klein — …-tagungen y2568/y2658/y2822 fuehren
   „miteinander kombinierbar" und „Die Sportraeume sind miteinander
   kombinierbar" in Gross-/Kleinschreibung. Die Versalien kamen aus der Rolle
   `micro`, nicht aus dem Text; den Unterschied hat die Designerin gesehen.
   Die Zelle enthaelt ausser dem Hinweis nur Klammer- und Punktgrafik, das
   Entfernen wirkt also nirgends sonst. */
.v-press-releases__year-title,
.v-feature-list-card__title,
.v-conference-table__cell-cap {
  text-transform: uppercase;
}
/* Scroll-Hinweis: Zeilenhöhe 23px statt 18px (50 Stellen). Der Schriftzug
   ist gedreht, die Zeilenhöhe wirkt dort als Laufbreite der Grundlinie. */
.rs-scroll-hint__label {
  line-height: 23px;
}
/* --- Trennlinien vereinheitlichen ---------------------------------------- */
/* Der Entwurf führt die Trennlinie durchgängig als 1,5px in Bordeaux. Live
   lief sie in **vier** Umsetzungen: 2px (132 Stellen, FAQ und Dreier-Band),
   1px (44), 1px mit 14% Deckkraft (20) und gar nicht (7).

   1,5px ist über `border-width` nicht erreichbar — Chromium rundet bei
   Gerätepixelverhältnis 1 auf 1px ab (nachgemessen). Möglich wären also nur
   1px oder 2px. Maßgeblich ist damit die vorhandene Festlegung: `faq.less:30`
   setzt 2px mit dem Kommentar „überall gleich", und `korrekturen.less` zieht
   für das Dreier-Band aus HRS-23 ebenfalls 2px. Danach richten sich jetzt
   auch die übrigen Vorkommen.

   **Nicht** angefasst: die Panel-Linien der Tab-Bausteine mit 14% Deckkraft.
   Das ist ein eigenes, bewusst zurückgenommenes Gestaltungsmittel innerhalb
   geöffneter Panels, keine Sektionstrennlinie. */
/* NACHTRAG 27.10.2026 — HRS-288, HRS-289, HRS-290: Die Designerin hat die
   obige Entscheidung dreimal beanstandet („Strich zu Breit", „Strich",
   „Strich" — Badeseen, Aktiv in den Bergen, Sehenswuerdigkeiten). Damit ist
   die Aufrundung auf 2px vom Tisch; es bleibt die Abrundung auf 1px.

   Nachgemessen, und strenger als beim ersten Mal: `border-width: 1.5px`
   liefert computed 1px — bei Geraetepixelverhaeltnis 1 UND 2. Ein Rahmen
   kann 1,5px also ueberhaupt nicht, auch nicht auf scharfen Displays.
   Moeglich bleiben 1px und 2px; die Designerin nennt 2 zu breit.

   Der Sollwert ist in beiden Entwuerfen derselbe — Akkordeon
   (regionale-erlebnisse-mit-gapa-plugin) und FAQ (hotel-riessersee-faq)
   fuehren die Linie identisch mit `inset 0 0 0 1.5px #681d33` auf 610px
   Breite. Es ist eine Rolle, deshalb aendern sich alle vier Stellen
   gemeinsam und „ueberall gleich" bleibt wahr:
     .v-ruled-list__rule, .v-accordion-list-head (hier),
     .faq-card-link und .question (faq.less:31 und :322).

   Exakt 1,5px waere nur mit einem gezeichneten Strich statt eines Rahmens
   zu haben (Verlauf oder Pseudoelement). Das waere ein anderes Bauteil an
   vier Stellen und ist der Designerin im Ticket angeboten, nicht
   stillschweigend gemacht. */
.v-ruled-list__rule {
  height: 1px;
}
.v-accordion-list-head {
  border-bottom-width: 1px;
}
/* ==========================================================================
   XD-Abgleich, langer Schwanz — Anhang an korrekturen.less
   ==========================================================================

   Stand der Messung: 265 belegbare Befunde ausserhalb der beiden gesperrten
   Muster (Tab-Bausteine = Zustandsverwechslung; h2.v-headline-text
   Zeilenhoehe = Entscheidung der Designerin offen).

   Jede Regel nennt: Zahl der Stellen, Sollwert, Fundstelle (Artboard + top).
   Kein `!important` — alle Regeln liegen am Ende der Importkette und gewinnen
   bei gleicher Spezifitaet ueber die Quellenreihenfolge. Wo eine spezifischere
   Regel im Weg stand, steht die Spezifitaet im Kommentar.

   Zeilenhoehen sind nur dort uebernommen, wo der Entwurfskasten nachweislich
   mehrzeilig ist (Hoehe > 1,5 x Zeilenhoehe) — der Nachweis steht je Fall dabei.
   -------------------------------------------------------------------------- */
/* --- 1. Zitatzeile und Bildunterschrift: Rueckbau einer Uebergeneralisierung

   korrekturen.less setzt `.rs-quote-band__author, .v-history-timeline__caption`
   unbedingt auf 14px ("Entwurf 14px, live 18px"). Gemessen stimmt das nur
   mobil. Der Entwurf fuehrt beide Stellen geraeteabhaengig:

     .rs-quote-band__author   Desktop 18px · Mobil 14px
     .v-history-timeline__caption  Desktop 18px/28px · Mobil 14px/19px

   Die unbedingte Regel hat damit den Desktop-Wert ueberschrieben, den die
   Grundregel (`.rs-quote-band__author { font-size: 18px }`) bereits richtig
   hatte. 5 Stellen auf 5 Seiten (index, feste-feiern, fuer-unternehmen,
   kulinarik, inklusivleistungen) plus 5 Stellen an der Bildunterschrift.

   Fundstelle Desktop: hotel-riessersee-feste-feiern top=1597.51px
     (fs 18px, lh 24.3px, #681d33, uppercase) — derselbe top auf
     fuer-unternehmen-uebersichtsseite, kulinarik, inklusivleistungen,
     alpine-beauty-spa.
   Fundstelle Mobil:   iphone-14-pro-29 top=1221.08px (fs 14px)
                       iphone-14-pro-8  top=1268.63px (fs 14px)              */
.rs-quote-band__author {
  font-size: 18px;
}
@media only screen and (max-width: 767px) {
  .rs-quote-band__author {
    font-size: 14px;
  }
}
/* Bildunterschrift der Zeitleiste: zusaetzlich Farbe und Zeilenhoehe.
   Fundstelle Desktop: hotel-riessersee-ueber-uns top=10277.96px
     (fs 18px, lh 28px, #681d33, Kasten h=46.72px > 1,5x28=42 -> mehrzeilig)
   Fundstelle Mobil:   iphone-14-pro-13 top=9065.38px
     (fs 14px, lh 19px, #681d33, Kasten h=33.56px > 1,5x19=28.5 -> mehrzeilig)
   5 Stellen. Live stand 14px/#4a4a49/17.89px.                               */
.v-history-timeline__caption {
  font-size: 18px;
  line-height: 28px;
  color: #681d33;
}
@media only screen and (max-width: 767px) {
  .v-history-timeline__caption {
    font-size: 14px;
    line-height: 19px;
  }
}
/* --- 2. Scroll-Hinweis der Hotelkarte -------------------------------------

   Der groesste geschlossene Block des Rests: 20 Stellen auf 4 Seiten, mobil.
   Der Entwurf zeichnet den Hinweis durchgehend gleich, die Umsetzung hat ihn
   rund 2,7-fach kleiner gebaut.

   Fundstelle iphone-14-pro-8 top=7320.53px:
     Ellipse  49 x 48px, box-shadow: inset 0 0 0 2px #681d33
     Text     top=7320.9px  left=85px  fs 18px  lh 25px  #4a4a49
              Kasten h=47.68px > 1,5x25=37.5 -> mehrzeilig, Zeilenhoehe belegt
     Glyphe   top=7331.23px left=41px  fs 35px  fw 400   #681d33
   Gleiche Werte: iphone-14-pro-11 top=2902.9px, iphone-14-pro-9 top=2449.9px,
   iphone-14-pro-10 top=6327.7px (und ein zweites Mal top=14305.37px auf -8).

   Abstand: Kreis endet bei 21+49=70px, Text beginnt bei 85px -> 15px.        */
.v-hotel-map__scrollhint {
  gap: 15px;
  font-size: 18px;
  line-height: 25px;
  color: #4a4a49;
}
/* Das Abzeichen traegt die Groesse des Entwurfs. Die Glyphe allein auf 35px
   zu setzen wuerde den 18px-Kreis sprengen — Kreis und Glyphe gehoeren
   zusammen. `font-style: normal` ist kein gemessenes Feld; der Entwurf setzt
   dort schlichtes Lato ohne Kursive, die Umsetzung hat die Kursive ergaenzt. */
.v-hotel-map__scrollhint-icon {
  width: 49px;
  height: 48px;
  margin-top: 0;
  border-width: 2px;
  font-size: 35px;
  font-style: normal;
  font-weight: 400;
}
/* --- 3. Schaltflaechen erben die Schriftgroesse nicht ----------------------

   Drei Stellen messen 13.3333px — das ist der Browservorgabewert fuer
   `<button>`, nicht eine gewaehlte Groesse: fuer keine der drei setzt das
   Stylesheet eine `font-size`. Der Entwurf fuehrt alle drei mit 18px.
   4 Stellen auf 3 Seiten.

   Fundstellen: hotel-riessersee-kontakt      top=2532.03px (fs 18px, fw 400)
                iphone-14-pro-18              top=2061.03px (fs 18px)
                hotel-riessersee-impressionen top=5059.55px (fs 18px)
                iphone-14-pro-13              top=5419.75px (fs 18px)

   Der mitgemeldete Schnitt (live 500, Entwurf 400) bleibt bewusst stehen:
   500 kommt aus `.full-form .formbody .widget-submit button` und ist die
   projektweite Schaltflaechenregel, kein Versehen an dieser Stelle.         */
/* HRS-173: Die Groesse hing an `.v-gastgeber-toggle__more`, also nur an der
   Beschriftung des eingeklappten Zustands. Aufgeklappt fiel „Weniger anzeigen"
   auf die Browservorgabe fuer `<button>` zurueck (13,33px) — der Knopf wurde
   beim Umschalten sichtbar kleiner. Die Groesse gehoert an den Knopf selbst,
   dann erben beide Beschriftungen sie. */
.widget-submit button,
button.input-submit,
.v-filter-gallery__more-btn,
.v-gastgeber-toggle {
  font-size: 18px;
}
/* --- 4. Dreifach-Verweiskacheln -------------------------------------------

   12 Stellen auf 2 Seiten. Die Zeilenhoehe ist der einzige Wert, den der
   Entwurf an allen gemessenen Stellen gleich fuehrt: 37px. Live standen
   33px (Desktop) und 31px (mobil).

   Fundstelle hotel-riessersee-feste-feiern top=2494.39px
     (fs 28px, lh 37px, #681d33, Kasten h=66.12px > 1,5x37=55.5 -> mehrzeilig)
   Gleiche Zeilenhoehe: iphone-14-pro-29 top=2267.08px (28px/37px),
     hotel-riessersee-startseite-update-licorice top=10723.79px (28px/37px),
     iphone-14-pro-1 top=12290.5px (25px/37px, Kasten h=63px -> mehrzeilig)

   Die Schriftgroesse bleibt bewusst unangetastet: mobil will der Entwurf auf
   feste-feiern 28px, auf der Startseite 25px — zwei Sollwerte fuer denselben
   Baustein. Ein unbedingtes 28px loest dort 3 Stellen auf und erzeugt auf der
   Startseite 3 neue; gemessen nachgewiesen, siehe Bericht.

   Die unbedingte Regel schlaegt die bestehende Regel in
   `@media (max-width: 991px)` ueber die Quellenreihenfolge (gleiche
   Spezifitaet 0,1,0, diese Datei wird spaeter importiert).
   `.v-link-triple__link` bleibt unberuehrt — dort ist nichts gemessen.      */
.v-link-triple__text {
  line-height: 37px;
}
/* --- 5. Zeilenhoehen der 28px-Titel ---------------------------------------

   Diese Titel haben live keine eigene Zeilenhoehe und fallen auf 1,2 (33.6px)
   oder einen geerbten Wert. Der Entwurf gibt je Baustein einen festen Wert.
   Dass es 35, 37 und 38px gibt, ist die Uneinheitlichkeit des Entwurfs selbst
   — jeder Baustein ist fuer sich konsistent, deshalb je Baustein ein Wert.
   Alle Kaesten sind nachweislich mehrzeilig.                                */
/* 5 Stellen, 3 Seiten. iphone-14-pro-5 top=6245.88px
   (fs 28px, lh 35px, h=70.28px > 52.5 -> mehrzeilig) */
.v-media-cta-card__title {
  line-height: 35px;
}
/* 3 Stellen, 1 Seite. hotel-riessersee-kulinarik top=2575.49px
   (fs 28px, lh 35px, h=64.12px > 52.5 -> mehrzeilig);
   iphone-14-pro-15 top=2616.71px gleich.
   Der ebenfalls gemeldete Schnitt (400 -> 500) bleibt: auf tagungen zeigt der
   Entwurf 500, auf kulinarik 400 — zwei Sollwerte, also nicht belegbar. */
.v-bleed-feature__title {
  line-height: 35px;
}
/* 2 Stellen, 1 Seite. hotel-riessersee-alpine-beauty-spa top=3903.56px
   (fs 28px, lh 35px, h=64.12px > 52.5 -> mehrzeilig);
   iphone-14-pro-23 top=4532.78px gleich. Live stand 23px. */
.v-page-teaser-grid__title {
  line-height: 35px;
}
/* 4 Stellen, 1 Seite, beide Geraete. hotel-riessersee-ueber-uns top=9797.16px
   (fs 28px, lh 38px, h=67.12px > 57 -> mehrzeilig);
   iphone-14-pro-13 top=8322px (h=72px) und top=9282.17px (h=111.28px). */
.v-history-timeline__event {
  line-height: 38px;
}
/* 3 Stellen, 3 Seiten — nur mobil. Auf dem Desktop ist der Entwurfskasten
   einzeilig (h=29.12px bei lh 23px), der Exportwert dort also unbrauchbar;
   die Desktop-Zeilenhoehe bleibt deshalb unangetastet.
   iphone-14-pro-1 top=13989.92px (fs 28px, lh 38px, h=67.12px > 57). */
@media only screen and (max-width: 767px) {
  .v-illu-feature__title {
    line-height: 38px;
  }
}
/* 2 Stellen, 2 Seiten — nur mobil (dort setzt das Stylesheet 28px, der
   Desktop-Wert 45px wuerde mit 38px Zeilenhoehe ueberlappen).
   iphone-14-pro-12 top=208.16px und iphone-14-pro-10 top=208.16px
   (fs 28px, fw 300, lh 38px, h=67.12px > 57 -> mehrzeilig). */
@media only screen and (max-width: 767px) {
  .v-sub-hero__subline {
    line-height: 38px;
  }
}
/* 3 Stellen, 1 Seite, nur Desktop belegt.
   hotel-riessersee-fuer-unternehmen-detailseite-tagungen top=2822.14px
   (fs 14px, lh 19px, h=74.64px > 28.5 -> mehrzeilig). Live 16.8px (=1,2).
   Mobil nennt der Entwurf diesen Hinweis nicht, daher nur Desktop. */
@media (min-width: 992px) {
  .v-conference-combine__note {
    line-height: 19px;
  }
}
/* --- 6. Zitatband, mobile Groesse -----------------------------------------

   4 Stellen auf 2 Seiten. Gemessen wurde `__ghost`; das ist der unsichtbare
   Hoehenhalter des Schreibmaschineneffekts (`opacity: 0`), er erbt seine
   Werte von `__text`. Darum greift die Regel an `__text` — sonst liefen
   Hoehenhalter und sichtbarer Text auseinander.

   Fundstelle iphone-14-pro-24 top=982px (fs 28px, lh 43px, #4a4a49,
     Kasten h=336.28px -> klar mehrzeilig); iphone-14-pro-23 top=982px
     (h=164.28px). Desktop bleibt bei 30px/45px — so steht es im Entwurf
     und so ist es umgesetzt.                                                */
@media only screen and (max-width: 767px) {
  .rs-quote-band__text {
    font-size: 28px;
    line-height: 43px;
  }
}
/* --- 7. Einzelposten mit belegtem Sollwert --------------------------------- */
/* Jahreszahlen der Zeitleiste: 4 Stellen, beide Geraete.
   hotel-riessersee-ueber-uns top=9785.3px (#681d33, fs 65px);
   iphone-14-pro-13 top=8234.56px (#681d33, fs 48px). Live #4a4a49.
   Die mobile Groesse (live 45px, Entwurf 48px) bleibt: sie haengt an
   `var(--inn-h2-font-size)`, die sich auch andere Stellen teilen. */
.v-history-timeline__year {
  color: #681d33;
}
/* Bewertungsdatum: 3 Stellen auf 3 Seiten, mobil. Der Entwurf fuehrt es auf
   beiden Geraeten mit 18px, die Umsetzung verkleinert mobil auf 16px.
   iphone-14-pro-1 top=16898.81px (fs 18px). */
@media only screen and (max-width: 767px) {
  .v-review-card__date {
    font-size: 18px;
  }
}
/* GreenSign-Kennzahl: 2 Stellen. Der clamp() der Umsetzung endet an den
   falschen Punkten — Entwurf 65px Desktop, 57px mobil, live 58px/42px.
   hotel-riessersee-nachhaltigkeit top=3326.3px (fs 65px, fw 700);
   iphone-14-pro-28 top=3513.54px (fs 57px, fw 700). */
.v-greensign-stats__score {
  font-size: clamp(57px, 8vw, 65px);
}
/* Download-Ueberschrift: 2 Stellen, beide Geraete.
   hotel-riessersee-downloads-presse top=1833.5px (#681d33, fs 28px);
   iphone-14-pro-20 top=1313.1px gleich. Live #4a4a49. */
.v-download-cards__heading {
  color: #681d33;
}
/* `.v-festive-card__title` steht hier bewusst NICHT.
   Der Entwurf fuehrt den Baustein mit zwei Schnitten:
     hotel-riessersee-downloads-presse  top=2450.44px  fw 400 ("Bildnachweise")
     hotel-riessersee-zimmer-weihnachten-silvester top=1782.12px fw 500
   Live steht 500 — richtig fuer weihnachten-silvester, falsch fuer downloads.
   Ein unbedingtes 400 loest 2 Stellen auf und erzeugt 5 neue; gemessen
   nachgewiesen, siehe Bericht. Braucht eine artikelgenaue Regel. */
/* Behandlungsliste Berg-Wellness: 6 Stellen, beide Geraete. Der Entwurf
   fuehrt die drei Listentexte in #681d33, live sind sie #4a4a49.
   hotel-riessersee-berg-wellness top=6891.88px
     (fs 18px, fw 400, lh 22px, #681d33, Kasten h=40.72px > 33 -> mehrzeilig);
   iphone-14-pro-27 top=7075.27px gleich (h=66.68px).
   Der Artikel ist `.a-bergwellness-beauty` — das Dreispalten-Raster der
   Iconliste. Die gemessene Kette enthaelt `div.fe-inline-edit.fe-inline-list`;
   das ist der Bearbeitungsrahmen des Feedback-Werkzeugs und taugt nicht als
   Selektor, deshalb der Griff am Artikel. */
.a-bergwellness-beauty .single-icon > span {
  color: #681d33;
}
/* Iconlisten der Zimmeruebersicht: 4 Stellen, beide Geraete. Entwurf 400,
   live 500 — `.a-zimmer-tabs` ist der einzige Artikel mit 500; die
   gleichartigen Listen auf tagungen und fuer-unternehmen stehen schon auf
   400. Das ist der Fall "body laeuft mit 400, 500, 600 und 700" aus dem
   Typo-Abgleich.
   hotel-riessersee-zimmer-uebersicht top=3151.96px (fs 18px, fw 400).
   Die mitgemeldete Zeilenhoehe bleibt: der Entwurf nennt dort 22px und 23px
   fuer dieselbe Rolle, und die Live-Texte stehen so nicht im Export.

   Spezifitaet: der Artikel setzt 500 dreifach, am engsten mit
   `… .v-inn-single-icon span p` (0,3,2). Ein Griff nur an
   `… .single-icon > span` (0,3,1) wirkte nicht — gemessen, nicht geraten.
   Deshalb stehen hier dieselben Selektoren wie dort.                        */
.a-zimmer-tabs .v-icons-container-element-wrapper .v-inn-single-icon span p,
.a-zimmer-tabs .v-icons-container-element-wrapper .v-inn-single-icon > span,
.a-zimmer-tabs .v-icons-container-element-wrapper .single-icon > span {
  font-weight: 400;
}
/* Menue-Schlagworte: 4 Stellen, beide Geraete. Der Entwurf setzt die ganze
   Schlagwortzeile fett, die Umsetzung nicht.
   hotel-riessersee-kulinarik top=8546.41px (fs 18px, fw 700, #4a4a49);
   iphone-14-pro-15 top=9309.59px gleich. */
.a-kulinarik-menue__tag {
  font-weight: 700;
}
/* Titelzeilen des Start-Heros: 4 Stellen, beide Geraete. Der Entwurf setzt
   Licorice mit 400, die Umsetzung erbt 300.
   hotel-riessersee-startseite-update-licorice top=295.2px und top=423.2px
     (fs 160px, fw 400, Licorice, #ffffff);
   iphone-14-pro-1 top=194.8px (fs 90px, fw 400, Licorice).
   Die mobile Groesse (live 60px, Entwurf 90px) steht bewusst NICHT hier —
   siehe Bericht, Abschnitt "offen". */
.v-start-hero__line {
  font-weight: 400;
}
/* --- Fußband „Beginne jetzt deine Karriere" ------------------------------- */
/* Der Entwurf legt dieses Band mobil als dunkelgrüne Fläche über die volle
   Breite an: `iphone-14-pro-26` x0/y9604, 393x285, `background: #3f470f`,
   Text bei x55/y9625 in Weiß. Dieselbe Instanz steht am Fuß **aller 28**
   Mobil-Artboards.

   Live gab es die Fläche nicht — der Grund blieb hell (#faf6f7). Als heute
   die Textfarbe aus dem Entwurf übernommen wurde (weiß), stand damit weiße
   Schrift auf fast weißem Grund: praktisch unsichtbar. Die Farbe war
   richtig, nur die Fläche darunter fehlte. Beides gehört zusammen.

   Am Desktop bleibt es wie es ist: dort führt der Entwurf den Text grün
   (#687943) auf hellem Grund, und so steht es auch live. */
@media only screen and (max-width: 767px) {
  #footer-mod .v-footer-career {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
    box-sizing: border-box;
    /* Entwurf: Text 21px unter der Bandkante, 55px von links */
    padding: 21px 20px 28px 55px;
    background: #3f470f;
    /* Die #TEAMRIESSERSEE-Signatur liegt als externe SVG-Datei vor und laesst
       sich nicht per `fill` umfaerben. Im Entwurf sind alle ihre Pfade weiss
       (iphone-14-pro-26, y9715-9790); auf dem dunklen Band stand sie live in
       Mittelgruen und war kaum zu lesen. `brightness(0) invert(1)` macht eine
       beliebig gefaerbte Grafik rein weiss.
       (Es gaebe auch `Bilder/-footer/logo-karriere-weiss-m.svg` — der Tausch
       der Bildquelle waere aber eine Inhalts-, keine CSS-Aenderung.) */
  }
  #footer-mod .v-footer-career .v-menu-overlay-career-logo img {
    filter: brightness(0) invert(1);
  }
}
/* --- Zeilenhöhe der mobilen H2 vereinheitlichen --------------------------- */
/* Live kamen bei 45px Schrift **drei** Zeilenhöhen vor: 45px (`line-height: 1`
   aus variables.less, wo keine Artikelregel greift), 50,4px (1.12) und
   51,75px (1.15) aus rund zwei Dutzend artikelgebundenen Regeln der Form
   `.a-xxx .v-headline-type-h2 .v-headline-text`. Ob eine Überschrift eng oder
   luftig steht, hing also davon ab, ob für ihren Artikel jemand eine Regel
   geschrieben hatte. Das ist die zweite Ursache dafür, dass Überschriften von
   Seite zu Seite unterschiedlich aussehen.

   Der Entwurf gibt keinen einzigen Wert vor: für mehrzeilige display-11-Kästen
   nennt er 48px (17x), 50px (17x), 55px (11x) und 49px (5x) — teils im selben
   Artboard. Gewählt ist **50px**, aus zwei Gründen: Es ist einer der beiden
   häufigsten Entwurfswerte, und es sitzt luftiger als die 48px. Bei 45px
   Schrift sind 48px eng; abgeschnittene Unterlängen waren hier schon einmal
   ein Ticket (HRS-80, „kleine g abgeschnitten"). 45px aus `line-height: 1`
   liegt unter **jedem** belegten Entwurfswert.

   `body …` ergibt Spezifität 0,3,1 und schlägt damit die 0,3,0 der
   Artikelregeln, ohne ein neues `!important`. */
@media only screen and (max-width: 767px) {
  body .v-headline.v-headline-type-h2 .v-headline-text {
    line-height: 1.11111111;
  }
}
/* Kulinarik — Ticketdurchgang HRS-104 bis HRS-107 (05.10.2026)
   ------------------------------------------------------------------
   Anhaengbar an korrekturen.less (wird zuletzt importiert, deshalb
   gewinnt jede Regel hier bei gleicher Spezifitaet gegen custom.less).
   Sollwerte aus library/riessersee/artboards/hotel-riessersee-kulinarik.abs.html
   (Desktop 1920, Container 310..1610 = 1300px) bzw. iphone-14-pro-15 (Mobil 393).
   Jeder Ist-Wert ist am 05.10.2026 an https://hotel-rissersee.ik2d.de/kulinarik.html
   gemessen, nicht geschaetzt. */
/* ------------------------------------------------------------------
   HRS-104 — „Fuer Geniesser": Quicklinks auf Containerbreite

   Entwurf (kulinarik, y=2271): sechs Felder 195x60 bei
   x = 310 / 531 / 752 / 973 / 1194 / 1415. Alle gleich breit, Abstand
   jeweils 26px, die Reihe endet bei 1415+195 = 1610 = rechter
   Containerrand. 6*195 + 5*26 = 1300 = Containerbreite.

   Ist (1920 gemessen): 121 / 152 / 70 / 107 / 141 / 295px, Reihe endet
   bei 1257 statt 1610 — 353px zu kurz.
   Ursache: custom.less:14160 `.a-kulinarik-pills { display:flex; gap:12px }`
   zusammen mit `&__item { display:inline-flex; padding:.75rem 1.25rem }`
   (custom.less:14168) — die Pillen wachsen mit ihrem Text.

   Raster statt Flex: bei 1300px Innenbreite ergibt repeat(6,1fr) mit 26px
   Abstand exakt 195px je Spalte. Unter 1340px Viewport schrumpft der
   Container (--inn-container-width: 1340px, 20px Innenabstand); sechs
   Spalten waeren dann schmaler als das laengste Wort, deshalb dort drei
   Spalten in zwei Reihen — gleich breit und bis zum Rand, wie bestellt.
   Mobil (<992px) bleibt die Scrollleiste: der Entwurf iphone-14-pro-15
   (y=2040) zeigt dort ebenfalls unterschiedlich breite Felder
   (120/138/102), das dritte laeuft bewusst ueber den Rand hinaus. */
@media (min-width: 992px) {
  .a-kulinarik-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
  }
  /* Nebenwirkung der eigenen Korrektur, nicht neue Gestaltung: in 195px
     Spaltenbreite bricht „Hausgemachte Kuchen & Torten" auf zwei Zeilen
     um, und `align-items: stretch` zieht dann alle sechs Felder auf 72px.
     Der Entwurf zeigt denselben Zweizeiler (Textblock 140x42 bei
     x=1221, y=2282) in einem 60px hohen Feld: 2 x 21px Zeile = 42px,
     dazu 8px Innenabstand und 1px Linie oben wie unten = 60px.
     Einzeilige Felder haelt `min-height: 60px` (custom.less:14171) auf
     derselben Hoehe. Gemessen: alle sechs 195x60. */
  .a-kulinarik-pills__item {
    width: auto;
    white-space: normal;
    padding: 8px 1.25rem;
    line-height: 21px;
  }
}
@media (min-width: 1340px) {
  .a-kulinarik-pills {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* ------------------------------------------------------------------
   HRS-105 — „Fuer Geniesser": Textblock-Balken alle gleich gross und
   weiter hinter die Bilder

   Entwurf: alle fuenf `card`-Flaechen sind 1122 x 560 —
     Fruehstueck   488,2529   Laubengarten 310,3258   Bar      488,3996
     Seehaus       310,4728   Kuchen       488,5469
   Die Bildspalte liegt bei 310..960 (image_left) bzw. 960..1610
   (image_right). Der Balken ragt also 472px unter die Bilder
   (960-488 = 1432-960 = 472) und endet buendig am Container.
   Der Text sitzt bei x=1026 bzw. x=360, Breite 534 — also 538px vom
   bildseitigen Balkenrand und 50px vom Containerrand entfernt.

   Ist (1920 gemessen): Balken 650x255 / 650x278 / 650x324 / 650x324 /
   650x336 — fuenf verschiedene Hoehen, keine Ueberlappung, Balken
   beginnt erst bei 960 bzw. endet bei 960.
   Ursache: custom.less:10627 `.v-bleed-feature__panel { flex:1 1 50%;
   width:50%; max-width:50%; height:auto }` — halbe Breite, Hoehe aus
   dem Text.

   1122/1300 = 86.3077%, 472/1300 = 36.3077%, 538/1300 = 41.3846%.
   Prozentangaben, weil der Container unter 1340px Viewport mitschrumpft;
   das Seitenverhaeltnis 1122/560 haelt die Hoehe proportional, so dass
   alle fuenf Balken auf jeder Breite gleich gross bleiben.
   `min-height: fit-content` ist nur die Reissleine, falls ein Text
   einmal laenger wird als der Balken hoch ist — gemessen tritt sie bis
   992px nicht ein.
   Nur fuer die Kulinarik-Seite (`.a-kulinarik-geniesser`): dieselbe
   Komponente steht auch auf „Erleben & Entdecken" und „Das Seehaus"
   und ist dort nicht beanstandet. */
@media (min-width: 992px) {
  .a-kulinarik-geniesser .v-bleed-feature__media {
    /* Die Bilder muessen den Balken verdecken; im Quelltext stehen sie
       vor ihm und wuerden sonst darunter gezeichnet. */
    position: relative;
    z-index: 1;
  }
  .a-kulinarik-geniesser .v-bleed-feature__panel {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    width: 86.3077%;
    max-width: none;
    aspect-ratio: 1122 / 560;
    height: auto;
    min-height: fit-content;
  }
  .a-kulinarik-geniesser .v-bleed-feature--image_left .v-bleed-feature__panel {
    margin-left: -36.3077%;
    padding-left: 41.3846%;
  }
  .a-kulinarik-geniesser .v-bleed-feature--image_right .v-bleed-feature__panel {
    margin-right: -36.3077%;
    padding-right: 41.3846%;
  }
}
/* ------------------------------------------------------------------
   HRS-106 — „Ihre Vorteile": Abstand nach dem Hashtag

   Entwurf: eyebrow „#4-Gang-Menue" bei y=8546, Titel display-16 bei
   y=8605 — 59px von Oberkante zu Oberkante.
   custom.less:14306 setzt dafuer bereits `margin: 0 0 36px` auf den
   Hashtag-Absatz. Gemessen wirkt das aber nur auf der dritten Karte:
     #4-Gang-Menue      Abstand 0px   (Oberkante zu Oberkante 23px)
     #gemeinschaftstisch Abstand 0px   (23px)
     #halbpension        Abstand 36px  (59px — Soll)
   Ursache ist nicht der Wert, sondern die Spezifitaet (LEARNINGS §1):
   im gebauten Stylesheet (lessc main.less) steht
     … .single-icon > span p:has(> .a-kulinarik-menue__tag)   (custom.less:14306)
   VOR
     … .single-icon > span p:last-child { margin-bottom: 0 }  (custom.less:14326)
   Beide sind (0,4,1) — die spaetere gewinnt. Auf den Karten 1 und 2 ist
   der Hashtag-Absatz der letzte im Quelltext, auf Karte 3 folgt noch der
   Button; nur deshalb sieht Karte 3 richtig aus.

   Dieselben Selektoren wie dort, nur spaeter — mehr braucht es nicht.
   Die Regel haelt auch, wenn der Hashtag-Absatz in Contao nach vorne
   gezogen wird (siehe Bericht): `order: -1` ist dann wirkungslos, der
   Abstand bleibt. */
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon > span p:has(> .a-kulinarik-menue__tag),
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon > span p:has(> .a-kulinarik-menue__tag) {
  margin-bottom: 36px;
}
/* ------------------------------------------------------------------
   HRS-292 / HRS-219 / HRS-272 — „Ihre Vorteile": Schatten um die Karte

   HRS-292: „um jede weisse box ist ein schlagschatten angedacht um die
   box optisch zu begrenzen". Auf HRS-219 dieselbe Ansage als Antwort auf
   unsere Rueckfrage genau zu dieser Stelle: „weisser Kasten mit schatten
   rundum / Bitte genauso wie im design und immer einheitlich".

   Die Karte ist bereits weiss (custom.less:14432 `background: #fff`) und
   hat die Entwurfsmasse — gemessen 410x857 bei 1440px, Entwurf 410x714.2
   bei 35px Abstand. Unsichtbar war sie, weil der Abschnitt selbst auf
   @rs-surface (#faf6f7) steht: weiss auf fast-weiss ohne Kante.

   Der Schatten steht NICHT im Entwurf — der XD-Export enthaelt keinen
   einzigen Schlagschatten, jede box-shadow dort ist `inset` (LEARNINGS,
   „Zwei Dinge, die der Entwurf nicht hergibt"). Er kommt wie bei HRS-30
   und HRS-57 aus dem Ticket; @rs-card-shadow ist derselbe Wert wie an
   allen anderen Karten, damit „immer einheitlich" auch stimmt.

   Gleiche Spezifitaet wie die Regel in custom.less (0,3,0), nur spaeter
   importiert — kein !important noetig (LEARNINGS §64). Gilt zugleich fuer
   den Mobil-Slider, der dieselben Karten zeigt; dass der Schatten dort
   nicht mehr abgeschnitten wird, ist seit HRS-219 erledigt
   (overflow-clip-margin: 18px). */
.a-kulinarik-menue .ce_rsce_iconboxes .single-icon,
.a-kulinarik-menue .ce_rsce_iconboxes .v-inn-single-icon {
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
}
/* Und damit man ihn auch sieht: Das Raster ist 1300px breit, drei Karten zu
   410px plus zweimal 35px Abstand sind exakt 1300 — Karte 1 liegt also
   buendig an der linken Behaelterkante, Karte 3 an der rechten, und oben
   wie unten ebenso. Der Behaelter traegt Contaos `.block` mit
   `overflow: hidden` (HRS-80); der Schatten haette genau an den Seiten
   gefehlt, die HRS-30 und HRS-57 schon einmal beanstandet haben.

   Dieselbe Rezeptur wie bei HRS-112/146/152 weiter unten: `clip` statt
   `hidden` plus 24px Freiraum. 24 ist der Hauswert und reicht fuer den
   18px weichen Schatten; `clip` statt `visible`, damit seitlich nichts
   ausbrechen und die Seite breiter machen kann. */
.a-kulinarik-menue .ce_rsce_iconboxes {
  overflow: clip;
  overflow-clip-margin: 24px;
}
/* ------------------------------------------------------------------
   HRS-107 — „Feste feiern": Trenner zu hoch

   Entwurf: das Band „Feste feiern" ist 1920 x 731 (Bild 0,9164
   1920x731; Glasflaeche 0,9163 1098x732; Bildhaelfte 960,9164 960x730).
   Seitenverhaeltnis also 1920/731 = 2.63.

   Ist (1920 gemessen): 913px hoch — 182px zu viel.
   Ursache: `@media (min-width:992px) { .a-trenner-cta .v-trenner {
   aspect-ratio: 2775 / 1320 } }` (= 2.10), custom.less — im gebauten
   Stylesheet nachgeprueft.
   Das Verhaeltnis stammt vom Verfuegbarkeits-Trenner, dessen Bild
   2775x1320 misst — der Artikel traegt dieselbe Sammelklasse
   `a-trenner-cta`. Hier ist das Bild 2885x1097, und der Entwurf will
   ohnehin 1920x731.

   Gleiche Spezifitaet (0,2,0) wie `.a-trenner-cta .v-trenner`, aber
   spaeter — und nur fuer diesen Artikel, damit der Verfuegbarkeits-
   Trenner bleibt, wie er ist.

   ---------------------------------------------------------------------
   NACHTRAG 29.10.2026 — Bestellung: „Kann man den Silvester Trenner 1:1
   auch bei Seehaus machen (Hoehe ist unterschiedlich)?"

   Das Seitenverhaeltnis oben war nur die halbe Korrektur. Es loest die
   Hoehe aus der Breite — also wird das Band nach unten immer flacher,
   waehrend jeder andere Trenner eine Untergrenze hat. Gemessen an den
   ausgelieferten Seiten:

       Breite   Kulinarik   Silvester   Differenz
       1920px     731px       722px         9px
       1440px     548px       605px        57px
       1280px     487px       538px        51px
        992px     378px       480px       102px

   Bei 992px fehlten also 102px — die 9px bei 1920 waren die Ausnahme,
   nicht die Regel.

   Ursache ist die Sammelklasse: `.a-trenner-cta .v-trenner` setzt
   `min-height: 0 !important` und ersetzt die allgemeine Mindesthoehe
   `clamp(480px, 42vw, 722px)` (custom.less:2048) durch ein festes
   Verhaeltnis. HRS-107 hat damals nur das Verhaeltnis getauscht, nicht
   das Verfahren — deshalb stimmte die Hoehe genau bei einer Breite.

   Jetzt dieselbe Mechanik wie Silvester, und zwar ueber die Rasterzeile
   statt ueber `min-height`: Deren `!important` liesse sich nur mit einem
   weiteren `!important` schlagen, und davon hat diese Datei genug. Die
   Zeile `minmax(untergrenze, auto)` leistet dasselbe — Untergrenze wie
   bei allen anderen Trennern, und waechst mit, wenn der Text laenger
   wird. --------------------------------------------------------------- */
@media (min-width: 992px) {
  .a-kulinarik-feste .v-trenner {
    aspect-ratio: auto;
    height: auto;
    grid-template-rows: minmax(clamp(480px, 42vw, 722px), auto);
  }
  /* Die Sammelklasse stellt das Bild auf `height: 100%` einer festen
     Hoehe. Ohne diese Zeile bleibt es an der entfallenen Hoehe haengen. */
  .a-kulinarik-feste .v-trenner .v-trenner__media {
    height: auto;
  }
}
/* ===========================================================================
   Nachzug nach Ansage vom 05.10.2026 — und was die Messung daraus gemacht hat
   ---------------------------------------------------------------------------
   Vorgabe war: Farben je Seite wie im Entwurf, Schriftschnitte auf den
   Mehrheitswert desselben Elements, Größen nachziehen. Umgesetzt und gegen
   alle 28 Seiten gemessen: **199 → 226**. Der Versuch hat mehr kaputt gemacht
   als behoben. Die Gründe, damit es niemand noch einmal versucht:

   1. **Die Mehrheit ist nicht der Sollwert, wenn der Entwurf Zustände
      unterscheidet.** `.v-feature-list-card__title` führt aktiv
      #681d33/700 und ruhend #b6b6b6/400. Setzt man den Mehrheitswert fest,
      bricht der jeweils andere Zustand — gemessen +6 Farb- und +5
      Schnittbefunde.
   2. **Dieselbe Komponente hat je Seite einen anderen Sollwert, und „je
      Seite" reicht nicht.** `.v-press-releases__year-title` will auf einer
      Seite #b6b6b6, auf derselben Seite aber #681d33 für das laufende Jahr.
      Das ist eine Zustandsklasse im Template, keine CSS-Frage.
   3. **Größenänderungen verschieben die Seite und damit die Zuordnung.**
      Das Prüfwerkzeug paart über Text und relative Höhe; ändert sich eine
      Größe, rutschen Folgeelemente und werden anders gepaart. Ein Teil der
      +30 bei `span` ist dieser Effekt, kein echter Fehler.

   Geblieben ist deshalb nur, was die Messung als Netto-Verbesserung
   ausgewiesen hat. Alles andere steht im Ticket für die Designerin, weil es
   ohne ihre Entscheidung nicht auflösbar ist.
   =========================================================================== */
/* Tagungen, Bleed-Baustein: Entwurf 500 für den seitlichen Titel (3 von 3)
   und den Haupttitel (2 von 2). Gemessen: −5 Befunde, +1. */
.a-tagungen-natur .v-bleed-feature__side-title,
.a-tagungen-natur .v-bleed-feature__title {
  font-weight: 500;
}
/* ==========================================================================
   Verzerrte Bilder — gemeldet an „Ihre Vorteile" auf Kulinarik, gemessen
   dann an 16 Stellen auf beiden Auftritten (40 Vorkommen, 1920 und 393).

   Eine Ursache: Die Bilder bekommen eine feste Hoehe und zusaetzlich eine
   `max-width` (oder umgekehrt), aber kein `object-fit`. Reicht die gekappte
   Breite fuer die gesetzte Hoehe nicht, quetscht der Browser das Bild statt
   es zu verkleinern. Beispiel Bus-Icon auf „Gruppen": 65x27 natuerlich,
   `height: 50px` braeuchte 120px Breite, `max-width: 64px` kappt sie —
   Ergebnis 64x50 und 47% Verzug.

   `object-fit: contain` aendert kein Layout: die Box bleibt, das Bild wird
   darin eingepasst statt verzogen.
   ========================================================================== */
.icon-img-container img,
.icon-img-container svg,
.v-media-cta-cards__icon-item img {
  object-fit: contain;
}
/* „Ihre Vorteile" auf Kulinarik — der schwerste Fall, 107% Verzug.
   Die Illustrationen sind 1320x992 (4:3) und liefen auf 330x120.
   Die Sektionsregel setzt `max-width: 330px` und `height: auto`, also alles
   richtig — aber die globale Notnagel-Regel `.icon-img-container img`
   (max-width/max-height 120px) deckelte zusaetzlich die Hoehe. Ihr Kommentar
   nimmt genau diese Sektion ausdruecklich aus („laesst aber die Sektionen
   unberuehrt, die ihre Groesse selbst setzen, etwa die 330px-Illustrationen
   bei ‚Ihre Vorteile' auf Kulinarik") — die Ausnahme stand aber nie im Code.
   Das holt sie nach: ohne Hoehendeckel rendern die Bilder 330x248. */
.a-kulinarik-menue .ce_rsce_iconboxes .icon-img-container img,
.a-kulinarik-menue .ce_rsce_iconboxes .icon-img-container svg {
  max-height: none;
}
/* ==========================================================================
   Hero-Kreispatch: die Glasscheibe stand ringsum ueber die Grafik hinaus.

   HRS-19 hat `inset: 0` gesetzt und dazu notiert, das XD zeige „Glasscheibe
   213px, Stempelring 202px". Nachgemessen stimmt die Zuordnung nicht: das
   213er-Element im Artboard ist **transparent** (eine Begrenzung, keine
   Flaeche), der 202er traegt als einziger einen Radius (101px) — das ist die
   Scheibe — und der Stempelring ist der innere Kreis mit 146px. Dieselben
   drei Kreise stehen im Mobil-Artboard mit 140,5 / 133,1 / 96,2.

   Die Scheibe misst im Entwurf also 202 von 213 (Desktop) und 133,1 von
   140,5 (mobil) — beide Male rund 94,8 % des Aussenmasses. Live lief sie auf
   100 % und damit sichtbar ueber die Grafik hinaus, die selbst nur 202px
   breit ist.

   Die Deckkraft aus HRS-19 (55 % statt vorher 18 %) bleibt unangetastet —
   beanstandet war seinerzeit, dass die Scheibe kaum zu sehen war, nicht ihre
   Groesse. Als Prozentwert gilt die Korrektur auf beiden Breiten.
   ========================================================================== */
.rs-kreis-patch .rs-kreis-patch__glass {
  inset: 2.6%;
}
/* ==========================================================================
   Ticketrunde vom 06.10.2026 — erster Stapel
   ========================================================================== */
/* HRS-112/119/120/128/135/140/143/146/152/153: Kartenschatten abgeschnitten.
   Gemessen über alle Seiten: Der Schatten hängt korrekt an der Karte, wird
   aber vom umgebenden Container gekappt. Dessen `overflow: hidden` ist dort
   weder Slider-Maskierung noch Absicht — keine der Komponenten hat eine
   eigene overflow-Regel, es kommt vom Contao-`.block`.

   `overflow: clip` mit `overflow-clip-margin` lässt genau so viel heraus wie
   der Schatten breit ist (0 0 18px), ohne horizontalen Breakout zu erlauben.
   Gemessen an betroffenen Elementen: Inklusivleistungen 16 → 0,
   Nachhaltigkeit 6 → 0, Alpine Beauty Spa 2 → 0. */
.v-inclusions-swiper__group,
.ce_rsce_feature_list_cards.v-feature-list-cards,
.ce_rsce_team_with_icons.a-alpine-team-card {
  overflow: clip;
  overflow-clip-margin: 24px;
}
/* HRS-140: „Darauf achten wir" ohne Versalien.
   Die Versalien-Regel weiter oben stammt aus dem Entwurf und gilt an 19
   Stellen — zurücknehmen würde 18 davon mitkippen. Deshalb nur diese
   Sektion ausgenommen; das Ticket schlägt hier den Entwurf. */
.a-nachhalt-achten .v-feature-list-card__title {
  text-transform: none;
}
/* HRS-130: Der Hinweiskasten „Bitte beachten Sie" dehnte sich auf die Höhe
   der Textspalte daneben und hatte darunter rund 170px Leerraum.
   Gemessen: Der Kasten (`.v-erleben-info-card`, 635×363) sitzt in einer
   `.ce_column`, die ihrerseits Rasterzelle einer `.row` mit `display: grid`
   ist — deren Vorgabe `stretch` zieht die Spalte auf die Zeilenhöhe. Der
   Inhalt misst nur 160px. Das Rasterelement ist die Spalte, nicht der
   Kasten, deshalb greift `align-self` dort. */
.ce_column:has(> .v-erleben-info-card) {
  align-self: start;
}
.v-erleben-info-card {
  align-self: start;
  height: auto;
}
/* HRS-136 steht noch aus: Der Ansatz über `grid-template-columns: max-content`
   setzte die Spur korrekt auf 197,9px, „Broschüre" blieb aber bei 150px —
   dort gewinnt eine spezifischere Regel auf dem Anker. Muss im nächsten
   Durchgang an der Ursache gelöst werden; eine wirkungslose Regel bleibt
   hier bewusst nicht stehen. */
/* HRS-125: Das Sprungmenü auf Kulinarik lief mit 1px in Bordeaux auf 35 %
   Deckkraft und unterstrichenem Text — der Link-Vorgabewert, nicht das
   Button-Atom. Gemessen an den Outline-Buttons derselben Seite: 2px voll
   deckend, kein Unterstrich. Genau darauf gezogen. */
.a-kulinarik-pills__item {
  border-width: 2px;
  border-color: #681d33;
}
/* HRS-147: Mail und Telefon im Fließtext — nur fett, in der Fließtextfarbe.
   Der Unterstrich ist in `main.less` über die Ausnahmeliste erledigt.
   Hier greift bewusst `.mod_article` und nicht `.rte`: die beanstandeten
   Links auf „Feste & Feiern" sitzen in einer Headline-Komponente
   (`.v-headline-text-container`), nicht in einem Fließtextelement — gemessen,
   nicht vermutet. Der Fußbereich bleibt außen vor, er ist schon richtig.
   `inherit` wäre hier wirkungslos: Das umgebende `<span class="text-primary">`
   stammt aus dem Redaktionssystem und vererbt genau das Bordeaux, das weg
   soll. Deshalb die deklarierte Fließtextfarbe ausdrücklich.

   Der Unterstrich muss hier trotz der Ausnahmeliste noch einmal stehen: Auf
   dieser Seite unterstreicht zusätzlich eine abschnittseigene Regel
   (`.a-feste-links-partners .v-headline-text-container a`, custom.less).
   Sie hat dieselbe Spezifität wie diese hier — den Stich macht also die
   Importreihenfolge, und die entscheidet nur über Eigenschaften, die hier
   auch genannt sind. */
/* Nachtrag 07.10.2026: `.mod_article` war zu weit gegriffen.

   Die Regel traf alles, was irgendwo in einem Artikel auf eine Mail- oder
   Telefonadresse zeigt — auch **Schaltflaechen** (Beschriftung wurde grau
   statt weiss) und die **Teamkacheln** (`.v-team-with-icons__link`, dort steht
   die Adresse in einem runden Symbolknopf mit eigener Farbgebung). Beides war
   nie bestellt und wurde beanstandet.

   Bestellt war HRS-147 fuer Mail- und Telefonadressen im **Fliesstext**. Genau
   darauf ist die Regel jetzt begrenzt — auf die zwei Behaelter, in denen
   Fliesstext steht: `.rte` (Redaktionstext) und `.v-headline-text-container`
   (dort sassen die urspruenglich beanstandeten Links auf „Feste & Feiern",
   siehe oben).

   Eingrenzen statt Ausnahmen stapeln: Jede weitere Komponente mit eigener
   Farbgebung haette sonst eine eigene `:not()`-Ausnahme gebraucht, und die
   faellt erst auf, wenn sie jemand sieht. */
/* Nachtrag 27.10.2026 (HRS-277): Auch `.rte` war noch zu weit.

   Die Designerin fragte „text bitte nicht bold (sind jetzt alle links
   bold??? ich hoffe nicht :D)". Nachgemessen ueber fuenf Seiten, alle
   `tel:`- und `mailto:`-Links: **genau zwei** waren fett — Telefon und Mail
   im Direktkontakt-Kasten auf /kontakt. Jeder andere Kontaktbaustein
   (Kontaktblock, Trenner, Teamkachel, Fussbereich) lief bereits mit 400.

   Der Grund ist eine Besonderheit des Direktkontakts: Er ist der einzige
   dieser Bausteine, der **innerhalb** von `.rte` ausgegeben wird. Damit
   sah ihn die Regel als Fliesstext an, obwohl er eine eigene Komponente
   mit Symbolknopf und eigener Farbgebung ist — derselbe Fehler wie am
   07.10., nur eine Ebene tiefer.

   Der Entwurf bestaetigt 400: Im Artboard stehen alle drei Zeilen des
   Kastens auf 18px/400, mobil (`iphone-14-pro-18`) wie Desktop
   (`hotel-riessersee-kontakt`). Fett war hier nie gezeichnet.

   Ausgenommen werden die Kontaktbausteine ueber ihre eigene Linkklasse,
   nicht ueber den Seitennamen. Die Liste ist dieselbe wie in `main.less`
   bei der Unterstrich-Ausnahme — wer dort einen Baustein ergaenzt, findet
   ihn hier wieder. Drei der vier sitzen heute gar nicht in `.rte`; sie
   stehen vorsorglich mit drin, damit ein spaeterer Umbau des Templates
   nicht dieselbe Meldung ein drittes Mal ausloest. */
.mod_article .rte a[href^="mailto:"]:not(.v-contact-phone-mail__link):not(.v-trenner__contact-link):not(.v-contact-block__item):not(.v-team-with-icons__link),
.mod_article .rte a[href^="tel:"]:not(.v-contact-phone-mail__link):not(.v-trenner__contact-link):not(.v-contact-block__item):not(.v-team-with-icons__link),
.mod_article .v-headline-text-container a[href^="mailto:"]:not(.v-contact-phone-mail__link):not(.v-trenner__contact-link):not(.v-contact-block__item):not(.v-team-with-icons__link),
.mod_article .v-headline-text-container a[href^="tel:"]:not(.v-contact-phone-mail__link):not(.v-trenner__contact-link):not(.v-contact-block__item):not(.v-team-with-icons__link) {
  color: #4a4a49;
  font-weight: 700;
  text-decoration: none;
}
/* HRS-129: Die Zebrastreifen der Preistabelle liefen in Bordeaux auf 6 %
   (rgba(104,29,51,0.06)) und wirkten dadurch rosé. Das Ticket verlangt Grau.
   Ein Sollwert steht weder im Ticket noch im Entwurf, deshalb bewusst
   abgeleitet statt erfunden: dieselbe Deckkraft, aber die **deklarierte**
   Fließtextfarbe #4a4a49 als Grundton. Helligkeit bleibt damit gleich, nur
   der Farbstich verschwindet. */
.a-feste-feiern-preise tbody tr:nth-child(odd) td {
  background: rgba(74, 74, 73, 0.06);
}
/* HRS-116 + HRS-145: Der Schatten beim Überfahren der Medienkacheln.

   Beide Tickets verlangen dasselbe an verschiedenen Stellen. Deshalb hier
   nicht die dritte Einzelregel, sondern die Ursache:

   Gemessen über alle 25 Hotelseiten — die Kachel ist an **keiner einzigen**
   Stelle selbst anklickbar. Der Link ist immer ein Knopf darin („Jetzt
   anfragen", „Weitere Details"), und an drei Stellen gibt es gar keinen.
   Ein Schatten beim Überfahren verspricht dort eine Klickfläche, die es
   nicht gibt.

   Im Stylesheet stand der Effekt bereits an vier Stellen einzeln abgeschaltet
   (`a-tagungen-pauschalen`, `a-faq-entdecken`, zweimal
   `a-regionale-ausfluege`). Die FAQ-Regel war dabei wirkungslos:
   `body.rs-motion .v-media-cta-card:hover` (0,3,0) schlägt
   `.a-faq-entdecken .v-media-cta-card:hover` (0,2,0) — der klassische Fall
   aus LEARNINGS §1. Deshalb dieselbe Spezifität wie die Ursprungsregel.

   Das Heranzoomen des Bildes bleibt: Danach hat niemand gefragt. */
body.rs-motion .v-media-cta-card:hover,
body.rs-motion .v-media-cta-card:focus-within {
  box-shadow: none;
  transform: none;
  background: transparent;
}
/* HRS-111: Aufzählungspunkte der Zimmerliste in Grau statt Bordeaux.
   Der Vorgabewert von `.rs-list-bullets` ist #681d33; sechs Komponenten
   setzen ihn bereits auf #4a4a49 („neutral, nicht primary"), die Zimmerliste
   war noch nicht dabei.
   Bewusst nur hier: Eine Zählung über alle 24 Hotelseiten ergibt 175 Punkte in
   Bordeaux gegenüber 225 in Grau — der Vorgabewert zu kippen würde also weit
   über dieses Ticket hinaus wirken. Die Frage steht im Ticket. */
.v-room-tabs__features.rs-list-bullets li::before {
  background: #4a4a49;
}
/* HRS-121 / HRS-135: Die Mail-Schaltfläche der Teamkacheln schnitt die
   Adresse ab. Hier standen dafür ab 1280px angehobene Obergrenzen
   (320/250px, für `.a-gastgeber` 355/300px) — gemessen an der längsten
   Adresse von Alpine Beauty Spa und Über uns.

   **Abgelöst durch HRS-308** (siehe den Block am Dateiende): Die Designerin
   hat denselben Fehler am 29.10.2026 auf Seehaus erneut gemeldet —
   „leitung-kueche@riessersee-hotel.de" braucht 283px und lag damit über der
   250px-Grenze. Seehaus war 2026 nicht unter den vermessenen Seiten.

   Eine dritte, noch höhere Zahl hätte beim nächsten längeren Namen wieder
   abgeschnitten. Die Begrenzung kommt jetzt von der Karte selbst; wie das
   geht, ohne sich im Kreis zu drehen (der Einwand, der hier stand), steht
   dort. Die Regeln sind deshalb hier entfallen und nicht etwa vergessen
   worden. */
/* HRS-122: Der Umschalter „Mehr/Weniger anzeigen" unter den Teamkacheln lief
   als reiner Text ohne Rahmen. Der Entwurf zeigt dort einen Outline-Button.
   Werte nicht erfunden, sondern vom Outline-Button derselben Seite
   übernommen (Kopfbereich „Infocenter"): 2px, #681d33, 11px/30px Innenabstand.
   Der weiße Grund ist nötig, weil die Trennlinie hinter dem Knopf durchläuft.
   Der Vorfahre muss mit in den Selektor: `.a-gastgeber .v-gastgeber-toggle`
   setzt `border: 0` und hätte eine einklassige Regel geschlagen (LEARNINGS §1). */
.a-gastgeber .v-gastgeber-toggle {
  border: 2px solid #681d33;
  background: #fff;
  padding: 11px 30px;
  border-radius: 0;
}
/* HRS-123: Auf „Über uns" soll der weiße Kasten hinter dem Text weg — der
   graue Abschnittsgrund bleibt, wie die Designerin ausdrücklich schreibt.
   Bewusst nur auf dieser Seite: Dasselbe Element steht mit identischen
   Maßen (528x601) auch auf der Startseite, und dort ist laut HRS-108 ein
   weißer Abschnittsgrund vorgesehen — der Kasten fällt dann ohnehin nicht
   auf. Nur der Hintergrund fällt weg, Innenabstände und Satz bleiben. */
body.v-page-ueber-uns .v-illu-feature__card {
  background: transparent;
}
/* HRS-133: In den Symbolreihen begann der Text je nach Symbolgröße auf
   unterschiedlicher Höhe — gemessen auf „Erleben & Entdecken" streuten die
   Symbole zwischen 40 und 89px, die Textoberkanten um 36px.
   Der Symbolkasten bekommt deshalb eine einheitliche Höhe (89px, die größte
   gemessene — so wird kein Symbol kleiner) und die Symbole stehen darin auf
   einer gemeinsamen Standlinie. Reihen, deren Symbole ohnehin gleich groß
   sind, ändern sich dadurch nicht. */
.v-icons-container-element .icon-img-container {
  min-height: 89px;
  display: flex;
  align-items: flex-end;
}
/* HRS-146: Die Partnerkacheln warfen ihren Schatten, er wurde aber von zwei
   ineinanderliegenden Kästen abgeschnitten — beide enden genau an der
   Kachelkante. Dasselbe Muster wie bei den Inklusivleistungen (HRS-152):
   `clip` statt `hidden`, dazu 24px Freiraum ringsum. Der Schatten ist 18px
   weich und passt damit vollständig hinein, ohne dass etwas ausbrechen kann. */
.v-partner-boxes-database,
.v-partner-boxes-database__group {
  overflow: clip;
  overflow-clip-margin: 24px;
}
/* HRS-117: Der Knopf in der Kachel „Outdoor-Tagung" war 159px breit, die
   Kachel bietet innen 251px. Der Entwurf zeigt ihn über die volle
   Textfeldbreite. Nur in dieser Kachel-Komponente, nicht an allen Knöpfen.

   Ausnahme von „kein neues !important": Die globale Knopfregel
   `.v-button > a` setzt `width: auto !important`. Dagegen kommt keine
   Spezifität an — ein `!important` lässt sich nur mit einem `!important`
   schlagen. `min-width` muss mit zurückgenommen werden, sonst hielte der
   Outline-Button seine 160px gegen die Kachelbreite, sobald diese schmaler
   wird. */
.v-bleed-feature__cta .v-button > a {
  width: 100% !important;
  min-width: 0;
  justify-content: center;
}
/* HRS-159: Die Kopfzeile soll höher werden. Ihre Höhe ist ein Backend-Feld
   (Design-Konfiguration → `inn_header_height`, als `--inn-header-height`
   ausgegeben), die Designerin kann sie also selbst ändern — der Entwurf
   nennt 112px, live stehen 90px.

   Eine Stelle hing an den 90px fest: Der Aufmacher der Blogdetailseite hatte
   `margin-top: 228px` fest verdrahtet, abgeleitet aus „172px Abstand unter
   einer 112px hohen Kopfzeile, im Verhältnis auf 90px heruntergerechnet"
   (138 + 90 = 228). Bei einer höheren Kopfzeile wäre der Abstand damit
   stillschweigend falsch geworden.

   Jetzt rechnet die Regel mit: Der Faktor 1 + 172/112 = 2,5357 ergibt bei
   90px wieder 228px und bei 112px die vollen 112 + 172 = 284px des Entwurfs.
   Damit stimmt der Abstand bei jedem eingestellten Wert. */
.v-news-detail__hero {
  margin-top: calc(var(--inn-header-height, 90px) * 2.5357);
}
/* HRS-142: Die Ü-Punkte des Schreibschrift-Titels lagen auf der Augenbraue
   darüber („Über uns" über „RIESSERSEE HOTEL").

   Ursache ist die Zeilenhöhe: Licorice läuft mit 120px Schrift in einer
   108px hohen Zeile (Faktor 0,90). Die Zeichen brauchen gemessen 129px —
   die überstehenden 21px verteilen sich je zur Hälfte nach oben und unten,
   und oben sitzt genau die Augenbraue. Nachgemessen über sechs Seiten:
   Bei allen vier Schreibschrift-Trennern beginnt die Zeichenfläche des
   Titels 1px *über* dem Ende der Augenbraue; auffällig wird das nur dort,
   wo der Titel Umlautpunkte oder hohe Oberlängen hat.

   1,1 gibt 132px und damit etwas mehr, als die Zeichen brauchen. Einheitslos,
   damit es bei den kleineren Schriftgrößen auf Tablet und Handy mitskaliert.
   Die Trenner mit gewöhnlicher Schrift (Lato, 65px/72,8px) haben bereits 9px
   Luft und bleiben unberührt. */
.v-trenner--title-script .v-trenner__title {
  line-height: 1.1;
}
/* HRS-141: Die Überschrift „Klimaneutrale Bestellung bei Montana" lief über
   die volle Containerbreite (1300px), obwohl darunter zwei Spalten stehen —
   Text links, Bildtafel rechts. Gewünscht ist eine zweizeilige Überschrift
   über der Textspalte.
   Der Wert ist nicht gewählt, sondern aus zwei Messungen eingeklemmt:
     • Einzeilig bräuchte die Überschrift 1054px; zwei Zeilen ergeben sich
       ab einer Breite von 655px (schrittweise ausgemessen).
     • Die Bildtafel rechts beginnt bei x=975, die Überschrift bei x=310 —
       frei sind also 665px.
   665px ist damit der einzige Wert, der beides erfüllt: genau zwei Zeilen,
   und nichts läuft unter die Bildtafel. Mit der Textspalte (635px) wären es
   drei Zeilen gewesen.
   Auf dem Handy wirkungslos, dort ist der Container ohnehin schmaler. */
.a-nachhalt-montana .v-headline-text {
  max-width: 665px;
}
/* HRS-154: Zwischen der letzten Kachel („Im Naturkino …") und der Überschrift
   „Alle Infos für Ihren Aufenthalt" klaffte eine Lücke von rund 555px.
   Sie entsteht nicht an einer Stelle, sondern aus fünf gestapelten
   Innenabständen: Swiper 48px + Raster 80px + `.inside` 100px + Artikel 72px
   unterhalb, dazu Artikel 32px + `.inside` 100px oberhalb.
   Das Artboard „Inklusivleistungen" verlangt 87px: Die letzte Kachel endet
   bei y=7654, die Überschrift beginnt bei y=7741.
   Deshalb unten auf null und der ganze Abstand oben in einem Wert — so steht
   er an einer Stelle und ist später nachvollziehbar. */
.a-inklusiv-list .inside {
  padding-bottom: 0;
}
.a-inklusiv-list .a-inklusiv-grid {
  padding-bottom: 0;
}
.mod_article.a-inklusiv-list {
  padding-bottom: 0;
}
.mod_article.a-inklusiv-staymate {
  padding-top: 0;
}
.a-inklusiv-staymate .inside {
  padding-top: 87px;
}
/* Die Kachelgruppen trennt ein Abstand von 115px. Hinter der *letzten*
   Gruppe ist er nur Leerraum und machte allein ein Fünftel der Lücke aus.
   Zwischen den Gruppen bleibt er unverändert. */
.a-inklusiv-list .v-inclusions-swiper__group:last-of-type {
  padding-bottom: 0;
}
/* HRS-155: Zwischen dem Kartenkarussell und „Hotelzimmer" standen gemessen
   419px. Das Artboard „Feste & Feiern" verlangt 200px: Die Karten (420x745)
   enden bei y=7098, die Überschrift beginnt bei y=7298.
   Wie bei HRS-154 stapeln sich hier mehrere Innenabstände (Artikel 159,36px
   unten, 159,36px oben, dazu je 100px vom inneren Rahmen). Deshalb unten auf
   null und der gesamte Abstand in einem Wert oberhalb.
   124px und nicht 200px, weil unter den Karten noch die Blätterpfeile stehen:
   Sie belegen gemessen 76px, die im Entwurf in den 200px enthalten sind. */
.mod_article.a-feste-feiern-hochzeiten {
  padding-bottom: 0;
}
.a-feste-feiern-hochzeiten .inside {
  padding-bottom: 0;
}
.mod_article.a-feste-feiern-zimmer {
  padding-top: 0;
}
.a-feste-feiern-zimmer .inside {
  padding-top: 124px;
}
/* HRS-151: Zwischen „Für die Presse" und „Pressemeldungen" standen gemessen
   378px. Das Artboard „Downloads Presse" verlangt 157px: Der graue Kasten
   endet bei y=2707, die Überschrift beginnt bei y=2864.
   Gleiches Muster wie HRS-154 und HRS-155 — Artikel 72px und innerer Rahmen
   100px unterhalb, Artikel 88px und innerer Rahmen 100px oberhalb. Deshalb
   wieder: unten auf null, der gesamte Abstand in einem Wert oberhalb.
   139px und nicht 157px, weil das Überschriften-Element selbst noch 18px
   mitbringt — nachgemessen, nicht überschlagen. */
.mod_article.a-downloads-presse {
  padding-bottom: 0;
}
.a-downloads-presse .inside {
  padding-bottom: 0;
}
.mod_article.a-downloads-meldungen {
  padding-top: 0;
}
.a-downloads-meldungen .inside {
  padding-top: 139px;
}
/* HRS-139: Im Entwurf liegen Überschrift und Tabelle des GreenSign-Blocks auf
   einer weißen Karte (Artboard „Nachhaltigkeit": 1300x443 bei x=310, y=3321).
   Live fehlte sie ganz — der Inhalt stand direkt auf der Seite.
   Die Hülle `__card` kommt aus der Vorlage; Überschrift und Tabelle sind
   Geschwister und hätten sonst je einen eigenen Schatten mit Naht dazwischen.
   Der Schatten ist derselbe wie an allen anderen Karten der Website
   (0 0 18px rgba(74,74,73,0.16)), damit sich nichts neu erfindet.
   Die Grünplakette ragt von oben in die Karte hinein, genau wie im Entwurf —
   deshalb der negative Außenabstand oben statt eines Abstands dazwischen. */
.v-greensign-stats__card {
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  padding: 75px 40px 60px;
  /* Die Oberkante der Karte liegt auf der Linie, auf der der Bogen anfaengt
     und aufhoert — eine durchgehende Linie, wie bestellt.

     Nicht geschaetzt, sondern aus der Zeichnung gerechnet: Die Vorlage
     `rsce_greensign_stats` setzt die Bogenenden auf y=158 einer 220 hohen
     Zeichenflaeche (`$endY = 158`, viewBox `0 0 220 220`). Vom **unteren**
     Rand des Rings aus sind das 1 − 158/220 = 28,18 % seiner Hoehe. Dazu
     kommt der Abstand, den `__ring-wrap` darunter setzt.

     Deshalb steht hier keine feste Zahl: Der Ring ist `min(330px, 72vw)` und
     schrumpft mobil mit. Eine ausgerechnete Zahl haette nur bei 1920px
     gestimmt. Gemessen bei 1920px ergibt die Formel −125px; die Bogenenden
     liegen dort auf 3138, und genau dort beginnt die Karte. */
  margin-top: calc(-1 * (clamp(1.25rem, 2vw, 2rem) + min(330px, 72vw) * 0.28182));
}
/* Der Schatten der Karte wurde dreifach abgeschnitten: Contaos eigenes
   `.block { overflow: hidden }` trifft sowohl den Artikel als auch das
   Inhaltselement. Der Schatten laeuft 18px ueber die Kante hinaus und war
   damit auf weissem Grund unsichtbar — dieselbe Ursache wie bei HRS-80,
   dort an abgeschnittenen Unterlaengen.

   Gleiche Schreibweise wie dort (`&.block`): zwei Klassen, also (0,2,0) gegen
   Contaos (0,1,0) — es gewinnt ohne `!important`. Beide Ebenen muessen
   freigestellt werden; die aeussere allein genuegt nicht, die innere
   schneidet sonst weiter.

   Begrenzt auf diesen Abschnitt: `.block { overflow: hidden }` haelt an
   anderen Stellen randabfallende Flaechen im Zaum, und was dort niemand
   beanstandet hat, bleibt. */
.a-nachhalt-greensign.block,
.v-greensign-stats.block {
  overflow: visible;
}
/* Die Plakette muss ueber der Karte liegen, nicht darunter.

   Sobald die Karte bis an die Bogenenden heranreicht, ueberlappt sie den
   unteren Teil des Rings — und damit den gruenen Kern mit Logo und
   Prozentzahl. Die Karte trug `z-index: 1`, der Ring gar keinen; die Karte
   gewann und schnitt die „85 %" ab. Beim vorherigen Ueberstand von 8px fiel
   das nicht auf, weil dort nur der aeussere Rand verdeckt wurde.

   `__ring` hat bereits `position: relative`, der Wert wirkt also sofort.
   Beide liegen im selben Stapelzusammenhang — 2 schlaegt 1. */
.v-greensign-stats__ring {
  z-index: 2;
}
/* HRS-153: Der Kasten hinter „Optional dazubuchbar: Halbpensionsbuffet" war
   nicht wirklich abwesend — er ist weiß, 630px breit und hat 40px Innenabstand,
   also genau das Maß aus dem Artboard (630x326 bei x=310, y=5533). Nur fehlte
   ihm der Schatten, und damit war er auf weißem Grund unsichtbar.
   Derselbe Schatten wie an den Kacheln derselben Seite. */
.v-inclusions-swiper__note {
  box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
}
/* HRS-108: Auf der Startseite soll „Nachhaltigkeit als Priorität" einen
   weißen Grund haben. Der Abschnitt trägt eine randabfallende Fläche in
   Rosé (rgba(194,164,173,0.1)) — die fällt hier weg.
   Der zweite Teil des Tickets („Für Firmen und Gruppen = rosa") ist bereits
   erfüllt: Dieser Abschnitt läuft nachgemessen auf #faf6f7.
   Bewusst nur auf der Startseite: Derselbe Abschnitt steht auch auf
   „Über uns", und dort ist der Grund laut HRS-123 ausdrücklich richtig. */
body.v-page-home .a-nachhaltigkeit::before {
  background: transparent;
}
/* HRS-110: Links neben den Blog-Kacheln stand eine graue Kante.

   Gemessen: Der Schieber beginnt bei x=310, die erste Kachel ebenfalls. Die
   Schleifen-Dublette links davon endet bei x=295 — ihr 18px weicher Schatten
   reicht damit bis x=313, also **in den sichtbaren Bereich hinein**. Die
   weiße Maske, die die Dubletten verdeckt, endet bei 310 und schnitt diesen
   Schatten mittendurch: übrig blieb kein Schatten, sondern eine Kante.

   Eine breitere Maske hilft nicht — sie verschiebt die Kante nur (ausprobiert
   und nachgemessen). Stattdessen wird der Schieber waagerecht abgeklemmt:
   Links der Kachelkante wird nichts mehr gezeichnet, weder Dublette noch
   deren Schatten. Senkrecht bleibt er offen, damit die Schatten der Kacheln
   nach oben und unten weiterhin frei liegen.
   Der Schatten liegt damit nur noch dort, wo Kacheln sind. */
.a-blog-teaser .news-swiper-slider {
  overflow-x: clip;
  overflow-y: visible;
}
/* HRS-134: Das Bild „Seebad Riessersee" lief als flacher Streifen (635x221,
   Verhältnis 2,88). Der Entwurf „Berg-Wellness" zeigt es im Format 630x420,
   also 3:2.
   Ursache ist die Bilddatei selbst: Sie liegt als 1388x482 vor, und ohne
   Formatvorgabe übernimmt der Kasten dieses Verhältnis.
   Der Kasten gibt jetzt 3:2 vor und das Bild füllt ihn (`cover`). Damit
   stimmt das Format unabhängig davon, welche Datei dort liegt — und eine
   später hochgeladene, höhere Aufnahme sitzt automatisch richtig. */
.a-bergwellness-seebad .a-bergwellness-seebad-img figure,
.a-bergwellness-seebad .a-bergwellness-seebad-img img {
  display: block;
  width: 100%;
}
/* Der Vorfahre muss mit in den Selektor: Eine bestehende Regel setzt für
   genau diesen Bildkasten `object-fit: contain` (LEARNINGS §1). */
.a-bergwellness-seebad .a-bergwellness-seebad-img img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}
/* HRS-118: Der graue Kasten „Individuelle Anfrage" reichte 76px tiefer als
   das Foto daneben und lief damit bis unter den Namen.

   Ursache: Der Kasten dehnt sich auf die volle Höhe der Rasterzeile — und die
   wird von Foto **und** Namensfeld zusammen bestimmt (616px statt 494px).
   Mit seiner Inhaltshöhe bleibt er innerhalb des Fotos.

   Als Richtschnur dient „Feste & Feiern": Dort läuft derselbe Baustein, dort
   steht der Kasten 56px unter der Fotooberkante und endet 54px über der
   Unterkante — und genau diese Stelle hat die Designerin ausdrücklich als
   richtig bezeichnet. Der Innenabstand oben bleibt deshalb wie er ist;
   geändert wird nur die Dehnung.

   Die Regel hängt am Baustein, nicht an der Seite: Auf „Feste & Feiern" und
   „Für Unternehmen" steht der Kasten ohnehin schon auf Inhaltshöhe, dort
   ändert sie nichts — nachgemessen. Damit greift sie auch an jeder künftigen
   Stelle, an der der Baustein neben einer Personenkachel steht. */
.v-contact-block__inner {
  align-self: flex-start;
  height: auto;
}
/* HRS-126: Der Roséschleier lief bis zum Trennerbild durch. Der Entwurf
   „Kulinarik" lässt ihn mitten in den Kacheln enden — „bis etwas über die
   Hälfte der Kachel", wie die Designerin schreibt.

   Gemessen im Artboard: Das Band endet bei y=8758, die Kacheln laufen von
   8248 bis 8963. Die Kante sitzt also 205px über der Kachelunterkante,
   das sind 71 % der Kachelhöhe.

   Live enden die Kacheln 180px vor dem Abschnittsende (fester Innenabstand).
   Die Kante gehört damit 180 + 205 = 385px über das Abschnittsende — ein
   Wert, der von der Kachelhöhe unabhängig ist und deshalb auch bei längeren
   Texten stimmt. */
.mod_article.a-kulinarik-menue {
  background: linear-gradient(to bottom, #faf6f7 calc(100% - 385px), #fff calc(100% - 385px));
}
/* HRS-113: Der aktive Menüpunkt war zwar ausgezeichnet, sah aber exakt aus
   wie jeder andere — gleiche Farbe, gleiches Gewicht, kein Pfeil. Man sah
   nicht, wo man ist.
   Der Pfeil gehört bereits zur Komponente und wird beim Überfahren
   eingeblendet (Zeile rückt 31px ein, Symbol wird sichtbar). Beim aktiven
   Eintrag steht er jetzt dauerhaft an — dasselbe Erscheinungsbild wie beim
   Überfahren, nur eben fest. So bleibt die Menüsprache einheitlich, statt
   eine zweite Auszeichnung zu erfinden. */
#mobile-nav-mod.navigation .v-menu-overlay-link.is-active .inn-nav-link__row {
  padding-left: 31px;
}
#mobile-nav-mod.navigation .v-menu-overlay-link.is-active .inn-nav-link__icon {
  opacity: 1;
}
/* HRS-136: Zwei untereinander stehende Knöpfe waren unterschiedlich lang
   („Termin vereinbaren" 198px, „Broschüre" 150px).

   Gemessen: Beide stehen rechtsbündig in einer Flex-Spalte mit
   `align-items: flex-end`; dadurch schrumpft jeder auf seine eigene
   Inhaltsbreite — der kürzere auf seine Mindestbreite von 150px.

   `width: 100%` wäre falsch: Die Spalte ist 387px breit, die Knöpfe wären
   dann fast doppelt so lang wie im Entwurf (ausprobiert und nachgemessen).
   Stattdessen ein einspaltiges Raster, dessen Spalte `max-content` misst —
   also so breit wie der längere der beiden. Beide füllen sie aus, die
   Rechtsbündigkeit bleibt.

   Die Regel hängt bewusst am **Muster** und nicht an der Seite: Jede Spalte,
   in der mindestens zwei Knöpfe untereinander stehen, wird so behandelt.
   Über alle 25 Hotelseiten gesucht, kommt das derzeit genau einmal vor
   (Alpine Beauty Spa) — eine seitenbezogene Regel hätte denselben Effekt,
   aber den nächsten Fall nicht mitgenommen.

   `min-width` und die globale `width: auto !important` müssen trotzdem
   zurückgenommen werden, sonst hält der kürzere Knopf seine 150px
   (dieselbe Ursache wie bei HRS-117; `!important` weicht nur `!important`). */
.ce_column:has(> .v-button + .v-button) {
  display: grid;
  grid-auto-columns: max-content;
  justify-content: end;
  justify-items: stretch;
}
.ce_column:has(> .v-button + .v-button) .v-button > a {
  width: 100% !important;
  min-width: 0;
  justify-content: center;
}
/* HRS-161: Der graue Kasten der Bewertungen ragte links und rechts 20px über
   den Container hinaus — er lief auf 1340px (290..1630), während alle übrigen
   Abschnitte bei 310 beginnen und bei 1610 enden.
   Gemessen über alle 25 Hotelseiten: Dieser Abschnitt ist der einzige Kasten
   dieser Art; er kommt zweimal vor (Tagungen und Für Unternehmen) und wird
   von beiden über dieselbe Klasse eingebunden — eine Regel genügt. */
.mod_article.a-tagungen-bewerten {
  max-width: 1300px;
}
/* HRS-157: Knopf „Vergrößern" in der Blätter-Leiste. Er sitzt in derselben
   Zeile wie Pfeile und Seitenzähler und folgt den Outline-Buttons der
   Website (2px, #681d33) — kein neues Aussehen erfinden. */
.v-pdf-flipbook__btn--zoom {
  appearance: none;
  margin-left: auto;
  border: 2px solid #681d33;
  background: #fff;
  color: #681d33;
  font-family: var(--inn-main-font);
  font-size: 16px;
  line-height: 1;
  padding: 10px 20px;
  cursor: pointer;
}
.v-pdf-flipbook__btn--zoom:hover,
.v-pdf-flipbook__btn--zoom:focus-visible {
  background: #681d33;
  color: #fff;
}
/* HRS-131: Die Wanderkarte ist anklickbar und öffnet vergrößert. Ohne einen
   sichtbaren Hinweis merkt das niemand — deshalb der Lupenzeiger. */
.v-karte-lightbox-link {
  display: block;
  cursor: zoom-in;
}
/* HRS-142, zweiter Punkt / HRS-302 — hier stand eine Sonderregel, die seit
   dem 27.10.2026 **ersatzlos entfallen** ist. Die Begruendung gehoert
   aufgeschrieben, damit sie niemand versehentlich wieder einbaut.

   Ausgangslage HRS-142: „Text bitte immer im oberen linken Bereich des
   Bildes platzieren". Dieser Trenner stand als einziger der Website auf der
   Ausrichtung „mittig"; gemessen begann der Inhalt dadurch **321px** unter
   der Oberkante. Die Regel hier hat ihn auf die obere Ausrichtung gezogen,
   also auf 130px Abstand von oben.

   Was sich seither geaendert hat: Mit HRS-287 hat das Band dieses Trenners
   eine feste Hoehe von 400px bekommen (vorher folgte es dem
   Seitenverhaeltnis des Bildes und war deutlich hoeher). In einem 400px
   hohen Band sind die 130px aber kein „oben" mehr — der Inhalt ist 239px
   hoch, es blieben 130px darueber und nur 31px darunter. Gemessen lag seine
   Mitte **49px unter** der Bandmitte.

   Genau das hat die Designerin als HRS-302 gemeldet: „Die Elemente sind
   nicht mittig zum Trenner angeordnet, sondern weiter unten."

   Ohne diese Regel greift wieder die Einstellung des Inhaltselements
   („mittig"), und die Grundregel in `custom.less` zentriert: (400 − 239) / 2
   = 80,5px oben. Das ist zugleich **hoeher** als die 130px von vorher — die
   Zusage aus HRS-142 bleibt damit erfuellt, der Text steht weiter im oberen
   Bereich, nur eben mittig zum Band.

   Die alte Regel war also nie falsch, sie war an eine Bandhoehe gebunden,
   die es nicht mehr gibt. Fester Pixelversatz in einer Flaeche, deren Hoehe
   sich aendern kann — siehe LEARNINGS. */
/* HRS-159, zweiter Punkt: „Button ist angeschnitten und Hintergrund scheint
   durch, bitte … Buttons, Sprachenwechsler, etc. mittig platzieren".

   Gemessen auf der gescrollten Startseite (1920px): Die Leiste ist 90px hoch,
   ihr Inhalt 139px — die Zeile selbst misst 89px, dazu kommen zweimal 25px
   Innenabstand (`@rs-header-padding-y`). Der Inhalt zentriert sich dadurch auf
   seiner eigenen Mitte bei y69 statt auf der Mitte der Leiste bei y45. Alles
   unterhalb von y90 steht über die Leiste hinaus — genau die 49px hohen
   Schaltflächen „Infocenter" und „Angebote", den Gutscheinknopf und das
   Menüzeichen. Darum ragten sie über die Kante und das Seitenbild schien
   hinter ihnen durch.

   Der senkrechte Innenabstand war nie nötig: Die Leiste hat eine feste Höhe,
   und die bestimmt die Mitte. Entfernt man ihn und lässt die Zeile die volle
   Höhe einnehmen, zentriert sich alles auf der Leiste — und zwar auf der
   **eingestellten** Höhe. Die Regel nennt keine Zahl und gilt deshalb für die
   heutigen 90px genauso wie für die 112px des Entwurfs, die die Designerin in
   der Design-Konfiguration selbst setzen kann (HRS-159, erster Punkt).

   Mobil (gemessen bei 393px) war die Zeile mit 60px kleiner als die Leiste und
   saß dadurch zu hoch; auch dort zentriert sie nun.

   Spezifität: `#header .header-container > .inside` ist (1,2,0) und damit
   gleichauf mit der bestehenden Regel in custom.less. korrekturen.less wird
   zuletzt eingelesen, deshalb genügt das ohne `!important`. */
#header .header-container {
  height: 100%;
}
#header .header-container > .inside {
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
/* ---------------------------------------------------------------------------
   Blog-Detail: Raster brechen unter 992px von selbst um
   ---------------------------------------------------------------------------

   Das automatische Zwei-Spalten-Raster ist aus `custom.less` entfernt; der
   Beitragsinhalt fliesst wie in einem Artikel, und die Anordnung macht die
   Redaktion mit Row + Columns. Damit sie das Raster aber nicht fuer jede Row
   einzeln mobil einstellen muss, nimmt diese Regel ihr die Arbeit ab: Unter
   992px laeuft jede Spalte im Beitrag ueber die volle Breite, die Spalten
   stehen also untereinander.

   992px ist nicht neu erfunden, sondern die Grenze, die das Projekt ueberall
   verwendet — dieselbe Regel steht fuer einzelne Sektionen schon mehrfach in
   `custom.less` (z. B. `.row.ce_rowStart > .ce_column.col-6 { grid-column:
   span 12 }` unter `max-width: 991px`). Hier gilt sie fuer **alle** Spalten
   im Beitrag, unabhaengig von ihrer Breitenangabe.

   Bewusst auf den Blog begrenzt: Dieselbe Regel websiteweit zu setzen waere
   ein Eingriff in jede Sektion mit Raster. Welche davon mobil absichtlich
   nebeneinander bleiben, ist nicht gemessen — und „Abweichung ohne Ticket
   bleibt". Wenn der Umbruch ueberall gelten soll, gehoert vorher eine
   Bestandsaufnahme dazu. */
@media (max-width: 991px) {
  .v-news-detail__body .row.ce_rowStart > .ce_column {
    grid-column: 1 / -1;
  }
}
/* ---------------------------------------------------------------------------
   Tagungsraum-Detail im Tab: Faktentabelle, Bestuhlung, Besonderheiten
   ---------------------------------------------------------------------------

   Bestellt ist die Ansicht aus dem Screenshot der Designerin: links die
   Ueberschrift, darunter eine gestreifte Faktentabelle und „Kapazität
   Bestuhlung“; rechts der Bildslider und darunter „Besonderheiten“.

   **Der Desktop-Entwurf fehlt im Export.** Die Detailansicht steht dort nur
   als Mobilfassung (`iphone-14-pro-9`). Daher: Anordnung und Spaltenaufteilung
   aus dem Screenshot, alle **Zahlen und Farben** aus dem Mobil-Artboard —
   geraten ist nichts ausser dem waagerechten Innenabstand der Zeilen, den der
   Mobilentwurf mit 5px fuehrt (bei 344px Zeilenbreite). Auf der doppelt so
   breiten Desktopzeile sieht das gequetscht aus; 16px steht hier bewusst und
   gehoert korrigiert, sobald der Desktop-Entwurf vorliegt.

   Belege aus `iphone-14-pro-9`:
     Zeilenstreifen  #4a4a49 bei 10 % Deckung, Hoehe 45px (y3018/3109/3200)
     Zwischenzeilen  #ffffff, Hoehe 46px (y3063/3154)
     Beschriftung    18px/700/23px/#4a4a49, Spalte 131 von 344 (38 %)
     Wert            18px/400/23px/#4a4a49
     Ueberschriften  28px/400/23px/#681d33 („Kapazität Bestuhlung“ y3291,
                     „Besonderheiten“ y3887)
     Bestuhlung      14px/400/#4a4a49 (U-Form, Parlament, Block, Kino) */
.v-conference-panel__aside {
  min-width: 0;
}
/* --- Faktentabelle -------------------------------------------------------
   Aus dem zweispaltigen Paarraster wird eine Tabelle: eine Zeile je Angabe,
   Beschriftung links, Wert rechts, Zeilen abwechselnd hinterlegt. */
.v-conference-panel__facts {
  display: block;
  margin: 0 0 clamp(32px, 3vw, 48px);
}
.v-conference-panel__fact {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: center;
  min-height: 45px;
  padding: 11px 16px;
  background: #fff;
  /* Die ungeraden Zeilen tragen den Streifen — im Entwurf beginnt er mit der
     ersten Zeile („Lage“). */
}
.v-conference-panel__fact:nth-child(odd) {
  background: rgba(74, 74, 73, 0.1);
}
.v-conference-panel__fact dt {
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
  color: #4a4a49;
}
.v-conference-panel__fact dd {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  color: #4a4a49;
}
/* --- Zwischenueberschriften ----------------------------------------------
   Die Abstaende stehen nicht auf einem Einheitswert, weil der Entwurf sie
   nicht einheitlich fuehrt (`iphone-14-pro-9`):

     Faktentabelle endet      3245
     „Kapazität Bestuhlung“   3291,7–3320,8   -> 46,7 davor
     Bestuhlungssymbole ab    3358,2          -> 37,4 danach
     „Besonderheiten“         3887,6–3916,7
     erster Aufzaehlungspunkt 3940,0          -> 23,3 danach

   Die Bestuhlung braucht mehr Luft als die Aufzaehlung, weil darunter eine
   Symbolreihe folgt und kein Text. */
.v-conference-panel__subhead {
  font-size: 28px;
  font-weight: 400;
  line-height: 23px;
  color: #681d33;
  margin: 0 0 23px;
}
.v-conference-panel__seating .v-conference-panel__subhead {
  margin-bottom: 37px;
}
/* --- Bestuhlung als Tabelle ----------------------------------------------
   Drei Zeilen (Symbol, Beschriftung, Zahl) ueber so viele Spalten, wie der
   Raum Bestuhlungsarten hat. `display: contents` loest das Listenelement auf,
   damit seine drei Teile direkt im Raster liegen — sonst stuenden Symbol,
   Wort und Zahl je Art untereinander statt zeilenweise ausgerichtet. */
.v-conference-panel__seating-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0;
}
.v-conference-panel__seating-item {
  display: contents;
}
.v-conference-panel__seating-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin: 0 0 12px;
}
.v-conference-panel__seating-title {
  background: rgba(74, 74, 73, 0.1);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 23px;
  color: #4a4a49;
}
.v-conference-panel__seating-cap {
  background: #fff;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  color: #4a4a49;
}
/* --- Besonderheiten unter dem Slider -------------------------------------
   Entwurf: Bild endet 3809,6, „Besonderheiten“ beginnt 3887,6 — 78px. */
.v-conference-panel__highlights {
  margin-top: 78px;
}
/* Mobil stapelt alles; die Bestuhlung bekommt dann zwei Spalten statt vier,
   sonst stehen 14px-Woerter wie „Parlament“ in 80px breiten Spalten. */
@media (max-width: 991px) {
  .v-conference-panel__seating-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .v-conference-panel__seating-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    background: rgba(74, 74, 73, 0.1);
    padding: 8px 12px;
  }
  .v-conference-panel__seating-item img {
    margin: 0;
  }
  .v-conference-panel__seating-title,
  .v-conference-panel__seating-cap {
    background: transparent;
    padding: 0;
  }
}
/* Das Briefsymbol in den Teamkacheln war seitlich angeschnitten.

   Die Symbole stehen in einem 18x18-Quadrat, und eine allgemeine Bildregel
   setzt `object-fit: cover`. `cover` fuellt das Quadrat und schneidet dabei
   ab, was nicht hineinpasst — das ist fuer Fotos richtig und fuer Symbole
   falsch. Aufgefallen ist es nur beim Brief, weil er als einziger nicht
   quadratisch ist:

     phone-weiss.svg  26x26  (1,00)  -> 18x18, nichts faellt weg
     mail-weiss.svg   27x20  (1,35)  -> 18x18, links und rechts abgeschnitten

   `contain` legt das Symbol vollstaendig in das Quadrat; es bleibt 18px breit
   und wird 13px hoch, mittig im Kreis. Bewusst nicht die Groesse geaendert:
   Die 18px stehen an beiden Symbolen gleich, und am Telefon stimmt alles. */
.v-team-with-icons__link-icon img {
  object-fit: contain;
}
/* Angebots-Detailseite ohne Hero-Bild: Abstand zur festen Kopfzeile.

   Mit Hero deckt dessen Hoehe den Bereich hinter der Kopfzeile ab. Ohne Hero
   beginnt der Inhalt bei y0 — gemessen ueberlappte die Ueberschrift die
   Kopfzeile um 18px (Kopfzeile bis y90, Ueberschrift ab y72).

   Genau die Hoehe der Kopfzeile, nicht mehr: Die Abstaende innerhalb der
   Detailansicht (`__rule`, Innenabstand von `__inner`) gibt es in beiden
   Faellen schon; sie sollen nicht doppelt wirken.

   Keine feste Zahl: Die Hoehe ist ein Feld der Design-Konfiguration
   (`--inn-header-height`, von `fe_page.html5` auf `:root` geschrieben) und
   laesst sich aendern — siehe HRS-159. Dieselbe Schreibweise benutzt das
   Menue-Overlay in `custom.less`. */
.v-offer-detail--no-hero {
  padding-top: var(--inn-header-height, 90px);
}
/* --- HRS-166: Schaltflächen nicht in Versalien ------------------------------
   Gemeldet an einem Knopf auf der Angebots-Detailseite. Nachgemessen über acht
   Seiten des Auftritts: **154 Schaltflächen stehen bereits in normaler
   Schreibweise, genau 2 in Versalien.**

   Die Versalien sind eine Vorgabe des Grundgerüsts (`tiny.less`: `.v-button a`).
   Aufgehoben wurde sie bisher **je Variante** — `v-outline`, `v-outline-white`,
   `v-arrow-circle` und die Knöpfe der Kopfzeile haben jeweils eine eigene
   Regel. Die Variante `v-primary` hat nie eine bekommen, und genau sie sind die
   beiden Ausreißer.

   Der Entwurf führt die Beschriftungen durchgehend klein: „Jetzt buchen" steht
   dort an allen sieben Fundstellen in normaler Schreibweise, nicht als
   „JETZT BUCHEN".

   Deshalb wird die Vorgabe hier an der Wurzel aufgehoben statt eine fünfte
   Ausnahme danebenzustellen — sonst erbt die nächste neue Variante den Fehler
   wieder. Kein `!important` nötig: `korrekturen.less` wird nach `tiny.less`
   eingebunden, bei gleicher Spezifität gewinnt die spätere Regel.           */
.v-button a {
  text-transform: none;
}
/* ------------------------------------------------------------------
   HRS-190, zweiter Teil — „in der lightbox ist das bild scharf aber das
   x um die lightbox zu schließen fehlt"

   Der Knopf fehlt nicht, er liegt unter dem Seitenkopf. Gemessen bei 360
   und bei 1920: Der Kopf ist 112px hoch, fest positioniert und traegt
   z-index 9999; die Werkzeugleiste der Lightbox ist 48 bzw. 64px hoch und
   liegt auf 1050. `elementFromPoint` auf der Knopfmitte liefert den Kopf —
   das X ist dadurch weder sichtbar noch antippbar, ebenso Zoom, Diashow
   und Vollbild.

   Betroffen ist JEDE Lightbox der Website, nicht nur die des Flipbooks.

   Ausblenden statt hochsetzen: Den Container ueber 9999 zu heben haette
   ein Wettruesten mit Cookie-Banner und Feedback-Widget eroeffnet, die
   ebenfalls hoch liegen. Solange eine Lightbox offen ist, verdeckt sie die
   Seite ohnehin — der Kopf hat dort nichts zu suchen.

   `visibility` statt `display`, damit beim Schliessen nichts springt. Die
   Spezifitaet reicht: `.with-fancybox #header` ist (1,1,0) gegen (1,0,0)
   der bestehenden Kopfregeln — kein `!important` noetig.

   Fancybox setzt die Klasse selbst auf <html> und nimmt sie beim
   Schliessen wieder weg.                                                */
html.with-fancybox #header {
  visibility: hidden;
}
/* HRS-124: Die Teamkachel auf „Das ist uns wichtig" (Seehaus) ersetzt das
   fruehere Bild mit Textblock. Sie ist 420px breit und sass damit
   linksbuendig in einer 605px breiten Spalte (gemessen bei 1280) — das Bild
   davor fuellte die Spalte. Mittig gesetzt wirkt sie wie gewollt platziert
   statt wie angeschoben.

   Ab 768px: Darunter ist die Kachel ohnehin so breit wie die Spalte
   (gemessen 320 bei 360px Fenster, 350 bei 390). */
@media (min-width: 768px) {
  .a-seehaus-wichtig .a-seehaus-team-card .v-team-with-icons__member {
    margin-inline: auto;
  }
}
/* ===========================================================================
 * HRS-260 — Gutschein-Knopf stand unten aus der Karte heraus
 * ---------------------------------------------------------------------------
 * Gemessen bei 1920px auf „Weihnachten & Silvester": Der Knopf der Karte
 * „Freude schenken" endete 5px **unter** der Kartenkante, waehrend die
 * Nachbarkarte „Zimmerbuchung" 18px Luft hatte. Beide Karten waren exakt
 * 246,578px hoch — eine so krumme Zahl kommt nicht aus einer Vorgabe,
 * sondern aus einer Rechnung.
 *
 * **Die Ursache ist die Aufteilung, nicht der Knopf.** Die rechte Spalte ist
 * so hoch wie die grosse Karte links (`align-items: stretch`). Die beiden
 * Karten darin teilen diese Hoehe mit `flex: 1 1 0` haelftig — und
 * `min-height: 0` erlaubt ihnen, dabei **unter** ihren eigenen Inhalt zu
 * schrumpfen (custom.less:10366). Solange der Text dreizeilig blieb, ging
 * das knapp auf. Der Text von „Freude schenken" laeuft vierzeilig, braucht
 * 23px mehr — und weil `.block` hier `overflow: visible` traegt, rutschte
 * der Knopf einfach heraus statt abgeschnitten zu werden.
 *
 * `margin-top: auto` am Knopf war also nie das Problem: Es haengt ihn
 * richtig an die Unterkante des verfuegbaren Platzes. Der Platz war zu klein.
 *
 * **Eine Zeile genuegt.** `min-height: min-content` hebt nur die Erlaubnis
 * zum Unterschreiten auf; die haelftige Aufteilung bleibt, solange der
 * Inhalt hineinpasst. Gemessen danach: 256,6 und 279,6px hoch, unter beiden
 * Knoepfen die vorgesehenen 28px Innenabstand. Die Zeile waechst dabei von
 * 525 auf 568px, die grosse Karte links waechst mit — das ist der Platz,
 * den der Text tatsaechlich braucht.
 *
 * Geprueft: `flex: 1 1 auto` zusaetzlich zu setzen aendert das Ergebnis
 * nicht, deshalb bleibt es weg. Unter 992px steht ohnehin `flex: 0 0 auto`,
 * dort ist die Regel wirkungslos.
 *
 * Gleiche Spezifitaet wie die Regel in custom.less (0,7,0) — diese Datei
 * wird spaeter importiert und gewinnt deshalb ueber die Reihenfolge.
 * ======================================================================== */
.a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-3:last-child .v-festive-card {
  min-height: min-content;
}
/* ===========================================================================
 * HRS-177 — Beschriftungen der Lagekarte lagen unter fremden Nummern
 * ---------------------------------------------------------------------------
 * Nachgereichtes Foto vom 26.10.2026: Die geoeffnete Beschriftung
 * „Restaurant Sommergarten" hat die Nummern 5 und 6 quer ueber dem Text —
 * sie standen **auf** der Mattglasflaeche statt dahinter.
 *
 * **Das ist ein anderer Fehler als der vom 15.10.** Damals ragten
 * Beschriftungen aus dem Sichtfenster; das behebt seither das Nachschieben
 * der Karte in `inn_components.js`. Hier geht es um die Malreihenfolge.
 *
 * **Die Ursache.** Alle Punkte liegen auf `z-index: 3`. Innerhalb eines
 * Punktes steht seine Beschriftung auf 1 und sein eigener Marker auf 3 —
 * richtig so. Die Punkte untereinander sind aber gleichrangig, also
 * entscheidet die Reihenfolge im Dokument: Jeder spaeter stehende Punkt malt
 * ueber die Beschriftung eines frueheren. Gemessen bei 390px waren **vier
 * von acht** Beschriftungen betroffen (1 unter 4, 2 unter 5 und 6, 4 unter 3,
 * 6 unter 5). Am Desktop faellt es nicht auf, dort ueberlappt nichts.
 *
 * **Die Loesung** hebt den Punkt an, dessen Beschriftung gerade offen ist.
 * Nur diesen, nur solange sie offen ist — damit bleibt die Reihenfolge der
 * uebrigen unberuehrt, und der eigene Marker bleibt ueber seiner eigenen
 * Beschriftung.
 *
 * **Eine Messfalle, die zwei Anlaeufe gekostet hat (LEARNINGS §49, §68).**
 * `document.elementsFromPoint` meldete mit und ohne Korrektur dasselbe und
 * schien zu beweisen, dass die Regel nichts tut. Sie ueberspringt aber
 * Elemente mit `pointer-events: none` — und das tragen die Beschriftungen,
 * damit sie Klicks auf die Marker nicht abfangen. Belegt wurde es am Ende
 * mit zwei Bildschirmfotos desselben Ausschnitts.
 * ======================================================================== */
/* HRS-240, 27.10.2026: „was man anklickt soll einfach in den vordergrund
   kommen bitte".

   Die beiden Regeln darunter gab es schon — sie reichen nicht:
     `:hover`        kennt ein Telefon nicht.
     `:focus-within` haelt nur, solange der Fokus steht, und iOS Safari
                     vergibt beim Antippen eines `<button>` gar keinen.
   Ein **bleibender** Vordergrund-Zustand fehlte also ganz.

   `is-vorn` setzt das Skript beim Antippen und nimmt es den Geschwistern
   ab (inn_components.js, Spot-Schleife). 20 statt 10, damit der
   angetippte Punkt auch ueber einem gerade ueberfahrenen liegt.

   Warum es ueberhaupt auffaellt: Gemessen ueberlappen auf /gruppen.html
   bei 360px die Punkte 3 („Check in fuer Gruppen") und 4 („Haupteingang
   Riessersee") um 16,5px — 53 Prozent des Markers. Auf dem Desktop
   ueberlappt nichts mehr (34,6px Abstand bei 31px Markern); die
   Ueberlappung ist eine reine Folge der Skalierung, die Buehne schrumpft
   mobil auf 46 Prozent, die Marker behalten ihre 31px.

   Der zweite Teil des Tickets („etwas weiter auseinander ruecken") ist
   bewusst **nicht** hier geloest: Die Punktpositionen stehen als Prozent
   am Inhaltselement und sind Gestaltung, keine Technik. */
.v-hotel-map__spot.is-vorn {
  z-index: 20;
}
.v-hotel-map__spot.is-vorn .v-hotel-map__label {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.v-hotel-map__spot:hover,
.v-hotel-map__spot:focus-within {
  z-index: 10;
}
/* HRS-218/239: Der scharfe Streifen unter der getoenten Flaeche ist ein
   reines Mobilelement (rsce_trenner.html5, `.v-trenner__bg--streifen`).

   Ohne diese Zeile erbt er auf dem Desktop `.v-trenner__bg { position:
   absolute; inset: 0 }` aus custom.less (ab 992px) und legte das scharfe
   Bild ueber das **ganze** Band — also ueber Toenung und Text. Genau das
   Muster, das `.v-trenner__bg--mobile` eine Zeile darunter schon hat.

   Gegenstueck: `mobil-komponenten.less` schaltet ihn unter 992px wieder
   ein und gibt ihm seine Geometrie. */
.v-trenner__bg--streifen {
  display: none;
}
/* ==========================================================================
   HRS-287 — „Hier ist der Trenner sehr breit, obwohl es im Backend auf
   400 px eingestellt ist" (/regionale-erlebnisse, 27.10.2026)
   ==========================================================================

   Gemessen auf der Seite:

     Fensterbreite   Band        Bild geliefert   dargestellt
     1677px          704px hoch  1676 x 349       1778 x 747  (2,1-fach)
     1920px          722px hoch  1920 x 400       2035 x 765
     1440px          605px hoch  1440 x 300       1526 x  641

   Die Meldung ist praeziser als sie klingt. Der Trenner-Baustein hat gar
   KEIN Hoehenfeld — die 400px sind die eingestellte BILDGROESSE
   (1920 x 400). Das Band zwingt das Bild auf 704px und blaest es dabei um
   das Doppelte auf. Dieselbe Ursache wie HRS-276 und die Bannermeldung der
   Kundin: Der Beschnitt folgt dem Verhaeltnis, nicht der Aufloesung
   (LEARNINGS §71).

   Der Entwurf gibt diesem Abschnitt 400px (Seitenplan regionale-erlebnisse,
   Sektion 8). Die Spanne 480…722px aus custom.less:2048 gehoert zur GROSSEN
   Trennervariante mit Glasflaeche und Text — dieses Element hat
   nachweislich keinen Text, `v-trenner__content` ist leer.

   **Gebunden an `.trenner-strip`, und das ist Absicht.** Diese Klasse hat
   die Redaktion dem Bild im Backend selbst gegeben, in der Erwartung, dass
   sie etwas bewirkt — sie hatte bis heute keine einzige Regel. Jetzt hat
   sie eine. Damit laesst sich der schmale Streifen ueberall ohne uns
   anlegen, und es steht kein Seitenname in einer Bausteinregel (HRS-204).

   Die Werte sind dieselben wie bei der bereits vorhandenen schmalen
   Variante `.a-trenner-bild` (custom.less:7125) — 400px, mobil 240px.
   Damit bleibt „Trennerbilder immer die selbe Hoehe" aus HRS-39 und HRS-56
   wahr: Alle schmalen Streifen sind gleich hoch, alle grossen auch. */
.v-trenner:has(.trenner-strip) {
  min-height: 400px;
}
@media (min-width: 992px) {
  .v-trenner:has(.trenner-strip) {
    grid-template-rows: minmax(400px, auto);
    min-height: 400px;
  }
  .v-trenner:has(.trenner-strip) .v-trenner__media {
    min-height: 400px;
  }
}
@media (max-width: 991px) {
  .v-trenner:has(.trenner-strip).v-trenner--mobile-overlay {
    min-height: 240px;
  }
  .v-trenner:has(.trenner-strip).v-trenner--mobile-overlay .v-trenner__inner {
    min-height: 240px;
  }
}
/* ==========================================================================
   HRS-285 — „Die Textblöcke sind sehr nah an den Icons dran, bei den
   anderen ist regulär mehr Abstand" (/berg-wellness, 27.10.2026)
   ==========================================================================

   Gemessen ueber acht Seiten mit diesem Baustein, Abstand Iconband → Text:

     berg-wellness      block   0px    ← beanstandet
     seehaus            flex   25px
     tagungen           flex   16px
     zimmer             flex   18px
     erleben-entdecken  flex   16px
     kulinarik          flex   30px
     gruppen            flex   25px
     fuer-unternehmen   flex   14px

   berg-wellness ist die EINZIGE Seite, auf der die Kachel auf `display:
   block` steht. „Bei den anderen ist regulär mehr Abstand" trifft es also
   woertlich — ueberall sonst steht eine handgeschriebene Regel je Seite.

   **Die eigentliche Ursache ist aber eine Ebene tiefer.** Der Baustein
   bringt seine Regeln selbst mit: `inn_components.css` setzt
   `.v-inn-single-icon` auf Flex und nimmt den Abstand aus der
   CSS-Variablen `--inn-single-icon-gap`, die das Template aus dem
   Backend-Feld schreibt. Diese Datei ist im Seitenlayout **gar nicht
   eingebunden** (geprueft am ausgelieferten Quelltext: 12 Stylesheets,
   keines davon inn_components.css). Deshalb war das Backend-Feld auf allen
   Seiten wirkungslos, und deshalb hat jede Seite ihre eigene Regel
   bekommen — nur berg-wellness nie.

   Statt der achten Einzelregel steht hier der fehlende Teil des Bausteins.
   Wirkung, gemessen: Auf berg-wellness greift jetzt der im Backend
   gesetzte Wert von 16px (Entwurf 14,3px). Alle anderen sieben Seiten
   bleiben unveraendert — ihre Regeln nennen zwei Klassen und schlagen
   diese eine. `align-items` steht bewusst NICHT hier: Das setzen die
   Seitenregeln teils, teils nicht, und ein neuer Standardwert wuerde dort
   etwas verschieben, was niemand beanstandet hat. */
.v-inn-single-icon {
  display: flex;
  flex-direction: var(--inn-single-icon-direction, column);
  gap: var(--inn-single-icon-gap, 0);
}
/* ==========================================================================
   HRS-288 / HRS-289 / HRS-290 — NACHTRAG, und eine Korrektur an uns selbst
   ==========================================================================

   Wir hatten diese drei Tickets zuerst nach ihrer Ueberschrift beantwortet
   („Strich zu Breit") und die Linie global von 2 auf 1px gesetzt. Die
   BESCHREIBUNGEN sagen aber etwas anderes:

     HRS-288  „Der Strich unter dem Walchensee bei Kochel ist dicker als
               die anderen"
     HRS-289  „Hier ist der Strich bei Mountainbike auch dicker als die
               anderen"

   Beanstandet ist also die UNGLEICHHEIT innerhalb einer Liste, nicht die
   Staerke. Das ist genau der Fehler aus LEARNINGS §74, einen Tag spaeter
   wiederholt.

   Gemessen auf /regionale-erlebnisse, Lage der 14 Striche:

     Strich  1  oben 1737,813   Nachkomma 0,813
     Strich  2  oben 1823,000   Nachkomma 0
     Strich  3  oben 1908,188   Nachkomma 0,188
     Strich  4  oben 1993,375   Nachkomma 0,375
     …        (vierzehn verschiedene Nachkommastellen)

   **Jeder Strich sitzt auf einer anderen Subpixelgrenze.** Ein 1px hoher
   Kasten auf einer glatten Grenze wird als eine kraeftige Zeile gezeichnet,
   auf einer halben Grenze auf zwei Zeilen zu je 50% verteilt — und sieht
   dadurch dicker und unschaerfer aus. Genau das sieht die Designerin.

   Ursache sind zwei krumme Masse im Zeilenabstand: `margin-top: 0.45rem`
   am Strich (= 7,2px) und die Zeilenhoehe `normal`, die der Browser der
   Schaltflaeche gibt — der Baustein ist ein `<button>`, der die geerbten
   23px verwirft.

   An der laufenden Seite durchprobiert, Zahl der verschiedenen
   Nachkommastellen je Messbreite:

                               1677px   1440px   393px
     heute                        14       14      14
     ganzzahlig gerechnet          3        3       3

   Drei bleiben, und das ist nicht zu beheben: Es ist je eine Liste, deren
   Startpunkt vom gesamten Seiteninhalt darueber abhaengt. Entscheidend ist,
   dass alle Striche INNERHALB einer Liste nun gleich sitzen — und nur die
   vergleicht man beim Lesen.

   23px ist die Zeilenhoehe des umgebenden Textes, 8px der naechste ganze
   Wert zu den bisherigen 7,2. */
.v-ruled-list__trigger {
  line-height: 23px;
}
.v-ruled-list__rule {
  margin-top: 8px;
}
/* ==========================================================================
   HRS-282 — „Hier sind die Bilder warum auch immer nicht auf einer Höhe"
   (/erleben-entdecken, 27.10.2026)
   ==========================================================================

   Beim Nachmessen war der Fehler weg: Beide Karten der letzten Reihe stehen
   bei 1677 und 1440px auf 406,7 x 227,8 Pixeln, Ueberschriften bei 271,8
   bzw. 271,7. Im Bild gegengesehen — Bildkanten, Ueberschriften und Knoepfe
   fluchten.

   **Das ist aber Zufall, kein Zustand.** Fuer die Bildhoehe gibt es in
   diesem Baustein keine Regel; der Browser nimmt das Verhaeltnis aus der
   Bilddatei. Dass es gerade stimmt, liegt daran, dass die beiden
   hinterlegten Dateien zufaellig dasselbe Verhaeltnis haben:

     hotel-riessersee-…-gapa   630 x 353  = 1,785
     bild-beautybehandlung     325 x 182  = 1,786

   Zum Zeitpunkt der Meldung war das nachweislich anders — und das naechste
   anders beschnittene Bild bricht es wieder.

   Der Entwurf legt das Verhaeltnis fest: Kartenbilder 420 x 235 (Artboard
   erleben-entdecken, Sektion „Zusatzleistungen"; die zweite Reihe fuehrt
   420 x 235 und 420 x 236). Das sind 1,787 — genau der Wert, der live
   zufaellig anliegt. Festgeschrieben aendert sich heute also nichts
   Sichtbares; es kann nur nicht mehr verrutschen.

   Dieselbe Bitte wie in HRS-39, HRS-56 und HRS-272: gleiche Hoehe, immer.
   Begrenzt auf dieses Raster, damit die Varianten mit eigenen Verhaeltnissen
   (custom.less:5936 ff., 380/570, 380/670, 380/500) unberuehrt bleiben. */
.v-media-cta-cards__grid .v-media-cta-card__media {
  aspect-ratio: 420 / 235;
}
.v-media-cta-cards__grid .v-media-cta-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ==========================================================================
   HRS-265 — „Könnte man die Icons mittig setzen sowie die Texte darunter im
   Mittelachsensatz? Das würde etwas stimmiger aussehen" (/angebote)
   ==========================================================================

   **Das ist eine Abweichung vom Entwurf, auf ausdrueckliche Bestellung.**
   HRS-73 hat die heutige Ausrichtung eigens hergeleitet: Im Entwurf
   (Angebote, 1920) stehen die drei Eintraege LINKSBUENDIG bei x=523 / 851 /
   1180, der Block als Ganzes mittig. Genau das steht in custom.less:927 ff.
   dokumentiert.

   Die Designerin bittet jetzt um Mittelachsensatz. Nach der Projektregel
   „Tickets schlagen das XD" gilt das Ticket — und der Fall gehoert
   hierher, damit ihn niemand spaeter als Entwurfsabweichung
   „zurueckkorrigiert".

   Der Block selbst war schon mittig (`justify-content: center`); zentriert
   werden Icon und Text INNERHALB des Eintrags. Die Eintragsbreite von
   220px bleibt, sonst wandern die Mittelachsen auseinander.

   Betrifft ausschliesslich die Angebote-Seite: Die Variante `--icons-top`
   kommt laut HRS-73 auf keiner anderen der 32 geprueften Seiten vor,
   Startseite und Zimmer nutzen die Leisten-Variante. */
.v-offers-teaser__body--icons-top .v-offers-teaser__icon-item {
  align-items: center;
  text-align: center;
}
/* ==========================================================================
   HRS-283 — „Kann man die Schrift so ausrichten, dass die Wörter ganz in die
   Zeile passen?" (/seehaus, gemeldet bei 2124px)
   ==========================================================================

   Gemessen fehlen **0,03 Pixel**. Das ist kein Gestaltungsfehler, sondern
   ein Rundungstreffer:

     Fenster   Innenabstand   Textkasten   „HAUPTGERICHTE" braucht   Zeilen
     1440      10,80px        150,20px     147,03px                  1
     1631      12,23px        148,78px     147,03px                  1
     1920      14,00px        147,00px     147,03px                  2
     2124      14,00px        147,00px     147,03px                  2

   Der Innenabstand waechst mit der Fensterbreite (`clamp(10px, 0.75vw,
   14px)`) und erreicht ab etwa 1918px seinen Deckel. Genau dann ist der
   Kasten 147,00 und das Wort 147,03 breit. Darunter passt es — deshalb
   sah es die Designerin erst auf einem sehr breiten Bildschirm.

   Nur der INAKTIVE Reiter ist betroffen: Aktiv wird er fett und kursiv,
   und Lato Italic ist schmaler (135,53px). Genau das zeigt ihr Screenshot.

   Der Platz kommt aus dem Platzhalter fuer den Pfeil (18px Grafik + 10px
   Abstand). Beim inaktiven Reiter ist der Pfeil unsichtbar (`opacity: 0`),
   der Abstand aber reserviert. 10 → 4px gibt dem Text 153,00px, also
   **5,97px Reserve**.

   Bewusst NICHT geaendert wurden Leistenbreite (190px), Trennlinie und
   Spaltenbeginn (545 / 1100) — alles Werte aus dem Entwurf beziehungsweise
   aus HRS-72. Die beiden anderen geprueften Wege haetten daran geruettelt:
   Innenabstand 14 → 8px verengt den Abstand zur Trennlinie, Leiste 190 →
   196px verschiebt bei 1440px den Inhaltsbeginn um 2px.

   „APERITIF UND DIGESTIF" bleibt zweizeilig — 203px passen in keiner
   Variante. Es bricht aber an der Leerstelle, nicht im Wort; die Bitte
   „dass die Woerter ganz in die Zeile passen" ist damit erfuellt.

   Gleiche Verschachtelung wie der HRS-72-Block in custom.less:5320, damit
   die Spezifitaet reicht — `korrekturen.less` wird spaeter importiert und
   gewinnt dann ohne `!important` (LEARNINGS §64). */
@media (min-width: 992px) {
  .v-content-tabs:not(:has(.v-content-tabs__flat--with-media)):not(.v-content-tabs--collage) .v-content-tabs__tab::after {
    margin-left: 4px;
  }
}
/* ==========================================================================
   HRS-291 — „den abstand zwischen suppe und nachspeise verkleinern … ohne
   die reihenfolge im backend zu ändern" (/kulinarik)
   ==========================================================================

   Ihre eigene Vermutung trifft zu: „Ich versteh schon dass es sich an dem
   Inhalt von Hauptgerichte ausrichtet." Die fuenf Gruppen liegen in einem
   zweispaltigen Raster, in dem linke und rechte Spalte Zellen DERSELBEN
   Zeile sind. Die Zeilenhoehe richtet sich nach der hoeheren Zelle, und das
   ist immer „Hauptgerichte":

     Zeilenhoehen 139,8 / 222,4 / 139,8
     „Suppen" fuellt 89 von 222px  →  133px Leerraum + 40px Zeilenabstand
                                      = 173px Loch

   Es ist also keine Luecke, sondern die Hoehe der Nachbarzelle. Innerhalb
   des Rasters ist dagegen nichts zu machen: `row-gap`, `align-items` und
   `align-self` aendern daran nichts, und `grid-template-rows: masonry` gibt
   es in Serienbrowsern noch nicht.

   **Der Entwurf stellt die Gruppen gar nicht zeilenweise auf.** Artboard
   hotel-riessersee-kulinarik:

     Salat Buffet    left 545      Hauptgerichte  left 1100
     Vorspeisen      left 545      Nachspeisen    left 1100
     Suppen          left 545

   Links drei, rechts zwei — ein spaltenweiser Fluss, Abstand jeweils rund
   40px. Genau das leisten Zeitungsspalten. An der ausgelieferten Seite in
   allen sieben Reitern bei 1631 und 1920px geprueft: Aufteilung wie im
   Entwurf, alle Gruppenabstaende durchgehend 40px statt 53…196px,
   Spaltenbreiten und -anfaenge unveraendert (510 / 545 / 1100).

   **Die Backend-Reihenfolge bleibt unberuehrt** — danach hatte sie
   ausdruecklich gefragt. Die Lesefolge ist weiter die Backend-Folge, sie
   fliesst nur Spalte fuer Spalte statt zeilenweise.

   Begrenzt auf die Kulinarik-Speisekarte: Derselbe Baustein auf /seehaus
   hat dieselben Loecher (bis 236px), ist aber nicht beanstandet, und eine
   Umstellung wuerde die Gruppen dort ebenfalls umsortieren. „Abweichung
   ohne Ticket bleibt" — im Ticket angeboten. */
@media (min-width: 992px) {
  .a-kulinarik-menue .v-content-tabs__groups {
    display: block;
    column-count: 2;
    column-gap: clamp(24px, 2.35vw, 45px);
  }
  .a-kulinarik-menue .v-content-tabs__groups .v-content-tabs__group {
    break-inside: avoid;
    margin-bottom: 40px;
  }
  .a-kulinarik-menue .v-content-tabs__groups .v-content-tabs__group:last-child {
    margin-bottom: 0;
  }
}
/* HRS-268: Mit dem Link ist auch sein Groessenmass entfallen. In
   custom.less:15760 skalierte `.rs-kreis-patch__link` auf 95% und das Bild
   darin auf 100% — zusammen also 95% des Patches. Ohne den Link saesse das
   Bild jetzt direkt auf 100% und das Siegel waere 5% groesser als bisher.
   Dasselbe Mass, nur eine Ebene tiefer. */
.rs-kreis-patch .rs-kreis-patch__art {
  width: 95%;
}
/* HRS-177, Nachtrag 27.10.2026 — „jetzt kann man den ersten punkt nicht
   lesen da es links angeschnitten ist".

   Die Beschriftung des linkesten Punktes („Haupteingang Riessersee Hotel")
   ist rechts verankert und oeffnet damit nach links — ueber die linke Kante
   der Karte hinaus. Das Nachschieben der Karte hilft dort nicht: Es gibt
   links von der Karte nichts, wohin man schieben koennte.

   Die Designerin hat entschieden, die Beschriftung in dem Fall auf die
   andere Seite des Punktes zu legen („Frage 2 = ja", 27.10.2026).

   `inn_components.js` setzt `is-gespiegelt` nur, wenn die Beschriftung sonst
   ueber den Kartenrand hinausliefe UND auf der anderen Seite vollstaendig
   passt. Hier steht nur die Spiegelung selbst: Die Ankerregeln setzen die
   gewaehlte Ecke der Box in den Punktmittelpunkt; gespiegelt wird die
   waagerechte Haelfte des `transform` getauscht, die senkrechte bleibt.

   Drei Klassen gegen die zwei der Ankerregel in `custom.less` — die Regel
   gewinnt damit ohne `!important` (LEARNINGS §1). */
.v-hotel-map__spot--anchor-bottomright.is-gespiegelt .v-hotel-map__label {
  transform: translate(0, -100%);
}
.v-hotel-map__spot--anchor-topright.is-gespiegelt .v-hotel-map__label {
  transform: translate(0, 0);
}
.v-hotel-map__spot--anchor-bottomleft.is-gespiegelt .v-hotel-map__label {
  transform: translate(-100%, -100%);
}
.v-hotel-map__spot--anchor-topleft.is-gespiegelt .v-hotel-map__label {
  transform: translate(-100%, 0);
}
/* HRS-298 — „hier ist die h1 angeschnitten bitte weiter runter setzen"
   (Fehlerseite 404, gemeldet bei 2446px Fensterbreite)

   Gemessen beginnt der Inhaltsbereich dieser Seite 12px **ueber** der
   Unterkante des Headers:

     Header         112px hoch (Desktop), 83px (bis 767px)
     Innenabstand   100px (Desktop), 60px — vom Seitenanfang, nicht vom Header

   Die Ueberschrift laeuft also hinter die Headerleiste. Bei einer
   gewoehnlichen Schrift faellt das kaum auf; „Seite konnte nicht gefunden
   werden" steht aber in Licorice bei 80px, und deren Oberlaengen ragen
   nochmals rund 10px ueber die Zeilenbox hinaus — der Schwung des „S"
   stiess im Screenshot der Designerin fast an die Infocenter-Schaltflaeche.

   Behoben wird es am Inhaltsbereich, nicht am Artikel: `#main` bekommt die
   Hoehe des Headers als Innenabstand, der Artikel behaelt seine 100 bzw.
   60px. Damit wird aus „100px vom Seitenanfang" das, was gemeint war —
   „100px unter dem Header" —, und zwar auf beiden Breiten, weil
   `--inn-header-height` selbst umschaltet (gemessen 112px bis 991, 83px ab
   767). Ein zweiter Mediablock entfaellt.

   Bewusst nur fuer diese Seite. Impressum, AGB und Datenschutz haben
   dieselbe Ueberschneidung — dort hat sie niemand beanstandet, und
   „Abweichung ohne Ticket bleibt". Der Fall ist der Designerin gemeldet. */
body.v-page-14 #main {
  padding-top: var(--inn-header-height, 112px);
}
/* HRS-301 — „Zwischen der Headline und dem Text darunter ist zu viel Platz"
   (/nachhaltigkeit, gruenes Band „Gut zu wissen", gemeldet bei 1677px)

   Gemessen auf der ausgelieferten Seite bei 1677px:

     Ueberschrift „Gut zu wissen" endet          y 4008
     Text „Muss jedes Zimmer …" beginnt          y 4073
                                                 → 65px Luecke

   Der Entwurf setzt dort 25px: Ueberschrift 310,4099 bei 68px Hoehe, also
   Unterkante 4167, und der Text beginnt bei 4192.

   Woher die 65px kommen: Die Redaktion hat die Ueberschrift als Absatz in
   die Ueberschrift geschrieben — im Quelltext steht ein <p> innerhalb des
   <h2>. Dieser Absatz bringt den normalen Absatzabstand von 65px mit, und
   der wirkt nach unten aus der Ueberschrift heraus (der obere Abstand des
   Textblocks von 20px faellt mit ihm zusammen, deshalb sind es genau 65
   und nicht 85).

   Bewusst nur fuer diesen Abschnitt und nur ab 992px:

   - Der Absatz im <h2> ist kein Einzelfall, sondern kommt auf mehreren
     Seiten so aus der Redaktion. Eine allgemeine Regel wuerde dort ueberall
     65px herausnehmen — gemeldet war genau eine Stelle, und
     „Abweichung ohne Ticket bleibt".
   - Mobil misst die Luecke 45px, der Entwurf (iphone-14-pro-28) verlangt
     38px. Sieben Pixel Unterschied hat niemand beanstandet, und eine
     Aenderung dort haette die gemeldete Stelle nicht betroffen. */
@media (min-width: 992px) {
  body.v-page-nachhaltigkeit .a-nachhalt-co2 .v-headline-text > p {
    margin-bottom: 25px;
  }
}
/* HRS-296 / HRS-297 — „Zahlen ragen in den Zeitstrahl hinein" und
   „Jahreszahlen bitte auch zweizeilig also mit Umbruch ermoeglichen"
   (Chronik auf /ueber-uns)

   Beides ist dieselbe Ursache: Die Jahresspalte ist zu schmal. Gemessen
   bei 1920px, Schrift 65px:

     Spaltenbreite                        140px
     „1886" und alle vierstelligen Jahre  151px  → 11px daneben
     „1922/23", „1935/36"                 249px  → 109px daneben

   Die Zahl lief damit quer ueber die Zeitstrahl-Spalte und unter die
   Ueberschrift des Ereignisses — genau das Bild aus beiden Tickets.
   Umbrechen konnte sie nicht: Ein Schraegstrich ist fuer den Browser keine
   Trennstelle, „1922/23" ist ein einziges Wort.

   Die Spalte bekommt deshalb 180px. Der Wert ist gemessen, nicht geraten:
   „1922/" misst 174px, die breiteste Zeile nach dem Umbruch. Die Trennstelle
   selbst setzt `rsce_history_timeline.html5` hinter jeden Schraegstrich.

   Zeitstrahl und Text ruecken dadurch 40px nach rechts — und zwar in
   Richtung Entwurf, nicht von ihm weg: Dort sitzt der Punkt bei x=547,
   vorher stand er bei 490, jetzt bei 530.

   Mobil bleibt alles, wie es ist: Dort steht die Jahreszahl ueber dem Text
   in einer eigenen Zeile ueber die volle Breite, gemessen ohne Ueberlauf. */
@media (min-width: 992px) {
  .v-history-timeline__item {
    grid-template-columns: 180px 24px minmax(0, 1fr);
  }
}
/* HRS-296 (zweite Runde) / HRS-304 — „jahreszahlen links zum container rand.
   jetzt ist es viel zu sehr an die linie gequetscht"

   Die Jahresspalte ist 180px breit und beginnt an der Containerkante; die
   Basisregel setzt die Zahl darin `text-align: right` (custom.less). Eine
   vierstellige Zahl steht damit rechts in der Spalte und damit unmittelbar
   am Zeitstrahl — bei „1922/1923" nach dem Umbruch noch dichter, weil die
   zweite Zeile ebenfalls rechts anliegt.

   Linksbuendig ruecken die Zahlen an die Containerkante, und der Abstand zur
   Linie ist der Rest der Spalte statt null.

   Mobil bleibt es bei zentriert (mobil-komponenten.less): dort steht die
   Jahreszahl ueber dem Text in einer eigenen Zeile, es gibt keine Linie
   daneben. Die Datei wird nach dieser hier eingebunden, die Regel dort
   gewinnt also ohnehin. */
@media (min-width: 992px) {
  .v-history-timeline__year {
    text-align: left;
  }
}
/* HRS-300 — „nur mobile den abstand zwischen menübar und hero verringern"
   (Blog-Detailseite, gemeldet bei 500px)

   Der Abstand kommt aus der Regel zu HRS-159 weiter oben: Sie rechnet
   „Kopfzeilenhoehe x 2,5357" und bildet damit den Entwurfswert nach — 112px
   Kopfzeile plus 172px Abstand. Der Faktor sorgt dafuer, dass der Abstand
   mitwaechst, wenn jemand die Kopfzeilenhoehe im Backend aendert.

   Was er nicht kann: zwischen gross und klein unterscheiden. Auf dem
   Telefon ist die Kopfzeile 83px hoch, der Faktor macht daraus 210px
   Gesamtabstand — gemessen **127px** unter der Kopfzeile. Die 172px des
   Entwurfs sind ein Desktopwert und waren fuer das Telefon nie angepasst.

   Mobil gilt deshalb der Abstand, den die uebrigen Unterseiten dort haben:
   60px unter der Kopfzeile (`.inside` der Artikel, gemessen auf
   /impressum, /agb, /datenschutz und der Fehlerseite).

   Die Rechnung bleibt an der Variablen haengen, damit sie eine Aenderung
   der Kopfzeilenhoehe weiterhin mitmacht. Oberhalb 991px bleibt alles. */
@media (max-width: 991px) {
  .v-news-detail__hero {
    margin-top: calc(var(--inn-header-height, 83px) + 60px);
  }
}
/* ===========================================================================
 * Die Seite scrollt niemals seitlich (29.10.2026)
 * ---------------------------------------------------------------------------
 * Gemeldet: „mobil kann man nach rechts scrollen, das muss bei beiden Seiten
 * auf keinen Fall möglich sein."
 *
 * Erhoben über beide Auftritte bei 360 und 393px — betroffen war genau eine
 * Seite, /nachhaltigkeit.html, dort aber heftig: **1397px Überstand bei 360,
 * 1536px bei 393.** Alle übrigen Hotel-Seiten und der gesamte
 * Karriere-Auftritt waren sauber.
 *
 * Warum Karriere sauber ist: Dort steht auf `#wrapper.rk-shell` ein
 * `overflow: clip`.
 *
 * KORREKTUR einer ersten Annahme: Das Hotel hatte sehr wohl eine Sperre —
 * `main.less` setzt auf `body` ein `overflow-x: hidden` samt
 * `max-width: 100vw`. Sie hat nur nicht gewirkt: `overflow-x: hidden` auf
 * `body` allein verhindert den Dokument-Scroll nicht zuverlässig, weil das
 * Scrollen dann an `html` übergeht. Erst die Sperre am `#wrapper` greift.
 *
 * Die alte Regel bleibt stehen — sie stört nicht, und sie ohne Not
 * anzufassen hiesse, an einer Stelle zu drehen, die seit Monaten läuft.
 *
 * WARUM `clip` UND NICHT `hidden`
 *
 * `overflow-x: hidden` macht aus dem Element einen Scroll-Container. Damit
 * hoeren `position: sticky` auf zu kleben und Sprungmarken verlieren ihren
 * Bezug — in diesem Projekt betraefe das die Kopfzeile und die Tab-Leisten.
 * `clip` schneidet nur ab und erzeugt keinen Scroll-Container.
 *
 * Das ist ein Sicherheitsnetz, kein Ersatz fuer sauberes Layout: Die
 * eigentliche Ursache ist darunter mitbehoben. Ein Netz ohne die Ursache zu
 * beheben wuerde den naechsten Ausreisser nur unsichtbar machen — und
 * unsichtbare Fehler findet niemand mehr.
 * ======================================================================== */
#wrapper {
  overflow-x: clip;
}
/* --- Die eigentliche Ursache auf /nachhaltigkeit ------------------------- */
/*
 * Der Slider der Inklusivleistungen steht bewusst auf `overflow: visible`,
 * damit die Kartenschatten links und rechts nicht abgeschnitten werden
 * (custom.less). Swiper legt im Schleifenbetrieb aber Klone der Folien an,
 * und die standen dadurch ungebremst rechts neben der Seite.
 *
 * `clip` statt `hidden` auch hier, und `overflow-clip-margin` laesst dem
 * Schatten die 9px, die er ueber die Kante braucht (gemessen in HRS-67) —
 * die Schatten bleiben also sichtbar, die Klone nicht.
 *
 * Senkrecht bleibt es bei `visible`: Dort ragen Schatten und die angehobene
 * Karte heraus, und das ist gewollt.
 */
.v-inclusions-swiper__slider {
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 12px;
}
/* ------------------------------------------------------------------
   HRS-315 — Preistabelle „Locationzuschlag" wirkt gequetscht

   Gemeldet: „Kann man die Tabellenspalten hier breiter machen, damit es
   etwas schöner und nicht so gequetscht aussieht?"

   **Die Ursache liegt nicht im Stylesheet, sondern im Inhalt.** Gemessen bei
   1440px: Tabelle 480px in einer 635px-Spalte. Ein Blick auf das Element
   zeigt, warum — der Text trägt Inline-Maße aus dem Texteditor:

       <table class="a-feste-feiern-preise" style="width: 66.1836%; height: 155.938px;">
       <th style="width: 54.8048%;">Location</th> …

   66,18 % von 635px sind 420px, angehoben auf die 480px Mindestbreite. So
   etwas entsteht, wenn jemand die Tabelle im Editor mit der Maus zieht.
   Ein Inline-Stil schlägt jede Regel von hier — ein `!important` dagegen
   zu setzen würde auch jede Tabelle treffen, deren Breite jemand bewusst
   eingestellt hat. Deshalb gehört die Abhilfe in den Inhalt: die
   style-Angaben in der Quelltextansicht entfernen. Das Stylesheet setzt
   `width: 100%` ohnehin schon (custom.less), es kam nur nie zum Zug.

   Was hier bleibt, ist die eine Zeile, die danach den Unterschied macht:
   Ohne sie brechen „Mo. – Do." und „Fr. – So. *" auch bei voller Breite
   noch um. Die Ortsnamen in der ersten Spalte dürfen weiter umbrechen,
   „Galerie Restaurant (Haupthaus)" braucht das.
   ------------------------------------------------------------------ */
.a-feste-feiern-preise th {
  white-space: nowrap;
}
/* ------------------------------------------------------------------
   HRS-310 — Partnerlogos: Knopf mittig unter dem Logo

   Gemeldet: „Bei allen außer Wall Hall (die sollen keinen haben) sollte
   der Button mittig unter dem Bild sein. Der Button von ganz rechts dem
   Bild ist in eine andere Zeile nach ganz links gerutscht."

   Drei Ursachen, zwei davon im Stylesheet:

   1. **Ausrichtung.** An allen drei Knöpfen steht im Datensatz
      `align_b: left` → Klasse `v-left`, und die setzt `text-align: left`
      (standard.less, 0,1,0). Die Regel unten hat 0,3,0 und gewinnt damit,
      ohne dass jemand das Feld an drei Elementen nachziehen muss — und
      ohne `!important`.

   2. **Unterschiedliche Höhen.** `.a-rahmenprogramm-partner .row.ce_rowStart`
      steht in custom.less auf `align-items: center`. Das zentriert **jede
      Spalte einzeln** in der Zeile: Die Logos sind 151 bis 224px hoch, also
      beginnt jede Spalte woanders (gemessen bei 1677px: 4256, 4257, 4270,
      4293). Ohne Knopf fällt das kaum auf, mit Knopf sitzt jeder auf einer
      eigenen Linie — im Screenshot 15px auseinander. Abhilfe sind zwei
      Zeilen, die sich alle vier Spalten teilen (`grid-template-rows: subgrid`
      an der Spalte): Logo oben, Knopf unten. Dadurch sind alle Logoflächen
      gleich hoch und alle Knöpfe stehen auf einer Linie — gemessen bei 1920,
      1677, 1440 und 1280px jeweils alle vier Logomitten auf 137px und alle
      Knopfoberkanten auf 279px. Ohne Knöpfe sieht es aus wie vorher.

   3. **Der vierte Knopf liegt nicht in seiner Spalte** — das ist Inhalt,
      nicht CSS: Element 3176 (Vivalpin) hat Sortierung 1856 und steht damit
      *hinter* dem Spaltenende (1792). Er ist kein Kind der Spalte, sondern
      ein eigenes Element im 12er-Raster — und weil die vier Spalten die
      zwölf Rasterspalten bereits füllen, beginnt er eine neue Zeile ganz
      links und ist dort eine Rasterspalte schmal. Genau das zeigt der
      Screenshot. Das lässt sich nur im Backend beheben, indem das Element
      zwischen Bild und Spaltenende geschoben wird.
   ------------------------------------------------------------------ */
.a-rahmenprogramm-partner {
  /* Untereinander braucht niemand geteilte Zeilen — und die leere Knopfzeile
     von Wall Hall würde dort 30px Luft zu viel erzeugen (gemessen: 1168px
     statt 1138px Blockhöhe). Der Abstand Logo/Knopf ist derselbe wie oben,
     er kommt dann nur nicht mehr aus dem Zeilenabstand des Rasters. */
}
.a-rahmenprogramm-partner .row.ce_rowStart {
  align-items: stretch;
  /* Zwei Zeilen, die sich alle Spalten teilen: oben die Logos, unten die
       Knöpfe. Darum geht es hier überhaupt — nur geteilte Zeilen bringen
       Logos *und* Knöpfe jeweils auf eine gemeinsame Linie, und zwar auch
       dann, wenn eine Spalte wie Wall Hall gar keinen Knopf hat. Mit
       `flex: 1` an der Logofläche war die Wall-Hall-Spalte im Versuch 37px
       tiefer als die übrigen: Ihre Logofläche füllte auch den Platz, in dem
       bei den anderen der Knopf steht. */
  grid-template-rows: auto auto;
}
.a-rahmenprogramm-partner .ce_column {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.a-rahmenprogramm-partner .ce_rsce_button .v-button {
  text-align: center;
}
@media (max-width: 991px) {
  .a-rahmenprogramm-partner .ce_column {
    display: block;
    grid-row: auto;
  }
  .a-rahmenprogramm-partner .ce_rsce_button {
    margin-top: 30px;
  }
}
/* ------------------------------------------------------------------
   HRS-307 — Winterurlaub-Trenner: Rahmen fehlt links und rechts

   Gemeldet: „hier fehlt rechts und links der abstand (rahmen) zum
   Bildschirmrand. unten ist er drinnen."

   Gemessen bei 1920px am ausgelieferten Band:

       s-trenner-sommer (Winterurlaub)   links 0  rechts 0  unten 35
       s-trenner-impressionen            links 35 rechts 35 unten 35

   Beide Artikel tragen dieselbe Klasse `a-trenner-inset`, die den weißen
   Rahmen als Innenabstand setzt (35px, custom.less, HRS-9/14). Der
   Unterschied steckt im Element: Das Band selbst bricht mit

       .v-trenner { width: 100vw; margin-left: calc(50% - 50vw); … }

   aus dem Artikel heraus — nach unten kann es das nicht, deshalb ist der
   Rahmen dort geblieben. Der Impressionen-Trenner steht im Feld „Breite"
   auf *inset* und hebt den Ausbruch mit `width: 100%; margin: auto` wieder
   auf; der Winterurlaub-Trenner steht auf *vollbreit*.

   Statt am Element das Feld umzustellen — das würde über
   `&--width-inset` zugleich Bandhöhe und Eyebrow-Schnitt verändern —
   entscheidet jetzt die Artikelklasse: Wo ein Rahmen bestellt ist, bricht
   das Band nicht mehr aus. (0,2,0) gegen die (0,1,0) der Grundregel, also
   ohne `!important`.

   Betrifft genau drei Bänder auf der ganzen Seite (Startseite zweimal,
   „Über uns" einmal); die beiden anderen stehen bereits auf 100 % und
   ändern sich dadurch nicht. Mobil bleibt alles unberührt — dort hat der
   Artikel ohnehin keinen seitlichen Innenabstand.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .a-trenner-inset .v-trenner {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
/* ------------------------------------------------------------------
   HRS-308 — Teamkachel: Mailadresse im Hover abgeschnitten

   Gemeldet: „hover über mail = text angeschnitten, bitte anpassen"
   (Seehaus, Küchenchef).

   Die Pille wächst im Hover auf eine **feste** Breite: 280px für die Pille,
   220px für den Text (custom.less). Gemessen, was der Text wirklich braucht:

       leitung-kueche@riessersee-hotel.de     283px  → 63px abgeschnitten
       leitung-gastronomie@riessersee-hotel   325px  (Über uns)
       anfrage@alpine-beauty-spa.de           240px  → 20px abgeschnitten
       management@riessersee-hotel.de         268px  → 48px abgeschnitten

   Es war also nicht nur die eine gemeldete Kachel: Betroffen war jede
   Adresse über 220px, auf drei Seiten.

   Statt die Zahl zu erhöhen — die nächste längere Adresse wäre wieder
   abgeschnitten — begrenzt jetzt die Karte. Dafür braucht der Behälter der
   Pillen eine echte Breite: Er stand nur auf `left`/`bottom`, war also so
   breit wie sein Inhalt, und `max-width: 100 %` daran hätte sich im Kreis
   gedreht (im Versuch blieb die Pille 2px zu kurz und ragte an anderer
   Stelle 3px aus der Karte). Mit `right` steht die Breite fest, und
   `align-items: flex-start` verhindert, dass die kurzen Telefonpillen auf
   dieselbe Breite mitgezogen werden.

   Die Adresse läuft in der Pille mit 16px statt 18px. Damit passt die
   längste Adresse des Projekts bis hinunter auf 1200px Fensterbreite in
   eine Zeile; geprüft auf Seehaus, Alpine Beauty Spa und Über uns bei
   2560, 1920, 1440, 1280 und 1200px — nirgends abgeschnitten, nirgends
   über den Kartenrand hinaus.

   Darunter ist die Karte nur noch rund 313px breit; dort passt eine
   39-stellige Adresse in keiner lesbaren Größe in eine Zeile. Sie bricht
   dann um (an einem Bindestrich) statt abzuschneiden — die Adresse bleibt
   vollständig lesbar, und darum geht es im Ticket.
   ------------------------------------------------------------------ */
.v-team-with-icons__contact {
  right: 16px;
  align-items: flex-start;
}
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__contact {
  right: 12px;
}
/* Die Gastgeber-Fassung muss **mit ihrem vollen Selektor** mitgenannt werden.
   Beim ersten Anlauf stand hier `.a-gastgeber .v-team-with-icons__link:hover`
   — zwei Klassen und eine Pseudoklasse. Die 260px-Fassung in custom.less steht
   auf `.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:hover`, also auf
   einer Klasse mehr, und hat gewonnen: Nach dem Ausliefern waren auf „Über uns"
   vier Adressen um bis zu 77px abgeschnitten, während die Pille 131px vor dem
   Kartenrand endete. Aufgefallen ist es nur, weil nach dem Ausliefern noch
   einmal gemessen wurde (§1) — im Versuch zuvor hatte ein `!important` den
   Hover-Zustand erzwungen und damit genau diesen Unterschied verdeckt. */
.v-team-with-icons__link:hover,
.v-team-with-icons__link:focus-visible,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:hover,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:focus-visible {
  max-width: 100%;
}
.v-team-with-icons__link:hover .v-team-with-icons__link-text,
.v-team-with-icons__link:focus-visible .v-team-with-icons__link-text,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:hover .v-team-with-icons__link-text,
.a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:focus-visible .v-team-with-icons__link-text {
  max-width: none;
}
.v-team-with-icons__link-text {
  font-size: 16px;
}
@media (max-width: 1199px) {
  .v-team-with-icons__link:hover .v-team-with-icons__link-text,
  .v-team-with-icons__link:focus-visible .v-team-with-icons__link-text,
  .a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:hover .v-team-with-icons__link-text,
  .a-gastgeber .v-gastgeber-grid .v-team-with-icons__link:focus-visible .v-team-with-icons__link-text {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* ------------------------------------------------------------------
   HRS-312 — Roséschleier hört mitten im Inhalt auf

   Gemeldet: „Hier sieht das mit dem Hintergrund nicht ganz richtig aus,
   das der mittendrin so aufhört."

   **Die Ursache liegt nicht in der Regel von HRS-126, sondern im Inhalt.**
   Dort wurde die Kante bewusst auf 385px über dem Abschnittsende gelegt:
   180px Innenabstand plus 205px, damit der Schleier „mitten in den Kacheln"
   endet, wie die Designerin es bestellt hatte. Das war richtig gerechnet —
   solange es die Kacheln gibt.

   Heute stehen im Abschnitt nur noch Überschrift und Wochentage-Tabs;
   Überschrift, Iconkästen und Schaltfläche am Ende sind **ausgeblendet**
   (Elemente 2321–2323). Gemessen bei 1677px:

       Abschnitt   7061 – 8370
       Kante       7985
       Tabs        7649 – 8190   ← die Kante schneidet mittendurch

   Ohne die Kacheln hat die Kante keinen Bezugspunkt mehr und landet
   willkürlich im Fließtext. Statt eine zweite Zahl zu erfinden, richtet sich
   der Schleier jetzt danach, ob es die Kacheln gibt:

     - Kacheln da   → unverändert die Kante aus HRS-126
     - Kacheln weg  → gleichmäßige Fläche bis zum Abschnittsende

   Damit ist nichts überstimmt: Blendet jemand die Kacheln wieder ein, kommt
   die bestellte Kante von selbst zurück. (LEARNINGS §110)
   ------------------------------------------------------------------ */
.mod_article.a-kulinarik-menue:not(:has(.ce_rsce_iconboxes)) {
  background: #faf6f7;
}
/* ------------------------------------------------------------------
   HRS-313 — Weihnachtsbild blieb hinter den Karten daneben zurück

   Gemeldet: „Bitte auf die gleiche höhe wie die anderen Bilder", mit einem
   roten Strich unter der ganzen Reihe.

   Gemessen bei 2096px (ihrer Fensterbreite): Bild 640×500, die beiden
   Spalten daneben 568px hoch. Das Bild endete 62px über deren Unterkante;
   bei 1200px waren es sogar 140px.

   Der Entwurf wollte es gleich hoch: Dort ist das Bild 640×499 und die
   rechte Spalte besteht aus zwei Karten zu je 240px plus 19px Abstand —
   zusammen ebenfalls 499. Die Reihe ist seither gewachsen: Mit HRS-279
   bekam „Freude schenken" den Platz für seine vierte Textzeile, die Reihe
   ging von 525 auf 568px. Die Karten sind mitgewachsen, das Bild nicht —
   es hing weiter an seinem Seitenverhältnis.

   Deshalb füllt es jetzt die Spalte, statt eine Höhe mitzubringen. Damit
   stimmt es bei jedem Textzuwachs von selbst wieder. Nachgemessen bei 2096,
   1920, 1440 und 1200px: Unterkante des Bildes und Unterkante der Karten
   liegen gleichauf (die verbleibenden 6px sind der Innenabstand, den beide
   Spalten gleichermaßen tragen).

   Nur ab 992px: Darunter stehen die Spalten untereinander, dort hat das
   Bild seine eigene Höhe und `height: 100 %` hätte keinen Bezug.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-6 .v-festive-image,
  .a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-6 .v-festive-image__media {
    display: flex;
    flex: 1 1 auto;
  }
  .a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-6 .v-festive-image__media picture {
    display: block;
    width: 100%;
  }
  .a-weihnachten-besinnlich .row.ce_rowStart > .ce_column.col-6 .v-festive-image__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* ------------------------------------------------------------------
   HRS-314 — Sprungmarken landen unter dem festen Kopfbereich

   Aufgefallen bei der Frage, ob der Knopf im Kasten „Factsheet Hochzeit"
   zur Hochzeitsmappe springen kann. Der Sprungpunkt dafür gibt es längst
   (`#s-seehaus-seezeitung`) — aber jeder Sprung endet falsch:

   Gemessen auf /feste-feiern.html#s-seehaus-seezeitung bei 1440px: Die
   Oberkante des Ziels liegt bei 0, der Kopfbereich ist 112px hoch und fest
   — die ersten 112px des Abschnitts samt Überschrift liegen also dahinter.
   `scroll-margin-top` war seitenweit nirgends gesetzt.

   **Das betrifft nicht nur diesen einen Knopf**, sondern jede Sprungmarke
   der Website, auch die Pillenreihe auf Kulinarik und jeden Verweis mit
   Raute, den die Redaktion künftig anlegt. Deshalb steht die Regel am
   Artikel allgemein und nicht an einer Stelle.

   Die Kopfhöhe liefert `--inn-header-height` und ist bereits
   breitenabhängig gepflegt (gemessen 112px, mobil 83px); die 24px darüber
   sind Luft, damit die Überschrift nicht an der Kante klebt.

   Die Regel ändert ausschließlich das Scrollverhalten — kein Layout, keine
   Abstände, keine Darstellung.
   ------------------------------------------------------------------ */
.mod_article[id],
.mod_article_container[id] {
  scroll-margin-top: calc(var(--inn-header-height, 112px) + 24px);
}
/* Farbflaechen mobil randabfallend (HRS-193/199/211/215/230/233/236/238/247/249).
   Bewusst NACH korrekturen: Bei gleicher Spezifitaet soll diese Datei gewinnen. */
/* ===========================================================================
 * Farbige Flaechen mobil randabfallend
 * ---------------------------------------------------------------------------
 * HRS-193, 199, 211, 215, 230, 233, 236, 238, 247, 249
 *
 * Zehn Meldungen, ein Muster: Mobil sollen farbige Hintergrundbloecke bis an
 * den Bildschirmrand laufen. Sie enden aber am Container.
 *
 * **Es ist nicht ein Baustein, sondern sechs** — die Farbe gehoert jeweils zum
 * Baustein, es gibt keinen gemeinsamen Vorfahren. Deshalb hier eine Regel je
 * Baustein statt einer globalen, die zu viel traefe.
 *
 * **Zwei Ursachen, nicht eine:**
 *   1. Bausteine in `.inside` (Kontaktblock, FAQ-Kasten, Bleed-Feature,
 *      Zimmer-Fakten) fuellen den Container — mehr koennen sie nicht, solange
 *      sie nicht ausdruecklich ausbrechen.
 *   2. Artikel mit eigenem Inset (`width: calc(100% - 40px)`) halten einen
 *      festen 20px-Rand auf *jeder* Breite. Auf 1920px sind das 1 %, auf
 *      390px zehnmal so viel — deshalb faellt es erst mobil auf.
 *
 * **Grenze 991px, nicht 767px.** Nachgemessen sind die Flaechen schon ab
 * 991px abwaerts eingerueckt — dort bricht das Layout auf eine Spalte um.
 * Bei 767px entstuende eine sichtbare Stufe zwischen Tablet und Handy.
 *
 * **Text bleibt im Container** (ausdruecklich in HRS-193): Die Flaeche laeuft
 * an den Rand, der Text behaelt seine 20px. Der Entwurf setzt ihn mobil
 * durchgaengig auf x ≈ 21.
 *
 * Diese Datei wird in `main.less` NACH `korrekturen` eingebunden; bei
 * gleicher Spezifitaet gewinnt sie deshalb. Kein neues `!important`.
 * ======================================================================== */
/* Das Muster existiert im Projekt bereits an den Trennerbildern (`.v-trenner`,
   `.a-trenner-bild`) — hier nur benannt, nicht neu erfunden. */
@media (max-width: 991px) {
  /* --- 1. Kontaktblock (grau) — HRS-211, 230, 238 -------------------------
     Die Artikelklasse muss mit in den Selektor: Ein blosses
     `.v-contact-block` (0,1,0) verliert gegen die vorhandenen
     `.a-… .v-contact-block` (0,2,0). Genau der Fall aus LEARNINGS §1.

     Aussen kein seitliches Polster, innen 20px — sonst stuende der Text bei
     68px statt bei 20 (aussen 24 + innen 24 + Rand 20).                    */
  .a-feste-feiern-feier .v-contact-block,
  .a-firmenevents-angebote .v-contact-block,
  .a-unternehmen-individuell .v-contact-block {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }
  .a-feste-feiern-feier .v-contact-block__inner,
  .a-firmenevents-angebote .v-contact-block__inner,
  .a-unternehmen-individuell .v-contact-block__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* --- 2. Artikel-Farbbaender — HRS-215 (rot), HRS-247 (gruen) ------------
     Diese beiden tragen die Farbe am Artikel selbst und halten ihren Rand
     ueber `width: calc(100% - 40px)`. Es genuegt, die Breite freizugeben —
     die vorhandenen Innenabstaende halten den Text weiterhin bei 20.       */
  .mod_article.a-feste-feiern-info,
  .mod_article_container.a-feste-feiern-info,
  .mod_article.a-nachhalt-co2,
  .mod_article_container.a-nachhalt-co2 {
    width: 100%;
    max-width: 100%;
  }
  /* --- 3. „Bewerten Sie uns" (grau) — HRS-233 -----------------------------
     Steht auf /fuer-unternehmen UND /tagungen. Das Ticket nennt nur die
     erste Seite; das mobile Tagungen-Artboard zeigt den Kasten dort aber
     ebenfalls randabfallend. Beide gleich zu behandeln ist richtiger, als
     denselben Kasten auf zwei Seiten verschieden aussehen zu lassen.       */
  .mod_article.a-tagungen-bewerten,
  .mod_article_container.a-tagungen-bewerten {
    width: 100%;
    max-width: 100%;
  }
  /* Das seitliche Innenpolster wird nicht hier geregelt: Es steht mit
     `!important` in `custom.less` und wurde dort zu einem mitwachsenden Wert
     geaendert — eine zweite Regel danebenzustellen haette ein neues
     `!important` gebraucht. */
  /* --- 4. FAQ-CTA-Kasten (grau) — HRS-249 -------------------------------- */
  .a-faq-cta .v-faq-cta-box {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* --- 5. Bleed-Feature (rosa) — HRS-193 ---------------------------------
     `:not(.v-bleed-feature--side-cards)` ist hier kein Schoenheitsfehler,
     sondern noetig: Die Variante `--side-cards` auf /tagungen soll laut
     HRS-236 **weiss und eingerueckt** sein, nicht randabfallend. Beide
     Tickets haben recht, das Artboard gibt beiden recht — es sind zwei
     Varianten desselben Moduls. Ausserdem hebt `:not()` die Spezifitaet auf
     (0,3,0) und schlaegt damit den Mobilblock
     `.v-bleed-feature .v-bleed-feature__panel` (0,2,0).                    */
  .v-bleed-feature:not(.v-bleed-feature--side-cards) .v-bleed-feature__panel {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* --- 6. Zimmer-Fakten (rosa) — HRS-199 ---------------------------------
     Der `:after`-Trick verlaengert die Leiste auf Desktop nach rechts aus
     dem Container heraus. Mobil ergibt er eine negative Breite und ist
     ueberfluessig, sobald die Leiste selbst randabfallend ist.

     Trifft alle elf Zimmer-Detailseiten, nicht nur die gemeldete.          */
  .v-room-detail__facts {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
  .v-room-detail__facts:after {
    display: none;
  }
}
/* --- 7. Bleed-Feature, Variante „Seitenkarten" — HRS-236 ------------------
   Das Gegenteil der uebrigen: **nicht** randabfallend, sondern weiss und
   eingerueckt wie die beiden Karten daneben.

   Ursache: Weiss, Innenabstand und Schatten stehen heute ausschliesslich in
   `@media (min-width: 992px)`. Darunter faellt die Variante auf die
   Grundregel `background: #faf6f7` zurueck — rosa, ohne seitliches Polster.
   Die Seitenkarten daneben haben fuer genau diesen Fall bereits einen
   `max-width: 991px`-Block mit weiss, Polster und Schatten; das Panel hatte
   nur keinen.

   Grenze hier 991px (nicht `@mobile`), weil der Baustein dort umbricht.    */
@media (max-width: 991px) {
  .v-bleed-feature--side-cards .v-bleed-feature__panel {
    background: #fff;
    padding: 20px;
  }
  /* Zweiter Teil des Tickets („Bildgröße falsch"): Mobil greift bisher der
     Grundwert `aspect-ratio: 925 / 321` (2,88). Gemessen 350x121 statt der
     350x273 aus dem Entwurf (352x275 ≙ 1,28).

     Bewusst nur fuer diese Variante: Derselbe falsche Grundwert trifft mobil
     auch /kulinarik — dort gibt es kein Ticket, und „Abweichung ohne Ticket
     bleibt". */
  .v-bleed-feature--side-cards .v-bleed-feature__main img,
  .v-bleed-feature--side-cards .v-bleed-feature__media img {
    aspect-ratio: 352 / 275;
  }
}
/* --- 8. Direktkontakt-Kasten (weiss) — HRS-277 ----------------------------
   „Kasten randabfallend" — gemessen bei 393px stand er bei x=20 mit 353px
   Breite, also mit dem Containerrand auf beiden Seiten.

   Der Entwurf bestaetigt es: Im Mobil-Artboard `iphone-14-pro-18` liegt die
   weisse Flaeche bei **x=1 mit 392px Breite** auf einem 393px-Artboard —
   sie laeuft an den Rand.

   **Der Inhalt bewegt sich dabei nicht**, und das ist der Punkt: Heute
   sitzt er bei x=30 (20px Container plus 10px Innenabstand aus
   `mobil-komponenten.less`). Nach dem Ausbrechen braucht der Kasten
   deshalb genau diese 30px als eigenen Innenabstand — dann steht der Text
   weiterhin bei x=30 und die nutzbare Textbreite bleibt bei 333px.

   Das ist hier wichtiger als sonst: Die 10px stammen aus HRS-210, wo der
   Platz fuer die Mailadresse knapp war. Waere der Innenabstand beim
   Ausbrechen auf den Grundwert zurueckgefallen (`clamp(1.75rem, 3vw,
   2.5rem)` = 28px je Seite), haette der Text 2x18px verloren und die
   Adresse haette wieder umgebrochen. Im Entwurf steht der Titel bei x=31,
   der Text bei x=93-98 — die 30px sind also auch dort belegt.

   Der Schatten bleibt unangetastet: Seitlich faellt er jetzt aus dem Bild,
   oben und unten wirkt er weiter. Beanstandet war er nicht.             */
@media (max-width: 991px) {
  /* Der Innenabstand von 30px steht bewusst NICHT hier, sondern in
     `mobil-komponenten.less` — diese Datei wird frueher importiert, ein
     Wert hier wuerde dort still ueberschrieben (LEARNINGS §64). */
  .v-direktkontakt {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
  }
}
/* Mobile Korrekturen an einzelnen Bausteinen (HRS-189/210/217/226/230/244).
   Gegenstueck zu mobil-flaechen: dort nur Farbflaechen, hier alles andere. */
/* ===========================================================================
 * Mobile Korrekturen an einzelnen Bausteinen
 * ---------------------------------------------------------------------------
 * Gegenstueck zu `mobil-flaechen.less` (dort nur randabfallende Farbflaechen).
 * Wird in `main.less` ebenfalls nach `korrekturen` eingebunden.
 *
 * **Alles in dieser Datei gehoert in die @media-Abfrage.** Beim ersten Anlauf
 * war ein Block versehentlich dahinter gerutscht und haette Desktop
 * mitgeaendert — die Klammerzaehlung ging trotzdem auf.
 * ======================================================================== */
@media (max-width: 991px) {
  /* --- Counter: Block zentriert, Inhalt linksbuendig ----------------------
     HRS-217 /erleben-entdecken · HRS-226 /regionale-erlebnisse ·
     HRS-244 /ueber-uns — dreimal wortgleich gemeldet.

     Der Tickettitel klingt widerspruechlich („zentriert aber textfluss bleibt
     linksbuendig"); das Artboard loest ihn auf. Auf „iPhone 14 Pro – 22"
     (393px breit) beginnen **alle** Teile bei x = 95 — die Zahl „2962m"
     (149,5 breit) ebenso wie die Beschriftungen „Zugspitze" (84,2) und
     „Osterfelderkopf" (140,4). Waeren die Zeilen einzeln zentriert, muessten
     sie bei verschiedenen x beginnen; waere der Block linksbuendig, laege er
     bei 21 wie der Fliesstext.

     Also: der **Block** sitzt mittig (95px links wie rechts), sein **Inhalt**
     bleibt linksbuendig. Genau das sagt der Titel.

     `width: fit-content` statt einer festen Breite: Der Block ist damit so
     breit wie seine laengste Zeile und bleibt mittig, auch wenn die Redaktion
     spaeter eine andere Zahl oder Beschriftung eintraegt.

     Gemessen war bisher: Block 20..370 ueber die volle Breite, alles
     linksbuendig bei 20. Danach 87..303 bei 390px Fenster — links wie rechts
     87, also mittig.                                                       */
  .single-counter-container {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  /* --- Telefon/Mail: Adresse soll nicht umbrechen ------------------------
     HRS-210 /kontakt · HRS-230 (zweiter Teil) /fuer-unternehmen ·
     HRS-189 /angebote (dort nur die Symbolgroesse)

     Die Tickets nennen als Ursache die Symbolgroesse. Nachgerechnet bei
     360px ist das nur ein Teil davon:

       /fuer-unternehmen  Text braucht 286px, verfuegbar 320  →   2px fehlen
       /kontakt           Text braucht 268px, verfuegbar 264  →  40px fehlen
       /angebote          Text braucht 254px, verfuegbar 319  →  passt bereits

     40px kann ein Symbol nicht hergeben, das selbst nur 22px breit ist.
     Auf /kontakt liegt die Ursache woanders: `.v-direktkontakt` polstert
     mobil 28px auf jeder Seite — zusammen mit den 20px des Containers
     bleiben von 360px nur 264 uebrig. Deshalb zuerst das Polster, dann das
     Symbol.

     Die Symbole werden dabei zugleich einheitlich: Gemessen waren sie
     22x22 (Kontakt, Fuer Unternehmen), 24x24 (Angebote) und einmal sogar
     22x17 — nicht quadratisch. Das war der Punkt „Icons proportional
     kleiner" aus HRS-189.                                                  */
  /* HRS-277, 27.10.2026: aus 10 wurden 30 — und der Text steht trotzdem
     an derselben Stelle. Der Kasten bricht jetzt aus dem Container aus
     (`mobil-flaechen.less`, Abschnitt 8, „Kasten randabfallend"). Die
     20px Containerrand, die bisher von aussen kamen, muss er seither
     selbst mitbringen: 20 + 10 = 30. Nutzbare Textbreite unveraendert
     333px bei 393px Bildschirm — die Rechnung aus HRS-210 bleibt heil.

     Diese Regel steht hier und nicht drueben bei der Flaeche, weil
     `mobil-komponenten` spaeter importiert wird: Ein Innenabstand drueben
     wuerde von dieser Stelle still ueberschrieben (LEARNINGS §64). */
  .v-direktkontakt {
    padding-left: 30px;
    padding-right: 30px;
  }
  /* Dieselbe Kontaktzeile wird von **drei** Bausteinen erzeugt, mit je
     eigener Huelle — deshalb drei Selektoren statt einem:
       /kontakt            .v-contact-phone-mail__icon   22x22 / 22x17
       /fuer-unternehmen   .v-contact-block__icon        22x22 (Zeile: __item)
       /angebote           .v-trenner__contact-icon      24x24 / 24x18
     Die Mailsymbole waren dabei **nicht quadratisch** (22x17, 24x18) — das
     ist der Punkt „Icons proportional kleiner". Eine quadratische Huelle
     plus `object-fit: contain` haelt das Seitenverhaeltnis und macht alle
     drei Bausteine gleich gross. */
  /* HRS-277/278/279 — Nachbesserung an genau diesem Block.

     Der erste Anlauf (oben beschrieben) hat die **Huelle** von 52 auf 18px
     geschrumpft und das Symbol mit `width:100%` darin aufgezogen. Damit sass
     das Symbol randbuendig im Kreis — null Luft. Genau das ist gemeldet
     worden: „die sind im Kreis zu gross, zu wenig Spacing zur Aussenkante."

     Die Vorlage steht bereits im Projekt und war nie beanstandet:

       .v-footer-social-link   52px Huelle, 22px Symbol  = 42%, 15px Luft
       dieselben drei Bausteine auf **Desktop**  52px / 20-22px = 38-42%
       XD, Kreise im Footer    52px Huelle, 24,7px Symbol = 48%

     Also nicht die Huelle schrumpfen, sondern das Symbol darin. Die 42%
     stammen aus dem Footer, nicht aus dem Augenmass.

     Warum die Huelle trotzdem nicht fest 52px ist: Die 18px kamen aus
     HRS-210/230, wo der Text zu wenig Platz hatte. Nachgemessen auf
     /kontakt (laengste einzeilige Zeile, „willkommen@riessersee-hotel.de"):

       360px Geraet  -> Huelle bis 22px einzeilig, ab 24px bricht die Mail um
       375px Geraet  -> bis 36px
       390px Geraet  -> 52px passen vollstaendig

     Das ist fast exakt `Geraetebreite - 338px`. Deshalb eine Rechnung statt
     weiterer Bruchstellen: schmale Geraete bekommen den kleineren Kreis,
     ab 390px den Entwurfswert. Bei 991px (Rand dieser Abfrage) ergibt die
     Rechnung ebenfalls 52 — der Uebergang zum Desktop ist damit nahtlos.

     Jeweils **ueber den Baustein** geschrieben (`.v-trenner
     .v-trenner__contact-icon`), nicht blank. Grund: In custom.less steht
     `.a-alpine-bio .v-trenner__contact-icon { width: 52px }` mit zwei
     Klassen. Eine blanke Regel verliert dagegen, und /alpine-beauty-spa
     haette als einzige Seite einen anderen Kreis — genau die Art stiller
     Abweichung, die hier schon dreimal Zeit gekostet hat. Der Baustein als
     Elternklasse wiegt ebenfalls zwei und gewinnt ueber die Reihenfolge,
     ohne `!important` und ohne einen Seitennamen in eine Bausteinregel zu
     schreiben (HRS-204). */
  .v-contact-phone-mail .v-contact-phone-mail__icon,
  .v-contact-block .v-contact-block__icon,
  .v-trenner .v-trenner__contact-icon {
    /* Maskiert (`~"..."`), weil LESS `100vw - 338px` sonst selbst ausrechnet
       und `-238vw` daraus macht — der Kreis laege dann immer bei 22px.
       Im Quelltext sieht man das nicht, nur im gebauten Stylesheet. */
    width: clamp(22px, 100vw - 338px, 52px);
    height: clamp(22px, 100vw - 338px, 52px);
    flex: 0 0 auto;
  }
  .v-contact-phone-mail .v-contact-phone-mail__icon img,
  .v-contact-block .v-contact-block__icon img,
  .v-trenner .v-trenner__contact-icon img {
    width: 42%;
    height: 42%;
    object-fit: contain;
  }
  /* `.v-contact-phone-mail a` (0,1,1) schlaegt ein blosses
     `.v-contact-phone-mail__link` (0,1,0) — der Abstand blieb beim ersten
     Anlauf deshalb bei 13,6px. LEARNINGS §1. */
  .v-contact-phone-mail a,
  .v-contact-phone-mail__link,
  .v-contact-block__item,
  .v-trenner__contact-link {
    gap: 10px;
  }
  /* --- Tagungen: Überschrift im Akkordeon doppelt — HRS-234 --------------
     Im Übersichts-Panel steht „Übersicht der Tagungsräume" zweimal: einmal
     als 18px-Beschriftung im Akkordeon-Trigger, einmal als 28px-`h3` im
     geöffneten Körper darunter. Beide kommen aus derselben Quelle
     (`overview_title` in `rsce_conference_room_tabs.html5`), deshalb sind sie
     immer gleichlautend.

     Bewusst CSS und bewusst nur mobil: Auf dem Desktop ist der Trigger
     ausgeblendet (Reiter-Modus), dort ist die `h3` die EINZIGE Überschrift.
     Eine Template-Bedingung auf Textgleichheit hätte sie auf dem Desktop
     mitentfernt — der naheliegende Weg wäre hier der falsche gewesen.

     `__panel` im Selektor hält die Regel im Akkordeon: Nur dort gibt es
     überhaupt einen sichtbaren Trigger, der den Text schon zeigt.          */
  .v-conference-tabs__panel .v-conference-tabs__headline {
    display: none;
  }
  /* --- Zimmer-Preisliste — HRS-184 ----------------------------------------
     Drei Bitten: „Umbruch bei Ferienwohnung 1 und 2 nicht so optimal, evtl
     die Schrift etwas kleiner machen" sowie „icons … plus vollfarbig sowie
     trennline".

     **Die Schrift kleiner zu machen waere falsch gewesen.** Das Artboard
     iPhone 14 Pro – 3 (Sektion „+", y2609–3276) setzt die Zimmernamen auf
     18px/400/#b6b6b6 — exakt den Live-Wert — und laesst sie dort ebenfalls
     zweizeilig umbrechen („Dreibettzimmer mit Balkon" 199x43, zwei Zeilen).
     Zu eng ist nicht die Schrift, sondern die Spalte.

     Der Entwurf gibt dem Titel 220px (x22..242 bei 393px Board), live sind
     es 198. Die fehlenden 22px liegen im Preis: Der Entwurf setzt ihn auf
     18px/700, live steht er auf 22px/500 und ist damit breiter als
     vorgesehen. Mit dem Entwurfswert bekommt der Titel seinen Platz zurueck,
     ohne dass irgendwo kleiner gesetzt wird.

     Das „ab" bleibt bei 18px — das ist eine belegte Entscheidung aus
     korrekturen.less §3/§4 (Entwurf y2623, #681d33) und wird hier NICHT
     zurueckgedreht.

     Nur mobil: Der Entwurf ist das Phone-Artboard; auf dem Desktop ist die
     Liste gar nicht sichtbar (Reiter-Modus), die Preisangabe dort aber
     schon. */
  .v-room-tabs__accordion-price .v-room-tabs__price-value {
    font-size: 18px;
    font-weight: 700;
  }
  /* „plus follfarbig": Das Plus erbte ueber `currentColor` das Grau der
     Zeile. Der Entwurf zeigt es in #681d33 (y2609, 21x47, 45px/300) und
     damit deutlich kraeftiger als die 14px-Balken von heute — gemessen
     stand es auf rgb(182,182,182), Kontrast 2,03:1 auf Weiss. */
  .v-room-tabs__accordion-icon {
    color: #681d33;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
  }
  .v-room-tabs__accordion-icon::before {
    width: 21px;
  }
  .v-room-tabs__accordion-icon::after {
    height: 21px;
  }
  /* „sowie trennline": Die Linie stand auf 14 % Deckkraft und war praktisch
     unsichtbar. Der Entwurf fuehrt sie als eigenes Element ueber die volle
     Containerbreite (x24, 348 breit bei 393er Board); eine Deckkraft nennt
     der Export nicht, das Vorgabebild der Designerin zeigt sie aber klar
     sichtbar. 35 % ist daraus abgeleitet, nicht gemessen — bewusst
     zurueckhaltend, damit die Liste nicht wie eine Tabelle wirkt. */
  .v-room-tabs__panel {
    border-bottom-color: rgba(104, 29, 51, 0.35);
  }
  /* --- Icons in weissen Kaesten — HRS-204, 216, 220, 241 ------------------
     Vier Tickets, derselbe Befund, aber DREI verschiedene Bausteine:
       HRS-204 /seehaus              rsce_iconboxes
       HRS-216 /erleben-entdecken    rsce_iconboxes
       HRS-220 /alpine-beauty-spa    rsce_team_with_icons
       HRS-241 /gruppen              rsce_media_cta_cards, Variante rail-slider
     Einen gemeinsamen Selektor gibt es nicht — deshalb ein gemeinsames
     Mixin und vier Anwendungen (LEARNINGS §45).

     Soll aus den Mobil-Artboards, bei allen vier identisch: zwei Spalten,
     Kasten 166x175 bei 393px Board, Hintergrund #ffffff, Text 15px von der
     Kastenkante, waagerechter wie senkrechter Abstand 20px.

     **Der Schatten steht NICHT im Entwurf** — der XD-Export kennt ueberhaupt
     keinen Schlagschatten (LEARNINGS §23), jede Deckkraft dort ist ein
     Strich. Die Designerin bestellt ihn in drei der vier Tickets
     ausdruecklich („in Kästen mit Schatten", „Weiße Kästen mit Schatten
     fehlen"). Genommen wird der Projektwert `@rs-card-shadow`, den die
     Team-Kachel und die Merkmalskarte schon tragen — Einheitlichkeit ist
     laut §23 das einzige pruefbare Kriterium. Das ist eine Entscheidung,
     keine Messung.

     Das ist KEIN Widerspruch zur frueheren Schatten-Entscheidung (§6/§24):
     Die ging in dieselbe Richtung — Schatten hinzufuegen, wo der Entwurf
     keinen zeigt — und betraf andere Bausteine (Bewertungs- und Blogkarten).
     Hier bekommen erstmals die Icon-Eintraege selbst einen Kasten.

     `min-height` statt fester Hoehe: Der Entwurf zeichnet 175px, arbeitet
     aber mit gekuerzten Texten. Live braucht „Große Auswahl an
     Entspannungs-Massagen" mehr. Feste Hoehe liesse den Text ueberlaufen.

     Nur mobil, und das ist belegt: Die DESKTOP-Artboards zeigen ebenfalls
     keine Kaesten, und HRS-204 sagt selbst „Icons **mobile** in Kästen".   */
  /* 1. Der Iconbox-Baustein, projektweit statt je Seite.
        Gemeldet waren /seehaus (HRS-204) und /erleben-entdecken (HRS-216).
        Derselbe Baustein steht mobil aber auf sieben weiteren Stellen —
        /zimmer, /kulinarik, /tagungen, /fuer-unternehmen, /berg-wellness,
        /gruppen und der zweite Block auf /erleben-entdecken —, dort
        einspaltig und ohne Kasten. Auf ausdrueckliche Ansage ueberall
        nachgezogen, statt fuenf Einzeltickets abzuwarten.

        Das Gutschein-Symbol in der Kopfzeile benutzt dieselbe Huelle, hat
        aber KEINEN Eintrag darin (gemessen: null `.v-single-icon-wrapper`).
        Der Zusatz `.mod_article` haelt es trotzdem sicher heraus — eine
        Regel soll nicht davon abhaengen, dass ein Element zufaellig leer
        ist.

        Zwei Selektoren, weil der Baustein in beiden Verschachtelungen
        vorkommt — mit und ohne die Huelle `-wrapper`. */
  .mod_article .v-icons-container-element-wrapper .v-icons-container-element.v-inn-grid,
  .mod_article .v-icons-container-element.v-inn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* HRS-184: „evtl abstand zwischen den boxen verkleinern damit die
       schrift reinpasst". Der Entwurf zeichnet 20px; 12 sind eine
       Ticket-schlaegt-XD-Entscheidung und gelten einheitlich fuer alle
       Stellen des Bausteins — denselben Kasten je Seite verschieden breit
       zu machen waere die schlechtere Antwort. Gemessen bringt das bei
       393px eine Zeile weniger in der vierten Kachel. */
    gap: 12px;
  }
  .mod_article .v-icons-container-element .v-single-icon-wrapper {
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
    padding: 15px;
    min-height: 175px;
  }
  /* HRS-184 — was hier BEWUSST NICHT steht, damit es niemand nachtraegt:
     eine Regel, die die von Hand gesetzten Zeilenumbrueche in den
     Kacheltexten ausblendet.

     Diese Umbrueche sind der eigentliche Grund fuer das Bild der
     Designerin — „Sogut wie jedes Zimmer mit<br>Balkon und Bergblick"
     laesst mobil das Woertchen „mit" allein auf einer Zeile stehen.
     `br { display: none }` waere die naheliegende Loesung und ist falsch:
     Vor zwei der vier Umbrueche steht KEIN Leerzeichen, im Quelltext
     „Zimmer mit<br>Balkon" und „Wellness-Bereich<br>zum". Ausgeblendet
     ergaebe das „mitBalkon" und „Bereichzum" — ein sichtbarer Textfehler
     statt einer Korrektur. Ein Leerzeichen laesst sich per CSS nicht
     zuverlaessig einsetzen (Pseudoelemente an `br` rendern nicht).

     Die Umbrueche gehoeren damit in den Text, nicht ins Stylesheet. Im
     Ticket angeboten, nicht ungefragt gemacht. */
  /* 1b. Angebote-Teaser — HRS-299: „hier bitte so wie bei tagungen etc mit
         weissen kasten + schatten siehe zweites bild aus xd design".

         Wieder derselbe Befund, wieder ein anderer Baustein: Die drei
         Eintraege auf /angebote gehoeren nicht zu `rsce_iconboxes`, sondern
         zum Angebote-Teaser (`.v-offers-teaser__icons`). Deshalb hat die
         Regel von HRS-204 sie nie erfasst — gemessen bei 393 und 500px:
         untereinander, 220px breit, ohne Flaeche und ohne Schatten.

         Der mobile Entwurf, den die Designerin mitgeschickt hat, zeigt sie
         wie ueberall sonst: zwei Spalten, weisser Kasten mit Schatten,
         Symbol oben links, Text linksbuendig darunter.

         **Nur mobil, und das ist wichtig.** Auf dem Desktop stehen Symbol
         und Text seit HRS-265 ausdruecklich im Mittelachsensatz — eine
         bewusste Abweichung vom Entwurf, die in CLAUDE.md vermerkt ist. Die
         beiden Tickets widersprechen sich nicht: HRS-265 kam bei 1677px,
         HRS-299 bei 500px. Innerhalb der Kaesten gilt mobil die
         Linksbuendigkeit des Entwurfs, oberhalb 991px bleibt die Mitte.

         Abstand 12px wie bei den uebrigen Kaesten (HRS-184). Die feste
         Eintragsbreite von 220px aus HRS-265 muss hier weichen, sonst
         passen zwei Kaesten nicht nebeneinander. */
  .v-offers-teaser__body--icons-top .v-offers-teaser__icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .v-offers-teaser__body--icons-top .v-offers-teaser__icon-item {
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
    padding: 15px;
    min-height: 175px;
    width: auto;
    align-items: flex-start;
    text-align: left;
  }
  .v-offers-teaser__body--icons-top .v-offers-teaser__icon-text {
    text-align: left;
    /* Nachgemessen nach dem ersten Lauf: „Abwechslungsreiche" misst bei
       18px rund 160px, der Kasten laesst bei 393px aber nur 141px Text zu —
       das Wort stand ueber dem Kastenrand. Dieselbe Loesung wie bei den
       uebrigen Icon-Kaesten (HRS-204, weiter unten in dieser Datei):
       `anywhere` bricht nur, wenn es sonst herausragt, und setzt dabei
       keinen Trennstrich. `hyphens: manual`, weil `auto` auch dort getrennt
       hat, wo es nicht noetig war — das war die urspruengliche
       Beanstandung. */
    hyphens: manual;
    overflow-wrap: anywhere;
  }
  /* 2. Alpine Beauty Spa — anderes Modul, eigenes Raster. Der Einspalter
        unter 576px steht dort ohne `!important`, eine spaetere Regel
        gleicher Spezifitaet genuegt.
        `__icon-media` behaelt seine feste Hoehe aus wellness.less (HRS-103),
        sonst stehen die Texte wieder versetzt. */
  .v-team-with-icons__icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .v-team-with-icons__icon {
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
    padding: 15px;
    min-height: 175px;
  }
  /* 3. Rail-Slider-Icons — hier genuegt der Kasten nicht: Die Liste ist
        Flex ohne Basis, die drei Eintraege sind gemessen 144/144/200px
        breit. Raster statt Umbruch.

        Bewusst am Baustein statt an der Artikelklasse: Dieselbe Icon-Liste
        steht auch auf /firmenevents. Das Ticket nennt nur /gruppen, aber
        denselben Baustein auf zwei Seiten verschieden aussehen zu lassen
        waere die schlechtere Antwort.

        `margin-top: -28px` aus custom.less (HRS-83) bleibt unangetastet. */
  .v-media-cta-cards--rail-slider .v-media-cta-cards__icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .v-media-cta-cards--rail-slider .v-media-cta-cards__icon-item {
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
    padding: 15px;
    min-height: 175px;
  }
  /* --- Knoepfe linksbuendig mit dem Text — HRS-221 ------------------------
     /alpine-beauty-spa, Kasten „Berg-Wellness. Natur. Aktiv."

     Unter 992px stapelt Contao die Spalten untereinander. Die
     Rechtsbuendigkeit aus HRS-136 (korrekturen.less) war fuer die
     Desktop-Spalte gedacht und laesst die Knoepfe danach neben dem Text
     haengen: gemessen x 118 bei 360px Fenster, waehrend Ueberschrift und
     Fliesstext bei x 44 beginnen — 74px daneben, bei 390px sogar 104px.

     Der Entwurf gibt der Designerin recht: iPhone 14 Pro – 23 (y3398) setzt
     den Knopf auf x 41, also genau die linke Textkante.

     Gleiche Spezifitaet wie die Regel in korrekturen.less (0,2,0), aber
     spaeter eingebunden — kein neues `!important`. Die gleiche Breite aus
     HRS-136 bleibt erhalten.

     Trifft projektweit nur diese eine Stelle: Zwei Knoepfe direkt in einer
     `.ce_column` gibt es auf keiner anderen Hotelseite.                   */
  .ce_column:has(> .v-button + .v-button) {
    justify-content: start;
  }
}
/* Letzter Teil von HRS-184, bewusst erst ab Telefonbreite:
   Der Entwurfswert 18px loest den Umbruch nur bis 390px Bildschirmbreite.
   Gemessen bei 360 — dem Viewport, aus dem die Meldung kam — braucht
   „Ferienwohnung 2" 188px in einer 178px-Spalte. Das sind 10px, die aus
   der Spalte nicht mehr zu holen sind: Der Entwurf gibt ihr selbst nur
   220px bei 393px Board.

   Hier gilt „Ticket schlaegt XD": Die Designerin hat die kleinere Schrift
   ausdruecklich angeboten („evtl die Schrift etwas kleiner machen"). 16px
   statt 18px laesst „Ferienwohnung 1/2" ab 360px einzeilig und bleibt nah
   genug am Entwurf, dass die Liste ihr Bild behaelt. Gehoert nach
   LEARNINGS, damit es niemand spaeter auf den XD-Wert „zurueckkorrigiert".

   Nur bis 767px: Zwischen 768 und 991 passt die Zeile ohnehin, dort bleibt
   der Entwurfswert stehen. */
@media (max-width: 767px) {
  .v-room-tabs__accordion-title {
    font-size: 16px;
  }
}
/* ===========================================================================
 * Knoepfe auf Telefonbreite — HRS-213, HRS-255
 * ---------------------------------------------------------------------------
 * Beide Tickets haben dieselbe Ursache: `standard.less` setzt global
 * `.v-button > a { width: auto !important }`, `tiny.less` dazu
 * `min-width: 150px !important`. Jeder Knopf ist damit genau so breit wie
 * seine Beschriftung — gemessen „Broschüre" 150px neben „Hilfreiche Links"
 * 166,6px, „Zurück zur Übersicht" 210,3px neben „Nächster Beitrag" 177,5px.
 *
 * **Hier ist ein neues `!important` die richtige Antwort, nicht die bequeme.**
 * Die Projektregel begruendet ihr Verbot damit, dass die Ursache „fast immer
 * Spezifitaet" sei. Hier ist sie es nachweislich nicht: Gegen ein globales
 * `!important` kommt keine Spezifitaet an. Derselbe Fall ist im Projekt schon
 * zweimal so entschieden und begruendet worden (korrekturen.less, HRS-117 und
 * HRS-136) — diese Regeln folgen demselben Muster, `min-width` wird jeweils
 * mit zurueckgenommen.
 *
 * **Grenze 575px**, ein im Projekt bereits genutzter Haltepunkt. Gemessen
 * brechen die Knoepfe unter rund 417px (HRS-213) bzw. 444px (HRS-255) um;
 * darueber bis 575px stehen sie nebeneinander und werden durch diese Regeln
 * gestapelt. Das ist bewusst: „gleich lang" laesst sich bei zwei verschieden
 * langen Beschriftungen nur nebeneinander ODER gestapelt haben, und gestapelt
 * ist das, was beide Tickets zeigen.
 * ======================================================================== */
@media (max-width: 575px) {
  /* HRS-213 /feste-feiern, Karte „Factsheet Hochzeit" — „Buttons gleich lang".
     Einspaltiges Raster, beide Knoepfe auf die Breite des laengeren.
     Gemessen danach beide 166,6px bei 360 und 390px, linke Kante 40 =
     linke Textkante. */
  .a-feste-feiern-factsheet__actions {
    display: grid;
    grid-auto-columns: max-content;
    justify-content: start;
    justify-items: stretch;
    gap: 16px;
  }
  .a-feste-feiern-factsheet__actions .v-button > a {
    width: 100% !important;
    min-width: 0;
  }
  /* HRS-255 /blog-detail — „Buttons untereinander und gleich breite
     (Containerbreite)".

     Zweite Ursache hier: `__nav-back { margin-right: auto }` und
     `__nav-next { margin-left: auto }` schieben die Knoepfe nach dem Umbruch
     an gegenueberliegende Raender — Zeile 1 links, Zeile 2 rechts.

     „Ticket schlaegt XD": Der Entwurf (iPhone 14 Pro – 16, y2659) kennt hier
     nur EINEN Knopf mit 189px. Die Containerbreite steht im Ticket, nicht im
     Entwurf. Gemessen danach beide 320px bei 360 und 350px bei 390, x 20.

     Trifft alle sechs Blog-Detailseiten — derselbe Leser, dasselbe Markup. */
  .v-news-detail__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .v-news-detail__nav .v-news-detail__nav-item {
    margin: 0;
    flex: 0 0 auto;
  }
  .v-news-detail__nav .v-button > a {
    width: 100% !important;
    min-width: 0;
  }
}
/* ===========================================================================
 * HRS-222 — „Kein Slider, diese 3 untereinander"
 * ---------------------------------------------------------------------------
 * /alpine-beauty-spa, die drei Behandlungen. Der Baustein liefert unter 992px
 * grundsaetzlich einen Swiper statt des Rasters; gemessen stehen die drei
 * Karten dabei nebeneinander bei x 20 / 364 / 708 — zwei davon ausserhalb des
 * Bildschirms.
 *
 * Der Entwurf gibt der Designerin recht: iPhone 14 Pro – 23 zeigt die drei
 * Behandlungen als gestapelte Bloecke (y 4486 / 5476 / 6454), je mit Bild
 * 352x528, Ueberschrift, Text und einem 160x50-Knopf linksbuendig bei x 21.
 *
 * **Grenze 767px, nicht 991px.** Bei 768px waeren die Karten 728px breit und
 * die Sektion 4254px hoch statt 1588 — zwischen Tablet und Handy entstuende
 * eine unschoene Stufe. Dort bleibt der Slider vorerst stehen; ein
 * Tablet-Artboard gibt es nicht, das ist eine Frage an die Designerin.
 *
 * **Trifft zwei weitere Seiten**, die im Ticket nicht stehen: die Startseite
 * und /impressionen, beide mit demselben Baustein („Jetzt entdecken"). Deren
 * Mobil-Artboards (iPhone 14 Pro – 1 und – 19) zeigen dort EBENFALLS
 * gestapelte Bloecke — die Aenderung fuehrt beide naeher an den Entwurf,
 * nicht davon weg. Deshalb am Baustein statt an der Artikelklasse.
 * ======================================================================== */
@media (max-width: 767px) {
  .v-page-teaser-grid__desktop {
    display: block;
  }
  .v-page-teaser-grid__mobile {
    display: none;
  }
  .v-page-teaser-grid__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
  }
}
/* ===========================================================================
 * Lagepläne seitlich schiebbar — HRS-196, HRS-235
 * ---------------------------------------------------------------------------
 * /zimmer-detail („Der Lageplan") und /tagungen („Übersicht des
 * Tagungsbereichs"). Beides einfache Bilder mit eingebackener Beschriftung,
 * die auf Containerbreite heruntergerechnet werden: 2054px Vorlage auf 350px
 * Anzeige, also sechsfach verkleinert — die Raumnamen sind dabei nicht mehr
 * lesbar. Die Designerin bittet um „größer und seitlich zu scrollen, so wie
 * Startseite karte".
 *
 * **Die 200 % sind gemessen, nicht geschätzt:** Die Karte der Startseite, auf
 * die sie verweist, ist bei 390px Fenster 702px breit bei 350px Container —
 * exakt das Doppelte. Beide Pläne stehen damit auf derselben Vergrößerung
 * wie ihr Vorbild.
 *
 * **Grenze 767px, nicht 991px.** Ab Tabletbreite ist der Plan ohnehin 728px
 * und damit doppelt so groß wie auf dem Handy; 200 % wären dort 1902px und
 * die Vorlage (2054 bzw. 1950px) hätte nur noch 1,08-fache Reserve — auf
 * einem Tablet mit doppelter Gerätedichte also sichtbar unscharf. Gemessen.
 *
 * Auf dem Handy bleibt genug Reserve: 700 CSS-Pixel gegen 2054 Bildpunkte,
 * also auch bei dreifacher Dichte (2100) noch scharf.
 *
 * Spezifitaet: `.a-tagungen-plan .a-tagungen-plan__img figure` in custom.less
 * ist (0,3,0) und setzt `width: 100%` — ein blosses `.a-tagungen-plan__img >
 * figure` (0,1,1) kam dagegen nicht an. Beim ersten Anlauf floss der
 * Behaelter deshalb zwar, das Bild blieb aber auf Containerbreite und es gab
 * nichts zu schieben (LEARNINGS §1).
 *
 * `picture` und `img` behalten ihre vorhandenen 100 % — die beziehen sich
 * dann auf die 200 % der `figure`.
 * ======================================================================== */
@media (max-width: 767px) {
  .a-zimmer-lageplan .content-image,
  .a-tagungen-plan .a-tagungen-plan__img {
    display: flex;
    overflow-x: auto;
  }
  .a-zimmer-lageplan .content-image > figure,
  .a-tagungen-plan .a-tagungen-plan__img > figure {
    flex: 0 0 auto;
    width: 200%;
    margin: 0;
  }
  .a-zimmer-lageplan .content-image img {
    width: 100%;
    max-width: none;
    height: auto;
  }
}
/* ===========================================================================
 * Ausflugsliste: Trennlinie fehlt mobil — HRS-227
 * ---------------------------------------------------------------------------
 * /regionale-erlebnisse, „Ausflüge in die Region".
 *
 * Die Linie gibt es schon — aber nur auf dem Desktop und nur SENKRECHT:
 * `@media (min-width: 992px) { .v-media-cta-card:not(:nth-child(3n))::after }`
 * in custom.less zieht einen 2px-Strich zwischen den drei Spalten. Der
 * Entwurf zeigt sie mobil waagerecht zwischen den Einträgen — also dieselbe
 * Linie, nur gedreht. Farbe und Stärke werden übernommen, nicht neu erfunden.
 *
 * **Grenze 767px, nicht 991px.** Zwischen 768 und 991 steht das Raster
 * zweispaltig; eine Linie unter jeder Karte ausser der letzten ergäbe dort
 * in der letzten Zeile einen Strich unter der linken und keinen unter der
 * rechten Karte. Gemessen: 1 Spalte bis 767, 2 Spalten ab 768, 3 ab 1280.
 * Im Band 768–991 bleibt es wie bisher ohne Trenner — dazu gibt es kein
 * Ticket.
 *
 * `:not(:last-child)`, weil der Entwurf unter dem letzten Eintrag keine
 * Linie zeigt. Die Karte trägt bereits `position: relative` aus dem
 * Desktop-Block.
 * ======================================================================== */
@media (max-width: 767px) {
  .a-regionale-ausfluege .v-media-cta-card:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* Die Haelfte des Zeilenabstands (2,5rem) — die Linie sitzt damit
       mittig zwischen zwei Eintraegen. */
    bottom: -1.25rem;
    height: 2px;
    background: #681d33;
  }
}
/* ===========================================================================
 * Zeitstrahl „Wie alles begann" untereinander — HRS-246
 * ---------------------------------------------------------------------------
 * /ueber-uns. Der Eintrag ist ein dreispaltiges Raster: Jahreszahl, Schiene
 * (senkrechte Linie mit Punkt), Inhalt.
 *
 * Gemessen bei 360 und 390px: Die Jahresspalte ist 56px breit, die
 * Jahreszahl steht aber auf 45px und braucht 104px — sie laeuft 48px aus
 * ihrer Spalte heraus und direkt in den Titel, der bei 111px beginnt. Die
 * senkrechte Linie liegt bei x = 72 und damit mitten im Jahrestext. Genau
 * das zeigt der Screenshot der Designerin.
 *
 * Ihr Entwurf fuer das Handy: Jahreszahl mittig auf eigener Zeile, darunter
 * Titel und Text — und **keine** senkrechte Linie, kein Punkt. Das ist auch
 * der Ticketwortlaut („untereinander ohne senkrechte linie").
 *
 * Grenze 767px: Ab 768 ist die Jahresspalte 72px bei 65px Schrift und
 * kollidiert ebenfalls — das bleibt aber vorerst, weil der Entwurf dafuer
 * keine Tablet-Vorlage hat und das Ticket ausdruecklich „fuer mobile" sagt.
 * Steht hier, damit es nicht untergeht.
 * ======================================================================== */
@media (max-width: 767px) {
  /* Die lange Linie durch alle Eintraege */
  .v-history-timeline__list::before {
    content: none;
  }
  .v-history-timeline__item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  /* Schiene mit Linie und Punkt */
  .v-history-timeline__rail {
    display: none;
  }
  .v-history-timeline__year {
    text-align: center;
  }
}
/* ===========================================================================
 * HRS-183 — H1 der Unterseiten lag unter der Kopfzeile
 * ---------------------------------------------------------------------------
 * Die Kopfzeile ist fest positioniert, 112px hoch und liegt mit z-index 9999
 * ueber dem Inhalt. Der Abstand darueber stand auf
 * `clamp(88px, 12vw, 144px)` — bei 360 und 390px also 88px, 24px zu wenig.
 * Gemessen verdeckt bis 933px Fensterbreite (12vw erreicht dort erst 112):
 * bei 360/390 je 24px, bei 767/768 noch 20px. Ab 992 war es in Ordnung.
 *
 * Belegt per `elementsFromPoint` auf der Textoberkante: dort liegt der Header
 * vor der Ueberschrift; erst 24px tiefer ist die H1 selbst oben.
 *
 * Die 12px kommen aus dem Entwurf (Kopfband 125px hoch, H1 bei y = 137,1).
 * Die Kopfhoehe wird gemessen und nicht geschrieben — genau wie bei HRS-181,
 * wo eine feste Zahl die Ursache war (LEARNINGS §46). `main.js` setzt
 * `--rs-header-h` beim Laden und bei jeder Groessenaenderung.
 *
 * Der Notanker 124px gilt nur, falls das Skript nicht laeuft: 112 gemessene
 * Hoehe plus die 12px des Entwurfs.
 *
 * Betrifft 60 der 102 Seiten — ueberall denselben Baustein.
 * ======================================================================== */
@media (max-width: 991px) {
  .v-sub-hero__intro-wrap {
    padding-top: calc(var(--rs-header-h, 112px) + 12px);
  }
}
/* ===========================================================================
 * HRS-180 — GreenSign-Fahne lag auf dem Logo im Fussbereich
 * ---------------------------------------------------------------------------
 * Gemessen bei 360px: Das Logo endet bei x = 240, der Fahnenkasten beginnt
 * bei 213,7 — er liegt also 26,3px darueber, davon 19,6px sichtbare weisse
 * Flaeche mitten im Schriftzug. Ab 386px Fensterbreite verschwindet die
 * Ueberlappung von selbst; die Meldung kam von einem 360px-Geraet.
 *
 * Ursache ist die Untergrenze des Mindestmasses: `clamp(113px, 7.92vw,
 * 152px)`. Die 7,92vw sind das DESKTOP-Verhaeltnis (152 von 1920). Mobil
 * gilt ein anderes: Der Entwurf zeigt die Fahne bei 393px Board mit
 * 76,3 x 96,4 — mit dem 9/152,081 breiten Schattenrand des SVG entspricht
 * das rund 86,6px Bilddatei. Live waren es 113px, also 23,3px zu breit.
 *
 * 22vw trifft diesen Wert: 393 x 0,22 = 86,5. Bei 360px ergibt das 79,2px,
 * die sichtbare Fahne beginnt dann bei 250,2 — 10,2px neben dem Logo.
 *
 * **`right` und `margin-top` haengen am selben Wert** (9 bzw. 6 von 152,081
 * Einheiten Schattenrand im SVG). Wer nur die Breite aendert, verschiebt die
 * Fahne senkrecht und seitlich. Deshalb alle drei zusammen.
 *
 * Ab 514px greift die Obergrenze 113px — von dort bis 767 bleibt alles wie
 * bisher, darueber ohnehin.
 *
 * Ein einzelnes globales Clamp kann beide Verhaeltnisse nicht ausdruecken
 * (Desktop 7,92 %, Mobil 22 %) — ein Austausch des Werts in custom.less
 * wuerde die Fahne auf Tablet und Desktop vergroessern.
 * ======================================================================== */
@media (max-width: 767px) {
  #footer-mod .v-footer-greensign {
    right: calc(20px - clamp(76px, 22vw, 113px) * 0.0592);
  }
  #footer-mod .v-footer-greensign .v-footer-greensign-inner img {
    width: clamp(76px, 22vw, 113px);
    margin-top: calc(clamp(76px, 22vw, 113px) * -0.0395);
  }
}
/* ===========================================================================
 * HRS-225 — „Beautybehandlung" angeschnitten
 * ---------------------------------------------------------------------------
 * Weder Kopfzeile noch Ueberlagerung, sondern schlicht zu wenig Platz: Das
 * Wort ist bei 45px Schrift 361px breit, die Spalte bei 360px Fenster nur
 * 320 und bei 390px nur 350. Abgeschnitten wird es vom `overflow: hidden`
 * des Artikels.
 *
 * **Die Schriftgroesse ist NICHT falsch.** Der Entwurf (iPhone 14 Pro – 27)
 * setzt dieselben 45px/300 — dort steht das Wort auf einem 393px-Board in
 * einem 363px breiten Rahmen und passt mit 2px Luft. Bei 360px ist eine
 * einzeilige Loesung rechnerisch unmoeglich: 360 < 361, auch ohne jeden Rand.
 * Der Wert kommt ausserdem aus der Design-Konfiguration und gilt global fuer
 * jede h2 — er wird hier nicht angetastet.
 *
 * `hyphens: auto` wirkt nur dann, wenn ein Wort sonst nicht passt, und
 * erzeugt einen echten Trennstrich statt eines harten Umbruchs
 * (`<html lang="de">` ist gesetzt). Gemessen: Ueberstand 41px bei 360 und
 * 11px bei 390 jeweils auf 0, Umbruch „Beautybehand-lung".
 *
 * Bewusst am Baustein und nicht an dieser einen Seite: Gemessen ist das
 * heute die einzige ueberlaufende Ueberschrift im Mobilbereich, die Regel
 * aendert also sonst nirgends etwas — faengt aber kuenftige lange Woerter ab,
 * statt sie wieder abzuschneiden.
 * ======================================================================== */
@media (max-width: 767px) {
  .v-headline-type-h2 .v-headline-text {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
/* ===========================================================================
 * HRS-202 — „Headline Halbpension bei mobile raus"
 * ---------------------------------------------------------------------------
 * Im Akkordeon steht der Wochentag bereits in der aufklappbaren Zeile
 * („MITTWOCH"). Darunter wiederholt die Panel-Ueberschrift dieselbe Angabe
 * („Unser Halbpensionsbuffet am Mittwoch") und kostet auf 360px drei Zeilen.
 *
 * Die Ueberschrift bleibt im Markup stehen und wird nur mobil ausgeblendet —
 * auf dem Desktop traegt sie die Spalte neben den Reitern und ist dort die
 * einzige Beschriftung des Inhalts (derselbe Grund wie HRS-234, LEARNINGS
 * §46: ein Entfernen im Template nimmt dem Desktop seine Ueberschrift).
 *
 * Der Schnitt bei 991px ist der Umschaltpunkt des Bausteins selbst
 * (`matchMedia('(min-width: 992px)')` in inn_components.js): Erst darunter
 * gibt es ueberhaupt ein `.v-content-tabs__accordion-body`, und nur dort
 * steht der Wochentag schon im Trigger.
 * ======================================================================== */
@media (max-width: 991px) {
  .v-content-tabs__accordion-body .v-content-tabs__headline {
    display: none;
  }
}
/* ===========================================================================
 * HRS-201 (Teil 2) — „Bildmarke roter Kreis mit Berg mobile ueberall etwas
 * kleiner darstellen"
 * ---------------------------------------------------------------------------
 * Live misst der Kreis 94x94 (86px Flaeche + 2x4px Rahmen) — derselbe Wert
 * wie auf dem Desktop, wo das XD ihn mit 86px belegt (HRS-11).
 *
 * Das mobile Artboard setzt ihn auf **64x64** bei 393px Board, die Bergmarke
 * darin auf 54,5x40 — also wieder rund 85 % des Kreises. 94 statt 64 ist
 * knapp die Haelfte zu gross, und genau das meldet das Ticket.
 *
 * `width` ist hier die Flaeche ohne Rahmen (content-box): 56 + 2x4 = 64.
 * Das Icon braucht deshalb 97 % statt 85 %, um auf die 54,5px des Entwurfs
 * zu kommen — 85 % von 56 waeren nur 47,6.
 * ======================================================================== */
@media (max-width: 767px) {
  .rs-berg-badge__circle {
    width: 56px;
    height: 56px;
  }
  .rs-berg-badge .rs-berg-badge__icon {
    width: 97%;
    max-width: 54px;
  }
}
/* ===========================================================================
 * HRS-229 — „Logo nach Text, nicht zweispaltig"
 * ---------------------------------------------------------------------------
 * `#s-regionale-gapa` baut auf dem generischen Contao-Raster auf
 * (`.row.ce_rowStart > .ce_column.col-6`). Die mobile Aufloesung dieses
 * Rasters existiert laengst, ist aber je Artikel geschrieben worden —
 * custom.less fuehrt dafuer zwei Sammellisten mit zusammen 20 Artikeln.
 * Dieser eine fehlt darin, deshalb steht er als einziger mobil noch
 * nebeneinander (gemessen ueber 25 Seiten bei 360px).
 *
 * HRS-198 hat dieselbe Ursache an anderer Stelle: `#s-zimmer-faq` auf den
 * Zimmer-Detailseiten ist das zweite und letzte Vorkommen. Beide stehen
 * hier zusammen, weil es ein Fehler ist und kein zwei.
 *
 * Desktop bleibt zweispaltig — so zeigen es beide Entwuerfe.
 * ======================================================================== */
@media (max-width: 991px) {
  #s-regionale-gapa .row.ce_rowStart > .ce_column.col-6,
  #s-zimmer-faq .row.ce_rowStart > .ce_column.col-6 {
    grid-column: span 12 / span 12;
  }
}
/* ===========================================================================
 * HRS-228 — „Bild zu hoch" (/regionale-erlebnisse)
 * ---------------------------------------------------------------------------
 * `--mobile-overlay` erzwingt 825px Hoehe, damit Text und Knopf im Overlay
 * Platz finden. Dieser eine Trenner hat gar keinen Inhalt (gemessen:
 * `.v-trenner__content` 0x0) und zeigt deshalb von einem 786x500-Bild nur
 * rund ein Drittel.
 *
 * Der Entwurf (iPhone 14 Pro – 30) gibt dem Bild 393x250 — Verhaeltnis
 * 1,572 und damit **exakt das Seitenverhaeltnis der Datei**. Die Datei ist
 * also richtig gewaehlt, nur die Box war falsch. Mit `aspect-ratio` sind es
 * 229px bei 360 und 248px bei 390; die Seite wird 596px kuerzer.
 *
 * Bewusst an dieser einen Kennung und nicht an der Variablen
 * `@rs-trenner-mobile-height`: Die anderen zwoelf Overlay-Trenner tragen
 * 178–710px Inhalt und brauchen die 825px (LEARNINGS §46 — eine falsche
 * feste Zahl wird nicht durch eine andere feste Zahl ersetzt).
 * ======================================================================== */
@media (max-width: 991px) {
  #s-regionale-trenner .v-trenner--mobile-overlay {
    min-height: 0;
    aspect-ratio: 786 / 500;
  }
  #s-regionale-trenner .v-trenner--mobile-overlay .v-trenner__inner {
    min-height: 0;
  }
}
/* ===========================================================================
 * HRS-179 — „Teaser falsche Darstellung" (Trenner Sommerurlaub, Startseite)
 * ---------------------------------------------------------------------------
 * Live liegt ueber dem Foto ein deckend weisses Panel mit Augenbraue, Titel
 * und Knopf, darunter das Bild — mit harter Kante dazwischen. Das ist die
 * Variante `--mobile-split`.
 *
 * Der Entwurf (iPhone 14 Pro – 1, Sektion 16 „Winterurlaub") kennt kein
 * Panel: Bild 393x675, darueber ein weisser Schleier mit **60 % Deckkraft**
 * ueber der ganzen Flaeche, Augenbraue 74,4px unter der Bildoberkante,
 * Titel und Knopf darunter. Der Kommentar in custom.less:2170 („optisch
 * Text-Panel oben, Bild darunter (XD)") widerspricht dem Artboard.
 *
 * Anker ist die Kennung und nicht `--mobile-split`: Dieselbe Variante
 * tragen auch `#s-trenner-trail` (tiefblaues Panel) und
 * `#s-ueber-trenner-impressionen`. Beanstandet ist nur dieser eine, und
 * „Abweichung ohne Ticket bleibt".
 * ======================================================================== */
@media (max-width: 991px) {
  #s-trenner-sommer .v-trenner {
    position: relative;
    flex-direction: column;
    height: auto;
    min-height: 670px;
  }
  #s-trenner-sommer .v-trenner .v-trenner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    flex: none;
    height: 100%;
    max-height: none;
  }
  #s-trenner-sommer .v-trenner .v-trenner__bg--mobile,
  #s-trenner-sommer .v-trenner .v-trenner__bg--desktop {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  #s-trenner-sommer .v-trenner .v-trenner__inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 670px;
    align-items: flex-start;
    padding-top: 74px;
    padding-bottom: 40px;
    background-color: rgba(255, 255, 255, 0.6);
  }
}
/* ===========================================================================
 * HRS-214 — „Tabelle falsche Darstellung" (/feste-feiern)
 * ---------------------------------------------------------------------------
 * Zwei Ursachen, die im Ticketbild wie eine aussehen.
 *
 * 1. Die Zellen sind grau statt weiss. Der Kartenaufbau setzt sie auf
 *    `transparent` (korrekturen.less:259), aber 1236 Zeilen **spaeter** in
 *    derselben Datei faerbt die Zebra-Regel jede ungerade Zeile wieder grau
 *    — ohne Medienabfrage, bei gleicher Spezifitaet. Die spaetere gewinnt.
 *    Das ist der fuenfte belegte Fall von LEARNINGS §1.
 * 2. Der Schatten fehlt. Der Export kennt keinen (§23), das Ticket verlangt
 *    ihn ausdruecklich — „Ticket schlaegt XD". Genommen wird derselbe Wert
 *    wie auf den Icon-Kaesten und den Bewertungskarten.
 *
 * Nur bis 575px: Darueber ist es wieder eine echte Tabelle mit Zebra-
 * streifen, und so ist es bestellt (HRS-129). Bei 768 und 1280 gemessen
 * unveraendert.
 * ======================================================================== */
@media (max-width: 575px) {
  .a-feste-feiern-preise tbody tr {
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  }
  .a-feste-feiern-preise tbody tr:nth-child(odd) td,
  .a-feste-feiern-preise tbody tr:nth-child(even) td {
    background: transparent;
  }
}
/* ===========================================================================
 * HRS-200 — „Button innerhalb vom Dropdown auf volle Container-Breite ziehen"
 * ---------------------------------------------------------------------------
 * Im aufgeklappten Zimmer stand „Weitere Details" mit 168px mittig in einer
 * 320px breiten Spalte (gemessen bei 360px Fenster; bei 390px 168 in 350,
 * bei 768px 168 in 728).
 *
 * **Die Regel dafuer gibt es laengst — sie hat nie gewirkt.** custom.less
 * setzt im 991er-Block bereits `.v-room-tabs__cta .v-button a { display:
 * block; width: 100% }`. Beides verliert gegen die globale Knopfregel
 * `.v-button > a`, die `width: auto !important` und `display: inline-flex
 * !important` traegt; uebrig blieb nur das `text-align: center` derselben
 * Gruppe — daher die Mitte. Das ist der dritte belegte Fall von
 * LEARNINGS §1 an dieser Stelle.
 *
 * Ausnahme von „kein neues !important", wie schon bei HRS-117 und HRS-213:
 * Gegen ein `!important` kommt keine Spezifitaet an. `min-width` muss mit
 * zurueckgenommen werden, sonst haelt der Outline-Knopf seine 160px, sobald
 * die Spalte schmaler wird.
 *
 * Schnitt bei 991px — das ist der Bereich, fuer den die vorhandene (tote)
 * Regel gedacht war. Ab 992px steht der Knopf linksbuendig an der Textkante
 * in einer nur 108px breiten Huelle; dort wuerde volle Breite ihn
 * verkleinern, und beanstandet ist er dort nicht.
 * ======================================================================== */
@media (max-width: 991px) {
  .v-room-tabs__cta .v-button > a {
    width: 100% !important;
    min-width: 0;
  }
}
/* ===========================================================================
 * HRS-187 / HRS-205 / HRS-219 — drei Reihen auf dem Telefon als Slider
 * ---------------------------------------------------------------------------
 * Das Markup baut `initMobilSlider()` in inn_components.js zur Laufzeit auf;
 * hier steht nur, wie es aussieht. Warum es JS ist und keine drei
 * Template-Aenderungen, steht dort.
 *
 * **Eigene Klassennamen, kein `swiper-container`.** Der erste Anlauf nutzte
 * die Standardnamen und sah falsch aus: Die Punkte standen untereinander
 * mitten im Bild. Am Element gemessen gewannen drei fremde Regeln, die auf
 * genau diese Namen zielen — eine davon mit `!important`. Mit eigenen Namen
 * trifft keine davon mehr; dafuer stehen hier die wenigen Grundregeln, die
 * sonst aus der Swiper-CSS kaemen.
 *
 * Die leer gewordene Quellreihe bleibt im Dokument stehen (sie traegt
 * Kennungen, an denen andere Regeln haengen) und wird nur ausgeblendet.
 * ======================================================================== */
@media (max-width: 767px) {
  .rs-mobilslider-quelle {
    display: none;
  }
  /* Grundgeruest — das Gegenstueck zu .swiper-container/-wrapper/-slide.
     `display: block` und `width: 100%` sind nicht kosmetisch: Eine
     Sammelregel `section > div { display: flex }` machte Block und
     Behaelter sonst zu Flex-Elementen, die auf 160px schrumpften — die
     Folien waren damit halb so breit wie die Spalte. Am Element gemessen,
     nicht im Quelltext vermutet. */
  .rs-mobilslider-block,
  .rs-mobilslider {
    display: block;
    width: 100%;
  }
  /* HRS-219 — „slider stimmt aber jetzt fehlt der kasten mit Schatten
     drumherum".

     Der Kasten ist da. Nachgemessen am echten Element: die Karte traegt
     `background: #fff` und `box-shadow: 0 0 18px rgba(74,74,73,.16)` —
     den Hausschatten aus `custom.less`. Nur sieht man beides nicht:

       Slider-Behaelter  353px breit
       Karte darin       353px breit  — exakt gleich

     Der Schatten hat **0px Versatz und 18px Unschaerfe**, liegt also
     vollstaendig ausserhalb der Kartenkante und wurde von `overflow:
     hidden` auf allen vier Seiten abgeschnitten. Die weisse Flaeche
     wiederum steht auf weissem Seitengrund — ohne Schatten kein Kasten.

     `clip` statt `hidden`, weil nur `clip` eine Marge kennt. Der Behaelter
     schneidet weiterhin ab, nur 18px weiter aussen.

     **18px und nicht mehr**: Der Abstand zwischen zwei Folien betraegt
     gemessen 20px (`spaceBetween`). Bei 24px Marge blitzte die
     Nachbarfolie in den letzten 4px auf. 18px ist genau die Unschaerfe
     des Schattens und bleibt 2px unter dem Folienabstand.

     Wirkt auf alle vier Mobil-Slider (Inklusivleistungen, Partnerlogos,
     Zusatzleistungen, Kulinarik) — dort gibt es nichts abzuschneiden, was
     vorher sichtbar war, also ist es harmlos und einheitlich. */
  .rs-mobilslider {
    position: relative;
    overflow: clip;
    overflow-clip-margin: 18px;
  }
  /* HRS-272 — „immer an die hoehe des laengsten elements im slider
     anpassen".

     Gemessen auf /kulinarik bei 393px, drei Folien: 1001 / 649 / 646px.
     Der Block sprang beim Wischen um 355px, also 55%.

     Zwei Dinge haben das bewirkt, beide muessen weg:
       1. `autoHeight: true` liess Swiper eine Inline-Hoehe auf die Spur
          schreiben — die der **aktiven** Folie, nicht der laengsten.
          Abgeschaltet ueber `gleicheHoehe` am Listeneintrag
          (inn_components.js).
       2. `align-items: flex-start` eine Zeile tiefer liess die kuerzeren
          Folien ihre eigene Hoehe behalten. Mit `stretch` nimmt die
          Flex-Spur die Hoehe der laengsten an.

     Die Karte darin muss mitwachsen, sonst steht sie oben in einer leeren
     Folie — daher `height: 100%` auf das Kind.

     Nur fuer diesen einen Slider. Bei den Inklusivleistungen (13 Folien)
     wuerde die laengste die Hoehe fuer alle dreizehn setzen, und bei
     HRS-219 war die Hoehenersparnis ausdruecklich erwuenscht. */
  .rs-mobilslider--gleiche-hoehe .rs-mobilslider__spur {
    align-items: stretch;
  }
  .rs-mobilslider--gleiche-hoehe .rs-mobilslider__folie > * {
    height: 100%;
  }
  .rs-mobilslider__spur {
    display: flex;
    box-sizing: content-box;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    transition-property: transform;
  }
  .rs-mobilslider__folie {
    flex-shrink: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rs-mobilslider__folie > * {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  /* Punktreihe: mittig unter der Karte, so wie im Entwurf. Groesse und
     Abstand wie bei den uebrigen Slidern des Projekts (10px, 10px Luft),
     gefuellt die aktuelle, nur Kontur die uebrigen. Die Anzahl folgt der
     tatsaechlichen Anzahl der Karten — Entscheidung zu HRS-219. */
  .rs-mobilslider__punkte {
    display: flex;
    /* `flex-direction` ausdruecklich: Dieselbe Sammelregel fuer
       `section > div` stellt Flex-Kinder sonst untereinander — die Punkte
       standen damit als senkrechte Kette mitten im Bild. */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
  }
  .rs-mobilslider__punkt {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 1px solid #681d33;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }
  .rs-mobilslider__punkt--aktiv {
    background: #681d33;
  }
}
/* ===========================================================================
 * HRS-195 — Trenner „Verfügbarkeit prüfen" (Zimmer-Detailseiten)
 * ---------------------------------------------------------------------------
 * Wie HRS-179: Live lag der Text in einem weissen Panel ueber dem Bild, der
 * Entwurf (iPhone 14 Pro – 4, Sektion 4) zeigt ihn auf dem Bild.
 *
 * Anders als dort geht die Umstellung hier ueber die Daten: Der Baustein
 * liest `mobile_layout` und schreibt daraus die Klasse
 * `v-trenner--mobile-overlay`. Das Feld ist am Element gesetzt worden; hier
 * stehen nur die beiden Dinge, die danach noch fehlten.
 *
 * 1. **Hoehe.** Der Overlay-Zweig erzwingt 825px (@rs-trenner-mobile-height,
 *    custom.less:2234). Der Entwurf gibt dem Trenner 618px bei 360 und 669px
 *    bei 390 — das ist kein fester Wert, sondern ein Verhaeltnis (393:674).
 * 2. **Schleier.** `custom.less:2250` setzt `.v-trenner__inner` auf
 *    `background: transparent`. Ohne Schleier steht dunkler Text auf einem
 *    hellen, aber unruhigen Foto. Der Entwurf legt #faf1eb mit 60 % ueber die
 *    ganze Flaeche (zusaetzlich einen Verlauf mit 40 %, der hier bewusst
 *    nicht nachgebaut ist — der flache Schleier traegt den Kontrast schon).
 *
 * Die Augenbraue sitzt im Entwurf 74px unter der Bildoberkante, genau wie
 * bei HRS-179.
 *
 * Nur dieser eine Trenner: Die uebrigen zwoelf Overlay-Trenner tragen
 * 178–710px Inhalt und brauchen ihre 825px (LEARNINGS §46).
 * ======================================================================== */
@media (max-width: 991px) {
  #s-zimmer-trenner-cta .v-trenner--mobile-overlay .v-trenner__inner {
    min-height: 0;
    align-items: flex-start;
    padding-top: 74px;
    background-color: rgba(250, 241, 235, 0.6);
  }
}
/* Das Verhaeltnis gilt nur bis zur Telefongrenze. Gemessen: Bei 768px
   Fensterbreite waere der Trenner damit 1317px hoch — das Verhaeltnis
   stammt aus einem 393px breiten Entwurf und traegt nicht so weit. Zwischen
   768 und 991px bleibt es deshalb bei den 825px des Overlay-Zweigs; der
   Schleier oben gilt dort weiterhin, sonst staende der Text ohne Kontrast
   auf dem Foto. */
@media (max-width: 767px) {
  #s-zimmer-trenner-cta .v-trenner--mobile-overlay {
    min-height: 0;
    aspect-ratio: 393 / 674;
  }
}
/* ===========================================================================
 * HRS-186 / HRS-183 — Hero-Bild auf Unterseiten, Telefonbreite
 * ---------------------------------------------------------------------------
 * Der Entwurf (iPhone 14 Pro – 24) zeigt das Hero-Bild fast quadratisch:
 * 352 x 341 bei 393px Board, Verhaeltnis 1,03 : 1. Live lief es im
 * Desktop-Verhaeltnis 1920 : 600 weiter und war damit ein flacher Streifen —
 * bei 390px Bildschirm 366 x 114, also dreifach zu flach.
 *
 * Der Zuschnitt macht das Stylesheet: Die Flaeche traegt bereits
 * `object-fit: cover`, es aendert sich nur ihr Verhaeltnis. Aus einem
 * Querformat bleibt dabei das mittlere Drittel — fuer die Faelle, in denen
 * das der falsche Ausschnitt ist, kann am Element ein eigenes Handybild
 * hinterlegt werden (Feld „Hintergrundbild mobil", siehe Template).
 *
 * **Drei Bilder werden eines.** Der Entwurf zeigt auf dem Telefon genau ein
 * Bild, live standen alle drei untereinander. Gezeigt wird das erste — und
 * wenn ein Handybild hinterlegt ist, steht dieses im Markup an erster
 * Stelle und gewinnt damit von selbst.
 *
 * Betrifft 60 der 102 Seiten (54 mit einem Bild, 6 mit dreien).
 * ======================================================================== */
@media (max-width: 767px) {
  .v-sub-hero__media--single {
    aspect-ratio: 352 / 341;
  }
  /* HRS-286 — derselbe Fall, eine Seitenart spaeter vergessen.

     Die Designerin: „bitte gleiches Hero format fuer mobil wie auf kontakt
     z.b." Gemeint ist das Verhaeltnis direkt darueber.

     Das Headerbild der Blog-Detailseite traegt in custom.less das
     Desktop-Verhaeltnis `1850 / 511` (= 3,62) — der Entwurfswert fuer
     1920px Breite. Mobil gemessen: 323 x 89 Pixel, also ein Streifen von
     89px Hoehe. Dazu kommt, dass die hinterlegte Datei hochkant ist
     (570x1005, Verhaeltnis 0,57); `cover` schneidet davon fast alles weg.

     Derselbe Wert wie oben, nicht ein eigener: Die Kontaktseite rendert
     damit nachgemessen 369 x 357 (1,03), und genau darauf zeigt das
     Ticket. */
  .v-news-detail__hero picture,
  .v-news-detail__hero img {
    aspect-ratio: 352 / 341;
  }
  .v-sub-hero__media--triple .v-sub-hero__cell {
    aspect-ratio: 352 / 341;
  }
  .v-sub-hero__media--triple .v-sub-hero__cell:not(:first-child) {
    display: none;
  }
}
/* Die Mobilzelle gibt es nur auf dem Telefon. Sie steht im Markup zuerst,
   damit die Regel oben ohne `:has()` auskommt. */
@media (min-width: 768px) {
  .v-sub-hero__cell--mobil {
    display: none;
  }
}
/* ===========================================================================
 * HRS-248 — „Darauf achten wir" auf dem Telefon als Aufklapp-Liste
 * ---------------------------------------------------------------------------
 * Das Markup baut `initAchtenAkkordeon()` in inn_components.js zur Laufzeit
 * auf; hier steht nur, wie es aussieht. Werte aus dem Entwurf
 * (iPhone 14 Pro – 28, Sektion 6):
 *
 *   Zeilenraster 68px · Trennlinie 1,5px @rs-primary
 *   „+" / „−" 45px/300 @rs-primary, rechts
 *   geschlossene Zeile 18px/400 #b6b6b6
 *   offene Zeile 18px/700 kursiv @rs-primary
 *   Listenpunkte 10x10 @rs-primary bei x21, Text bei x41
 *
 * **Eine Abweichung vom Entwurf, mit Absicht:** Der Entwurf setzt die Zeilen
 * in Versalien. Genau die hat die Designerin mit HRS-140 ausdruecklich
 * abbestellt („rote Headlines bitte nicht Grossgeschrieben"), und die
 * Ausnahme steht seitdem in korrekturen.less:1413. Sie wird hier nicht still
 * zurueckgedreht — die Schreibweise bleibt, wie sie bestellt wurde.
 *
 * Die Bildkarte „Teil der Natur" bleibt ein Bild und rutscht ans Ende; im
 * Entwurf steht sie ebenfalls unterhalb der Liste. Dafuer genuegt `order`,
 * es wird nichts am Inhalt verschoben.
 * ======================================================================== */
@media (max-width: 767px) {
  .rs-achten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Flaeche und Schatten der Karte gehoeren zur Kachel-Darstellung, nicht
     zur Liste. Der Schatten kommt aus custom.less:13534. */
  .rs-achten .rs-achten__zeile {
    background: none;
    box-shadow: none;
    padding: 0;
    border-bottom: 1.5px solid #681d33;
  }
  .rs-achten__knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 68px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
  }
  .rs-achten__knopf .v-feature-list-card__title {
    margin: 0;
    font-family: var(--inn-main-font);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    color: #b6b6b6;
  }
  .rs-achten__zeile--offen .v-feature-list-card__title {
    font-weight: 700;
    font-style: italic;
    color: #681d33;
  }
  .rs-achten__zeichen {
    flex: 0 0 auto;
    font-family: var(--inn-main-font);
    font-size: 45px;
    font-weight: 300;
    line-height: 1;
    color: #681d33;
  }
  .rs-achten__panel {
    display: none;
    padding: 0 0 20px;
  }
  .rs-achten__zeile--offen .rs-achten__panel {
    display: block;
  }
  /* Die Bildkarte traegt keinen Titel und wird deshalb keine Zeile. Sie
     steht im Entwurf unter der Liste — `order` genuegt dafuer. */
  .rs-achten .v-feature-list-card--image {
    order: 9;
    margin-top: 24px;
    border-bottom: 0;
  }
}
/* ===========================================================================
 * HRS-267 — Menueleiste auf dem Telefon zu hoch
 * ---------------------------------------------------------------------------
 * Gemessen bei 393px: Die Kopfzeile ist 112px hoch, das Logo 150x32 sitzt
 * mittig darin mit je 40px Luft. Der mobile Entwurf (iPhone 14 Pro – 1)
 * zeigt das Kopfband mit **83px** — 29px weniger.
 *
 * Die 112px sind richtig und ausdruecklich bestellt: HRS-159 hat sie von 90
 * heraufgesetzt, es ist der Wert des Desktop-Entwurfs. Sie bleiben am Desktop
 * also unangetastet; geaendert wird nur das Telefon.
 *
 * **Geaendert wird die Variable, nicht die Hoehe.** An
 * `--inn-header-height` haengen vier Stellen: die Kopfzeile selbst, der
 * Aufmacherabstand der Blog-Detailseite (Faktor 2,5357, siehe
 * korrekturen.less:1658), der Abstand der Angebots-Detailseite ohne Hero und
 * der Innenabstand des Menue-Overlays. Wer nur `#header { height }`
 * ueberschreibt, laesst diese drei auf dem alten Wert stehen — der Inhalt
 * bekaeme dann 112px Platz fuer eine 83px hohe Leiste. Ueber die Variable
 * folgen alle vier mit.
 *
 * `--rs-header-h` muss nicht nachgezogen werden: `main.js` **misst** die
 * Kopfhoehe beim Laden und bei jeder Groessenaenderung (HRS-183), der
 * Abstand der Unterseiten-H1 folgt damit von selbst.
 *
 * Die Variable kommt aus der Design-Konfiguration und steht in einem
 * `<style>`-Block im Kopf der Seite — nachgesehen: **vor** main.css. Eine
 * Regel hier gewinnt deshalb ueber die Reihenfolge, ohne `!important`.
 *
 * Nur bis zur Telefongrenze: Die 83px stammen aus einem 393px breiten
 * Artboard und tragen nicht weiter (LEARNINGS §60).
 * ======================================================================== */
@media (max-width: 767px) {
  :root {
    --inn-header-height: 83px;
  }
}
/* ===========================================================================
 * HRS-269 — Abstand unter „Nützliche Informationen" doppelt so groß
 * ---------------------------------------------------------------------------
 * Gemessen bei 360 und 393px im Fussbereich der Startseite: Unter dieser
 * roten Ueberschrift stehen **48px**, unter den drei anderen **16px**.
 *
 * **Zwei Abstaende addieren sich.** Unter 992px wird genau diese eine Spalte
 * zu einem Flex-Behaelter mit `gap: clamp(32px, 4vw, 48px)` — bei 360px also
 * 32px (custom.less:10269). Die Ueberschrift bringt zusaetzlich ihre eigenen
 * 16px Unterrand mit (`.v-footer-section-label { margin: 0 0 16px }`). Macht
 * 48. Die anderen drei Spalten sind gewoehnliche Bloecke ohne Gap; dort gilt
 * allein der Rand, und deshalb stimmen sie.
 *
 * Behoben wird die **Verdopplung**, nicht einer der beiden Werte: Der Rand
 * der Ueberschrift faellt in dieser Spalte weg, der Gap uebernimmt mit 16px.
 * Ergebnis ist derselbe Abstand wie in den Nachbarspalten, und er bleibt es
 * auch, wenn jemand spaeter am Rand der Ueberschrift dreht.
 *
 * **Die Elternkette traegt eine ID.** Die Originalregeln stehen in
 * `#footer-mod { … }` und wiegen damit (1,1,0). Eine Regel mit nur der Klasse
 * haette verloren, ohne dass man es im Quelltext saehe (LEARNINGS §1) —
 * deshalb steht `#footer-mod` hier ebenfalls davor.
 * ======================================================================== */
@media (max-width: 991px) {
  #footer-mod .v-footer-col-nav {
    row-gap: 16px;
  }
  #footer-mod .v-footer-col-nav > .v-footer-section-label {
    margin-bottom: 0;
  }
}
/* ===========================================================================
 * HRS-276 — Panoramastreifen auf „Zimmer" im falschen Format
 * ---------------------------------------------------------------------------
 * Der Streifen hatte eine **feste** Mindesthoehe von 240px
 * (custom.less:7169). Eine feste Hoehe bei beweglicher Breite heisst: Das
 * Seitenverhaeltnis aendert sich mit jedem Geraet. Gemessen:
 *
 *   360px -> 1,50     393px -> 1,64     500px -> 2,08
 *
 * Die Melderin war bei 500px unterwegs, dort ist der Streifen am flachsten.
 * Der Entwurf (iphone-14-pro-3, y = 3752,5) zeigt **394 x 249**, also 1,582.
 *
 * Statt einer festen Hoehe deshalb das Verhaeltnis selbst — damit stimmt es
 * auf **jeder** Telefonbreite statt auf genau einer. Die Mindesthoehe muss
 * dabei ausdruecklich zurueckgenommen werden, sonst gewinnt bei schmalen
 * Geraeten weiterhin sie.
 *
 * Nur bis 767px: Das Verhaeltnis stammt aus einem 393px breiten Artboard und
 * traegt nicht weiter (LEARNINGS §60). Ab 768px bleiben die bisherigen
 * 400px unberuehrt.
 * ======================================================================== */
@media (max-width: 767px) {
  .a-trenner-bild__media picture,
  .a-trenner-bild__media img {
    min-height: 0;
    height: auto;
    aspect-ratio: 394 / 249;
  }
}
/* ===========================================================================
 * HRS-274 — Icon-Kacheln auf „Tagungen": Text angeschnitten, Schatten weg
 * ---------------------------------------------------------------------------
 * Gemessen auf /tagungen, zweispaltiges Raster:
 *
 *   360px: Spalte 150px, 4 von 11 Kacheln brauchen bis 193px
 *   393px: Spalte 167px, dieselben 4
 *   430px: Spalte 185px, noch 2
 *   500px: nichts mehr
 *
 * **Die Ursache ist die deutsche Sprache, nicht das Raster.**
 * „Willkommensgetränke", „Werbemöglichkeiten", „Gepäckservice" sind einzelne
 * Woerter und lassen sich ohne Trennung nicht umbrechen — sie ragen dann
 * ueber ihre Spalte hinaus. Der Entwurf (iphone-14-pro-9) zeigt an dieser
 * Stelle ausdruecklich **zwei** Spalten; die Spalte ist also richtig, der
 * fehlende Umbruch ist falsch. Deshalb wird getrennt statt umgebaut.
 *
 * `hyphens: auto` trennt nach deutschen Regeln — die Seite ist als `lang="de"`
 * ausgezeichnet, sonst wuerde es nichts tun. `overflow-wrap: break-word`
 * steht als Netz dahinter, falls ein Wort auch nach der Trennung noch zu
 * breit ist (Markennamen ohne Trennstellen).
 *
 * **Der zweite Teil: der Schatten.** Die Huelle ist ein Contao-`.block` und
 * traegt damit `overflow: hidden` (LEARNINGS §8). Der Schatten der Kacheln
 * liegt ausserhalb ihrer Kante und wurde links und rechts abgeschnitten —
 * das Ticket nennt genau das („Schatten rundum"). Dieselbe Massnahme wie bei
 * den Festtagskarten in custom.less:10451.
 *
 * Bewusst **ohne** Umbau auf eine Spalte: Das waere ein anderes Layout als
 * der Entwurf, und ein Ticket, das „Text angeschnitten" meldet, bestellt
 * keinen Rasterwechsel (LEARNINGS §45).
 * ======================================================================== */
/* ---------------------------------------------------------------------------
 * Nachtrag 26.10.2026 (HRS-204): Der erste Zuschnitt war in **beide**
 * Richtungen falsch — genau das Muster aus LEARNINGS §52.
 *
 *   `hyphens: auto`     stand am ganzen Baustein, gebraucht wird es nur dort,
 *                       wo ein einzelnes Wort breiter ist als die Spalte.
 *                       Auf „Das Seehaus" laeuft **kein** Wort ueber, dort
 *                       erzeugte die Regel nur unnoetige Trennungen mitten im
 *                       Wort („Enge Zusam-/menarbeit") — die Designerin hat
 *                       das mit HRS-204 beanstandet.
 *   `overflow: visible` stand nur an **einer Seite**, gebraucht wird es am
 *                       Baustein: Der abgeschnittene Schatten ist eine
 *                       Eigenschaft der Contao-`.block`-Huelle und tritt
 *                       ueberall auf, wo dieser Baustein steht.
 *
 * Jetzt umgekehrt zugeschnitten. Als Netz bleibt ueberall
 * `overflow-wrap: break-word`: Es greift nur, wenn ein Wort sonst herausragt,
 * und erzeugt dabei **keinen** sichtbaren Trennstrich.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* **Brechen ohne Trennstrich.** `hyphens: auto` trennte auch dort, wo es
     nicht noetig war („Enge Zusam-/menarbeit" auf Seehaus) — genau das hat
     die Designerin mit HRS-204 beanstandet. `overflow-wrap: anywhere` greift
     nur, wenn ein Wort sonst herausragen wuerde, und setzt dabei keinen
     Trennstrich. Gemessen ueber sechs Seiten bei 360 und 393px: **null**
     ueberlaufende Kacheln, auch auf „Tagungen" mit
     „Willkommensgetraenke" (193px bei 167px Spalte).

     `anywhere` statt `break-word`, weil nur `anywhere` auch in die
     Groessenberechnung des Rasters eingeht — mit `break-word` liefen bei
     360px auf drei Seiten weiter Woerter ueber. */
  .ce_rsce_iconboxes .single-icon span,
  .ce_rsce_iconboxes .v-inn-single-icon span,
  .ce_rsce_iconboxes .single-icon span p,
  .ce_rsce_iconboxes .v-inn-single-icon span p {
    hyphens: manual;
    overflow-wrap: anywhere;
  }
  /* HRS-204: Der Schatten liegt ausserhalb der Kachelkante und wurde von der
     `.block`-Huelle abgeschnitten — auf jeder Seite mit diesem Baustein
     (LEARNINGS §8). */
  .ce_rsce_iconboxes.block {
    overflow: visible;
  }
}
/* ===========================================================================
 * HRS-270 — Menue auf dem Telefon: drei Punkte aus einem Ticket
 * ---------------------------------------------------------------------------
 * Bestellt wurde woertlich:
 *   - Knopf „Zimmer buchen" in einer Zeile
 *   - aktiver Menuepunkt nicht mit Pfeil, sondern fett
 *   - Menuebalken in der Hoehe anpassen
 *
 * Sollwerte aus iphone-14-pro-2: Kopfband endet bei 134px, die DE/EN-Zeile
 * beginnt bei 99px, Knopfbreite 160px, Schrift 18px.
 *
 * ## 1. Der Balken war 169px statt 134
 *
 * Gemessen hat das Raster des Kopfes die Zeilen `32px 93px` — die zweite
 * Zeile also 93px hoch fuer einen Inhalt von 25,6px. Die Ursache lag nicht
 * im Kopf: `.v-header-right` traegt `display: contents`, dadurch wird der
 * **Gutschein-Knopf** selbst zur Rasterzelle, und auf dessen Bildbehaelter
 * wirkt die allgemeine Regel `.v-icons-container-element .icon-img-container
 * { min-height: 89px }` — gedacht fuer Icon-Kacheln im Inhalt, nicht fuer ein
 * 26px grosses Kopf-Icon. Ausfuehrlich in LEARNINGS §67.
 *
 * Die Mindesthoehe wird deshalb genau hier zurueckgenommen. Danach bleibt
 * noch echte Luft zu verteilen; Innenabstand und Zeilenabstand sind so
 * gesetzt, dass Kopfband und DE/EN-Zeile auf den Entwurfswerten landen.
 *
 * ## 2. Aktiver Punkt
 *
 * Der Pfeil ist ein echtes Bild (`.inn-nav-link__icon`), kein Hintergrund —
 * er laesst sich deshalb nur ueber das Element ausblenden. Er verschwindet
 * **nur am aktiven Punkt**; am aufgeklappten Gruppentitel bleibt er, genau
 * so zeigt es der Entwurf. Gemessen: vorher 5 sichtbare Pfeile, jetzt 4.
 *
 * Die Fettung schlaegt `.inn-nav-link { font-weight: 400 }` ueber die
 * Klasse `.is-active`, die Contao ohnehin setzt.
 *
 * ## 3. Der Knopf brach um — und die Reihe lief ueber
 *
 * „Zimmer buchen" braucht gemessen **123,5px** bei 18px Schrift. Der Knopf
 * war 150px breit bei 2 x 20px Innenabstand, also 110px Platz.
 *
 * Dabei kam ein zweiter, bisher unbemerkter Fehler heraus: Die Knopfreihe
 * **lief schon vorher ueber** — zwei 150px-Knoepfe plus 16px Abstand sind
 * 316px, der Block war aber nur 240px breit (360px-Geraet). Ursache ist sein
 * seitlicher Innenabstand von 60px aus der Design-Konfiguration; der Entwurf
 * zeigt die Reihe fast seitenbreit. Mit 20px Abstand passen beide Knoepfe,
 * teilen sich den Platz und bleiben bei den 160px des Entwurfs.
 *
 * **Ausnahme von „kein neues `!important`":** `.v-button.v-outline-white > a`
 * setzt `padding: 0 20px !important`. Dagegen kommt keine Spezifitaet an —
 * ein `!important` laesst sich nur mit einem `!important` schlagen
 * (LEARNINGS §1, §57). Mit 12px bleiben bei 160px Knopfbreite 136px fuer den
 * Text, bei 152px (360er-Geraet) noch 128px — beides mehr als die noetigen
 * 123,5px. Die Schriftgroesse bleibt damit bei den 18px des Entwurfs; das
 * Ticket haette ein Verkleinern erlaubt, noetig ist es nicht.
 *
 * Gemessen bei 360, 393, 430 und 767px, jeweils vorher/nachher:
 * Kopf 169 -> 134, DE/EN 100 -> 99, Gewicht 400 -> 700, Pfeile 5 -> 4,
 * Ueberlauf der Knopfreihe ja -> nein, „Zimmer buchen" 2 Zeilen -> 1 Zeile.
 * ======================================================================== */
@media (max-width: 767px) {
  /* 1 — Kopfbalken */
  body.v-menu-open #header .v-header-gutschein-icon .icon-img-container {
    min-height: 0;
  }
  body.v-menu-open #header .header-container > .inside {
    padding-top: 30px;
    padding-bottom: 6px;
  }
  body.v-menu-open #header #header-nav-mod #header-nav-inh.boxes4ward_article {
    row-gap: 34px;
  }
  /* 2 — aktiver Menuepunkt */
  #mobile-nav-mod .inn-nav-link.is-active {
    font-weight: 700;
  }
  #mobile-nav-mod .inn-nav-link.is-active .inn-nav-link__icon {
    display: none;
  }
  /* HRS-270, Nachtrag 27.10.2026: „unterpunkte nicht einruecken einfach nur
     bold wenn aktiv".

     Der Einzug ist ein Rest aus HRS-113. Dort sollte der aktive Punkt
     dauerhaft den Pfeil tragen, den die anderen beim Ueberfahren bekommen —
     dazu rueckt die Zeile 31px ein (korrekturen.less, Regel direkt neben
     der Pfeil-Einblendung). Mit der Zeile darueber ist der Pfeil mobil
     wieder weg, **die 31px Luecke blieb aber stehen und ist jetzt leer**.
     Am Bild nachgesehen: „RAHMENPROGRAMM" steht sichtbar weiter rechts als
     seine vier Geschwister.

     Nebenbei eine Warnung fuers naechste Mal: Ein `Range` ueber den Link
     meldet hier fuer alle Eintraege dieselbe Textkante (48), weil ein
     nullbreites Rechteck an der Zeilenkante mitgezaehlt wird. Die
     Verschiebung sieht man nur im Bild (LEARNINGS §68).

     Der Entwurf gibt beiden Zustaenden dieselbe Kante: iphone-14-pro-2
     fuehrt aktive wie inaktive Unterpunkte auf left 50,3px.

     Selektor zeichengleich mit dem aus `korrekturen.less` — gleiche
     Spezifitaet, und diese Datei wird spaeter importiert. Gewinnt damit
     ueber die Reihenfolge, ohne `!important` (LEARNINGS §64). Desktop
     bleibt unberuehrt: Dort traegt der aktive Punkt den Pfeil weiterhin,
     und dort ist nichts beanstandet. */
  #mobile-nav-mod.navigation .v-menu-overlay-link.is-active .inn-nav-link__row {
    padding-left: 0;
  }
  /* 3 — Knopfreihe */
  #mobile-nav-mod.navigation .v-menu-mobile-cta {
    padding-left: 20px;
    padding-right: 20px;
  }
  #mobile-nav-mod.navigation .v-menu-mobile-cta-buttons .v-button {
    flex: 1 1 0;
    max-width: 160px;
    min-width: 0;
  }
  #mobile-nav-mod.navigation .v-menu-mobile-cta-buttons .v-button > a {
    min-width: 0;
    width: 100%;
    /* Siehe Begruendung oben: schlaegt `padding: 0 20px !important`. */
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* ===========================================================================
 * HRS-274 (Nachforderung) — „boxhoehe unterschiedlich, bitte einheitlich"
 * ---------------------------------------------------------------------------
 * Nach der Silbentrennung oben brechen die Kacheln verschieden oft um und
 * sind dadurch verschieden hoch. Gemessen bei 393px: **vier** verschiedene
 * Hoehen zwischen 181 und 284px.
 *
 * Der Entwurf (iphone-14-pro-9) zeigt an dieser Stelle **elf Kacheln zu je
 * 166 x 175px** — einheitlich ist also auch die Vorgabe, nicht nur der Wunsch.
 *
 * `grid-auto-rows: 1fr` gibt allen Zeilen dieselbe Hoehe. Die Kacheln fuellen
 * ihre Zeile bereits (`align-items: stretch`), deshalb genuegt diese eine
 * Zeile; am Inneren der Kachel ist nichts zu tun.
 *
 * **Die Hoehe richtet sich nach der laengsten Kachel**, und das ist eine
 * bewusste Folge: Gemessen danach alle auf 284px statt 181–284, der
 * Abschnitt waechst dadurch um 352px. Die 284 kommen von „Persoenliche
 * Beratung und Ansprechpartner vor Ort" — eine Zeile mehr als alle uebrigen.
 * Wird dieser Text kuerzer, schrumpfen **alle** Kacheln mit. Das steht so im
 * Ticketkommentar, damit die Redaktion es in der Hand hat.
 *
 * Die 175px des Entwurfs lassen sich nicht erzwingen: Unsere Beschriftungen
 * sind laenger als die gezeichneten, eine feste Hoehe wuerde den Text
 * abschneiden — und genau das war die erste Haelfte dieses Tickets.
 *
 * Nur bis 767px, wie gemeldet (die Designerin mass bei 500px).
 * ======================================================================== */
/* Nachtrag 26.10.2026: gilt fuer den **Baustein**, nicht fuer eine Seite.
   HRS-204 verlangt dasselbe auf „Das Seehaus" — dort standen gemessen 213
   und 236px nebeneinander. Derselbe Grund, dieselbe Regel (LEARNINGS §52). */
@media (max-width: 767px) {
  /* `.v-inn-grid` mitnehmen: Die Seitenregeln (z. B.
     `.a-seehaus-wichtig__icons .v-icons-container-element.v-inn-grid`) wiegen
     drei Klassen. Mit nur zwei haette diese Regel dort verloren, ohne dass
     man es im Quelltext saehe (LEARNINGS §1). */
  .ce_rsce_iconboxes .v-icons-container-element.v-inn-grid {
    grid-auto-rows: 1fr;
    /* „Das Seehaus" steht auf `align-items: start`, „Tagungen" auf
       `stretch`. Mit `start` fuellt eine Kachel ihre Zeile nicht, und die
       gleich hohen Zeilen nuetzen nichts — gemessen 213 neben 236px.
       Beides zusammen macht die Kacheln erst wirklich gleich hoch. */
    align-items: stretch;
  }
}
/* ===========================================================================
 * HRS-278 — Kontakt-Icon im Trenner war oval, nicht rund
 * ---------------------------------------------------------------------------
 * Gemessen auf /alpine-beauty-spa bei 393 und 500px: **18 breit, 52 hoch**
 * bei `border-radius: 50%` — also eine Ellipse.
 *
 * **Zwei Regeln teilen sich das Element**, und das ist der ganze Fehler:
 *
 *   Breite  kommt aus `flex: 0 0 18px` der Sammelregel fuer Kontakt-Icons
 *           (mobil-komponenten.less, HRS-189/210/230). In einer Flex-Zeile
 *           schlaegt die Flex-Basis die `width`.
 *   Hoehe   kommt aus `.a-alpine-bio .v-trenner__contact-icon { height: 52px }`
 *           (custom.less ~12204). Das wiegt zwei Klassen, die Sammelregel nur
 *           eine — und ein `@media` erhoeht die Spezifitaet nicht
 *           (LEARNINGS §1).
 *
 * **Quadratisch durch Konstruktion statt durch eine Zahl.** Die Groesse der
 * Kontakt-Icons steht gerade zur Entscheidung (HRS-277/279: 18px gegen die
 * 52px des Entwurfs). Eine feste Hoehe haette dieselbe Frage ein zweites Mal
 * beantwortet und waere bei einer Aenderung wieder falsch. `aspect-ratio: 1`
 * mit `height: auto` laesst die Hoehe der Breite folgen — welcher Wert auch
 * immer gewinnt, das Icon bleibt rund.
 *
 * Spezifitaet (0,2,0), gleich der Regel in custom.less, aber spaeter
 * importiert — damit gewinnt sie ueber die Reihenfolge, ohne `!important`.
 * ======================================================================== */
@media (max-width: 991px) {
  .v-trenner .v-trenner__contact-icon {
    height: auto;
    aspect-ratio: 1;
  }
  /* Das Bild im Icon muss mit: `.a-alpine-bio .v-trenner__contact-icon img`
     setzt 20x20 und wiegt zwei Klassen — ein 20px-Bild in einem 18px-Kreis
     drueckt die Hoehe wieder auf 20, und das Icon bliebe oval (gemessen
     18x20 nach dem ersten Anlauf).

     HRS-277/278/279: **42 statt 100 Prozent.** Die 100% waren der Grund,
     warum das Symbol randbuendig im Kreis sass. Der Zweck dieser Regel
     bleibt derselbe — sie muss die 20x20 aus custom.less schlagen —, nur
     der Wert kommt jetzt aus der Footer-Vorlage (22 von 52 = 42%).
     Diese Regel wiegt zwei Klassen und laege sonst ueber der Sammelregel
     weiter oben, die ebenfalls 42% setzt. */
  .v-trenner .v-trenner__contact-icon img {
    width: 42%;
    height: 42%;
    object-fit: contain;
  }
}
/* ===========================================================================
 * HRS-284 — „outdoor tagungen" ohne Schatten
 * ---------------------------------------------------------------------------
 * Die weisse Kachel auf /tagungen hatte mobil `box-shadow: none`, waehrend
 * ihre direkte Nachbarin (`__side-card`) den Hausschatten
 * `0 0 18px rgba(74,74,73,.16)` traegt — gemessen bei 393 und 500px.
 *
 * Es ist eine vergessene Zeile aus HRS-236: Der Kommentar an der Mobilregel
 * nennt „weiss, Polster **und Schatten**", gesetzt wurden nur Flaeche und
 * Polster. Derselbe Schatten wie bei den Bewertungskarten (LEARNINGS §6), es
 * ist also keine neue Entscheidung, sondern die bereits getroffene.
 * ======================================================================== */
@media (max-width: 991px) {
  .v-bleed-feature--side-cards .v-bleed-feature__panel {
    box-shadow: 0 0 18px rgba(74, 74, 73, 0.16);
  }
}
/* ===========================================================================
 * HRS-218 / 242 / 243 / 263 — getoente Flaeche am Band statt am Text
 * ---------------------------------------------------------------------------
 * `custom.less:2017` schaltet `.v-trenner__glass` unter 992px ab und legt die
 * Toenung stattdessen auf `.v-trenner__content` (custom.less:2023). Damit
 * folgt sie der **Texthoehe** und ist auf jeder Seite anders hoch — gemessen
 * bei 393px: 386 / 441 / 458 / 479 / 536px. Genau das meint „Darstellung der
 * Trennerbilder immer noch falsch".
 *
 * **Die Konstante im Entwurf ist nicht die Flaeche, sondern das Foto.** In
 * jedem geprueften Artboard misst der scharfe Streifen unten **311,98px** —
 * auch dort, wo das Band hoeher ist (iphone-14-pro-12 y7503,43: 858,98 −
 * 311,98 = 547; iphone-14-pro-14 y5395,73: 936,57 − 311,98 = 624,59).
 * Bei den 825px des Overlay-Zweigs ergibt das 513px Flaeche, also die 512
 * des Entwurfs.
 *
 * Deshalb `calc(100% - 312px)` und **keine feste 512**: Wird ein Band je
 * hoeher gesetzt, bleibt der Fotostreifen stehen, statt zu verschwinden.
 *
 * **Kein neues Element noetig.** `.v-trenner__glass` steht bereits im Markup
 * (rsce_trenner.html5:153) und traegt die Entwurfswerte; es war mobil nur
 * abgeschaltet. Die Stapelung stimmt von selbst — `.v-trenner__media` bildet
 * mit `position:absolute; z-index:0` einen eigenen Stapelkontext, das Glas
 * liegt darin ueber dem Foto und unter dem Text.
 *
 * Bewusst auf `--mobile-overlay` eingeengt: Der Split-Zweig stapelt Flaeche
 * und Foto untereinander, dort waere `100% - 312px` falsch. Alle fuenf
 * betroffenen Elemente sind Overlay.
 *
 * **Nicht** auf `mobile_layout = split` umstellen: Das Artboard kennt dort
 * kein geteiltes Panel, sondern die Flaeche ueber dem Bild (HRS-179).
 *
 * Spezifitaet beider Regeln 0,3,0 — gleichauf mit custom.less:2023, aber
 * diese Datei wird spaeter importiert und gewinnt ueber die Reihenfolge.
 * ======================================================================== */
@media (max-width: 991px) {
  .v-trenner--mobile-overlay.v-trenner--glass .v-trenner__glass {
    display: block;
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: calc(100% - 312px);
  }
  /* HRS-218/239, Nachbesserung 27.10.2026 — der Streifen zeigte vom Motiv
     nichts mehr.

     Die Flaechenhoehe oben stimmte nach dem ersten Anlauf, der Streifen
     darunter war 312px hoch — aber **das Bild darin war keins**: Es lief
     als ein einziges Element ueber das ganze Band, 393x825. Die Quellbilder
     sind quer (gemessen 1388x482, Verhaeltnis 2,88); `cover` in ein
     Hochkantfeld mit 0,48 laesst davon 17% der Breite uebrig. Im sichtbaren
     Streifen blieb ein Ausschnitt ohne erkennbares Motiv — „jetzt erkennt
     man unten nix vom bild".

     Der Entwurf fuehrt das Bild als **eigenes Element** mit 393x312
     (Verhaeltnis 1,26), unten angesetzt, von der Toenung oben ueberlappt.
     In 8 der 19 vermessenen Mobil-Baender steht genau diese Groesse
     (AB1, AB5, AB6, AB8, AB12, AB14, AB15). Darin sind 44% der Breite zu
     sehen — zweieinhalbmal so viel wie bisher.

     Deshalb eine zweite, scharfe Kopie (rsce_trenner.html5) statt einer
     Verrenkung am vorhandenen Bild: Das obere Bild bleibt als unscharfer
     Grund fuer die Toenung stehen, das untere bekommt sein eigenes Feld.
     Genau so hat die Designerin es beschrieben.

     `312px` statt `calc`: Hier ist es die Gegenseite derselben Rechnung wie
     beim Glas — Glas ist `100% - 312px`, der Streifen die 312px. Beide
     Werte stehen bewusst nebeneinander, damit sie zusammen gelesen werden.

     Nur im Overlay-Zweig, wie die Glasregel: Der Split-Zweig stapelt
     Flaeche und Foto ohnehin untereinander. */
  .v-trenner--mobile-overlay.v-trenner--glass .v-trenner__bg--streifen {
    /* Gegenstueck zum `display: none` in korrekturen.less — dort steht auch,
       warum es das braucht. */
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 312px;
    overflow: hidden;
  }
  .v-trenner--mobile-overlay.v-trenner--glass .v-trenner__bg--streifen picture,
  .v-trenner--mobile-overlay.v-trenner--glass .v-trenner__bg--streifen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Der Textblock wird wieder nur Textblock. Ohne das Zuruecknehmen des
     Innenabstands staende die Augenbraue weiter auf 84px statt der 52px des
     Entwurfs — die 32px der Toenungsregel addieren sich sonst auf die 52px
     von `.v-trenner__inner`. */
  .v-trenner--mobile-overlay.v-trenner--glass .v-trenner__content {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  /* Der einzige Trenner, dessen Text die 825px des Regelbands sprengt:
     Sein Inhalt misst 524,3px, mit 513px Flaeche schnitte die Kante die
     Zeile „willkommen@riessersee-hotel.de" mittendurch (im Bild nachgesehen).
     Der Entwurf gibt genau diesem Trenner ein hoeheres Band —
     iphone-14-pro-14 y5395,73: 936,57. Mit der calc-Formel ergibt sich
     daraus von selbst eine Flaeche von 625px und wieder 312px Foto. */
  #s-seehaus-reservierung .v-trenner,
  #s-seehaus-reservierung .v-trenner--mobile-overlay .v-trenner__inner {
    min-height: 937px;
  }
}
/* ===========================================================================
 * Raster-Spalten brechen mobil um — einmal, statt je Artikel
 * ---------------------------------------------------------------------------
 * Das Raster-Bundle (`maw_grid.css`) kennt **keinen** mobilen Umbruch: Eine
 * `col-4` bleibt bei 393px eine `col-4`. Bisher stand deshalb in custom.less
 * neunmal dieselbe Regel, je Artikel, meist nur fuer `col-6`:
 *
 *     @media (max-width: 991px) {
 *       .row.ce_rowStart > .ce_column.col-6 { grid-column: span 12; }
 *     }
 *
 * Aufgefallen ist die Luecke am 29.10.2026 auf der Tagungsseite: Dort hat die
 * Redaktion ein Raster „Text + Bild (8 / 4)" eingefuegt, und bei 393px standen
 * die Spalten **nebeneinander** — 227px neben 101px, der Text in der schmalen
 * Spalte unlesbar.
 *
 * Nachgemessen wurde der ganze Bestand: **24 Raster auf 14 Seiten, 23 brechen
 * mobil um, genau eines nicht** — das neue. Die Absicht ist damit belegt und
 * nicht geraten. Eine Spaltenaufteilung, die jemand ausdruecklich auch mobil
 * will, braucht dann eine eigene Regel mit Begruendung; bis heute gibt es
 * keine einzige.
 *
 * Spezifitaet (0,3,0) gegen die (0,1,0) des Bundles — die Regel gewinnt. Die
 * neun Artikelregeln in custom.less sind spezifischer und bleiben wirksam;
 * sie sagen dasselbe. Sie werden nicht entfernt: Sie stoeren nicht, und ein
 * Aufraeumen von neun Stellen am Tag des Livegangs waere das falsche Risiko.
 *
 * 991px, weil alle neun Vorbilder diese Grenze benutzen.
 * ======================================================================== */
@media (max-width: 991px) {
  .row.ce_rowStart > .ce_column {
    grid-column: span 12;
  }
}
/* Pfeil an den schiebbaren Pillenreihen (HRS-192/251/254). */
/* ===========================================================================
 * Schiebbare Pillenreihen — Pfeil am rechten Rand
 * ---------------------------------------------------------------------------
 * HRS-192 /kulinarik · HRS-251 /impressionen · HRS-254 /blog
 *
 * Drei Reihen, dieselbe Bitte: eine Reihe statt Umbruch, rechts angeschnitten,
 * und ein Pfeil, der zeigt, dass es weitergeht. Das Soll-Bild zu HRS-254 zeigt
 * genau das — drei Felder, das dritte angeschnitten, der Pfeil mittig darueber.
 *
 * **Der Pfeil haengt am gemessenen Ueberlauf, nicht an einer Breitengrenze.**
 * Gemessen laeuft jede Reihe anders weit ueber:
 *
 *     Blog          543px Inhalt  → laeuft ueber bis ~600px Fenster
 *     Impressionen  584px Inhalt  → laeuft ueber bis ~600px Fenster
 *     Kulinarik     933px Inhalt  → laeuft ueber bis ~900px Fenster
 *
 * Eine gemeinsame Media Query waere damit bei zwei der drei Reihen falsch:
 * bei 768px hat Kulinarik noch 205px Ueberlauf, Blog keinen mehr. Deshalb
 * setzt `main.js` die Klasse `rs-scroller-ueberlauf`, wenn die letzte Pille
 * ueber den rechten Rand hinausragt — und nimmt sie wieder weg, sobald ans
 * Ende geschoben wurde.
 *
 * Der Pfeil klebt per `position: sticky` am rechten Rand und kostet
 * unterm Strich keine Breite (`flex-basis: 18px` gegen `margin-left: -18px`),
 * damit er die Reihe nicht selbst breiter macht.
 * ======================================================================== */
/* HRS-294 (27.10.2026): „jetzt stimmt der slider, nur noch der Pfeil an der
   rechten seite kann raus" — zum Tagungs-Lageplan.

   Die beiden Lageplaene hatten den Pfeil mitbenutzt, weil sie mobil
   ebenfalls Schiebe-Behaelter mit genau einem Kind sind (HRS-196, HRS-235).
   Seit derselben Ticketrunde haben sie aber ihre eigene Scrollleiste mit
   Griff und Hinweistext — der Pfeil sagte dasselbe ein zweites Mal und lag
   zudem ueber dem Plan. Deshalb hier heraus.

   Bei den Pillenreihen bleibt er: Dort ist er ausdruecklich bestellt
   (HRS-192, HRS-251, HRS-254) und es gibt keine Scrollleiste. */
.v-news-list__filters.rs-scroller-ueberlauf::after,
.v-filter-gallery__filters.rs-scroller-ueberlauf::after,
.a-kulinarik-pills.rs-scroller-ueberlauf::after {
  content: '';
  position: sticky;
  right: 0;
  align-self: center;
  flex: 0 0 18px;
  width: 18px;
  height: 12px;
  /* Hebt die eigene Breite wieder auf: Der Pfeil legt sich ueber das
       angeschnittene Feld, statt die Reihe zu verlaengern — so zeigt es
       auch das Soll-Bild. */
  margin-left: -18px;
  /* Dieselbe Grafik und dieselbe Groesse wie die uebrigen Weiter-Pfeile
       des Auftritts (custom.less:4694, 5090, 5537). */
  background: url('/files/contao_files/Bilder/-svg/pfeil-rot-rechts.svg') center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
/* Datenschutz-Knopf: gleitet mit der Buchungsleiste (inn-consent-button-bundle). */
/* ===========================================================================
 * Datenschutz-Knopf (inn-consent-button-bundle, 24.10.2026)
 * ---------------------------------------------------------------------------
 * Lage, Größe und Farben stehen in den Bundle-Einstellungen (System →
 * Einstellungen → „Datenschutz-Knopf (Consent)“, Vorgaben per
 * HR\Migration\ConsentKnopfBundleMigration): unten links, Bordeaux #681d33
 * (@c-primary, Buchungsleiste), 52 px / mobil 46 px, 20 px vom Rand (= Seitenrand
 * mobil), 12 px über der Buchungsleiste, solange sie steht.
 *
 * Hier nur, was die Einstellungen nicht können: Die Buchungsleiste fährt beim
 * Scrollen in .35s herein und wieder hinaus (booking-bar.css) — der Knopf
 * gleitet im selben Takt mit, statt zu springen.
 * ======================================================================== */
html .inn-cb-btn {
  transition: background-color 0.2s ease, bottom 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  html .inn-cb-btn {
    transition: none;
  }
}
/* Cookie-Banner im Riessersee-Look. Nur Variablen und wenige Regeln; den
   Aufbau liefert das Bundle. */
/* ===========================================================================
 * Cookie-Banner im Riessersee-Look (inn-consent-bundle)
 * ---------------------------------------------------------------------------
 * Das Bundle liefert Aufbau und eine neutrale Grundgestaltung
 * (`bundles/inn-consent-bundle/public/consent.css`), vollstaendig ueber
 * CSS-Variablen steuerbar. Hier steht nur, was das Haus ausmacht.
 *
 * Die Werte sind an der ausgelieferten Seite gemessen, nicht geschaetzt:
 *   Fliesstext   Lato 18px/23px, #4a4a49
 *   Akzent       #681d33
 *   Knoepfe      Radius 0, Hoehe 49px, Innenabstand 11px/30px
 *   Karten       Radius 10px (haeufigster Radius im Entwurf, 1196 Fundstellen)
 *
 * **Licorice bleibt draussen.** Die Schreibschrift traegt im Entwurf die
 * grossen Ueberschriften; in einem Bedienelement waere sie schwer lesbar und
 * eine Groessenordnung zu laut. Die Banner-Ueberschrift laeuft deshalb in
 * Lato, so wie die uebrigen Bedienelemente der Seite auch.
 *
 * `html:root` statt `:root`: schlaegt die Vorgabe des Bundles ueber die
 * Spezifitaet, ohne `!important`.
 * ======================================================================== */
html:root {
  --consent-bg: #ffffff;
  --consent-fg: #4a4a49;
  --consent-muted: #6b6a69;
  /* 5,3:1 auf Weiss */
  --consent-accent: #681d33;
  --consent-accent-fg: #ffffff;
  --consent-accent-hover: #4f1627;
  --consent-border: #9a9897;
  --consent-line: #e2dfe0;
  --consent-soft: #f6f3f4;
  /* Flaeche, leicht zur Hausfarbe getoent */
  --consent-focus: #681d33;
  --consent-font: var(--inn-main-font);
  --consent-font-size: 16px;
  /* Bedienelement, nicht Fliesstext */
  --consent-line-height: 1.45;
  --consent-radius: 10px;
  --consent-gap: 18px;
  --consent-pad: 26px;
  --consent-btn-h: 49px;
  --consent-card-w: 480px;
}
/* Knoepfe eckig wie ueberall auf der Seite — das Bundle rundet sie sonst mit
   `--consent-radius`, und das ist fuer die Karte richtig, fuer die Knoepfe
   nicht. */
.consent__btn,
.consent-ph__btn {
  border-radius: 0;
  font-family: var(--inn-main-font);
  letter-spacing: 0.02em;
}
/* Ueberschriften: Lato, kraeftig, ruhig — nicht die Schreibschrift. */
.consent .consent__title,
.consent-ph .consent-ph__title {
  font-family: var(--inn-main-font);
  font-weight: 700;
  color: #681d33;
  line-height: 1.25;
  text-wrap: balance;
}
/* Der Platzhalter steht anstelle gesperrter Einbettungen (Instagram-Feed,
   Erlebnisshop). Er soll wie eine Flaeche der Seite wirken und nicht wie eine
   Fehlermeldung: getoente Flaeche, feine Linie, Text in Hausfarbe. */
.consent-ph {
  background: var(--consent-soft);
  border: 1px solid var(--consent-line);
  border-radius: 10px;
}
/* ---------------------------------------------------------------------------
 * Unsere globale `section`-Regel aus dem Banner heraushalten
 *
 * `main.less` setzt seit jeher:
 *
 *     section > div            { display: flex; }
 *     section > div > div      { width: 100%; display: flex;
 *                                flex-direction: column;
 *                                justify-content: space-between; }
 *
 * Das Banner benutzt fuer jede Kategorie ein echtes `<section>`
 * (`.consent__cat`) — damit greift beides mitten hinein. Gemessen am
 * ausgelieferten Banner, zwei sichtbare Folgen:
 *
 *   1. `.consent__services` wurde Flex: „LightWidget" und „GaPa
 *      Erlebnisshop" standen **nebeneinander in einer Zeile**, mit einem
 *      Trennstrich mittendrin.
 *   2. `.consent__cat-title` bekam `width: 100%` und `flex-direction:
 *      column` — deshalb standen „Notwendig" und „Immer aktiv"
 *      uebereinander und mittig statt links.
 *
 * Zurueckgenommen wird nur, was das Bundle **nicht** selbst setzt. Seine
 * eigenen Angaben (`display: flex` an `.consent__cat-head` und
 * `.consent__cat-title`, Innenabstaende an `.consent__cat`) sind
 * spezifischer und bleiben unberuehrt — deshalb steht hier kein `display`
 * fuer die zweite Ebene und kein `padding`.
 *
 * NACHTRAG: Der erste Anlauf stand auf `.consent section > div` — das ist
 * (0,1,2) und damit **spezifischer** als die Angaben des Bundles (0,1,0).
 * Es hat dadurch auch `.consent__cat-head` auf `display: block` gezwungen,
 * und die Schalter rechts verschwanden. Deshalb jetzt genau die beiden
 * Stellen bei ihrem eigenen Namen, statt ueber die Elementstruktur.
 * ------------------------------------------------------------------------ */
.consent__services {
  display: block;
}
.consent__cat-title {
  width: auto;
  flex-direction: row;
  justify-content: flex-start;
}
/* Und die zweite globale `section`-Regel:
 *
 *     section { display: grid; grid-gap: 50px; overflow: hidden; }
 *
 * Die 50px Gitterabstand sind die auffaellig grossen Luecken zwischen
 * Kategorietitel und Beschreibungstext im Einstellungsfenster gewesen.
 * `overflow: hidden` kann ausserdem den Fokusrahmen der Schalter
 * beschneiden.
 *
 * Wieder ueber die Klasse des Bundles angesprochen, nicht ueber die
 * Elementstruktur — `.consent__cat` (0,1,0) schlaegt `section` (0,0,1),
 * und `.consent__cat-head` bleibt unberuehrt. */
.consent__cat {
  display: block;
}
.consent section,
.consent-ph section {
  grid-gap: 0;
  overflow: visible;
}
/* Chronik auf „Ueber uns": Scroll-Animation und die Korrektur der Linie.
   Zuletzt, damit die Linienposition die Grundregel aus custom.less schlaegt. */
/* ===========================================================================
 * Chronik auf „Über uns" — Scroll-Animation (29.10.2026)
 * ---------------------------------------------------------------------------
 * Bestellt: „ein scroll effekt mit fixed scrolling, wo dann die
 * geschichtspunkte jeweils einzeln animiert werden, aber so dass es sinn
 * macht und gut aussieht und smooth funktioniert."
 *
 * Vier Teile, in dieser Reihenfolge wichtig:
 *
 *   1. Die Linie sitzt wieder auf den Punkten (das war vorher kaputt).
 *   2. Die Jahreszahl bleibt stehen, solange ihr Eintrag laeuft — das ist
 *      das „fixed scrolling".
 *   3. Eine zweite Linie waechst von oben mit und zeigt, wie weit man ist.
 *   4. Jeder Eintrag blendet einzeln ein, sein Punkt hebt sich hervor,
 *      solange er gelesen wird.
 *
 * Bewegt wird ausschliesslich ueber `opacity` und `transform`. Beides
 * braucht kein neues Layout, laeuft also fluessig und kann nichts
 * verschieben.
 * ======================================================================== */
/* --- 1. Die Linie sitzt 41px neben den Punkten --------------------------- */
/*
 * Gemessen auf der ausgelieferten Seite bei 1920px: Linie bei 179px,
 * Punktmitte bei 220px.
 *
 * Ursache: Die Linie rechnet mit `140px` Jahresspalte. Mit HRS-296 wurde die
 * Spalte aber auf **180px** verbreitert, damit „1922/1923" umbrechen kann —
 * die Linie hat diese Korrektur nie mitbekommen. Ein Wert wurde geaendert,
 * sein Zwilling blieb stehen (LEARNINGS §1).
 *
 * Faellt erst jetzt auf, weil eine ruhende duenne Linie neben den Punkten
 * kaum stoert — eine mitwachsende faellt sofort auf.
 */
@media (min-width: 992px) {
  .v-history-timeline__list::before {
    left: calc(180px + clamp(1rem, 2vw, 1.75rem) + 11px);
  }
}
/* --- 2. „Fixed scrolling": die Jahreszahl bleibt stehen ------------------ */
/*
 * `position: sticky` statt einer Skript-Loesung: Die Zahl bleibt am oberen
 * Rand haengen, solange ihr Eintrag im Bild ist, und wird von der naechsten
 * sanft weitergeschoben. Das kostet kein Skript, ruckelt nicht und bleibt
 * richtig, wenn jemand den Text aendert.
 *
 * `align-self: start` ist noetig: Im Raster wird die Zelle sonst auf die
 * volle Zeilenhoehe gestreckt, und ein gestrecktes Element kann nicht
 * kleben.
 *
 * Nur ab 992px — darunter steht die Jahreszahl ueber dem Text und hat
 * keine eigene Spalte, in der sie kleben koennte.
 */
@media (min-width: 992px) {
  .v-history-timeline__year {
    position: sticky;
    top: calc(var(--inn-header-height, 112px) + 48px);
    align-self: start;
  }
}
/* --- 3. Die mitwachsende Linie ------------------------------------------ */
/*
 * Deckt die ruhende Linie von oben her ein. `scaleY` statt `height`: Eine
 * Hoehenaenderung je Bild waere ein Layoutschritt, eine Skalierung nicht.
 *
 * Der Wert kommt als `--chronik-fortschritt` (0 bis 1) aus rs-motion.js.
 * Ohne Skript bleibt er 0 — dann ist die Linie unsichtbar und es sieht aus
 * wie vorher.
 */
.v-history-timeline.chronik-bereit .v-history-timeline__list {
  position: relative;
}
.v-history-timeline.chronik-bereit .v-history-timeline__list::after {
  content: '';
  position: absolute;
  top: 0.7em;
  bottom: 0;
  left: calc(180px + clamp(1rem, 2vw, 1.75rem) + 11px);
  width: 2px;
  background: #681d33;
  transform: scaleY(var(--chronik-fortschritt, 0));
  transform-origin: top center;
  pointer-events: none;
}
@media (max-width: 991px) {
  .v-history-timeline.chronik-bereit .v-history-timeline__list::after {
    content: none;
  }
}
/* --- 4. Die Eintraege blenden einzeln ein -------------------------------- */
/*
 * Versteckt wird erst, wenn das Skript die Klasse `chronik-bereit` gesetzt
 * hat. Ohne Skript, bei abgeschalteter Bewegung oder wenn etwas schiefgeht,
 * steht die Chronik vollstaendig da. Ein Effekt darf nie der Grund sein,
 * dass jemand den Inhalt nicht sieht.
 */
.v-history-timeline.chronik-bereit .v-history-timeline__item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.v-history-timeline.chronik-bereit .v-history-timeline__item.ist-sichtbar {
  opacity: 1;
  transform: none;
}
/* Der Punkt des gerade gelesenen Eintrags.
   `translate(-50%, 0)` muss mit: Es zentriert den Punkt auf der Linie und
   wuerde von einem blossen `scale()` ueberschrieben. */
.v-history-timeline__dot {
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}
.v-history-timeline__item.ist-aktiv .v-history-timeline__dot {
  transform: translate(-50%, 0) scale(1.7);
  box-shadow: 0 0 0 7px rgba(104, 29, 51, 0.13);
}
/* Wer Bewegung abgeschaltet hat, bekommt den Inhalt ohne jeden Effekt.
   rs-motion.js setzt `chronik-bereit` dann gar nicht erst — diese Regel ist
   das zweite Netz, falls die Klasse doch einmal gesetzt wird. */
@media (prefers-reduced-motion: reduce) {
  .v-history-timeline.chronik-bereit .v-history-timeline__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .v-history-timeline__dot {
    transition: none;
  }
  .v-history-timeline.chronik-bereit .v-history-timeline__list::after {
    content: none;
  }
}