:root{
  /* Layout */
  --topbar-h: 64px;
  --sidebar-w: 270px;
  --sidebar-w-collapsed: 72px;

  --rightbar-w: 320px;
  --rightbar-w-collapsed: 56px;

  --footer-h: 56px;

  /* Banner (Höhe zentral hier anpassbar) */
  --hero-h: 64px;            /* <- DAS ist die “schmale Streifen”-Höhe */
  --hero-radius: 16px;

  /* Feintuning */
  --app-gap: 0px;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}



/* =============== APP SHELL =============== */

.app{
  display:flex;
  flex:1;
  min-height:0;
  width:100%;
}

/* Flex-Killer-Fix: min-width:0 erlaubt Schrumpfen */
.sidebar,
.rightbar,
.main{
  min-width:0;
}

/* =============== SIDEBAR =============== */

.sidebar{
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  background:#fff;
  border-right:1px solid rgba(0,0,0,.08);
  position:sticky;
  top:0;
  /* Keine feste 100vh-Höhe, sonst wird der Footer immer nach unten gedrückt (Scroll nötig) */
  height:auto;
  max-height:100vh;
  overflow:auto;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.brand-logo{
  max-height: var(--brand-logo-max-h, 64px);
  width:auto;
  display:block;
}

.brand-mini{
  width:40px;
  height:40px;
  display:none;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.1;
}

.brand-title{
  margin:0;
  font-weight:900;
  font-size:1.02rem;
}

.brand-sub{
  margin:0;
  font-size:.85rem;
  opacity:.7;
}

.nav{
  display:flex;
  flex-direction:column;
  padding:10px;
  gap:6px;
}

.nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  font-weight:800;
  opacity:.9;
}

.nav a:hover{
  background: rgba(230,0,5,.06);
}

.nav a.active{
  background: rgba(230,0,5,.10);
  border:1px solid rgba(230,0,5,.18);
}

.nav .material-icons{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
}

/* COLLAPSED */
body.sidebar-collapsed .sidebar{
  flex-basis: var(--sidebar-w-collapsed);
  width: var(--sidebar-w-collapsed);
}

body.sidebar-collapsed .brand-logo{ display:none; }
body.sidebar-collapsed .brand-mini{ display:block; }
body.sidebar-collapsed .brand-text{ display:none; }

body.sidebar-collapsed .nav a{
  justify-content:center;
  padding:12px 0;
}

body.sidebar-collapsed .nav .nav-text{
  display:none;
}

/* =============== MAIN =============== */

.main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  background:transparent;
  /* darf nicht 100vh sein, sonst rutscht der Footer immer aus dem Viewport */
  min-height:0;
}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.topbar .container{
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.top-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.title-wrap{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.page-title{
  margin:0;
  font-weight:1000;
  font-size:1.05rem;
}

.page-sub{
  margin:0;
  font-size:.85rem;
  opacity:.65;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.icon-btn:hover{ background:#fafafa; }
.icon-btn:active{ transform: translateY(1px); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-weight:900;
}

/* Content (genug Platz für Footer) */
.content{
  padding: 16px 0 24px 0;
}

/* =============== RIGHTBAR (optional / minimal) =============== */

.rightbar{
  flex: 0 0 var(--rightbar-w);
  width: var(--rightbar-w);
  background:#fff;
  border-left:1px solid rgba(0,0,0,.08);
  position:sticky;
  top:0;
  /* Keine feste 100vh-Höhe, sonst wird der Footer nach unten gedrückt (Scroll nötig) */
  height:auto;
  max-height:100vh;
  overflow:auto;
}

.rightbar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.rightbar-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:1000;
}

.rightbar-body{
  padding:14px;
}

.rightbar-mini{
  display:none;
}

/* Rightbar collapsed */
body.rightbar-collapsed .rightbar{
  flex-basis: var(--rightbar-w-collapsed);
  width: var(--rightbar-w-collapsed);
}

body.rightbar-collapsed .rightbar-body,
body.rightbar-collapsed .rightbar-title .label{
  display:none;
}

body.rightbar-collapsed .rightbar-mini{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 8px;
  align-items:center;
}

.mini-btn{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}

.mini-sep{ height:1px; width:100%; background:rgba(0,0,0,.08); margin:8px 0; }

/* =============== BACKDROP (mobile menu/right) =============== */

.backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.30);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:40;
}

body.menu-open .backdrop,
body.panel-open .backdrop{
  opacity:1;
  pointer-events:auto;
}

/* Mobile behaviour (simplified) */
@media (max-width: 980px){
  .sidebar{
    position:fixed;
    left:0; top:0;
    transform: translateX(-110%);
    transition: transform .2s ease;
    z-index:50;
    box-shadow: 0 18px 48px rgba(17,24,39,.16);
  }
  body.menu-open .sidebar{ transform: translateX(0); }

  .rightbar{
    position:fixed;
    right:0; top:0;
    transform: translateX(110%);
    transition: transform .2s ease;
    z-index:50;
    box-shadow: 0 18px 48px rgba(17,24,39,.16);
  }
}

/* =============== LIST / CARD helpers =============== */

.list{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  overflow:hidden;
}

.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid rgba(0,0,0,.06);
}

