/* =========================================================
   MOBILE NAV DRAWER – BASE
   ========================================================= */

.mnav-toggle{
  position:fixed;
  top:16px;
  right:16px;
  z-index:2000;

  width:44px;
  height:44px;
  border-radius:10px;
  border:0;

  background:#000;
  color:#fff;
  font-size:22px;
  cursor:pointer;

  display:none;
}

@media (max-width: 900px){
  .mnav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

/* Backdrop */
.mnav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:1900;
}

/* Drawer */
.mnav-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;

  width:min(86vw, 360px);
  background:#000;

  transform:translateX(100%);
  transition:transform .25s ease;

  z-index:1950;
  overflow:auto;
  padding:24px 16px;
}

/* Open state */
body.mnav-open .mnav-drawer{
  transform:translateX(0);
}

body.mnav-open .mnav-backdrop{
  opacity:1;
  pointer-events:auto;
}

body.mnav-open{
  overflow:hidden;
}

/* =========================================================
   NAV LIST
   ========================================================= */

.mnav-list{
  list-style:none;
  margin:0;
  padding:0;
}

.mnav-item{
  border-bottom:1px solid #111;
}

.mnav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.mnav-top{
  flex:1;
  min-width:0;

  display:flex;
  align-items:center;

  padding:14px 0;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  text-decoration:none;
}

.mnav-toggle-sub{
  flex:0 0 44px;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-left:10px;

  background:#111;
  border-left:1px solid #1c1c1c;

  color:#aaa;
  font-size:18px;
  line-height:1;
  cursor:pointer;

  transition:background .15s ease, color .15s ease, transform .15s ease;
}

.mnav-toggle-sub:hover{
  background:#1a1a1a;
  color:#fff;
}

.mnav-item.is-open .mnav-toggle-sub{
  transform:rotate(180deg);
}

/* Submenu */
.mnav-sub{
  display:none;
  list-style:none;
  padding:8px 0 14px 12px;
  margin:0;
}

.mnav-item.is-open > .mnav-sub{
  display:block;
}

.mnav-sub a{
  display:block;
  padding:10px 0;
  color:#ccc;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:12px;
  text-decoration:none;
}

.mnav-sub a:hover{
  color:#fff;
}

/* Desktop HARD-OFF für neuen Mobile Drawer */
@media (min-width: 901px){
  .mnav-toggle,
  .mnav-drawer,
  .mnav-backdrop{
    display:none !important;
  }

  body.mnav-open{
    overflow:auto !important;
  }
}

/* MOBILE HARD-OFF für alte Navigation */
@media (max-width: 900px){
  .main-nav,
  .primary-nav,
  .site-nav,
  header nav{
    display:none !important;
  }
}

/* =========================================================
   T1 – Mobile Korrektur nach Navbar-Hide
   ========================================================= */

@media (max-width: 900px){
  .tpl-t1{
    --t1-top-offset: 5px;
  }
}

/* =========================================================
   LANGUAGE SWITCHER – BASE
   ========================================================= */

/* Farben zentral definieren */
:root{
  --mlang-color-active: #ffffff;
  --mlang-color-inactive: #666666  ;
}

.mlang-toggle{
  position:fixed;
  top:16px;
  left:16px;
  z-index:2000;

  width:44px;
  height:44px;
  border-radius:10px;
  border:0;
  outline:none;

  background:#000;
  color:var(--mlang-color-active);
  font-size:18px;
  line-height:1;
  cursor:pointer;

  display:none;
  align-items:center;
  justify-content:center;

  transition:background .15s ease, color .15s ease;
}

@media (max-width: 900px){
  .mlang-toggle{
    display:flex;
  }
}

.mlang-toggle:hover{
  background:#111;
  color:var(--mlang-color-active);
}

/* Language Drawer */
.mlang-drawer{
  position:fixed;
  top:0;
  left:0;
  bottom:0;

  width:min(86vw, 360px);
  background:#000;
  color:var(--mlang-color-inactive) !important;

  transform:translateX(-100%);
  transition:transform .25s ease;

  z-index:1950;
  overflow:auto;
  padding:24px 16px;

  border-right:0;
}

/* Language Backdrop */
.mlang-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);

  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;

  z-index:1900;
}

/* Language Open State */
body.mlang-open .mlang-drawer{
  transform:translateX(0);
}

body.mlang-open .mlang-backdrop{
  opacity:1;
  pointer-events:auto;
}

body.mlang-open{
  overflow:hidden;
}

/* Language List */
.mlang-list{
  list-style:none;
  padding:0;
  margin:0;
}

.mlang-list li{
  margin:0;
  border-bottom:1px solid #111;
}

