/* css/custom.css */

/* zentrale Stellschrauben */
:root{
    --sidebar-w: 270px;
    --sidebar-w-collapsed: 72px;

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

    --topbar-h: 64px;

    --brand-logo-max-h: 44px; /* wird auch per APP_CONFIG gesetzt */
    --brand-mini-h: 28px;     /* Höhe des Mini-Logos im eingeklappten Zustand */
    --banner-h: 100px;         /* wird auch per APP_CONFIG gesetzt */

    --page-bg: #f6f6f6;
    --card-bg: #ffffff;
    --border: rgba(0,0,0,.10);
    --shadow: 0 10px 28px rgba(17,24,39,.10);
}

html, body{ height:100%; }
body{
    margin:0;
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Verlauf-Killer (falls irgendwo reingerutscht) */
.main, .content{ background: transparent !important; }
.main::before, .main::after, .content::before, .content::after{
    content:none !important;
    display:none !important;
}

/* App Layout */
.app{
    display:flex;
    min-height: 0;
    width:100%;
}
.sidebar, .rightbar, .main{ min-width:0; }

/* Sidebar */
.sidebar{
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    height: auto;
    position: sticky;
    top:0;
    overflow:hidden;
}

.brand{
    padding: 14px 14px 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display:flex;
    flex-direction: column;
    gap: 8px;
    align-items:flex-start;
}

.brand-logo{
    height: var(--brand-logo-max-h);
    max-height: var(--brand-logo-max-h);
    width:auto;
    object-fit:contain;
    display:block;
}
.brand-mini{
    display:none;
    height: var(--brand-mini-h);
    max-height: var(--brand-mini-h);
    width:auto;
    object-fit:contain;
}
.brand-text{ width:100%; }
.brand-title{
    margin:0;
    font-weight:1000;
}
.brand-sub{
    margin:2px 0 0 0;
    opacity:.72;
    font-size: 12px;
}

/* Nav */
.nav{
    display:flex;
    flex-direction:column;
    gap: 6px;
    padding: 10px;
}
.nav a{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration:none;
    color:#111;
    font-weight: 900;
}
.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);
}