.item:first-child{ border-top:none; }

.item .left{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-weight:900;
  font-size:.85rem;
}

/* =============== FOOTER =============== */

.brk-footer{
  position:relative;
  width:100%;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.10);
  z-index:1;
}

.brk-footer__wrap{
  max-width:1200px;
  margin:0 auto;
  padding:8px 14px 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Schlichter Footer (zwei Positionen) */
.brk-footer__menus{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  align-items:center;
}

.brk-footer__col{
  display:flex;
  justify-content:center;
  min-width:0;
}

/* Menü-Module (mod_menu) im Footer: inline & clean */
.brk-footer__col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.brk-footer__col a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  font-size:.9rem;
  color:#111;
  opacity:.72;
}

.brk-footer__col a:hover{
  background:#f3f3f3;
  opacity:1;
}

.brk-footer__meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.82rem;
  opacity:.70;
}

.brk-footer__meta-left,
.brk-footer__meta-right{
  min-width:0;
}

@media (max-width: 900px){
  .brk-footer__meta{
    justify-content:center;
    text-align:center;
    flex-direction:column;
  }
}

/* =============== HERO STRIP (Banner) =============== */

.hero-strip{
  height: var(--hero-h);
  border-radius: 0 0 var(--hero-radius) var(--hero-radius);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 6px 16px rgba(17,24,39,.08);
  background:#eee;
  margin: 0 0 18px 0; /* “anknüpfen”: kein Abstand nach oben */
}

.hero-strip img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Keine Verblassung rechts -> kein Gradient, keine Maske. */
/* === FIX: Rosa/Rot-Verlauf im Main-Bereich entfernen === */
.main,
.content {
  background: transparent !important;
}

/* Falls der Verlauf als Pseudo-Element kommt */
.main::before,
.content::before,
.main::after,
.content::after {
  content: none !important;
  display: none !important;
}

/* Optional: sauberen, neutralen Seitenhintergrund setzen */
body {
  background: var(--page-bg, #f7f7f7) !important;
}

:root{
  --brand-logo-max-h: 52px;
}
/* BRAND: Logo oben, Text darunter */
.sidebar .brand{
  display:flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Logo links ausrichten */
.sidebar .brand-logo,
.sidebar .brand-mini{
  margin: 0 !important;
}

/* Textblock volle Breite, damit nix seitlich „andockt“ */
.sidebar .brand-text{
  width: 100% !important;
}

/* Wenn Sidebar collapsed: nur Mini-Logo zentriert */
body.sidebar-collapsed .sidebar .brand{
  align-items: center !important;
}
:root{
  --banner-h: 110px;   /* <- hier ändern */
}

  /* Banner-Container */
  .hero-strip,
  .app-hero,
  .banner,
  .page-banner{
    height: var(--banner-h) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }

  /* falls das Banner ein <img> ist */
  .hero-strip img,
  .app-hero img,
  .banner img,
  .page-banner img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
/* =========================================================
   ONE-CARD-LAYOUT: innere "Card" neutralisieren
   (Bootstrap / UIkit / Helix / Astroid / T4 / SP Page Builder u.a.)
   ========================================================= */

/* 1) Wenn eine Card in einer Card steckt: innere Card optisch entfernen */
body .card .card,
body .uk-card .uk-card,
body .astroid-card .astroid-card,
body .t4-card .t4-card,
body .sppb-panel .sppb-panel,
body .sppb-card .sppb-card,
body .tp-card .tp-card,
body .panel .panel,
body .well .well {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 2) Doppelte Innenabstände entfernen (typischer "verschachtelt" Look) */
body .card .card .card-body,
body .uk-card .uk-card .uk-card-body,
body .astroid-card .astroid-card .card-body,
body .t4-card .t4-card .card-body,
body .sppb-panel .sppb-panel-body,
body .sppb-card .sppb-card-body {
  padding: 0 !important;
}

/* 3) Häufig ist der Artikel selbst als Card/Box gerendert.
      Nur dann neutralisieren, wenn er IN einer anderen Card liegt. */
body .card :is(.item-page, .com-content-article, article.item, .blog-item),
body .uk-card :is(.item-page, .com-content-article, article.item, .blog-item),
body .astroid-card :is(.item-page, .com-content-article, article.item, .blog-item) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 4) Falls der Wrapper selbst “Karte” spielt (rounded + shadow via utility classes) */
body :is(.card, .uk-card, .astroid-card, .t4-card) :is(.rounded, .rounded-3, .shadow, .shadow-sm, .shadow-lg) {
  box-shadow: none !important;
}