/* Language Buttons */
.mlang-btn{
  width:100%;
  min-height:44px;

  display:flex;
  align-items:center;

  padding:14px 0;

  background:#000;
  color:var(--mlang-color-inactive);

  border:0;

  text-align:left;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.08em;

  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.mlang-btn:hover{
  background:#111;
  color:var(--mlang-color-active);
}

.mlang-btn:disabled{
  opacity:1;
  cursor:default;
  background:#000;
  color:var(--mlang-color-active);
}

/* Language Drawer Headline – zentriert */
.mlang-drawer::before{
  content:"Language";
  display:block;
  margin-bottom:16px;

  color:var(--mlang-color-active);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;

  text-align:center;   /* ← zentriert */
}

.mlang-toggle svg,
.mlang-toggle i{
  fill:var(--mlang-color-active);
  color:var(--mlang-color-active);
}

/* LANGUAGE SWITCHER: nur Mobile */
@media (min-width: 901px){
  .mlang-toggle,
  .mlang-drawer,
  .mlang-backdrop{
    display:none !important;
  }
}

/* =========================================================
   FORCE MOBILE DRAWERS ON REAL MOBILE / TOUCH DEVICES
   ========================================================= */

html.is-mobile-device .mnav-toggle,
html.is-mobile-device .mlang-toggle{
  display:flex !important;
}

html.is-mobile-device .mnav-drawer,
html.is-mobile-device .mnav-backdrop,
html.is-mobile-device .mlang-drawer,
html.is-mobile-device .mlang-backdrop{
  display:block !important;
}

html.is-mobile-device .main-nav,
html.is-mobile-device .primary-nav,
html.is-mobile-device .site-nav,
html.is-mobile-device header nav,
html.is-mobile-device .cent-navbar{
  display:none !important;
}

html.is-mobile-device .mnav-toggle,
html.is-mobile-device .mnav-drawer,
html.is-mobile-device .mnav-backdrop,
html.is-mobile-device .mlang-toggle,
html.is-mobile-device .mlang-drawer,
html.is-mobile-device .mlang-backdrop{
  visibility:visible !important;
}

/* =========================================================
   RTL – Mobile Buttons Seiten tauschen
   ========================================================= */

html[dir="rtl"] .mnav-toggle,
body[dir="rtl"] .mnav-toggle{
  right:auto !important;
  left:16px !important;
}

html[dir="rtl"] .mlang-toggle,
body[dir="rtl"] .mlang-toggle{
  left:auto !important;
  right:16px !important;
}

html[dir="ltr"] .mnav-toggle,
body[dir="ltr"] .mnav-toggle{
  left:auto !important;
  right:16px !important;
}

html[dir="ltr"] .mlang-toggle,
body[dir="ltr"] .mlang-toggle{
  right:auto !important;
  left:16px !important;
}

/* =========================================================
   RTL – HARD FIX: NAV ROW TAUSCHEN (funktioniert sicher)
   ========================================================= */

html[dir="rtl"] .mnav-row,
body[dir="rtl"] .mnav-row{
  display:flex !important;
  flex-direction: row-reverse !important;
  align-items:center !important;
}

/* Textblock */
html[dir="rtl"] .mnav-top,
body[dir="rtl"] .mnav-top{
  flex:1 1 auto !important;
  text-align:right !important;
  justify-content:flex-end !important;
}

/* Pfeil-Button */
html[dir="rtl"] .mnav-toggle-sub,
body[dir="rtl"] .mnav-toggle-sub{
  flex:0 0 44px !important;

  order:-1 !important;          /* ← DAS ist der wichtige Teil */

  margin-left:0 !important;
  margin-right:10px !important;

  border-left:none !important;
  border-right:1px solid #1c1c1c !important;
}

/* Pfeil korrekt drehen */
html[dir="rtl"] .mnav-toggle-sub{
  transform:scaleX(-1);
}

html[dir="rtl"] .mnav-item.is-open .mnav-toggle-sub{
  transform:scaleX(-1) rotate(180deg);
}

/* =========================================================
   RTL – Mobile Drawer Text wirklich rechtsbündig
   ========================================================= */

html[dir="rtl"] .mnav-row,
body[dir="rtl"] .mnav-row{
  direction:rtl !important;
}

html[dir="rtl"] .mnav-top,
body[dir="rtl"] .mnav-top{
  display:block !important;
  width:100% !important;

  text-align:right !important;
  direction:rtl !important;

  padding-left:0 !important;
  padding-right:0 !important;
}

html[dir="rtl"] .mnav-sub,
body[dir="rtl"] .mnav-sub{
  direction:rtl !important;
  padding-left:0 !important;
  padding-right:12px !important;
}

html[dir="rtl"] .mnav-sub a,
body[dir="rtl"] .mnav-sub a{
  display:block !important;
  width:100% !important;

  text-align:right !important;
  direction:rtl !important;
}

/* Larger, font-independent mobile submenu chevrons. Keep the 44 px touch target. */
.mnav-toggle-sub {
  color: #fff;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
}
.mnav-toggle-sub .mnav-chevron {
  display: block;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  flex: 0 0 24px;
  pointer-events: none;
}

/* One-time centered mobile guide. The rest of the page remains usable. */
.centenario-mobile-guide {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147480002;
  width: min(340px, calc(100vw - 40px));
  max-height: calc(100dvh - 100px);
  box-sizing: border-box;
  overflow: auto;
  padding: 38px 24px 22px;
  margin: 0;
  color: #ddd;
  background: rgba(12, 12, 12, .97);
  border: 1px solid #555;
  border-radius: 0;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .45);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  direction: ltr !important;
  text-align: left !important;
}
.centenario-mobile-guide p {
  color: #ddd;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  direction: ltr !important;
  text-align: left !important;
}
.centenario-mobile-guide p:last-child { margin-bottom: 0; }
.centenario-mobile-guide .centenario-mobile-guide__heading {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.centenario-mobile-guide .centenario-mobile-guide__close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.centenario-mobile-guide .centenario-mobile-guide__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}