/* TS1 Mobile UI v4 — professional portrait layout. Desktop remains untouched. */
@media screen and (max-width: 800px) and (orientation: portrait) {
  :root {
    --ts1-topbar-h: 58px;
    --ts1-bottom-nav-h: 84px;
    --ts1-drawer-w: min(86vw, 360px);
    --ts1-page-gap: 8px;
    --ts1-frame-border: #5c4933;
    --ts1-frame-border-light: #c6ad80;
    --ts1-frame-bg: rgba(255,252,242,.985);
    --ts1-title-bg1: #c6b08c;
    --ts1-title-bg2: #9b7d59;
    --ts1-green1: #80ba16;
    --ts1-green2: #4d8509;
    --ts1-wood1: #8a643c;
    --ts1-wood2: #563a24;
  }

  html,
  body {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.ts1-mobile-ui,
  body.ts1-mobile-ui #background,
  body.ts1-mobile-ui #bodyWrapper,
  body.ts1-mobile-ui #pageWrapper,
  body.ts1-mobile-ui #wrapper,
  body.ts1-mobile-ui #layout,
  body.ts1-mobile-ui #main,
  body.ts1-mobile-ui #mainWrapper {
    box-sizing: border-box !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
  }

  body.ts1-mobile-ui #background {
    position: fixed !important;
    inset: 0 !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  /* Remove desktop chrome that consumes valuable phone space. */
  body.ts1-mobile-ui #logo,
  body.ts1-mobile-ui #servertime,
  body.ts1-mobile-ui #time,
  body.ts1-mobile-ui #goldSilver,
  body.ts1-mobile-ui #outOfGame,
  body.ts1-mobile-ui #footer,
  body.ts1-mobile-ui #footerSpacer,
  body.ts1-mobile-ui .footer,
  body.ts1-mobile-ui .contentTitleButton#answersButton {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     Top resource bar — the only permanent element above the game canvas.
     ----------------------------------------------------------------------- */
  body.ts1-mobile-ui #stockBar,
  body.ts1-mobile-ui ul#stockBar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: var(--ts1-topbar-h) !important;
    min-height: var(--ts1-topbar-h) !important;
    max-height: var(--ts1-topbar-h) !important;
    margin: 0 !important;
    padding: 4px 4px 5px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 2px !important;
    direction: rtl !important;
    list-style: none !important;
    overflow: hidden !important;
    z-index: 2147482500 !important;
    background:
      linear-gradient(to bottom, rgba(116,81,48,.98), rgba(73,49,30,.99)),
      #69482e !important;
    border-bottom: 1px solid #3f2b1d !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.32) !important;
  }

  body.ts1-mobile-ui #stockBar > li,
  body.ts1-mobile-ui ul#stockBar > li,
  body.ts1-mobile-ui #stockBar .stockBarButton {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.ts1-mobile-ui #stockBar .stockBarButton {
    border: 1px solid rgba(78,55,35,.78) !important;
    border-radius: 3px !important;
    background: linear-gradient(to bottom,#f1ead9 0%,#dfd2b7 52%,#c8b48d 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(96,69,44,.38) !important;
    overflow: hidden !important;
  }

  body.ts1-mobile-ui #stockBar .stockBarButton .middle {
    width: 100% !important;
    height: 100% !important;
  }

  body.ts1-mobile-ui #stockBar .stockBarButton .value {
    position: absolute !important;
    left: 6px !important;
    top: 5px !important;
    max-width: calc(100% - 34px) !important;
    height: 18px !important;
    font: 700 15px/18px Arial,Helvetica,sans-serif !important;
    color: #2d241a !important;
    direction: ltr !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.ts1-mobile-ui #stockBar .barBox {
    position: absolute !important;
    left: 5px !important;
    right: 31px !important;
    bottom: 5px !important;
    width: auto !important;
    height: 7px !important;
    border: 1px solid #73553b !important;
    background: #744431 !important;
    box-sizing: border-box !important;
  }

  body.ts1-mobile-ui #stockBar .barBox .bar {
    height: 100% !important;
    background: linear-gradient(to bottom,#79c33c,#4c9428) !important;
  }

  body.ts1-mobile-ui #stockBar li i.r1,
  body.ts1-mobile-ui #stockBar li i.r2,
  body.ts1-mobile-ui #stockBar li i.r3,
  body.ts1-mobile-ui #stockBar li i.r4 {
    position: absolute !important;
    top: 7px !important;
    right: 4px !important;
    width: 27px !important;
    height: 27px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)) !important;
  }

  /* -----------------------------------------------------------------------
     Bottom Travian navigation — preserves original icon artwork/sprites.
     ----------------------------------------------------------------------- */
  body.ts1-mobile-ui #header,
  body.ts1-mobile-ui div#header {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: calc(var(--ts1-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: var(--ts1-bottom-nav-h) !important;
    margin: 0 !important;
    padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
    z-index: 2147482600 !important;
    overflow: visible !important;
    background:
      linear-gradient(to bottom,rgba(232,218,191,.98),rgba(184,156,115,.98)),
      #cbb18b !important;
    border-top: 2px solid #806243 !important;
    box-shadow: 0 -3px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.72) !important;
    transform: none !important;
  }

  body.ts1-mobile-ui #header::before,
  body.ts1-mobile-ui #header::after { display:none !important; content:none !important; }

  body.ts1-mobile-ui #navigation,
  body.ts1-mobile-ui #header ul#navigation {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: min(100vw, 600px) !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: var(--ts1-bottom-nav-h) !important;
    margin: 0 !important;
    padding: 5px 5px 7px !important;
    box-sizing: border-box !important;
    align-items: flex-end !important;
    justify-content: space-evenly !important;
    gap: 0 !important;
    direction: rtl !important;
    list-style: none !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    background: transparent !important;
  }

  body.ts1-mobile-ui #navigation > li,
  body.ts1-mobile-ui #header ul#navigation > li {
    display: flex !important;
    position: relative !important;
    flex: 0 1 68px !important;
    width: 68px !important;
    min-width: 50px !important;
    max-width: 72px !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    overflow: visible !important;
  }

  body.ts1-mobile-ui #navigation > li > a,
  body.ts1-mobile-ui #header ul#navigation > li > a {
    display: block !important;
    position: relative !important;
    width: 61px !important;
    height: 61px !important;
    min-width: 61px !important;
    min-height: 61px !important;
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: scale(1.06) !important;
    transform-origin: bottom center !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)) !important;
  }

  body.ts1-mobile-ui #navigation > li > a.active {
    transform: scale(1.13) translateY(-2px) !important;
    filter: drop-shadow(0 0 4px rgba(126,202,26,.85)) drop-shadow(0 2px 2px rgba(0,0,0,.4)) !important;
  }

  body.ts1-mobile-ui #navigation .speechBubbleContainer {
    top: -6px !important;
    right: 1px !important;
    left: auto !important;
    transform: scale(1.12) !important;
    transform-origin: center !important;
    z-index: 20 !important;
  }

  /* -----------------------------------------------------------------------
     Center / canvas area.
     ----------------------------------------------------------------------- */
  body.ts1-mobile-ui #center,
  body.ts1-mobile-ui div#center {
    position: fixed !important;
    top: var(--ts1-topbar-h) !important;
    bottom: calc(var(--ts1-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.ts1-mobile-ui #contentOuterContainer,
  body.ts1-mobile-ui #contentOuterContainer.size1,
  body.ts1-mobile-ui #contentOuterContainer.size2,
  body.ts1-mobile-ui #contentWrapper,
  body.ts1-mobile-ui #contentContainer,
  body.ts1-mobile-ui .contentWrapper,
  body.ts1-mobile-ui .contentContainer,
  body.ts1-mobile-ui #content {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* -----------------------------------------------------------------------
     Village canvases: no white window; only village/fields and useful HUD.
     ----------------------------------------------------------------------- */
  body.ts1-mobile-ui.village1 #background,
  body.ts1-mobile-ui.village2 #background {
    background-position: center top !important;
    background-size: cover !important;
  }

  body.ts1-mobile-ui.village1 #contentOuterContainer,
  body.ts1-mobile-ui.village2 #contentOuterContainer,
  body.ts1-mobile-ui.village1 #contentOuterContainer .contentContainer,
  body.ts1-mobile-ui.village2 #contentOuterContainer .contentContainer,
  body.ts1-mobile-ui.village1 #content,
  body.ts1-mobile-ui.village2 #content {
    position: relative !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.ts1-mobile-ui.village1 #contentOuterContainer .contentTitle,
  body.ts1-mobile-ui.village2 #contentOuterContainer .contentTitle,
  body.ts1-mobile-ui.village1 #contentOuterContainer .contentFooter,
  body.ts1-mobile-ui.village2 #contentOuterContainer .contentFooter {
    display: none !important;
  }

  body.ts1-mobile-ui.village1 #resourceFieldContainer,
  body.ts1-mobile-ui.village1 #village_map,
  body.ts1-mobile-ui.village2 #village_map,
  body.ts1-mobile-ui.village2 #villageMap,
  body.ts1-mobile-ui.village2 .village_map {
    float: none !important;
    max-width: none !important;
    max-height: none !important;
    transform-origin: top center !important;
    overflow: visible !important;
  }

  body.ts1-mobile-ui.village1 #resourceFieldContainer img#resfeld,
  body.ts1-mobile-ui.village1 #village_map img#resfeld,
  body.ts1-mobile-ui.village1 img#resfeld,
  body.ts1-mobile-ui.village1 #village_map img,
  body.ts1-mobile-ui.village2 #village_map img {
    max-width: none !important;
    max-height: none !important;
  }

  body.ts1-mobile-ui.village1 #map_details { display:none !important; }
  body.ts1-mobile-ui.village1 .ts1-mobile-drawer #map_details.ts1-mobile-map-details {
    display:block !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    transform:none !important;
  }

  body.ts1-mobile-ui.village1 .ts1-mobile-map-details .boxes,
  body.ts1-mobile-ui.village1 .ts1-mobile-map-details .movements,
  body.ts1-mobile-ui.village1 .ts1-mobile-map-details .production,
  body.ts1-mobile-ui.village1 .ts1-mobile-map-details .units {
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin:0 0 10px !important;
  }

  /* Build queue becomes a compact floating card above the bottom navigation. */
  body.ts1-mobile-ui.village1 .buildingList,
  body.ts1-mobile-ui.village2 .buildingList {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--ts1-bottom-nav-h) + 8px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(92vw, 420px) !important;
    max-width: min(92vw, 420px) !important;
    height: auto !important;
    max-height: 124px !important;
    margin: 0 !important;
    transform: translateX(-50%) scale(.86) !important;
    transform-origin: bottom center !important;
    overflow: hidden !important;
    z-index: 2147482300 !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.28) !important;
  }

  /* -----------------------------------------------------------------------
     Internal pages: one polished Travian-style window with internal scrolling.
     ----------------------------------------------------------------------- */
  body.ts1-mobile-ui:not(.village1):not(.village2) #center {
    padding: var(--ts1-page-gap) !important;
  }

  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer,
  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer.size1,
  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer.size2 {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: calc(100vw - (var(--ts1-page-gap) * 2)) !important;
    min-width: 0 !important;
    max-width: 760px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 7px !important;
    border: 3px solid var(--ts1-frame-border) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(90deg,rgba(255,255,255,.32),transparent 8%,transparent 92%,rgba(255,255,255,.18)),
      linear-gradient(to bottom,#bda27b,#8d704e) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.38), inset 0 0 0 2px var(--ts1-frame-border-light) !important;
    overflow: hidden !important;
  }

  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer > .contentTitle {
    display: block !important;
    position: relative !important;
    flex: 0 0 54px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 52px 0 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    color: #fff9e9 !important;
    background: linear-gradient(to bottom,var(--ts1-title-bg1),var(--ts1-title-bg2)) !important;
    border: 1px solid #6e5337 !important;
    border-radius: 5px 5px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(83,57,34,.45) !important;
  }

  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer > .contentTitle h1,
  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer > .contentTitle .title,
  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer > .contentTitle span {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 52px !important;
    color: #fff9e9 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-shadow: 0 2px 1px rgba(73,47,28,.88) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer > .contentContainer {
    display: block !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 14px 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: var(--ts1-frame-bg) !important;
    border-left: 1px solid rgba(104,79,51,.35) !important;
    border-right: 1px solid rgba(104,79,51,.35) !important;
    scrollbar-width: thin !important;
  }

  body.ts1-mobile-ui:not(.village1):not(.village2) #contentOuterContainer > .contentFooter {
    display: block !important;
    flex: 0 0 7px !important;
    width: 100% !important;
    height: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: linear-gradient(to bottom,#bda27b,#927552) !important;
  }

  body.ts1-mobile-ui:not(.village1):not(.village2) #content {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Tabs / content navigation */
  body.ts1-mobile-ui .contentNavi,
  body.ts1-mobile-ui .tabNavi,
  body.ts1-mobile-ui ul.tabs,
  body.ts1-mobile-ui .tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    gap: 2px !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.ts1-mobile-ui .contentNavi::-webkit-scrollbar,
  body.ts1-mobile-ui .tabNavi::-webkit-scrollbar,
  body.ts1-mobile-ui ul.tabs::-webkit-scrollbar { display:none !important; }

  body.ts1-mobile-ui .contentNavi .tabItem,
  body.ts1-mobile-ui .tabNavi li,
  body.ts1-mobile-ui ul.tabs > li,
  body.ts1-mobile-ui .tabs > li {
    flex: 1 0 92px !important;
    min-width: 92px !important;
    min-height: 42px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.ts1-mobile-ui .contentNavi a,
  body.ts1-mobile-ui .tabNavi a,
  body.ts1-mobile-ui ul.tabs a,
  body.ts1-mobile-ui .tabs a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Tables */
  body.ts1-mobile-ui .ts1-mobile-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.ts1-mobile-ui #content table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    font-size: 13px !important;
  }

  body.ts1-mobile-ui #content table th,
  body.ts1-mobile-ui #content table td {
    box-sizing: border-box !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
  }

  body.ts1-mobile-ui #content table th {
    background: linear-gradient(to bottom,#f1ecdf,#ded3bd) !important;
    color: #4b3c2a !important;
    font-weight: 700 !important;
  }

  body.ts1-mobile-ui #content table td {
    background-color: rgba(255,255,255,.72) !important;
  }

  body.ts1-mobile-ui.ts1-page-statistiken #content table,
  body.ts1-mobile-ui.ts1-page-berichte #content table,
  body.ts1-mobile-ui.ts1-page-nachrichten #content table {
    min-width: 100% !important;
  }

  /* Forms and buttons */
  body.ts1-mobile-ui input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  body.ts1-mobile-ui select,
  body.ts1-mobile-ui textarea {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-height: 40px !important;
    font-size: 16px !important;
  }

  body.ts1-mobile-ui button,
  body.ts1-mobile-ui input[type="submit"],
  body.ts1-mobile-ui input[type="button"],
  body.ts1-mobile-ui .button,
  body.ts1-mobile-ui .btn {
    min-height: 40px !important;
    touch-action: manipulation !important;
  }

  body.ts1-mobile-ui #content button,
  body.ts1-mobile-ui #content .button-green,
  body.ts1-mobile-ui #content input[type="submit"] {
    border-radius: 5px !important;
    filter: saturate(1.05) !important;
  }

  /* Popups / payment wizard / modal windows. */
  body.ts1-mobile-ui .dialog,
  body.ts1-mobile-ui .travianDialog,
  body.ts1-mobile-ui .modal,
  body.ts1-mobile-ui .popup,
  body.ts1-mobile-ui .popupWrapper,
  body.ts1-mobile-ui [role="dialog"],
  body.ts1-mobile-ui #reactDialogWrapper .reactDialog {
    box-sizing: border-box !important;
    width: min(94vw, 650px) !important;
    max-width: min(94vw, 650px) !important;
    max-height: calc(100dvh - 34px) !important;
    overflow: hidden !important;
  }

  body.ts1-mobile-ui .dialogBody,
  body.ts1-mobile-ui .popupContent,
  body.ts1-mobile-ui #reactDialogWrapper .dialogBody {
    max-height: calc(100dvh - 74px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* -----------------------------------------------------------------------
     Side drawers — hidden until the edge tab is touched.
     ----------------------------------------------------------------------- */
  #ts1MobileLeftButton,
  #ts1MobileRightButton {
    display: flex !important;
    position: fixed !important;
    top: 50% !important;
    width: 34px !important;
    height: 62px !important;
    margin-top: -31px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483002 !important;
    border: 2px solid #7e5e32 !important;
    background: linear-gradient(to bottom,#2f8c25,#176514) !important;
    color: #f8e6aa !important;
    font: 700 28px/1 Arial,sans-serif !important;
    text-shadow: 0 1px 1px #1b3510 !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.42), inset 0 0 0 2px #d6a62b !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  #ts1MobileLeftButton {
    left: -4px !important;
    border-radius: 0 22px 22px 0 !important;
  }

  #ts1MobileRightButton {
    right: -4px !important;
    border-radius: 22px 0 0 22px !important;
  }

  #ts1MobileOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482998 !important;
    background: rgba(20,16,10,.58) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .18s ease, visibility .18s ease !important;
  }

  body.ts1-mobile-drawer-open #ts1MobileOverlay {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.ts1-mobile-ui .ts1-mobile-drawer {
    display: block !important;
    position: fixed !important;
    top: var(--ts1-topbar-h) !important;
    bottom: calc(var(--ts1-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    width: var(--ts1-drawer-w) !important;
    min-width: 0 !important;
    max-width: var(--ts1-drawer-w) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    float: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background:
      linear-gradient(rgba(255,251,238,.97),rgba(242,231,204,.98)),
      #f2e8cf !important;
    border: 2px solid #81623f !important;
    box-shadow: 0 0 24px rgba(0,0,0,.42) !important;
    transition: transform .22s ease !important;
    z-index: 2147483001 !important;
    pointer-events: auto !important;
  }

  body.ts1-mobile-ui .ts1-mobile-drawer-left {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-105%) !important;
    border-radius: 0 10px 10px 0 !important;
  }

  body.ts1-mobile-ui .ts1-mobile-drawer-right {
    right: 0 !important;
    left: auto !important;
    transform: translateX(105%) !important;
    border-radius: 10px 0 0 10px !important;
  }

  body.ts1-mobile-ui .ts1-mobile-drawer.ts1-mobile-open {
    transform: translateX(0) !important;
  }

  body.ts1-mobile-ui .ts1-mobile-drawer .sidebarBox,
  body.ts1-mobile-ui .ts1-mobile-drawer .boxes,
  body.ts1-mobile-ui .ts1-mobile-drawer .box {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Map page and other wide canvases. */
  body.ts1-mobile-ui.ts1-page-karte #content,
  body.ts1-mobile-ui.ts1-page-map #content {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@supports not (height: 100dvh) {
  @media screen and (max-width: 800px) and (orientation: portrait) {
    html, body,
    body.ts1-mobile-ui #background,
    body.ts1-mobile-ui #bodyWrapper { height:100vh !important; max-height:100vh !important; }
  }
}