:root {
  --rail-gap: 0.75rem;   
  --rail-collapsed: 5rem; 
  --rail-w: var(--rail-collapsed);
  --rail-pad: 0.5rem;    
  

  --chrome-top-extra: 0.375rem;
  --chrome-top-inset: calc(var(--rail-pad) + var(--chrome-top-extra));
  --side-head-mt: 0.5rem;
  --side-head-h: 2.75rem;
  --side-toggle-h: 2.875rem;
  
  --chrome-mid-y: calc(
    var(--rail-gap)
    + var(--chrome-top-inset)
    + var(--side-head-mt)
    + (var(--side-head-h) / 2)
  );
  --rail-btn: 3.125rem;  
  --rail-btn-ml: calc((var(--rail-collapsed) - 2 * var(--rail-pad) - var(--rail-btn)) / 2);
  --rail-logo: 1.5rem;
  --rail-logo-pl: calc((var(--rail-collapsed) - 2 * var(--rail-pad) - var(--rail-logo)) / 2);
  --rail-icon: 1.5rem;   
  --rail-icon-pl: calc((var(--rail-btn) - var(--rail-icon)) / 2);
  --rail-av: 1.875rem;
  --rail-av-pl: calc((var(--rail-btn) - var(--rail-av)) / 2);
  --rail-dur: 0.36s;  
  --rail-ease: cubic-bezier(0.7, 0, 0.3, 1); 
  --mtop-h: 3.5rem;   
}
html.rail-expanded { --rail-w: 18.125rem; }


@media (min-width: 1440px) {
  :root {
    --rail-collapsed: 80px;
    --rail-pad: 8px;
    --rail-btn: 48px;
    --rail-logo: 23px;
    --rail-icon: 22px;
    --rail-av: 30px;
  }
  html.rail-expanded { --rail-w: 300px; }
}


.app { min-height: 100vh; min-height: 100dvh; } 







.app-main {
  margin-left: calc(var(--rail-w) + var(--rail-gap) * 2);
  min-height: 100vh;
  min-height: 100dvh;
  


  display: flex;
  flex-direction: column;
  transition:
    margin-left var(--rail-dur) var(--rail-ease),
    margin-right 0.32s var(--ease);
}


.main-top {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  

  min-height: calc(var(--chrome-mid-y) * 2);
  padding: 0.875rem clamp(1.5rem, 4vw, 3.5rem);
  background: transparent;
}





.page {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem) 6rem;
  box-sizing: border-box;
}

.page-head { margin-bottom: var(--sp-8); }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);   
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.page-head .sub {
  margin-top: var(--sp-3);
  color: var(--text-soft);
  max-width: 60ch;
}


.page h2,
.sec-head h2 { letter-spacing: var(--track-heading); }





.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1.5rem 1.25rem;
  
  min-height: clamp(21.25rem, calc(100vh - 31.5rem), 40rem);
  box-sizing: border-box;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);   
  margin: 0 0 1.625rem;
}




.sec-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
  padding: 1.875rem clamp(1.5rem, 4vw, 3.5rem) 0.875rem;
}
.sec-tools { display: flex; align-items: center; gap: var(--sp-2); }






.grid {
  --grid-gap: clamp(1.875rem, 2.6vw, 4.5rem);
  --grid-min: 12.5rem; 
  




  --grid-max-cols: 5;
  




  --grid-tile-max: 12.5rem;
  display: grid;
  gap: var(--grid-gap);
  

  padding: 0.5rem clamp(1.5rem, 4vw, 3.5rem) 7.5rem;
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      
      min(
        100%,
        max(
          var(--grid-min),
          min(
            var(--grid-tile-max),
            calc((100% - (var(--grid-max-cols) - 1) * var(--grid-gap)) / var(--grid-max-cols))
          )
        )
      ),
      1fr
    )
  );
}





















.grid > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}




.grid > *:hover {
  content-visibility: visible;
}


.feed-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 3rem 0;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--text-faint);
}




.grid.as-list {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  margin: 0.25rem clamp(1.5rem, 4vw, 3.5rem) 7.5rem;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}


.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-16) var(--sp-6);
  color: var(--text-soft);
}
.empty h2 { font-size: var(--fs-md); color: var(--text); }














@media (min-width: 768px) and (max-width: 1023.98px) {
  .app-main { margin-left: calc(var(--rail-collapsed) + var(--rail-gap) * 2); }
  
  html.rail-expanded .side { box-shadow: var(--shadow-lg); }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  

  .hero { min-height: clamp(16rem, calc(100dvh - 26rem), 26rem); }

  



  .main-top {
    padding-inline: 1.25rem;
    flex-wrap: wrap;
    row-gap: var(--sp-2);
  }
  .sec-head { padding-inline: 1.25rem; }
  .grid { padding-inline: 1.25rem; }
  .grid.as-list { margin-inline: 1.25rem; }
  .page { padding-inline: 1.25rem; }
}


@media (max-width: 767.98px) {
  


  html, body { overflow-x: clip; }
  .app-main {
    margin-left: 0;
    

    padding-top: calc(var(--mtop-h) + var(--rail-gap) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
  





  .app-main:not(:has(pb-selection-bar)) {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  


  .page { padding: 1rem 1rem 4rem; }
  .main-top { padding-inline: 1rem; }
  .sec-head { padding: 1rem 1rem 0.75rem; }

  





  .main-top { min-height: 0; padding-block: 1rem 0.875rem; }
  .main-top .bcrumbs { margin-bottom: 0; }
  
  .main-top:has(> .bcrumbs > .bcrumb.current:first-child) { padding-block: 0; }
  .main-top > .bcrumbs:has(> .bcrumb.current:first-child) { display: none; }
  .page-head { margin-bottom: 1.5rem; }

  


  .grid {
    --grid-gap: 0.75rem;
    padding: 0.25rem 1rem 6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid.as-list { margin-inline: 1rem; }

  


  

  .hero {
    min-height: 0;
    padding: 2.75rem 1rem 2rem;
  }

  



  .page-head h1 {
    font-size: 1.75em; 
    line-height: 1;
    letter-spacing: var(--track-display);
  }
  .sec-head h2,
  .page h2 { letter-spacing: var(--track-heading); }

  


  






  input, select, textarea { font-size: max(16px, 1em) !important; }
}







html.pb-in-app pb-sidebar,
html.pb-in-app .mtop,
html.pb-in-app .pb-legalfoot,
html.pb-in-app :is(.pb-pblur, .pb-edge, .pb-tint) { display: none !important; }




html.pb-in-app { --strips-h: 0px; }
html.pb-in-app .pb-strips,
html.pb-in-app .pb-lockcta,
html.pb-in-app a[href*="mitgliedschaft.html"],


html.pb-in-app :is([data-topup], [data-portal]),
html.pb-in-app .set-card:has([data-topup], [data-portal]) { display: none !important; }



html.pb-in-app :is(pb-upgrade-modal, pb-credits-modal, pb-gift-modal, [data-buy]) { display: none !important; }
html.pb-in-app .app-main {
  margin-left: 0;
  padding-top: 0;
}