/*
 Ryujin Layout – Stufe 2
 Header unverändert aus Stufe 1.
 Darunter: linker Frame + leerer Main-Frame.
*/
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  background: #fff;
}
*, *::before, *::after { box-sizing: border-box; }

body { overflow-x: hidden; }

.layout {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 18.5% minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

/* Header aus der funktionierenden Stufe 1 */
.site-header {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: #fff;
}
.site-header__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(150px, 12.2vw, 188px);
  object-fit: fill;
  margin: 0;
  padding: 0;
}

/* Linker Frame */
.sidebar-frame {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: calc(100vh - 1px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #730015;
  line-height: 0;
}
.sidebar-frame__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Main bleibt absichtlich leer */
.main-frame {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: calc(100vh - 1px);
  margin: 0;
  padding: 0;
  background: #f7f7f6;
}


/* Stufe 2.2 – Frames exakt auf den sichtbaren Browserbereich begrenzen */
html, body {
  height: 100%;
  overflow: hidden;
}

.layout {
  height: 100vh;
  max-height: 100vh;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.sidebar-frame,
.main-frame {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* Sidebar-Grafik füllt exakt den linken Frame – kein roter Überhang darunter */
.sidebar-frame__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}


/* Stufe 2.6 – textfreies Originalmotiv als Sidebar-Hintergrund */
.sidebar-frame {
  position: relative;
  overflow: hidden;
}

.sidebar-frame__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.sidebar-nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.nav-item {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 39px;
  padding: 0 12px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-size:var(--ry-font-secondary);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.nav-item:hover {
  background: rgba(255,255,255,.08);
}

.nav-item.active {
  background: linear-gradient(90deg, #e20a13 0%, #c90012 100%);
  box-shadow: 0 5px 13px rgba(0,0,0,.24);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size:var(--ry-font-body);
  color: #fff;
}

.chevron {
  justify-self: end;
  font-size:var(--ry-font-body);
  opacity: .95;
}

.nav-separator {
  height: 1px;
  margin: 7px 6px 6px;
  background: rgba(255,255,255,.55);
}

/* Ryujin v0.47.44 — echte Smartphone-/Tablet-Navigation */
.ryujin-mobile-menu,.ryujin-mobile-bottom,.ryujin-mobile-backdrop{display:none}
@media(max-width:900px){
 html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
 .layout{display:block!important;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
 .site-header{height:66px!important;position:relative!important;z-index:15!important;background:var(--ry-surface,#fff)!important;overflow:visible!important}
 .site-header__image{height:66px!important;width:100%!important;object-fit:cover!important;object-position:left center!important}
 .ryujin-header-tools{max-width:calc(100% - 65px)!important;right:8px!important;top:8px!important}
 .ryujin-header-search{display:none!important}
 .ryujin-header-user #ryujinCurrentUsername{display:none!important}
 .sidebar-frame{position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(310px,82vw)!important;height:100dvh!important;min-height:0!important;z-index:110!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;overflow-y:auto!important;visibility:hidden!important}
 body.ryujin-mobile-nav-open .sidebar-frame{transform:translateX(0)!important;visibility:visible!important}
 .sidebar-frame__image{position:fixed!important}
 .sidebar-nav{padding-top:72px!important;padding-bottom:40px!important}
 .ryujin-mobile-menu{display:grid!important;place-items:center!important;position:fixed!important;top:14px!important;left:12px!important;z-index:125!important;width:42px!important;height:40px!important;border:1px solid var(--ry-border,#ddd)!important;border-radius:10px!important;background:var(--ry-surface,#fff)!important;color:var(--ry-text,#222)!important;font-size:23px!important;line-height:1!important}
 .ryujin-mobile-backdrop:not([hidden]){display:block!important;position:fixed!important;inset:0!important;background:rgba(0,0,0,.48)!important;z-index:105!important}
 .main-frame{display:block!important;width:100%!important;height:calc(100dvh - 66px - 70px - env(safe-area-inset-bottom,0px))!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important}
 .ryujin-mobile-bottom{display:flex!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:90!important;height:calc(66px + env(safe-area-inset-bottom,0px))!important;padding:5px 4px env(safe-area-inset-bottom,0px)!important;align-items:stretch!important;justify-content:space-around!important;background:var(--ry-surface,#fff)!important;border-top:1px solid var(--ry-border,#ddd)!important}
 .ryujin-mobile-tab{display:flex!important;flex:1 1 0!important;min-width:0!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;background:transparent!important;border:0!important;color:var(--ry-muted,#666)!important;font-size:11px!important;font-weight:600!important;padding:3px 0!important}
 .ryujin-mobile-tab.active{color:#b2183b!important}.ryujin-mobile-tab .nav-icon{color:inherit!important}.ryujin-mobile-tab svg{width:21px!important;height:21px!important}
}