/* SVG Icon wrappers */
.nav-ico{
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.ico{
    width: 20px;
    height: 20px;
    display:block;
}
.ico-fallback{
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: rgba(0,0,0,.06);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size: 12px;
    font-weight: 1000;
    color: rgba(0,0,0,.60);
}

/* Sidebar collapsed: wirklich schmal */
body.sidebar-collapsed .sidebar{
    flex-basis: var(--sidebar-w-collapsed);
    width: var(--sidebar-w-collapsed);
}
body.sidebar-collapsed .brand-text{ display:none; }
body.sidebar-collapsed .brand-logo{ display:none; }
body.sidebar-collapsed .brand-mini{ display:block; }
body.sidebar-collapsed .brand{
    align-items:center;
}
/* Mini-Header Gefühl in der Sidebar (oben „clean“, im Collapse wie App-Icon) */
.sidebar .brand{
    position: sticky;
    top: 0;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(6px);
}
body.sidebar-collapsed .brand{
    padding: 12px 0 10px 0;
}
body.sidebar-collapsed .brand-link{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 26px rgba(17,24,39,.08);
}
body.sidebar-collapsed .brand-link img{
    max-height: 28px;
}

/* Collapse-Button gehört in die Topbar (nicht ins Menü) */
@media (max-width: 980px){
    #btnSidebarCollapse{ display:none !important; }
}

body.sidebar-collapsed .nav a{
    justify-content:center;
    padding: 12px 0;
}
body.sidebar-collapsed .nav-text{ display:none !important; }

/* === Eingeklappte Sidebar: nur Icon-Button hervorheben (keine breite Markierung wie bei Text-Menü) === */
body.sidebar-collapsed .nav{ padding:10px 6px !important; }
body.sidebar-collapsed .nav a{
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  margin:6px auto !important;
  border-radius:14px !important;
  justify-content:center !important;
  background:transparent !important;
  border:1px solid transparent !important;
}
body.sidebar-collapsed .nav a:hover{
  background: rgba(230,0,5,.06) !important;
}
body.sidebar-collapsed .nav a.active{
  background: var(--drk-red) !important;
  border-color: var(--drk-red) !important;
  color: #fff !important;
}
body.sidebar-collapsed .nav a.active img.ico{
  filter: brightness(0) invert(1);
}
body.sidebar-collapsed .nav a.active .ico-fallback{
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
/* falls irgendwo ein "Aktiv-Strich" per ::before kommt, im Collapse weg */
body.sidebar-collapsed .nav a.active::before{ display:none !important; }

/* Smooth Tooltip für Icons (eingeklappte Sidebar)
   - kein title="" (Browser-Tooltips)
   - leichter Delay + Fade/Slide (wirkt „SaaS“, nicht „Kindergarten“) */
body.sidebar-collapsed .nav a[data-tooltip]{
    position: relative;
}
body.sidebar-collapsed .nav a[data-tooltip]::after{
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: #111;
    color: #fff;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(17,24,39,.18);
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
    transition-delay: .10s;
}
body.sidebar-collapsed .nav a[data-tooltip]::before{
    content: "";
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    border: 7px solid transparent;
    border-right-color: #111;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
    transition-delay: .10s;
}
body.sidebar-collapsed .nav a[data-tooltip]:hover::after,
body.sidebar-collapsed .nav a[data-tooltip]:hover::before,
body.sidebar-collapsed .nav a[data-tooltip]:focus-visible::after,
body.sidebar-collapsed .nav a[data-tooltip]:focus-visible::before{
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}


/* Main */
.main{
    flex: 1 1 auto;
    display:flex;
    flex-direction:column;
    min-height: 0;
}

/* ===============================
   PRINT (global)
   ===============================
   Ziel:
   - Menü/Topbar/Rightbar/Banner NICHT drucken
   - Inhalt volle Breite
   - Kein 2. Leerblatt durch 100vh/min-height/Sticky-Layout
*/

@page{
  size: A4;
  margin: 7mm;
}

@media print{
  html, body{
    height: auto !important;
  }

  body{
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* UI-Chrome raus */
  .sidebar,
  .topbar,
  .rightbar,
  .hero-strip,
  .backdrop{
    display: none !important;
  }

  /* Layout-Zwänge lösen */
  .app,
  .main{
    display: block !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Inhalt volle Breite, keine Außenabstände */
  .content,
  .content .container{
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Allgemein: keine Schatten beim Druck */
  *{
    box-shadow: none !important;
  }

  .no-print{ display:none !important; }

  /* Tabellen sauber umbrechen */
  table{ page-break-inside: auto !important; }
  thead{ display: table-header-group !important; }
  tfoot{ display: table-footer-group !important; }
  tr{ page-break-inside: avoid !important; page-break-after: auto !important; }

/* Sticky/100vh in Print killen (Sicherheitsnetz) */
  .sidebar,
  .rightbar{
    position: static !important;
    height: auto !important;
  }
}

/* ===============================
   PRINT (Angebot)
   - bewusst etwas kompakter, damit es i.d.R. auf 1 Seite passt
*/

@media print{
  [data-page="angebot"] .offer-page{
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  [data-page="angebot"] .main-table{ font-size: 8.5pt !important; }
  [data-page="angebot"] .small-font{ font-size: 8.5pt !important; }
  [data-page="angebot"] .main-table td,
  [data-page="angebot"] .main-table th{ padding: 2px !important; }

  [data-page="angebot"] .logo-img{ max-height: 48px !important; }
  [data-page="angebot"] textarea{ height: 34px !important; }

  /* optional: wenn es knapp wird, hilft das in Chrome/Edge zuverlässig */
  [data-page="angebot"] .offer-page{ zoom: 0.90; }
}

/* Topbar */
.topbar{
    position: sticky;
    top:0;
    z-index:30;
    height: var(--topbar-h);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(17,24,39,.06);
}
.topbar-inner{
    width:100%;
    height: var(--topbar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 0 14px;
}

/* Bootstrap .container im Topbar-Inner darf nichts zentrieren */
.topbar-inner.container{max-width:none !important; margin-left:0 !important; margin-right:0 !important;}
.top-left{
    display:flex;
    align-items:center;
    gap:10px;
}
.title-wrap{ min-width:0; }
.page-title{
    font-weight: 1000;
    font-size: 18px;
}

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

/* Buttons */
.icon-btn{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.icon-btn:hover{ background:#fafafa; }
.icon-btn:active{ transform: translateY(1px); }

.btn-ico{
    width: 20px;
    height: 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn-ico .ico{ width: 20px; height: 20px; }
.btn-ico .ico-fallback{ width:20px; height:20px; border-radius:8px; }

.chip{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background:#fff;
    font-weight: 1000;
}
.chip-ico{
    width: 18px;
    height: 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.chip-ico .ico{ width:18px; height:18px; }
.chip-ico .ico-fallback{ width:18px; height:18px; border-radius:7px; }

.mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Banner */
.hero-strip{
    height: var(--banner-h);
    width: 100%;
    margin: 0;
    overflow:hidden;
    border-bottom: 1px solid var(--border);
    background:#eee;
}
.hero-strip img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

/* Content */
.content{
    padding: 18px 18px 28px;
}
.content .container{
    /* volle Breite nutzen – nicht zentrieren */
    max-width: none;
    margin: 0;

    /* "Inhaltskarte": weiß, subtiler Rahmen + weicher Schatten */
    background: var(--card-bg);
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(17,24,39,.06);
    padding: 22px 22px;
}

/* Auf kleineren Screens etwas kompakter */
@media (max-width: 980px){
  .content{ padding: 14px 14px 20px; }
  .content .container{ border-radius: 16px; padding: 18px 16px; }
}
/* Rightbar */
.rightbar{
    flex: 0 0 var(--rightbar-w);
    width: var(--rightbar-w);
    background: var(--card-bg);
    border-left: 1px solid var(--border);
    height: auto;
    position: sticky;
    top:0;
    overflow:hidden;
}
.rightbar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.rightbar-title{
    display:flex;
    align-items:center;
    gap: 10px;
    font-weight:1000;
}
.rb-ico{ width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center; }
.rb-ico .ico{ width:18px;height:18px; }
.rb-ico .ico-fallback{ width:18px;height:18px;border-radius:7px; }

.rightbar-body{
    padding: 12px;
}

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;
}

/* Lists */
.list{
    background:#fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow:hidden;
    box-shadow: var(--shadow);
}
.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:1000;
}
.small-ico{ width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center; }
.small-ico .ico{ width:18px;height:18px; }
.small-ico .ico-fallback{ width:18px;height:18px;border-radius:7px; }

.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background:#fff;
    font-weight: 1000;
    font-size: 12px;
}

/* Backdrop (Mobile overlays) */
.backdrop{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.30);
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease;
    z-index:40;
}
body.menu-open .backdrop,
body.right-open .backdrop{
    opacity:1;
    pointer-events:auto;
}

/* Mobile: Sidebar & Rightbar slide in */
@media (max-width: 980px){
    .sidebar{
        position: fixed;
        left: 0; top: 0; bottom: 0;
        transform: translateX(-110%);
        transition: transform .18s 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; bottom: 0;
        transform: translateX(110%);
        transition: transform .18s ease;
        z-index:50;
        box-shadow: 0 18px 48px rgba(17,24,39,.16);
    }
    body.right-open .rightbar{ transform: translateX(0); }
}
/* Icons im Allgemeinen kräftiger wirken lassen */
.ico{
    width: 22px;
    height: 22px;
    opacity: 0.92;
    filter: contrast(1.25) brightness(0.9) saturate(1.1)
    drop-shadow(0 0 0.6px rgba(0,0,0,.55));
}

/* Optional: im Header/Chips noch etwas stärker */
.chip-ico .ico,
.nav-ico .ico{
    filter: contrast(1.35) brightness(0.85)
    drop-shadow(0 0 0.8px rgba(0,0,0,.65));
}

/* =============================
   Full width: nichts zentrieren
   ============================= */

/* Footer war im app.css auf max-width:1200px begrenzt */
.footer__inner{
    max-width: none !important;
    margin: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Falls irgendwo ein allgemeines Container-Max-Width greift: */
.content .container,
.content .container-fluid,
.content .app-container{
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* =============================
   FIX: Collapsed-Nav Hover/Active darf nicht als "Balken" stehen bleiben
   - in collapsed Zustand: kein full-row Hintergrund
   - stattdessen ein kleines "Pill" hinter dem Icon
   - Safari/Browser-Focus-Ring entschärfen
   ============================= */

/* Browser/Tap-Highlight (Safari) aus */
.sidebar nav a{ -webkit-tap-highlight-color: transparent; }

/* Kein hässlicher Default-Focus (Maus), aber Focus für Tastatur bleibt möglich */
.sidebar nav a:focus{ outline: none; }
.sidebar nav a:focus:not(:focus-visible){ box-shadow: none; }
.sidebar nav a:focus-visible{ box-shadow: 0 0 0 3px rgba(230,0,5,.22); }

/* Collapsed: Hover/Active NICHT als komplette Zeile einfärben */
.sidebar.is-collapsed nav a:hover,
.sidebar.is-collapsed nav a.active{
    background: transparent !important;
    box-shadow: none !important;
}

/* Collapsed: "Pill" hinter dem Icon (statt Balken) */
.sidebar.is-collapsed nav a{ position: relative; }
.sidebar.is-collapsed nav a::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: transparent;
    transition: background .15s ease, box-shadow .15s ease;
    pointer-events:none;
}

/* Icon über dem Pill */
.sidebar.is-collapsed nav a .nav-icon{
    position: relative;
    z-index: 1;
}

/* Pill-Zustände */
.sidebar.is-collapsed nav a:hover::before{
    background: rgba(230,0,5,.10);
}
.sidebar.is-collapsed nav a.active::before{
    background: rgba(230,0,5,.14);
}
.sidebar.is-collapsed nav a:focus-visible::before{
    box-shadow: 0 0 0 3px rgba(230,0,5,.22);
}
/* =========================================================
   FIX: Collapsed Sidebar – keine "Balken"/Text-Reste
   ========================================================= */

body.sidebar-collapsed .sidebar .nav a{
    justify-content: center;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.sidebar-collapsed .sidebar .nav .nav-text{
    display: none !important;   /* <- das killt die schwarzen Striche */
}

body.sidebar-collapsed .sidebar .nav a .nav-icon{
    margin: 0 !important;
}

/* Optional: Linke Markierungsleiste (falls vorhanden) im collapsed aus */
body.sidebar-collapsed .sidebar .nav a::before,
body.sidebar-collapsed .sidebar .nav a::after{
    display: none !important;
}

/* Optional: Sidebar Collapse Button */
body.sidebar-collapsed .sidebar .nav .nav-collapse-btn{
    display: none !important;
}
/* =========================================================
   Tooltips für Icons (nur collapsed)
   ========================================================= */

body.sidebar-collapsed .sidebar .nav a{
    position: relative;
}

/* Tooltip-Blase */
body.sidebar-collapsed .sidebar .nav a[title]:hover::after{
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(20,20,20,.92);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    z-index: 9999;
}

/* kleiner Pfeil */
body.sidebar-collapsed .sidebar .nav a[title]:hover::before{
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(20,20,20,.92);
    margin-left: -2px;
    z-index: 10000;
}

/* =========================================================
   Tooltips (nur collapsed) – als echtes Element (nav-tip)
   ========================================================= */
body.sidebar-collapsed .sidebar .nav a{
    position: relative;
}

body.sidebar-collapsed .sidebar .nav a .nav-tip{
    display: none;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;

    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;

    background: rgba(20,20,20,.92);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);

    z-index: 9999;
    pointer-events: none;
}

/* Tooltip nur beim Hover/Focus zeigen */
/* Tooltip nur bei Hover (collapsed) */
body.sidebar-collapsed .sidebar .nav a:hover .nav-tip{
    display: inline-flex;
}

/* Sicherheitsnetz: wenn ein Link fokussiert bleibt -> Tooltip AUS */
body.sidebar-collapsed .sidebar .nav a:focus .nav-tip{
    display: none !important;
}

/* Tooltip niemals anzeigen, wenn Sidebar NICHT collapsed ist */
body:not(.sidebar-collapsed) .sidebar .nav .nav-tip{
    display: none !important;
}

/* kleiner Pfeil */
body.sidebar-collapsed .sidebar .nav a .nav-tip::before{
    content:"";
    position:absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(20,20,20,.92);
}

/* Tooltip sofort anzeigen (eigener Tooltip) */
body.sidebar-collapsed .sidebar .nav a .nav-tip{
    display:none;
    opacity:0;
    transition: opacity 0ms, transform 0ms; /* sofort */
    transform: translateY(-50%);            /* bleibt gleich */
}

body.sidebar-collapsed .sidebar .nav a:hover .nav-tip,
body.sidebar-collapsed .sidebar .nav a:focus-visible .nav-tip{
    display:inline-flex;
    opacity:1;
}
body.sidebar-collapsed .nav a[data-tooltip]{
    position: relative;
}

body.sidebar-collapsed .nav a[data-tooltip]::after{
    content: "";
    display:none;
}

body.sidebar-collapsed .nav a[data-tooltip]:hover::after{
    content: attr(data-tooltip);
    display: inline-flex;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    background: rgba(20,20,20,.92);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    z-index: 9999;
    pointer-events: none;
}

body.sidebar-collapsed .nav a[data-tooltip]:hover::before{
    content:"";
    position:absolute;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(20,20,20,.92);
    z-index: 10000;
    pointer-events:none;
}
/* ===== Custom Tooltip (Sidebar) – sofort, nur collapsed ===== */

/* Tooltip-Element ist standardmäßig unsichtbar */
.sidebar .nav .nav-tip{
    display: none !important;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    background: rgba(20,20,20,.92);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    z-index: 9999;
    pointer-events: none;
}

/* Nur im collapsed Zustand zeigen – und zwar SOFORT */
body.sidebar-collapsed .sidebar .nav a{
    position: relative;
}
body.sidebar-collapsed .sidebar .nav a:hover .nav-tip{
    display: inline-flex !important;
}

/* Wenn nicht collapsed: niemals Tooltips anzeigen */
body:not(.sidebar-collapsed) .sidebar .nav .nav-tip{
    display: none !important;
}

/* Tooltip nur über .nav-tip (kein title, kein data-tooltip) */
.sidebar .nav .nav-tip{
    display:none;
    position:absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    background: rgba(20,20,20,.92);
    color:#fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    z-index: 9999;
    pointer-events:none;
}

body.sidebar-collapsed .sidebar .nav a{ position:relative; }
body.sidebar-collapsed .sidebar .nav a:hover .nav-tip{ display:inline-flex; }

/* nie Tooltips im normalen Zustand */
body:not(.sidebar-collapsed) .sidebar .nav .nav-tip{ display:none !important; }

/* JS-Tooltip (sofort, klebt nicht, kein title) */
.nav-tooltip{
    position: fixed;
    transform: translateY(-50%);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    background: rgba(20,20,20,.92);
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .05s ease;
}
.nav-tooltip.show{ opacity: 1; }

/* Banner: keine Rundungen */
.hero-strip{
    border-radius: 0 !important;
}

.hero-strip img{
    border-radius: 0 !important;
}
.inline-ico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.2em;
}
.inline-ico .ico{
    width: 1.1em;
    height: 1.1em;
}
.hero-strip,
.hero-strip img{
    border-radius: 0 !important;
}
/* =========================
   Material-Icon SVG sizing
   ========================= */

/* der Platzhalter selbst */
.material-icons{
    --mi-size: 20px;                /* Standardgröße */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mi-size);
    height: var(--mi-size);
    line-height: 1;                 /* wichtig: kein "Text-Block" */
    vertical-align: -4px;           /* optisch wie vorher */
}

/* alles was icons.js da reinsetzt (img oder svg) */
.material-icons img,
.material-icons svg{
    width: 100% !important;
    height: 100% !important;
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* falls icons.js dem <img> eine Klasse gibt (zur Sicherheit) */
img.mi-img,
img.icon,
img.ico{
    max-width: 100%;
    height: auto;
}
/* =========================
   Material SVG Icons (Fix)
   ========================= */

/* Basiskasten für alle "material-icons" */
.material-icons{
    --mi-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--mi-size);
    height: var(--mi-size);
    line-height: 1;

    /* wichtig: falls doch noch Text drin wäre, soll er NICHT rauslaufen */
    overflow: hidden;
    white-space: nowrap;

    vertical-align: -4px;
}

/* sobald icons.js ersetzt hat: Text praktisch unsichtbar machen */
.material-icons.mi-ready{
    font-size: 0; /* killt Rest-Text/Spacing */
}

/* das eingesetzte SVG-IMG */
.material-icons .mi-img,
.material-icons img,
.material-icons svg{
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Buttons mit Icon: sauber nebeneinander statt übereinander */
.btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Überschriften mit Icon */
h1 .material-icons,
h2 .material-icons,
h3 .material-icons,
h4 .material-icons{
    margin-right: 6px;
}

/* Local-Icon Ersatz (icons.js) stabil halten */
.material-icons{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    line-height:1;
}
.material-icons .mi-img{
    width:18px;
    height:18px;
    display:block;
}

/* Überschriften etwas größer */
h1 .material-icons .mi-img,
h2 .material-icons .mi-img,
h3 .material-icons .mi-img,
h4 .material-icons .mi-img{
    width:20px;
    height:20px;
}

/* --- Sidebar menu icons for collapsed state (Joomla mod_menu) ---
   template.js injects a <span class="material-icons nav-ico" ...> + <span class="nav-text">.
   We only show the icon when the sidebar is collapsed. */
.nav .mod-menu > li > a .nav-ico{ display:none; }
body.sidebar-collapsed .nav .mod-menu > li > a .nav-ico{ display:flex; }

/* If a menu link is injected, keep the label visible when expanded */
body:not(.sidebar-collapsed) .nav .mod-menu > li > a .nav-text{ display:inline; }

/* ===============================
   TOPBAR UX tweaks
   - Desktop: nur Collapse-Button (kein doppeltes Menü)
   - Mobile: nur Hamburger (Collapse ergibt da keinen Sinn)
   - Header-Menüs als saubere Inline-Links
   =============================== */

@media (min-width: 981px){
  #btnMenu{ display:none !important; }
}
@media (max-width: 980px){
  #btnCollapse{ display:none !important; }
}

/* Topbar volle Breite (falls irgendwo Bootstrap-Container greift) */
.topbar-inner{
    width:100%;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Header-Menü (menu-2) hübsch als Inline */
.top-actions .mod-menu{
  display:flex;
  align-items:center;
  gap: 14px;
  margin:0;
  padding:0;
  list-style:none;
}
.top-actions .mod-menu > li{ margin:0; padding:0; }
.top-actions .mod-menu > li > a{
  text-decoration:none;
  font-weight: 900;
  color: #444;
  padding: 8px 10px;
  border-radius: 999px;
}
.top-actions .mod-menu > li > a:hover{
  background: rgba(0,0,0,.06);
}



/* Rightbar: der zweite Collapse-Button soll weg (Toggle kommt über das Info-Icon in der Topbar) */
#btnRightCollapse{display:none !important;}


/* Soft depth: leichte Abhebung der Seitenleisten */
.sidebar{ box-shadow: 6px 0 18px rgba(17,24,39,.04); }
.rightbar{ box-shadow: -6px 0 18px rgba(17,24,39,.04); }

/* =========================================================
   POLISH (Premium look, same structure)
   - Content area as a soft card (white) with subtle border/shadow
   - Sidebars get a very gentle depth
   - Fix: rightbar collapse button (falls noch irgendwo vorhanden)
   ========================================================= */

:root{
  --page-bg: #f4f6f9;
  --border-soft: rgba(17,24,39,.08);
  --shadow-soft: 0 12px 32px rgba(17,24,39,.08);
}

body{
  color:#0f172a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sidebars: etwas Tiefe, aber nicht "fett" */
.sidebar{
  box-shadow: 10px 0 30px rgba(17,24,39,.06);
}
.rightbar{
  box-shadow: -10px 0 30px rgba(17,24,39,.06);
}

/* Content: Outer card is .content .container (siehe weiter oben).
   .content-card bleibt als Wrapper, soll aber KEINE zweite weiße Karte erzeugen. */
.content{
  padding: 18px 18px 28px;
}
.content-card{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Wenn Beiträge/Komponenten eigene Container mitbringen: nicht doppelt einrücken */
.content-card > .container,
.content-card > .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Topbar: etwas hochwertiger wirken lassen */
.topbar{
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--border-soft);
}

/* Fix: falls irgendwo noch ein Collapse-Button in der rechten Sidebar steckt */
#btnRightCollapse{ display:none !important; }

/* Title/Buttons wirklich links, nicht "gefühlt" mittig */
.top-left{ flex: 1 1 auto; }
.top-actions{ flex: 0 0 auto; }

/* =========================================================
   Guest / Neutral Mode
   - keine BRK-Bilder/Logos, gleiche Struktur
   ========================================================= */

body.theme-neutral .hero-strip{ display:none !important; }
body.theme-neutral .brand-logo,
body.theme-neutral .brand-mini{ display:none !important; }

.brand-placeholder{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(17,24,39,.04);
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  letter-spacing: .02em;
}
body.theme-neutral .brand-placeholder{ display:inline-flex; }

/* Subline bei neutral etwas ruhiger */
body.theme-neutral .brand-sub{ opacity: .60; }

/* =========================================================
   Accent per Theme
   ========================================================= */

body.theme-brk{
  --accent: #b11226;
  --accent-ring: rgba(177,18,38,.22);
}

body.theme-neutral{
  --accent: #1f2937;
  --accent-ring: rgba(31,41,55,.18);
}

/* =========================================================
   Rightbar: nur EIN Button zum Öffnen/Schließen (Topbar)
   - der zweite (im Rightbar-Header) wird ausgeblendet
   ========================================================= */

#btnRightCollapse{ display:none !important; }
.rightbar-head{ justify-content:flex-start; gap: 10px; }

/* =========================================================
   Login (Modul + com_users)
   - etwas hochwertiger, ohne Struktur zu ändern
   ========================================================= */

/* Container */
.rightbar .mod-login,
.content-card .mod-login,
.com-users-login,
.com-users-login__form{
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

/* Felder */
#login-form .control-group,
.com-users-login .control-group{ margin-bottom: 10px; }

#login-form label,
.com-users-login label{
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 6px;
  display:block;
}

#login-form input[type="text"],
#login-form input[type="password"],
#login-form input[type="email"],
#login-form .inputbox,
.com-users-login input[type="text"],
.com-users-login input[type="password"],
.com-users-login input[type="email"],
.com-users-login .inputbox{
  width: 100%;
  border: 1px solid rgba(17,24,39,.14);
  background: rgba(17,24,39,.03);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

#login-form input:focus,
.com-users-login input:focus{
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Checkbox-Zeile */
#login-form .form-check,
#login-form .control-group.remember,
.com-users-login .form-check{
  margin: 8px 0 10px;
}

#login-form input[type="checkbox"],
.com-users-login input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: var(--accent);
}

/* Button */
#login-form button[type="submit"],
#login-form input[type="submit"],
#login-form .btn-primary,
.com-users-login button[type="submit"],
.com-users-login input[type="submit"],
.com-users-login .btn-primary{
  width: 100%;
  border-radius: 12px;
  padding: 11px 12px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 1000;
  letter-spacing: .01em;
  box-shadow: 0 12px 24px rgba(17,24,39,.10);
}

#login-form button[type="submit"]:hover,
#login-form .btn-primary:hover,
.com-users-login button[type="submit"]:hover,
.com-users-login .btn-primary:hover{
  filter: brightness(.96);
}

/* Links (Passwort vergessen etc.) */
#login-form a,
.com-users-login a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
}

#login-form a:hover,
.com-users-login a:hover{
  text-decoration: underline;
}
/* =========================================================
   FIX: Footer darf Inhalt NICHT überdecken
   - Footer bleibt im Dokumentfluss (kein fixed/sticky/absolute)
   - Body wird zur Flex-Column, damit Footer bei wenig Inhalt "unten klebt"
   ========================================================= */
html, body{
  height: auto !important;
}

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

/* App (Sidebar/Main/Rightbar) soll den Platz füllen */
.app{
  flex: 1 0 auto;
  min-height: 0 !important;
}

/* Footer immer normal unterhalb des Inhalts, keine Überlagerung */
.brk-footer{
  position: static !important;
  inset: auto !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 1 !important;
}

/* Etwas Luft unter dem Content */
.content{
  padding-bottom: 18px;
}
/* Edit-/Action-Icons bei Beiträgen im Frontend ausblenden */
.com-content-article__actions,
.com-content-article .icons,
.com-content-article .btn-group,
.item-page .icons,
.item-page .btn-toolbar,
.item-page .btn-group,
a.jmodedit,
.jmodedit,
#joomla-toolbar,
.joomla-toolbar,
.joomla-toolbar-container,
a[href*="task=article.edit"],
a[href*="task=article.publish"],
a[href*="task=article.unpublish"]{
  display: none !important;
}

/* Beitrags-Info (Autor/Datum/etc.) ausblenden */
.com-content-article__info,
.article-info {
  display: none !important;
}
/* =========================================================
   BRK-Style für Regular Labs Accordions (und Bootstrap)
   ========================================================= */

/* Farb-Defaults (falls du keine Variablen hast) */
:root{
  --brk-red: #d50032;
  --brk-red-dark: #b00028;
}

/* --- A) Bootstrap 5 Accordion (wenn Regular Labs Bootstrap nutzt) --- */
.brk-accordions .accordion-button{
  background: var(--brk-red);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.brk-accordions .accordion-button:not(.collapsed){
  background: var(--brk-red-dark);
  color: #fff;
  box-shadow: none;
}

.brk-accordions .accordion-item{
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.10);
}

/* --- B) Regular Labs eigenes Markup (wenn NICHT Bootstrap) --- */
/* (Die Klassen sind je nach Version meistens rl_sliders / rl_title) */
.brk-accordions .rl_sliders .rl_title,
.brk-accordions .rl_sliders .rl_title > a{
  background: var(--brk-red) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 14px;
}

/* “Aktiver”/geöffneter Titel */
.brk-accordions .rl_sliders .rl_title.active,
.brk-accordions .rl_sliders .rl_title.active > a{
  background: var(--brk-red-dark) !important;
  color: #fff !important;
}

/* Inhalt etwas ruhiger */
.brk-accordions .rl_sliders .rl_content{
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 14px;
}

/* =========================================================
   BRK-Farben für Regular Labs Tabs & Accordions (RTA Markup)
   ========================================================= */

/* Falls du schon Variablen hast: diese Zeilen kannst du löschen/ersetzen */
:root{
  --brk-rot: #d50032;
  --brk-rot-dunkel: #b00028;
}

/* Titel-Leiste (Button) */
[data-rta-type="accordions"] [data-rta-element="button"]{
  background: var(--brk-rot);
  color: #fff;
  font-weight: 700;

  padding: 12px 16px;
  border-radius: 14px;

  cursor: pointer;
  user-select: none;

  /* damit es “wie eine Leiste” wirkt */
  display: block;
}

/* Hover */
[data-rta-type="accordions"] [data-rta-element="button"]:hover{
  filter: brightness(0.95);
}

/* Geöffnet */
[data-rta-type="accordions"] [data-rta-element="button"][data-rta-state="open"]{
  background: var(--brk-rot-dunkel);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Content-Bereich (Panel) */
[data-rta-type="accordions"] [data-rta-element="panel"]{
  border: 1px solid rgba(0,0,0,0.10);
  border-top: 0;

  border-radius: 0 0 14px 14px;
  padding: 14px 16px;

  background: #fff;
  margin-bottom: 10px; /* Abstand zwischen den Accordions */
}

/* Optional: kleine “Pfeil”-Markierung rechts */
[data-rta-type="accordions"] [data-rta-element="button"]::after{
  content: "▾";
  float: right;
  opacity: 0.9;
  transform: translateY(1px);
}

[data-rta-type="accordions"] [data-rta-element="button"][data-rta-state="open"]::after{
  content: "▴";
}
/* ========== Regular Labs Tabs & Accordions (RTA) – BRK Style ========== */
:root{
  --brk-rot: #d50032;
  --brk-rot-dunkel: #b00028;
}

/* Button / Titelbar */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="button"]{
  background-color: var(--brk-rot) !important;
  color: #fff !important;
  font-weight: 700 !important;

  padding: 12px 16px !important;
  border-radius: 14px !important;
  border: none !important;

  display: block !important;
}

/* Optional: Heading selbst neutral halten (falls da Hintergrund drauf liegt) */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="heading"]{
  background: transparent !important;
  margin: 0 0 8px 0 !important;
}

/* Hover */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="button"]:hover{
  filter: brightness(0.95) !important;
}

/* Geöffnet */
div[data-rta-element="container"][data-rta-type="accordions"] div[data-rta-element="button"][data-rta-state="open"]{
  background-color: var(--brk-rot-dunkel) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Panel / Inhalt */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="panel"]{
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-top: 0 !important;

  border-radius: 0 0 14px 14px !important;
  padding: 14px 16px !important;

  background: #fff !important;
  margin: 0 0 12px 0 !important;
}

/* =====================================================
   Sidebar Flyout (Unterpunkte/Submenüs) – Template HUD
   ===================================================== */

body.sidebar-collapsed .nav .nav-caret{ display:none !important; }

.nav-flyout{
    position: fixed;
    left: -9999px;
    top: -9999px;
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .08s ease;
}
.nav-flyout.show{
    opacity: 1;
    pointer-events: auto;
}

.nav-flyout__inner{
    width: 260px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid rgba(17,24,39,.12);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(17,24,39,.16);
    overflow: hidden;
}

.nav-flyout__head{
    padding: 10px 12px;
    font-weight: 1000;
    font-size: 13px;
    border-bottom: 1px solid rgba(17,24,39,.08);
    background: rgba(230,0,5,.05);
}

.nav-flyout__body{
    padding: 8px;
    max-height: min(60vh, 520px);
    overflow: auto;
}

.nav-flyout__body .nav-sub{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    font-weight: 900;
    border: 1px solid transparent;
}

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

.nav-flyout__body .nav-sub.active{
    background: var(--drk-red);
    border-color: var(--drk-red);
    color: #fff;
}
.nav-flyout__body .nav-sub.active img.ico{
    filter: brightness(0) invert(1);
}
.nav-flyout__body .nav-sub.active .sub-dot{
    background: rgba(255,255,255,.65);
}

.nav-flyout__body .sub-ico{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.nav-flyout__body .sub-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(17,24,39,.35);
    flex: 0 0 8px;
}

.nav-flyout__body .sub-label{ line-height: 1.15; }

.nav-flyout__body .nav-sep{
  height: 1px;
  background: rgba(17,24,39,.10);
  margin: 8px 6px;
  border-radius: 999px;
}

.nav-flyout__body .nav-sub.nav-parent{
  font-weight: 1000;
}

.nav-flyout__body .sub-meta{
  font-size: 11px;
  font-weight: 900;
  opacity: .75;
  margin-left: 6px;
}



/* =====================================================
   Regular Labs – Tabs & Accordions (RTA) im BRK-Look
   ===================================================== */

/* Titel-Bar (Button) */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="button"]{
    background: var(--drk-red) !important;
    color: #fff !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    font-weight: 1000 !important;
    border: 1px solid rgba(230,0,5,.35) !important;
}

/* Hover */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="button"]:hover{
    background: rgba(230,0,5,.92) !important;
}

/* Panel */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="panel"]{
    border: 1px solid rgba(17,24,39,.10) !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    background: #fff !important;
    padding: 14px 16px !important;
}

/* Wenn geöffnet: Button unten nicht rund, damit Button+Panel wie eine Karte wirken */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="button"][aria-expanded="true"]{
    border-radius: 14px 14px 0 0 !important;
}

/* Abstand zwischen den Einträgen */
div[data-rta-element="container"][data-rta-type="accordions"] [data-rta-element="heading"]{
    margin: 0 0 10px 0 !important;
}


/* =====================================================
   Module spacing (weniger "zusammengequetscht")
   ===================================================== */

.content-card > .moduletable,
.content-card > .mod-custom,
.content-card > .module,
.content-card > .moduletable-unstyled{
    margin-bottom: 16px;
}

.content-card > :last-child{ margin-bottom: 0 !important; }

/* BRK Tabellen-Style (nur für Tabellen mit .brk-table) */
:root{
  --brk-rot: #d50032;       /* falls du schon Variablen hast: gerne ersetzen */
  --brk-rot-dunkel: #b00028;
}

.brk-table thead th{
  background: var(--brk-rot);
  color: #fff;
  border-color: rgba(0,0,0,0.15);
  font-weight: 700;
  vertical-align: middle;
}

/* Optional: erste Spalte etwas markanter */
.brk-table tbody th[scope="row"]{
  font-weight: 700;
  background: rgba(0,0,0,0.02);
}

/* Optional: Hover-Effekt fürs Lesen */
.brk-table tbody tr:hover td,
.brk-table tbody tr:hover th[scope="row"]{
  background: rgba(213, 0, 50, 0.06);
}

/* Optional: rundere Optik */
.brk-table{
  border-radius: 14px;
  overflow: hidden; /* damit Rundung auch wirkt */
}
/* === Nur eine Karte: entferne Card-in-Card (Bootstrap) === */

/* Wenn eine .card in einer .card steckt: innere Karte neutralisieren */
#main .card .card,
main .card .card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Das "eingeschnürte" Gefühl kommt oft vom inneren card-body padding */
#main .card .card .card-body,
main .card .card .card-body {
    padding: 0 !important;
}

/* Falls der Artikel selbst als Card gerendert wird */
#main .item-page.card,
#main .com-content-article.card,
main .item-page.card,
main .com-content-article.card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Optional: wieder etwas Luft oben/unten, aber ohne "zweite Karte" */
#main .com-content-article,
#main .item-page,
main .com-content-article,
main .item-page {
    padding: 0.25rem 0 !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;
}

/* =========================================================
   PREMIUM POLISH (ohne Struktur-/Farbumstellung)
   Ziel: moderner, hochwertiger, ruhiger – nur Feinschliff.
   ========================================================= */
:root{
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(17,24,39,.06);
  --shadow-md: 0 10px 26px rgba(17,24,39,.08);
  --shadow-lg: 0 16px 44px rgba(17,24,39,.10);

  --border-soft: rgba(17,24,39,.10);
  --muted: rgba(17,24,39,.70);
}

/* Typografie: weniger „brutal fett“, mehr Premium */
body{
  color: var(--drk-text, #111827);
  font-size: 15px;
  line-height: 1.55;
}
h1,h2,h3,h4,h5{
  letter-spacing: -0.015em;
}
h1{ font-size: 1.65rem; font-weight: 800; }
h2{ font-size: 1.35rem; font-weight: 750; }
h3{ font-size: 1.15rem; font-weight: 700; }
h4{ font-size: 1.05rem; font-weight: 700; }

/* Links: brandig, aber clean */
a{ color: var(--accent); text-underline-offset: 2px; }
a:hover{ opacity: .92; }

/* Sidebar/Topbar: Gewichte runter, Hover/Active feiner */
.brand-title{ font-weight: 850; letter-spacing: -0.02em; }
.brand-sub{ color: var(--muted); font-weight: 500; }

.nav a{
  font-weight: 650;
  color: var(--drk-text, #111827);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
/* Fallback bleibt aus dem bestehenden CSS, wenn color-mix nicht unterstützt wird */
.nav a:hover{
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.nav a.active{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.page-title{ font-weight: 800; letter-spacing: -0.02em; }

/* Content-Card: minimal sauberer */
.content .container{
  border-radius: var(--radius-lg);
  border-color: rgba(17,24,39,.08);
  box-shadow: var(--shadow-md);
}

/* Module-Boxen: nur dort, wo es wirklich Sinn macht */
.rightbar .moduletable,
.rightbar .mod-custom,
.content-card > .moduletable,
.content-card > .mod-custom{
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: var(--radius-lg);
  padding: 14px 14px;
  box-shadow: var(--shadow-sm);
}
.rightbar .moduletable > h3,
.content-card > .moduletable > h3{
  margin: 0 0 10px 0;
  font-weight: 750;
  font-size: 1.02rem;
  color: var(--drk-text, #111827);
}

/* Buttons / Inputs: konsistente Radius + Fokus-Ring */
button, .btn, .icon-btn, input, select, textarea{
  border-radius: var(--radius-md);
}
.icon-btn{
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.icon-btn:hover{
  border-color: rgba(17,24,39,.16);
  background: rgba(17,24,39,.02);
}
.icon-btn:active{ transform: translateY(1px); }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], select, textarea{
  border: 1px solid rgba(17,24,39,.14);
  background: rgba(17,24,39,.03);
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
input:focus, select:focus, textarea:focus{
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Tabellen: besser lesbar */
table{
  border-color: rgba(17,24,39,.10);
}
table thead th{
  font-weight: 700;
}
table tbody tr:hover{
  background: rgba(17,24,39,.02);
}

/* BRK-Table-Variable an Brand-Akzent koppeln (ohne Farbwechsel) */
:root{
  --brk-rot: var(--accent);
  --brk-rot-dunkel: color-mix(in srgb, var(--accent) 85%, #000);
}

/* Sidebars: Schatten etwas ruhiger */
.sidebar, .rightbar{
  box-shadow: 0 10px 34px rgba(17,24,39,.05);
}



/* =========================
   1.0.19 – Profi-Finish: Profilbereich + Info-Panel (statt rechter Sidebar)
   ========================= */

.info-panel{
  position:fixed;
  top: calc(var(--topbar-h) + 10px);
  right: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - var(--topbar-h) - 24px);
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(17,24,39,.18);
  z-index: 60;
  transform: translateX(calc(100% + 20px));
  opacity: .98;
  transition: transform .22s ease, opacity .22s ease;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
body.panel-open .info-panel{
  transform: translateX(0);
  opacity: 1;
}
.info-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px 10px 12px;
  border-bottom:1px solid rgba(17,24,39,.08);
  background: rgba(17,24,39,.015);
}
.info-panel__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.info-panel__body{
  padding: 12px;
  overflow:auto;
}

/* Profil-Menü (Topbar) */
.profile-menu{ position: relative; margin-left: 6px; }
.profile-menu summary{ list-style:none; }
.profile-menu summary::-webkit-details-marker{ display:none; }

.profile-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background:#fff;
  box-shadow: 0 10px 26px rgba(17,24,39,.06);
  cursor:pointer;
  user-select:none;
}
.profile-trigger:focus{
  outline:none;
  box-shadow: 0 0 0 3px var(--accent-ring), 0 10px 26px rgba(17,24,39,.06);
}
.avatar{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(17,24,39,.10);
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-initials{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: .78rem;
  color: rgba(17,24,39,.75);
}
.profile-name{
  font-weight: 700;
  font-size: .95rem;
  color: rgba(17,24,39,.86);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-caret{ font-size: .85rem; color: rgba(17,24,39,.55); }
.profile-menu[open] .profile-trigger{
  box-shadow: 0 0 0 3px var(--accent-ring), 0 22px 60px rgba(17,24,39,.10);
}
.profile-dropdown{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 240px;
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(17,24,39,.16);
  padding: 8px;
  z-index: 70;
}
.profile-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(17,24,39,.88);
  text-decoration:none;
  font-weight: 650;
}
.profile-item:hover{ background: rgba(17,24,39,.04); }

@media (max-width: 980px){
  .profile-name{ display:none; }
  .info-panel{
    top: calc(var(--topbar-h) + 8px);
    right: 10px;
    width: calc(100vw - 20px);
  }
}

/* =========================
   LAYOUT FIXES
   - Content-Card soll immer bis zum Footer "durchziehen", auch wenn wenig Inhalt da ist
   - Footer-Menü (menu-2) sitzt im Footer statt oben rechts
   ========================= */

html, body{ height:100%; }

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

/* der eigentliche App-Container nimmt den verfügbaren Raum ein */
.app{
  flex: 1 1 auto;
  min-height: 0;
}

/* Main muss als Spalte laufen, damit der Content-Bereich wachsen kann */
.main{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.content{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.content > .container{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.content-card{
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

/* Footer-Rechtliches (ehemals menu-2 in der Topbar) */
.brk-footer__legal{
  display:flex;
  justify-content:center;
}

.brk-footer__legal .moduletable{ margin:0; }

.brk-footer__legal ul,
.brk-footer__legal ul.menu,
.brk-footer__legal ul.mod-menu,
.brk-footer__legal ul.nav{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

.brk-footer__legal a,
.brk-footer__legal a.nav-link{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  font-size:.9rem;
  color:#111;
  opacity:.72;
}

.brk-footer__legal a:hover,
.brk-footer__legal a.nav-link:hover{ background:#f3f3f3; opacity:.9; }

@media (min-width: 760px){
  .brk-footer__wrap{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .brk-footer__menus{ justify-content:flex-start; }
  .brk-footer__legal{ justify-content:flex-end; }
}

/* =========================================================
   Layout-Polish v1.0.20
   - Profil in Topbar (nicht im Content)
   - Menu-2 (Impressum/Datenschutz) in Footer
   - Content-Card füllt bis zum Footer
   ========================================================= */

/* Content bis Footer strecken (auch bei wenig Inhalt) */
.main{ display:flex; flex-direction:column; min-height:0; }
.content{ flex:1 1 auto; display:flex; }
.content .container{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.content-card{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

/* Print: Flex raus, damit Druck stabil bleibt */
@media print{
  .content, .content .container, .content-card{ display:block !important; }
}

/* Footer legal links (vormals menu-2 oben rechts) */
.brk-footer__legal{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(17,24,39,.08);
  margin-top: 10px;
}
.brk-footer__legal .mod-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:14px;
  align-items:center;
}
.brk-footer__legal .mod-menu a{
  text-decoration:none;
  color: rgba(17,24,39,.72);
  font-weight: 650;
  font-size: .92rem;
}
.brk-footer__legal .mod-menu a:hover{
  color: rgba(17,24,39,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Premium-Polish v1.0.21
   - Topbar: keine "Umbrüche" (Profil soll oben rechts bleiben)
   - Profil-Dropdown wie SaaS-Dashboard (Header + Icons + Trenner)
   - Footer: wertiger (leichter, ruhiger, weniger "fett")
   ========================================================= */

/* TOPBAR stabilisieren */
.topbar-inner{ flex-wrap: nowrap !important; }
.top-left{ min-width: 0 !important; }
.title-wrap{ min-width: 0 !important; }
.page-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions{ flex: 0 0 auto; margin-left: auto; flex-wrap: nowrap; }

/* PROFIL-DROPDOWN (SaaS-Style) */
.profile-dropdown{ width: 280px; padding: 10px; }
.profile-head{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 8px 8px 10px;
}
.avatar.avatar-lg{ width: 42px; height: 42px; }
.profile-meta{ min-width:0; }
.profile-meta-name{
  font-weight: 750;
  font-size: .95rem;
  color: rgba(17,24,39,.90);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.profile-meta-sub{
  font-size: .82rem;
  color: rgba(17,24,39,.58);
  margin-top: 2px;
}
.profile-sep{
  height: 1px;
  background: rgba(17,24,39,.08);
  margin: 6px 6px;
}
.profile-item{
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 650;
}
.profile-ico{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(17,24,39,.04);
  border: 1px solid rgba(17,24,39,.06);
}
.profile-ico .ico{ width: 18px; height: 18px; }
.profile-label{ flex:1; }
.profile-item:hover{ background: rgba(17,24,39,.04); }
.profile-custom:empty{ display:none; }
.profile-custom{ margin-top: 6px; }

/* FOOTER "wertiger" */
.brk-footer{
  border-top: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: 0 -14px 34px rgba(17,24,39,.06);
}
.brk-footer__wrap{
  /* kompakter, weniger "hoher" Footer */
  padding: 4px 14px 6px !important;
  gap: 4px !important;
}
.brk-footer__menus{ gap: 8px !important; }
.brk-footer__col a,
.brk-footer__menus a,
.brk-footer__menus .nav-link{
  font-weight: 650 !important;
  font-size: .9rem !important;
  opacity: .78 !important;
  border-radius: 10px !important;
  padding: 4px 8px !important;
  line-height: 1.15 !important;
}
.brk-footer__col a:hover,
.brk-footer__menus a:hover,
.brk-footer__menus .nav-link:hover{
  background: rgba(17,24,39,.05) !important;
  opacity: 1 !important;
}
.brk-footer__legal{
  border-top: 1px solid rgba(17,24,39,.08) !important;
  padding-top: 4px !important;
  margin-top: 2px !important;
}

@media (min-width: 980px){
  .brk-footer__wrap{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .brk-footer__legal{
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* EXTRA: auf sehr schmalen Screens Footer noch kompakter */
@media (max-width: 520px){
  .brk-footer__wrap{ padding: 4px 10px 6px !important; }
  .brk-footer__menus{ gap: 6px !important; }
}

/* =========================================================
   Sidebar: einklappbar (default expanded)
   ========================================================= */
.sidebar-collapse{
  padding: 10px 10px 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.nav-collapse-btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  color: #222;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

.nav-collapse-btn:hover{ background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.nav-collapse-btn:active{ transform: translateY(1px); }
.nav-collapse-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(230,0,5,.18), 0 8px 20px rgba(0,0,0,.08); }

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

.nav-collapse-btn img.ico{ width: 22px; height: 22px; }

body.sidebar-collapsed .sidebar-collapse{ padding-left: 6px; padding-right: 6px; }
body.sidebar-collapsed .nav-collapse-btn{ justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .nav-collapse-btn .btn-text{ display: none; }

/* =========================================================
   Premium-Polish v1.0.27
   - Kein "Flash" beim Seitenwechsel: collapsed state wird schon auf <html> gesetzt
   - Safari-safe JS (kein \p{L}/\p{N}) + weniger "Icon-Jump" beim Laden
   - Toggle-Buttons: Desktop nur Chevron, Mobile nur Burger
   - Sidebar Collapse: smoother (Transition)
   - Tooltips: weniger "plopp", kurzer Delay + Fade
   ========================================================= */

/* Collapsed styles auch dann anwenden, wenn nur <html> die Klasse hat (pre-paint) */
html.sidebar-collapsed body .sidebar{
  flex-basis: var(--sidebar-w-collapsed) !important;
  width: var(--sidebar-w-collapsed) !important;
}
html.sidebar-collapsed body .brand-logo{ display:none !important; }
html.sidebar-collapsed body .brand-mini{ display:block !important; }
html.sidebar-collapsed body .brand-text{ display:none !important; }
html.sidebar-collapsed body .nav{ padding:10px 6px !important; }
html.sidebar-collapsed body .nav a{
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  margin:6px auto !important;
  border-radius:14px !important;
  justify-content:center !important;
  background:transparent !important;
  border:1px solid transparent !important;
}
html.sidebar-collapsed body .nav .nav-text{ display:none !important; }

/* Button-Logik: Desktop -> Chevron, Mobile -> Burger */
@media (min-width: 981px){
  #btnMenu{ display:none !important; }
}
@media (max-width: 980px){
  #btnSidebarCollapse{ display:none !important; }
}

/* Smoother Sidebar-Collapse */
.sidebar{
  transition: width .18s ease, flex-basis .18s ease;
}

/* Global: disable transitions during initial paint (prevents "icon jump" on page change) */
html.no-transitions *, html.no-transitions *::before, html.no-transitions *::after{
  transition:none !important;
  animation:none !important;
}

/* Tooltips (collapsed): kurzer Delay + Fade/Slide */
body.sidebar-collapsed .nav a[data-tooltip],
html.sidebar-collapsed body .nav a[data-tooltip]{
  position: relative;
}

body.sidebar-collapsed .nav a[data-tooltip]::after,
html.sidebar-collapsed body .nav a[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 850;
  background: rgba(20,20,20,.92);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease 120ms, transform .12s ease 120ms, visibility 0s linear 240ms;
}

body.sidebar-collapsed .nav a[data-tooltip]::before,
html.sidebar-collapsed body .nav a[data-tooltip]::before{
  content:"";
  position:absolute;
  left: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  border: 6px solid transparent;
  border-right-color: rgba(20,20,20,.92);
  z-index: 10000;
  pointer-events:none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease 120ms, transform .12s ease 120ms, visibility 0s linear 240ms;
}

body.sidebar-collapsed .nav a[data-tooltip]:hover::after,
body.sidebar-collapsed .nav a[data-tooltip]:focus-visible::after,
html.sidebar-collapsed body .nav a[data-tooltip]:hover::after,
html.sidebar-collapsed body .nav a[data-tooltip]:focus-visible::after{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition: opacity .12s ease 120ms, transform .12s ease 120ms;
}

body.sidebar-collapsed .nav a[data-tooltip]:hover::before,
body.sidebar-collapsed .nav a[data-tooltip]:focus-visible::before,
html.sidebar-collapsed body .nav a[data-tooltip]:hover::before,
html.sidebar-collapsed body .nav a[data-tooltip]:focus-visible::before{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition: opacity .12s ease 120ms, transform .12s ease 120ms;
}



/* =========================================================
   Sidebar Menu - "Admin Sidebar" Style (white, professional)
   - stacked items (no pill bubbles)
   - left accent bar on hover/active
   - accordion submenus
   - collapsed: icon-only, expands on hover (desktop)
   ========================================================= */

:root{
  --nav-accent: #e60005; /* BRK rot */
  --nav-text: #1f2937;
  --nav-muted: rgba(31,41,55,.70);
  --nav-hover: rgba(31,41,55,.05);
  --nav-active: rgba(230,0,5,.08);
}

/* Sidebar surface */
.sidebar{
  background:#fff;
  box-shadow: 8px 0 24px rgba(17,24,39,.06);
}

/* Replace "pill" look with stacked list */
.nav{
  gap: 0;
  padding: 10px 0;
}

.nav-item{ display:block; }

.nav > .nav-item > a{
  border-radius: 0;
  padding: 10px 14px;
  height: 46px;
  margin: 0;
  color: var(--nav-muted);
  font-weight: 700;
  border-left: 3px solid transparent;
  position: relative;
}

.nav > .nav-item > a:hover{
  background: var(--nav-hover);
  color: var(--nav-text);
  border-left-color: var(--nav-accent);
}

.nav > .nav-item > a.active,
.nav > .nav-item.is-active > a{
  background: var(--nav-active);
  color: var(--nav-text);
  border-left-color: var(--nav-accent);
  border-top: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
}

/* Icons slightly muted */
.nav-ico .ico{ opacity:.85; }
.nav > .nav-item > a:hover .nav-ico .ico,
.nav > .nav-item.is-active > a .nav-ico .ico{ opacity:1; }

/* Caret */
.nav-caret{
  margin-left:auto;
  opacity:.6;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-item.open > a .nav-caret{
  transform: rotate(90deg);
  opacity:.95;
}

/* Accordion children */
.nav-children{
  overflow:hidden;
  max-height: 0;
  transition: max-height .25s ease;
  background: transparent;
  padding: 0 0 8px 0;
}

.nav-sub{
  border-radius: 0;
  padding: 8px 14px 8px 52px;
  height: auto;
  color: rgba(31,41,55,.80);
  font-weight: 650;
  border-left: 3px solid transparent;
}

.nav-sub:hover{
  background: rgba(31,41,55,.04);
  border-left-color: rgba(230,0,5,.55);
  color: var(--nav-text);
}

.nav-sub.active{
  background: rgba(230,0,5,.06);
  border-left-color: var(--nav-accent);
  color: var(--nav-text);
}

.nav-parent .sub-meta{
  opacity:.65;
  font-size: 12px;
  margin-left: 6px;
}

/* Sub icons */
.sub-ico{ width:18px; height:18px; opacity:.85; }
.nav-sub:hover .sub-ico,
.nav-sub.active .sub-ico{ opacity:1; }
.sub-dot{ opacity:.7; }

/* Collapsed: icon-only. Keep icon size stable (no "jump") */
body.sidebar-collapsed .nav > .nav-item > a{
  justify-content:center;
  padding: 12px 0;
}
body.sidebar-collapsed .nav .nav-text{ display:none; }
body.sidebar-collapsed .nav-caret{ display:none; }

/* Hide submenus when collapsed (no huge whitespace) */
body.sidebar-collapsed .nav-children{ display:none; max-height:0 !important; padding:0; }

/* Desktop: collapsed sidebar expands on hover (like classic admin) */
@media (min-width: 980px){
  body.sidebar-collapsed .sidebar:hover{
    width: var(--sidebar-w);
    flex-basis: var(--sidebar-w);
  }
  body.sidebar-collapsed .sidebar:hover .brand-text{ display:block; }
  body.sidebar-collapsed .sidebar:hover .brand-logo{ display:block; }
  body.sidebar-collapsed .sidebar:hover .brand-mini{ display:none; }

  body.sidebar-collapsed .sidebar:hover .nav > .nav-item > a{
    justify-content:flex-start;
    padding: 10px 14px;
  }
  body.sidebar-collapsed .sidebar:hover .nav .nav-text{ display:inline; }
  body.sidebar-collapsed .sidebar:hover .nav-caret{ display:inline-flex; }
  body.sidebar-collapsed .sidebar:hover .nav-children{ display:block; }
}

/* Slightly tighten the brand area to match the menu */
.brand{
  padding-bottom: 10px;
}
.brand-title{ font-weight: 850; }

/* =========================================================
   SOFT UI OVERRIDE (Anlehnung an die Listen-Ansicht)
   - nur Look & Feel, keine Layout-Logik
   - spätere Regeln gewinnen gegen ältere "Polish"-Blöcke
   ========================================================= */
:root{
  --page-bg: #f7f7f7;
  --card-bg: #ffffff;
  --border: #e0e0e0;
  --border-soft: #e0e0e0;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
  --shadow-soft: 0 2px 8px rgba(0,0,0,.06);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

body{
  background: var(--page-bg);
  color: #2c3e50;
}

/* Flächen: sauber, hell, ohne "fette" Schatten */
.sidebar,
.rightbar,
.topbar,
.brk-toolbar,
.brk-pagination,
.table-wrap,
.list,
.card,
.content-card{
  background: #fff;
  border-color: var(--border);
  box-shadow: none;
}

.sidebar{ border-right: 1px solid var(--border); }
.rightbar{ border-left: 1px solid var(--border); }
.topbar{ border-bottom: 1px solid var(--border); }

/* Rundungen */
.table-wrap,
.list,
.card,
.content-card{
  border-radius: var(--radius-lg);
}

/* Navigation etwas "leichter" */
.nav a,
.nav .mod-menu > li > a{
  border-radius: 12px;
  font-weight: 700;
}

/* Buttons / Controls (Bootstrap + plain) */
.btn,
button.btn,
a.btn{
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: none;
}

.btn-primary,
.btn.btn-primary{
  background: var(--drk-red);
  border-color: var(--drk-red);
}

.btn-light,
.btn.btn-light{
  background: #f8f9fa;
  border-color: #ced4da;
  color: #666;
}

/* Forms */
input.form-control,
select.form-select,
textarea.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea{
  border-radius: var(--radius-sm);
  border-color: #ced4da;
}

input:focus,
select:focus,
textarea:focus{
  outline: none;
  border-color: rgba(230,0,5,.45);
  box-shadow: 0 0 0 .15rem rgba(230,0,5,.15);
}

/* Tabellen-Header wie in der Liste */
.table thead th,
table thead th{
  background: #f8f9fa;
  color: #555;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  border-bottom: 1px solid #dee2e6;
}


/* =========================
   1.0.34 – Feinschliff: Menü-Akzente (weniger rosa), Info-Panel Spacing, Profile-Avatar
   ========================= */

/* Hauptmenü: weg von rosa Flächen -> mehr DRK: neutraler Hover + roter Aktive-Indikator */
.nav a{ position:relative; }
.nav a:hover{
  background: rgba(17,24,39,.035) !important;
}
.nav a.active{
  background: rgba(17,24,39,.045) !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  box-shadow: none !important;
}
.nav a.active::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  transform: translateY(-50%);
  width:4px;
  height:18px;
  border-radius:999px;
  background: var(--accent, #e60005);
}
body.sidebar-collapsed .nav a.active::before{ display:none; }

/* Info-Panel (rechtes Menü): etwas mehr Luft zwischen Modulen */
.info-panel__body > * + *{
  margin-top: 14px;
}

/* Avatar-Bilder: sauber füllen (User-Custom-Field) */
.avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}


/* =========================================================
   TOP-NAV (statt Sidebar)
   ========================================================= */

/* Desktop: Burger ausblenden (Drawer nur Mobile) */
@media (min-width: 981px){
  #btnMenu{ display:none !important; }
}

/* Brand im Header */
.topbrand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  padding:6px 8px;
  border-radius:14px;
}
.topbrand:hover{ background: rgba(0,0,0,.04); }

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

.topbrand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.topbrand-title{
  font-weight:1000;
  font-size: .98rem;
  margin:0;
}
.topbrand-sub{
  font-size: .8rem;
  opacity:.65;
  margin:0;
}

@media (max-width: 980px){
  .topbrand-sub{ display:none; }
  .topbrand-title{ font-size: .95rem; }
}

/* Hauptmenü horizontal, links startend (mit Scroll statt Zeilenumbruch) */
.topnav{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  white-space:nowrap;
  padding: 0 2px;
  max-width: 100%;
  scrollbar-width: none; /* Firefox */
}
.topnav::-webkit-scrollbar{ display:none; }

.topnav-item{ position:relative; display:inline-flex; }

.topnav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  font-weight:900;
  opacity:.88;
  line-height:1;
  border:1px solid transparent;
  background:transparent;
}
.topnav-link:hover{ background: rgba(0,0,0,.04); opacity:1; }
.topnav-item.is-active .topnav-link{
  background: rgba(230,0,5,.10);
  border-color: rgba(230,0,5,.18);
  opacity:1;
}

.topnav-link[type="button"]{ cursor:pointer; }

.topnav-caret{ font-size:.85rem; opacity:.7; }

/* Dropdown */
.topnav-dropdown{
  position:absolute;
  left:0;
  top: calc(100% + 8px);
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  box-shadow: 0 18px 48px rgba(17,24,39,.14);
  min-width: 240px;
  padding:8px;
  display:none;
  z-index: 60;
}

.topnav-item:hover .topnav-dropdown,
.topnav-item:focus-within .topnav-dropdown,
.topnav-item.open .topnav-dropdown{
  display:block;
}

.topnav-sub{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:#111;
  font-weight:900;
  opacity:.9;
}
.topnav-sub:hover{ background: rgba(230,0,5,.06); }
.topnav-sub.active,
.topnav-parent.active{
  background: rgba(230,0,5,.10);
  border:1px solid rgba(230,0,5,.18);
  opacity:1;
}

.topnav-sep{ height:1px; background: rgba(0,0,0,.08); margin:8px 6px; }

/* Mobile: Topnav im Header ausblenden – stattdessen Drawer */
@media (max-width: 980px){
  .topnav{ display:none !important; }
}

/* Page title rechts etwas kompakter */
.topbar-pagetitle{
  font-weight:900;
  opacity:.75;
  max-width: 36vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width: 980px){
  .topbar-pagetitle{ display:none; }
}

/* =========================================================
   OFFCANVAS MENU (Mobile)
   ========================================================= */
.offcanvas-menu{
  position:fixed;
  left:0;
  top:0;
  width: min(90vw, 360px);
  height: 100vh;
  background:#fff;
  border-right:1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 48px rgba(17,24,39,.16);
  transform: translateX(-110%);
  transition: transform .2s ease;
  z-index: 50;
  display:block;
}

@media (min-width: 981px){
  .offcanvas-menu{ display:none; }
}

body.menu-open .offcanvas-menu{ transform: translateX(0); }

.offcanvas-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 14px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  position:sticky;
  top:0;
  z-index:1;
}

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

.offcanvas-brand{
  height: 28px;
  width:auto;
  display:block;
}

.offcanvas-nav{ padding:10px 10px 14px 10px; }

.off-item{ margin:0 0 8px 0; }

.off-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:#111;
  font-weight:900;
}
.off-link:hover{ background: rgba(230,0,5,.06); }
.off-link.active{
  background: rgba(230,0,5,.10);
  border:1px solid rgba(230,0,5,.18);
}

.off-ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.off-ico .ico{ width:20px; height:20px; }

.off-group{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.off-group > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  font-weight:1000;
}
.off-group > summary::-webkit-details-marker{ display:none; }
.off-group[open] > summary{ background: rgba(0,0,0,.03); }

.off-children{ padding: 0 8px 10px 8px; }
.off-sub{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:#111;
  font-weight:900;
  opacity:.9;
}
.off-sub:hover{ background: rgba(230,0,5,.06); }
.off-sub.active{
  background: rgba(230,0,5,.10);
  border:1px solid rgba(230,0,5,.18);
  opacity:1;
}

.off-sep{ height:1px; background: rgba(0,0,0,.08); margin:8px 6px; }


/* Damit das horizontale Menü sauber schrumpfen kann (statt den Header zu sprengen) */
.topbar-inner{ min-width:0; }
.top-left{ flex: 1 1 auto; min-width:0; }
.top-actions{ flex: 0 0 auto; }

/* =========================================================
   BRANDING OVERRIDE
   - Menü + Seitentitel + User-Menü: schwarz
   - "Rosa" durch BRK Rot ersetzen
   ========================================================= */

:root{
  /* BRK/DRK Rot (nutzt vorhandene Variable aus brk.css, falls vorhanden) */
  --brk-rot: var(--drk-red, #e60005);
  --brk-rot-dunkel: #b30004;

  /* Kompatibilität zu bestehenden Variablennamen */
  --brk-red: var(--brk-rot);
  --brk-red-dark: var(--brk-rot-dunkel);

  /* Globaler Accent im Template */
  --accent: var(--brk-rot);
  --accent-ring: rgba(230,0,5,.22);

  /* Falls irgendwo noch die alte Sidebar-Farbwelt verwendet wird */
  --nav-accent: var(--brk-rot);
  --nav-active: rgba(230,0,5,.08);
}

/* Header / Topnav: Text wirklich schwarz */
.topbar{ color:#000 !important; }
.topbar a{ color: inherit; }
.topbrand-title{ color:#000 !important; }
.topbar-pagetitle{ color:#000 !important; opacity: 1 !important; }
.topnav-link{ color:#000 !important; opacity: 1 !important; }

/* User-Menü */
.profile-name,
.profile-item,
.profile-meta-name,
.profile-meta-sub{ color:#000 !important; }

/* =========================================================
   ACTIVE STATE: BRK Rot statt "rosa" Fläche
   - Top-Menü, Dropdown, Mobile-Drawer
   ========================================================= */

/* Top-Menü (Header): aktive Seite als BRK-Rot-Outline */
.topnav-item.is-active .topnav-link{
  background: transparent !important;
  border-color: var(--drk-red) !important;
  opacity: 1 !important;
}
.topnav-item.is-active .topnav-link:hover{
  background: rgba(230,0,5,.06) !important;
}

/* Dropdown: aktive Auswahl ebenfalls als Outline */
.topnav-sub.active,
.topnav-parent.active{
  background: transparent !important;
  border-color: var(--drk-red) !important;
  opacity: 1 !important;
}

/* Mobile Drawer */
.off-link.active{
  background: transparent !important;
  border: 1px solid var(--drk-red) !important;
}
/* =========================================================
   TOPBAR FIXIEREN (sticky)
   ========================================================= */

/* Der komplette Header/Topbar-Block */
.topbar{
    position: sticky;
    top: 0;
    z-index: 9999;          /* über dem Content */
    background: #fff;       /* wichtig, sonst scheint Inhalt durch */
    border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Falls irgendein Parent overflow gesetzt hat, killt sticky.
   Dann hilft das hier häufig: */
body, .site, .container, .container-fluid{
    overflow: visible;
}
/* =========================================================
   TOPNAV ACTIVE: rot gefüllt + weiße Schrift (ohne Rand)
   ========================================================= */

:root{
    --drk-red: #e60005; /* BRK/DRK Rot */
}

/* Active Hauptmenüpunkt */
.topnav-item.is-active .topnav-link{
    background: var(--drk-red) !important;
    color: #fff !important;
    border-color: transparent !important; /* roter Rand weg */
    box-shadow: none !important;
}

/* Hover auf active: etwas dunkler/neutral, bleibt aber rot */
.topnav-item.is-active .topnav-link:hover{
    background: #b30004 !important;
    color:#fff !important;
}

/* Normaler Hover (nicht aktiv) optional dezent */
.topnav-link:hover{
    background: rgba(230,0,5,.06);
}

/* Dropdown: aktiver Eintrag ebenfalls rot/weiß */
.topnav-sub.active,
.topnav-parent.active,
.off-link.active{
    background: var(--drk-red) !important;
    color:#fff !important;
    border-color: transparent !important;
}
/* ==== TOPBAR: sticky, aber stabil ==== */
.topbar{
    position: sticky;
    top: 0;
    z-index: 9999;
    background:#fff;
    border-bottom: 1px solid rgba(0,0,0,.08);

    /* Safari/Scroll-Repaint beruhigen */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* ==== TOPBAR: FIXED (kein Schwingen) ==== */
.topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background:#fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Platz für die feste Leiste schaffen (Höhe ggf. anpassen) */
body{
    padding-top: 68px; /* 56–72px je nach deiner Topbar-Höhe */
}
/* =========================================================
   PATCH: TOPNAV ACTIVE final
   - aktiver Menüpunkt: rot gefüllt + weiße Schrift
   - KEIN Outline / KEIN rosa Hintergrund
   - gewinnt gegen ältere Regeln (kommt ganz am Ende)
   ========================================================= */

:root{
    --drk-red: #e60005;       /* BRK Rot */
    --drk-red-dark: #b30004;  /* dunkler für Hover */
}

/* Top-Menü (Header): aktive Seite */
.topnav-item.is-active .topnav-link,
.topnav-link.active{
    background: var(--drk-red) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Hover auf aktiv bleibt rot, nur dunkler */
.topnav-item.is-active .topnav-link:hover,
.topnav-link.active:hover{
    background: var(--drk-red-dark) !important;
    color:#fff !important;
}

/* Dropdown: aktiver Eintrag auch rot/weiß */
.topnav-sub.active,
.topnav-parent.active{
    background: var(--drk-red) !important;
    color:#fff !important;
    border: 1px solid transparent !important;
}

/* Mobile Drawer: aktive Seite rot/weiß */
.off-link.active,
.off-sub.active{
    background: var(--drk-red) !important;
    color:#fff !important;
    border: 1px solid transparent !important;
}
/* =========================================================
   SAFARI FIX: Topnav Active/Visited
   - Safari überschreibt gern Linkfarben über :visited
   - erzwingt Weiß im Active-State inkl. WebKit Text Fill
   ========================================================= */

@supports (-webkit-touch-callout: none){

    /* Safari: visited darf NICHT lila/blau werden */
    .topnav-link:visited{
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }

    /* Active Hauptmenüpunkt: rot/weiß wirklich erzwingen */
    .topnav-item.is-active .topnav-link,
    .topnav-link.active{
        background-color: var(--drk-red, #e60005) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        border-color: transparent !important;
    }

    .topnav-item.is-active .topnav-link:hover,
    .topnav-link.active:hover{
        background-color: var(--drk-red-dark, #b30004) !important;
        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
    }

    /* Dropdown active */
    .topnav-sub.active,
    .topnav-parent.active{
        background-color: var(--drk-red, #e60005) !important;
        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
        border-color: transparent !important;
    }

    /* Mobile Drawer active */
    .off-link.active,
    .off-sub.active{
        background-color: var(--drk-red, #e60005) !important;
        color:#fff !important;
        -webkit-text-fill-color:#fff !important;
        border-color: transparent !important;
    }

    /* Kleiner Repaint/GPU-Kick gegen Safari-Fixed/Sticky Zicken */
    .topnav-link{
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}
/* =========================================================
   SAFARI FIX (macOS): kein "Hintergrund-Durchscheinen" beim Ziehen
   - Scroll bleibt normal -> Footer bleibt da
   - Transparente Flächen bekommen eine echte Hintergrundfarbe
   ========================================================= */

/* Safari zeigt beim Rubber-Band gern den HTML-Background -> setze den explizit */
html{
    background: var(--page-bg, #f7f7f7);
}

/* Body ebenfalls stabil */
body{
    background: var(--page-bg, #f7f7f7);
}

/* Du hast oben "Verlauf-Killer" drin: .main/.content transparent.
   Das ist in Safari genau der Grund, warum beim Ziehen was "durchscheint".
   -> Wir geben diesen Flächen wieder einen Background (nur Farbe, kein Verlauf). */
.main,
.content{
    background: var(--page-bg, #f7f7f7) !important;
}

/* Sicherheit: falls irgendwo Leaflet/Map-Layer hinter dem Layout hängt */
.leaflet-container{
    background: #e5e7eb; /* neutrale Kachel-Placeholder-Farbe */
}

/* Overscroll-Bounce reduzieren (wirkt in neueren Safari-Versionen) */
body{
    overscroll-behavior-y: none;
}
/* =========================================================
   CLEAN WHITE PAGE LAYOUT
   - entfernt die äußere "Kartenoptik"
   - nutzt mehr Breite, behält aber saubere Ränder
   - Topbar / Footer heben sich dezent ab
   ========================================================= */
:root{
  --page-bg: #ffffff;
  --shell-space-x: clamp(20px, 2.4vw, 40px);
  --shell-space-y: clamp(18px, 2vw, 30px);
  --shell-space-bottom: clamp(28px, 3vw, 42px);
  --shell-soft-surface: #fcfcfc;
  --shell-soft-border: rgba(15, 23, 42, .08);
  --shell-soft-shadow: 0 6px 20px rgba(15, 23, 42, .04);
}

html,
body,
.app,
.main{
  background: #ffffff !important;
}

/* Safari-Rubberband darf nicht wieder grau werden */
.main,
.content{
  background: #ffffff !important;
}

/* Außenfläche der Seite: keine große weiße Karte mehr */
.content{
  padding: var(--shell-space-y) var(--shell-space-x) var(--shell-space-bottom) !important;
}

.content > .container,
.content .container{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.content-card{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Komponenten/Module dürfen die neue Breite nutzen, ohne am Rand zu kleben */
.content-card > .container,
.content-card > .container-fluid,
.content-card > .row,
.content-card > .moduletable,
.content-card > .mod-custom,
.content-card > .module,
.content-card > .moduletable-unstyled{
  width: 100%;
  max-width: 100%;
}

/* Header bewusst dezent absetzen */
.topbar{
  background: rgba(252, 252, 252, .96) !important;
  border-bottom: 1px solid var(--shell-soft-border) !important;
  box-shadow: var(--shell-soft-shadow) !important;
  backdrop-filter: blur(10px);
}

.topbar-inner{
  padding-left: var(--shell-space-x) !important;
  padding-right: var(--shell-space-x) !important;
}

/* Footer ebenfalls leicht abgesetzt, aber ohne schweren Block-Eindruck */
.brk-footer{
  background: var(--shell-soft-surface) !important;
  border-top: 1px solid var(--shell-soft-border) !important;
  box-shadow: none !important;
}

.brk-footer__wrap{
  max-width: none !important;
  padding: 10px var(--shell-space-x) 12px !important;
}

.brk-footer__legal{
  border-top-color: var(--shell-soft-border) !important;
}

/* Optional vorhandene Hero-Flächen ruhiger einbetten */
.hero-strip{
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
}

/* Mobile: etwas kompakter, aber weiterhin luftig */
@media (max-width: 980px){
  .content{
    padding: 18px 16px 26px !important;
  }

  .topbar-inner,
  .brk-footer__wrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}