/*
  ZwischenBlog AP-11
  Datei: assets/styles/layout.css
  Rolle: führende Shell-Wahrheit für fixen Header, rechte Seitenrail, Mobile-Drawer, Main und Footer.
  Grenze: keine Bottom-Bar, keine zweite Navigation, keine Blogkarten-Komposition.
*/
.zb-site { min-height: 100vh; background: var(--zb-bg); }
.zb-header {
  position: fixed;
  inset: 0 var(--zb-rail-width) auto 0;
  z-index: 60;
  height: var(--zb-header-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 36px);
  border-bottom: 1px solid var(--zb-line);
  background: color-mix(in srgb, var(--zb-bg) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.zb-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  width: fit-content;
  color: var(--zb-ink);
  font-weight: 760;
  letter-spacing: -.02em;
}
.zb-brand img { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
.zb-brand span { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-menu-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--zb-radius-full);
  background: transparent;
  color: var(--zb-ink-soft);
  display: none;
  place-items: center;
}
.zb-menu-button:hover { background: color-mix(in srgb, var(--zb-ink) 8%, transparent); color: var(--zb-ink); }
.zb-rail {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--zb-rail-width);
  z-index: 70;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  justify-items: center;
  padding: 10px 5px max(14px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--zb-bg) 96%, #000 4%);
  border-left: 1px solid var(--zb-line);
}
.zb-rail__nav, .zb-rail__bottom { width: 100%; display: grid; justify-items: center; gap: 4px; }
.zb-rail__bottom { align-self: end; }
.zb-rail-link, .zb-rail-action {
  width: 100%;
  min-height: 66px;
  border: 0;
  border-radius: var(--zb-radius-full);
  background: transparent;
  color: var(--zb-ink-soft);
  display: grid;
  grid-template-rows: 34px auto;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 4px 0 6px;
  text-align: center;
}
.zb-rail-link__icon {
  width: 54px;
  height: 34px;
  border-radius: var(--zb-radius-full);
  display: grid;
  place-items: center;
}
.zb-rail-link__label {
  max-width: 68px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .66rem;
  line-height: 1;
  font-weight: 740;
  letter-spacing: .005em;
}
.zb-rail-link:hover, .zb-rail-action:hover { color: var(--zb-ink); }
.zb-rail-link:hover .zb-rail-link__icon, .zb-rail-action:hover .zb-rail-link__icon { background: color-mix(in srgb, var(--zb-ink) 8%, transparent); }
.zb-rail-link[aria-current="page"] { color: var(--zb-ink); }
.zb-rail-link[aria-current="page"] .zb-rail-link__icon { background: color-mix(in srgb, var(--zb-brand) 22%, transparent); color: var(--zb-brand); }
.zb-main { min-height: 100vh; margin-right: var(--zb-rail-width); padding: calc(var(--zb-header-height) + 28px) clamp(18px, 3vw, 42px) 80px; }
.zb-footer { margin-right: var(--zb-rail-width); padding: 42px clamp(18px, 3vw, 42px); color: var(--zb-ink-muted); }
.zb-footer__inner { max-width: var(--zb-max); margin: 0 auto; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.zb-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .48);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.zb-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 90;
  width: min(420px, calc(100vw - 44px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 20px;
  padding: 18px 16px max(22px, env(safe-area-inset-bottom));
  border-left: 1px solid var(--zb-line);
  border-radius: 0 0 0 var(--zb-radius-lg);
  background: var(--zb-bg-elevated);
  box-shadow: var(--zb-shadow-panel);
  transform: translateX(104%);
  transition: transform .24s ease;
}
.zb-site.zb-drawer-open .zb-nav-scrim { opacity: 1; pointer-events: auto; }
.zb-site.zb-drawer-open .zb-drawer { transform: translateX(0); }
.zb-drawer__head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.zb-drawer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.zb-drawer-link, .zb-drawer-action {
  min-height: 92px;
  border: 0;
  border-radius: var(--zb-radius-lg);
  background: transparent;
  color: var(--zb-ink-soft);
  display: grid;
  grid-template-rows: 40px auto;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 10px;
  text-align: center;
  font-weight: 760;
}
.zb-drawer-link:hover, .zb-drawer-action:hover, .zb-drawer-link[aria-current="page"] { background: color-mix(in srgb, var(--zb-ink) 8%, transparent); color: var(--zb-ink); }
.zb-drawer-link svg, .zb-drawer-action svg { width: 28px; height: 28px; }
.zb-drawer__bottom { display: grid; gap: 10px; }
@media (max-width: 920px) {
  .zb-header { inset: 0 0 auto 0; padding: 0 12px 0 18px; }
  .zb-rail { display: none; }
  .zb-menu-button { display: grid; justify-self: end; }
  .zb-main { margin-right: 0; padding: calc(var(--zb-header-height) + 18px) 16px calc(52px + env(safe-area-inset-bottom)); }
  .zb-footer { margin-right: 0; padding: 34px 18px max(34px, env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  .zb-brand img { width: 20px; height: 20px; flex-basis: 20px; }
  .zb-brand span { font-size: .96rem; }
  .zb-drawer { width: min(88vw, 380px); }
  .zb-drawer__nav { grid-template-columns: 1fr 1fr; }
  .zb-drawer-link, .zb-drawer-action { min-height: 86px; border-radius: 26px; }
}


/* AP-11 | Admin-Komposition auf derselben Header-/Rail-/Drawer-Shell. */
.zb-container { max-width: var(--zb-max); margin: 0 auto; padding: var(--zb-space-8) var(--zb-space-5); }
.zb-container--narrow { max-width: 900px; }
.zb-grid { display: grid; gap: var(--zb-space-5); }
.zb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zb-brand--login { margin-bottom: var(--zb-space-5); }
.zb-admin-shell {
  max-width: 1480px;
  margin: 0 var(--zb-rail-width) 0 0;
  padding: calc(var(--zb-header-height) + 24px) var(--zb-space-5) var(--zb-space-10);
}
.zb-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zb-space-6); align-items: start; }
.zb-page-head { margin-bottom: var(--zb-space-6); display: grid; gap: var(--zb-space-3); }
.zb-page-head h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.2vw, 5.1rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.zb-page-head p { max-width: 760px; margin: 0; color: var(--zb-ink-soft); font-size: 1.05rem; line-height: 1.6; }
.zb-footer { color: var(--zb-ink-muted); padding: var(--zb-space-6) var(--zb-space-5); }
.zb-footer__inner { max-width: var(--zb-max); margin: 0 auto; display: flex; justify-content: space-between; gap: var(--zb-space-4); flex-wrap: wrap; }
.zb-drawer-link--button { border: 0; width: 100%; background: transparent; font: inherit; cursor: pointer; }
@media (max-width: 920px) {
  .zb-admin-shell { margin-right: 0; margin-left: 0; padding-top: calc(var(--zb-header-height) + 14px); }
}
@media (max-width: 900px) {
  .zb-grid--2,
  .zb-grid--3,
  .zb-grid--4 { grid-template-columns: 1fr; }
  .zb-admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .zb-container,
  .zb-admin-shell { padding-left: var(--zb-space-4); padding-right: var(--zb-space-4); }
}