/* Dateiname: styles-userarea.css */
/* Version: 1.5 */



:root {
  --background-bg-elevation: #FEF1D4;
  --background-bg-elevation-primar: #DFF5F5;
  --background-bg-elevation-elementar: #FEF1D4;
  --text-text-action: #322D7F;
  --text-primary: #000;
  --background-bg-surface: #FFF;
  --border-border-s: #CDCDCD;
  --clear-bg: #FEF1D4;
  --bg-blue: #DFF5F5;

  /* m/regular */
  font-family: Figtree;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */

}




/* ##################################################################################################################### 
Mobile First CSS Code
##################################################################################################################### */

body {
  margin: 0;
  font-family: 'Figtree', sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
}

body.sidebar-is-open {
  /* Optional: Verhindert Scrollen des Body, wenn mobiles Menü offen ist */
  /* overflow: hidden; */ 
}

hr {
  border: none;
  border-bottom: 1px solid #DCDCDC;
  margin: 10px 0;
}

section {
  margin: 0 0 36px 0
}

.page-wrapper {
  overflow-x: hidden; 
  width: 100%; 
}

.sidebar-container {
  position: fixed;
  left: -100%; 
  top: 0;
  width: 100%; 
  height: 100vh; 
  padding: 0; 
  box-sizing: border-box;
  z-index: 950; 
  transition: left 0.3s ease-in-out; 
  display: flex; /* NEU */
  flex-direction: column; /* NEU */
  color: var(--text-text-action);
}

.sidebar-container.is-open {
  left: 0;
}

.sidebar-header {
  padding: 0; /* Padding wird nun von .mobile-menu-header übernommen */
  margin-bottom: 0; 
  flex-shrink: 0; /* NEU: Verhindert, dass der Header schrumpft */
  position: relative; /* Für z-index falls nötig für den Header */
  z-index: 10; /* Damit der Header über dem scrollenden Menü bleibt, falls es mal überlappt */
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-border-s);
  min-height: 58px; 
  padding: 0 20px; /* Padding für den Inhalt des Headers */
  box-sizing: border-box;

}

.desktop-sidebar-header {
  display: none;
}

.sidebar-menu {
  padding: 16px; 
  max-width: 950px;
  flex-grow: 1; /* NEU: Nimmt den restlichen Platz ein */
  overflow-y: auto; /* NEU: Macht den Menübereich scrollbar */
  min-height: 0; /* NEU: Wichtig für Flexbox und Overflow */
}

.sidebar-menu ul { 
  list-style: none;
  padding: 0;
  margin: 0;
}

.menuarrow-right {
  margin-right: 16px;
}


.sidebar-menu li.level0.search {
  margin-bottom: 8px;
}

.sidebar-menu .level0-item-text {
  margin: 12px 8px 8px;
  font-weight: 700;
  font-size: var(--font-size-h1, 28px);
  line-height: var(--font-size-h1-lineheight, 30px);
}


.sidebar-menu ul.level1 {
  position: fixed; 
  left: -100%;
  top: 90px; 
  width: 100%; 
  /* max-width: 100%; Du hattest dies auf 100% gesetzt, übernehme das */
  height: 100vh;
  padding: 0; /* Padding wird auf li.back und li a direkt gesetzt */
  box-sizing: border-box;
  z-index: 1000; 
  transition: left 0.3s ease-in-out;
  overflow-y: auto; 
  padding-left: 16px; 
  padding-right: 16px;
}

.sidebar-menu ul.level1.is-open {
  left: 0;
}

.sidebar-menu ul.level1 li.back {
  display: flex; 
  align-items: center;
  padding: 8px 0; /* Padding hier, da ul.level1 kein Padding mehr hat */
  min-height: 58px; 
  box-sizing: border-box;
  position: sticky; /* NEU: Versucht den Back-Button oben zu halten beim Scrollen innerhalb des Submenüs */
  top: 0; /* NEU: Benötigt für sticky */
  z-index: 1; /* NEU: Damit es über dem Rest der Liste im Submenü bleibt */
}

.sidebar-menu ul.level1 li.back .backbutton {
  margin-right: 10px;
}
.sidebar-menu ul.level1 li.back .level0-item-text {
  font-weight: bold;
}

.sidebar-menu li a,
.sidebar-menu li button  { 
  display: flex;
  padding: 8px 0; /* Gilt für a.level0 im .sidebar-menu (horizontales Padding kommt vom .sidebar-menu) */
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-menu ul.level1 li a { /* Spezifisches Padding für Level 1 Items */
    padding: 12px 8px; /* Padding hier, da ul.level1 kein Padding mehr hat */
}


.sidebar-menu-bottom {
  padding: 16px; 
  margin-top: auto;
}

.sidebar-menu-bottom ul { 
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu .navbar-user .menu-item {
    font-size: 14px;
    font-weight: 400;
    padding-top: 4px;
    padding-bottom: 4px;
}

.navbar-user .roundicon {
    width: 18px;
    height: 18px;
}

.main-content-area {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh; 
  display: flex;
  flex-direction: column;

}

.content-header {
  display: flex;
  padding: 42px var(--padding-outer, 16px) 12px var(--padding-outer, 16px);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  
  color: var(--text-text-action);
}

.primar .content-header,
.primar .sidebar-container,
.primar .sidebar-menu ul.level1,
.primar .desktop-sidebar-header {
  background: var(--bg-blue);
}


.elementar .content-header,
.elementar .sidebar-container,
.elementar .sidebar-menu ul.level1,
.elementar .desktop-sidebar-header {
  background: var(--clear-bg);
}

.neutral .content-header,
.neutral .sidebar-container,
.neutral .sidebar-menu ul.level1,
.neutral .desktop-sidebar-header {
  background: var(--clear-bg);
}

.headerright {
  float: right;
}

.content-header .mobile-header { 
  display: flex; 
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 34px;
}

.mobile-logo-wrapper {
  white-space: nowrap;
}

.mobile-header-monster {
  width: 32px;
  height: 32px;
}

.mobile-header-logotext {
  height: 29px;
  margin-left: 8px;
}

.mobile-header-nav {
  border: none;
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-text-action);

}

.mobile-menu-header {
  display: flex; 
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 42px 16px 12px 16px;
}

.mmh-left {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; 
}
.mmh-left a {
  margin-right: 8px;
}

.close-sidebar-button {
  display: flex;
  align-items: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--text-text-action);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px; /* 114.286% */
}

.close-sidebar-button img {
  margin-left: 4px;
}



.menu-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px; /* 137.5% */ 
  border: none;
  background-color: transparent;
  color: var(--text-text-action);
  width: 100%;
  justify-content: space-between;
  cursor: pointer;
}


.menu-item .roundicon {
  border-radius: 50%;
  background: var(--text-text-action);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.navbar-user .roundicon {
    width: 25px;
    height: 25px;
}

.backbutton.menu-item .roundicon {
  background: var(--text-text-action) !important;
}

.menu-item .roundicon img,
.menu-item .roundicon svg {
  width: 16px;
  height: 16px;
}

.sidebar-menu .current .menu-item .roundicon {
  background: transparent;
}

.menu-item-text {
  margin-right: auto;
}

.sidebar-menu li {
  color: var(--text-text-action);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px; /* 137.5% */ 
}

.sidebar-menu li.current {
  background-color: var(--background-bg-surface);
  border-radius: 12px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.sidebar-menu li.current svg path {
  fill: var(--text-text-action);
}

.nav-item-account-edit {
  display: none !important;
}

@media (max-width: 991.98px) {
  .nav-item-account-edit {
    display: block !important;
  }
}


.content-header h1 {
  margin: 0;
  font-size: 1.8em;
}

.desktop-header {
  display: none; 
}


.roundicon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--icons-bg-action, #322D7F);
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}

.roundicon.wh12 {
  width: 12px;
  height: 12px;
  min-width: 12px; /* NEU: Füge min-width hinzu, um Schrumpfung zu verhindern */
  min-height: 12px; /* NEU: Füge min-height hinzu, um Schrumpfung zu verhindern */
  margin-right: 6px;
  flex-shrink: 0; /* NEU: Verhindert, dass das Icon schrumpft */
}

.roundicon.wh32 {
  width: 32px;
  height: 32px;
  min-width: 32px; /* NEU: Füge min-width hinzu, um Schrumpfung zu verhindern */
  min-height: 32px; /* NEU: Füge min-height hinzu, um Schrumpfung zu verhindern */
  margin: 0;
}

.dummy {
  background-image: url("../images/userarea/userarea-icons/dummyicon.svg"); /* Passe den Pfad an! */
}

.content-body {
  margin: 16px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;

}

.breadcrumbs {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-text-action, #322D7F);
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
}

.breadcrumbs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

/* Styling für die einzelnen Listenelemente */
.breadcrumbs li {
  display: flex;
  align-items: center;
  /* WICHTIG: Diese Eigenschaften sind notwendig, damit text-overflow funktioniert */
  white-space: nowrap; /* Verhindert, dass der Text im li umbricht */
  overflow: hidden;    /* Versteckt den überlaufenden Text */
  text-overflow: ellipsis; /* Zeigt Auslassungspunkte für den abgeschnittenen Text */
  min-width: 0;        /* WICHTIG: Erlaubt Flex-Items (li) zu schrumpfen */
  flex-shrink: 1;      /* Erlaubt dem li zu schrumpfen */
}

/* Fügt den Schrägstrich vor jedem Listenelement hinzu, außer dem ersten */
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  color: var(--text-text-passiv, #ADADAD);
  /* Sicherstellen, dass der Separator nicht gekürzt wird */
  flex-shrink: 0;
  white-space: nowrap;
}

/* Styling für die Links innerhalb der Breadcrumbs */
.breadcrumbs a {
  text-decoration: none;
  color: var(--text-text-action, #322D7F);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

/* Optional: Hover-Effekt für Links */
.breadcrumbs a:hover {
  text-decoration: underline; /* Unterstreichung beim Hover */
}

/* Styling für das aktuelle Seitenelement */
.breadcrumbs .current {
  color: var(--text-text-action, #322D7F);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.main-content-area h1, .main-content-area .h1 {
  font-family: Figtree;
  font-size: var(--font-size-h1, 28px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--font-size-h1-lineheight, 30px);  
  margin-bottom: 0;
}

.main-content-area h1 .subtitle {
  color: #000000;
  font-weight: 400;  
}

.main-content-area h2, .main-content-area .h2 {
  color: var(--text-text-primary, #000);

  /* Sub */
  font-family: Figtree;
  font-size: var(--font-size-h1, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-size-h1-lineheight, 26px); /* 107.143% */  
  margin-bottom: 12px;
}

.main-content-area h3, .main-content-area .h3 {
  font-family: Figtree;
  font-size: var(--font-size-h3, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--font-size-h3-lineheight, 20px);  
  margin-bottom: 0;
}

.main-content-area h4, .main-content-area .h4 {
  font-family: Figtree;
  font-size: var(--font-size-h4, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--font-size-h4-lineheight, 18px);  
  margin-bottom: 0;
}

.prev-next {
  display: flex;
  flex-direction: column;
  gap: 8px;
  
  border: 1px solid var(--text-text-action);
  border-radius: 12px;
  padding: 16px 12px;
}

.prev-next a {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: 600;
}

.prev-next a img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* TOC Scrollspy */
.toc {
    position: fixed; /*fallback*/
    position: -webkit-sticky; /* still needed for ios */
    position: sticky;
    top: 30px;
}
.toc li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.toc-link {
    padding:8px 12px;
    display: block;
}
.toc-link.is-active {
    border: 1px solid var(--text-text-action);
    border-radius: 12px;
}

#grundidee h2::after,
#hinweise h2::after {
  content: ":";
}
.toc h2 {
  display: none;
}

.toc.ebene1 h2 {
  display: block;
  color: var(--Primitives-colors-purple-90, #322D7F);
  font-size: var(--font-size-h4, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 133.333% */
}

.toc.ebene1,
.toc.ebene2 {
  border-radius: var(--radius, 12px);
  border: 1px solid var(--Primitives-colors-purple-90, #322D7F);
  padding: 20px 25px 10px;
  position: initial;
}

.toc.ebene2 {
  margin-bottom: 35px;
}

.toc.ebene1 li, 
.toc.ebene2 li {
  padding-left: 0;
}

.icon-headline {
    display: flex;
    align-items: center;
}

#content section { scroll-margin-top: 80px; }

.icon-headline {
    display: flex;
    align-items: center;
    color: #322D7F!important;
    font-weight: 700!important;
    margin: 12px 0!important;
    line-height: 1 !important;
}

.toggle-headline {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    color: #322D7F!important;
    font-family: inherit!important;
    font-weight: 700!important;
    margin: 12px 0!important;
    font-size: inherit!important;
    line-height: 1 !important;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.toggle-headline img,
.icon-headline img {
    margin-right: 8px;
}


.toggle-headline::after {
  content: "";
  width: 17px;
  height: 26px;
  background-image: url(/themes/gsw/images/userarea/userarea-icons/toggle-down.svg);
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
}

.toggle-headline[aria-expanded="true"]::after  {
    transform: rotate(-180deg);
}
.toggle-headline[aria-expanded="false"]::after {
    transform: rotate(0);
}

.grow-1 {
    flex-grow: 1;
}



.foerderschwerpunkte ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* space between items */
  padding: 0;
  margin: 0;
  list-style: none;
  margin-bottom: 36px;
}

.foerderschwerpunkte li {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

.foerderschwerpunkte li:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-image: url("../images/userarea/userarea-icons/tag.svg"); /* adjust path as needed */
  background-repeat: no-repeat;
  background-position: center;
}

.online-inhalt {
  border: 1px solid #F9BB29;
  border-radius: 12px;
  padding: 5px;
  margin-top: 16px;


}


.downloaditem {
  display:flex;
  color: var(--text-text-action, #322D7F);
  align-items: center;
}



.downloaditem img {
  width: 24px;
  height: auto;
  margin-right: 8px;
}


.buch-parent {
  border: 1px solid #CDCDCD;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 15px;
}
.buch {
  display: flex;
  flex-direction: column;
}
.buch img {
  width: 60px;
  height: auto;
  margin-right: 15px;
}
.buch-kurzbeschreibung {
  font-style: italic;
}

.online-parent {
  border: 1px solid #CDCDCD;
  padding: 25px 15px;
  margin-bottom: 15px;
  border-radius: 15px;
  display: block;
}

.online-parent p {
  margin-bottom: 0 !important;
}

.lied-parent {
  border: 1px solid #CDCDCD;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 15px;
}


.loginformwrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

ul.navbar-user {
  margin-top: 20px;
}


/* #################### Benuterzerverzeichnis #################### */

/* Container für jedes Bundesland */
.bundesland {
  margin-bottom: 24px; 
  padding-top: 24px;  
}

/* Überschrift für das Bundesland */
.bundesland h2 {
  margin-bottom: 24px; 
  margin-top: 32px;
}

/* Container für einen einzelnen Vernetzungspartner/Trainer */
.vernetzungspartner {
  margin-bottom: 24px; 
  padding: 24px;        

  border-radius: 12px;
}

body.primar .vernetzungspartner {
  background-color: var(--background-bg-elevation-primar);  
}

body.elementar .vernetzungspartner {
  background-color: var(--background-bg-elevation-elementar);
}

/* Name des Trainers/der Trainerin */
.name {
  margin-bottom:0; 
  font-size: 18px;  
  font-weight: 500;
}

/* Organisation */
.org {
  margin-top: -4px;
}

/* E-Mail-Adresse */
.email, .tel {
  font-size: 14px;
}

/* Styling für den E-Mail-Link */
.email a {
  font-size: 14px;
  text-decoration: none;  /* Unterstreichung standardmäßig aus */
}

.email a:hover {
  text-decoration: underline; /* Unterstreichung beim Überfahren mit der Maus */
}

/* ######## Miscpage Userarea ################################################## */
img.mispageimage {
  width: 100%;
  height: auto;
}

.pwtoggle {
  position: relative;
}
.pwtoggleicon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--Primitives-colors-purple-90, #322D7F);
}


.userarea .gallerywrapper,
.userarea .materialdownloadswrapper,
.userarea .materiallinkswrapper {
    border-radius: 12px;
    border: 1px solid var(--border-border-l, #322D7F);
    padding: 16px;
    margin-bottom: 32px;
}


/* ##################################################################################################################### 


$$$$$$$$\  $$$$$$\   $$$$$$\                            
\____$$  |$$  __$$\ $$  __$$\                           
    $$  / $$ /  \__|$$ /  $$ |       $$$$$$\  $$\   $$\ 
   $$  /  $$$$$$$\   $$$$$$  |      $$  __$$\ \$$\ $$  |
  $$  /   $$  __$$\ $$  __$$<       $$ /  $$ | \$$$$  / 
 $$  /    $$ /  $$ |$$ /  $$ |      $$ |  $$ | $$  $$<  
$$  /      $$$$$$  |\$$$$$$  |      $$$$$$$  |$$  /\$$\ 
\__/       \______/  \______/       $$  ____/ \__/  \__|
                                    $$ |                
                                    $$ |                
                                    \__|                

##################################################################################################################### */
  @media (min-width: 768px) {
    .page-wrapper {
      display: flex; 
      overflow-x: visible; 
    }

    .sidebar-container {
      /* Flex-Eigenschaften von Mobile zurücksetzen/anpassen für Desktop */
      display: flex; /* Zurück zu block oder was auch immer das Desktop Layout benötigt */
      position: static; 
      left: auto; 
      width: 252px; 
      max-width: none; 
      height: auto;
      flex-shrink: 0; 
      padding: 0; 
      z-index: auto; 
      overflow-y: auto; /* NEU: Desktop Sidebar soll auch scrollbar sein, falls nötig */
      color: var(--text-text-action);
    }
    
    .sidebar-header {
        padding: 0; /* Wird vom .desktop-sidebar-header übernommen */
        z-index: auto; /* Zurücksetzen */
    }



    .desktop-primar-logo {
        width: 128px;
        height: auto;
    }


    .desktop-elementar-logo {
      width: 195px;
      height: auto;

    }

    .mobile-menu-header {
      display: none;
    }

   
    
    .desktop-sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px 24px;
      min-height: 58px; 
      position: sticky; /* Hält den Desktop Sidebar Header oben beim Scrollen */
      top: 0;
      z-index: 10; /* Über dem scrollenden Menü */
    }

    .sidebar-menu {
        padding: 20px; 
        /* Flex-Eigenschaften von Mobile nicht mehr nötig */
        flex-grow: initial; 
        overflow-y: initial; /* Scrollen wird vom .sidebar-container gehandhabt */
        min-height: initial;
    }

    .sidebar-menu-bottom {
        padding: 20px; 
    }

    .sidebar-menu ul.level1 {
        display: none !important; 
        overflow-y: initial; /* Zurücksetzen */
    }
   
    .desktop-header ul.level1.cloned-desktop-submenu {
        display: flex !important; 
        position: static; 
        width: auto;
        max-width: none;
        height: auto;
        background-color: transparent; 
        padding: 0;
        z-index: auto;
        border-right: none;
        flex-direction: row; 
        align-items: center; 
        overflow-y: initial; /* Kein Scrollen hier */
    }

    .desktop-header ul.level1.cloned-desktop-submenu li {
        margin-right: 15px; 
    }
    .desktop-header ul.level1.cloned-desktop-submenu li:last-child {
        margin-right: 0;
    }

    .sidebar-menu li.back { 
      display: none !important; 
    } 

    .content-header {
      padding: 0;
    }

    .content-body {
      margin: 40px 0; /* Margin für Desktop */
      /* temp ingo */
      display: flex;
      flex-direction: column;
    }
    
    .main-content-area {
      flex-grow: 1; 
      padding: 40px 48px; /* Padding für Desktop */
    }



    .content-header {
      background-color: transparent !important;
    }

    .content-header .mobile-header,
    .level0-item-text,
    .menuarrow-right {
      display: none;
    }
    
    .content-header .desktop-header {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }

    .content-header .profile {
      display: flex;
      align-items: center;
      order: 1;
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px; /* 114.286% */
      padding-bottom: 3px;
      margin-left: auto;
    }

    .content-header .profile .roundicon {
      margin-left: 8px;
    }

    .content-header .profile a {
      display: flex;
      align-items: center;
    }

    .cloned-desktop-submenu {
      list-style: none;
    }

    .cloned-desktop-submenu .menu-item {
      color: var(--text-text-action, #322D7F);

      /* s/medium */
      font-family: Figtree;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px; /* 114.286% */
    }
    .desktop-header ul.level1.cloned-desktop-submenu li {
      margin-right: 24px; /* Abstand zwischen den Menüelementen */
      padding-top: 9px;
      padding-bottom: 9px;
      border-bottom: 3px solid transparent;
    }

    .cloned-desktop-submenu .menu-item {
      text-decoration: none;
      padding: 0;;
    }

    .desktop-header ul.level1.cloned-desktop-submenu li:hover,
    .desktop-header ul.level1.cloned-desktop-submenu li.current {
      border-bottom: 3px solid var(--text-text-action, #322D7F);
      text-decoration: none;
    }
    .main-content-area h1, .main-content-area .h1 {
      font-size: var(--font-size-h1, 32px);
      line-height: var(--font-size-h1-lineheight, 38px); /* 118.75% */
    }
    .main-content-area h2, .main-content-area .h2 {
      font-size: var(--font-size-h1, 24px);
      line-height: var(--font-size-h1-lineheight, 28px); /* 118.75% */
      font-style: normal;
      font-weight: 400;
    }

    .main-content-area h3, .main-content-area .h3 {
      font-size: var(--font-size-h3, 20px);
      line-height: var(--font-size-h3-lineheight, 24px); /* 118.75% */
      font-style: normal;
      font-weight: 400;
    }

    .main-content-area h4, .main-content-area .h4 {
      font-size: var(--font-size-h4, 18px);
      line-height: var(--font-size-h4-lineheight, 21px); /* 118.75% */
      font-style: normal;
      font-weight: 400;
    }

    .buch {
      display: flex;
      flex-direction: row;
    }




  }



  /* ##################################################################################################################### 


  $$\    $$$$$$\   $$$$$$\   $$$$$$\                      
$$$$ |  $$  __$$\ $$  __$$\ $$$ __$$\                     
\_$$ |  \__/  $$ |$$ /  $$ |$$$$\ $$ | $$$$$$\  $$\   $$\ 
  $$ |   $$$$$$  | $$$$$$  |$$\$$\$$ |$$  __$$\ \$$\ $$  |
  $$ |  $$  ____/ $$  __$$< $$ \$$$$ |$$ /  $$ | \$$$$  / 
  $$ |  $$ |      $$ /  $$ |$$ |\$$$ |$$ |  $$ | $$  $$<  
$$$$$$\ $$$$$$$$\ \$$$$$$  |\$$$$$$  /$$$$$$$  |$$  /\$$\ 
\______|\________| \______/  \______/ $$  ____/ \__/  \__|
                                      $$ |                
                                      $$ |                
                                      \__|                

 ##################################################################################################################### */
  @media (min-width: 1280px) {

    .sidebar-container {

      width: 322px; 
    }

    .main-content-area {
      padding: 40px;
      max-width: 960px;
    }

    .content-body {

    }



    /* ######## Miscpage Userarea ################################################## */
    .left, .right {
      width: 50%;
    }    
    
  }




  /* #####################################################################################################################
  
  
  $$\   $$$$$$\   $$$$$$\   $$$$$$\                      
$$$$ | $$  __$$\ $$  __$$\ $$$ __$$\                     
\_$$ | $$ /  $$ |\__/  $$ |$$$$\ $$ | $$$$$$\  $$\   $$\ 
  $$ | \$$$$$$$ | $$$$$$  |$$\$$\$$ |$$  __$$\ \$$\ $$  |
  $$ |  \____$$ |$$  ____/ $$ \$$$$ |$$ /  $$ | \$$$$  / 
  $$ | $$\   $$ |$$ |      $$ |\$$$ |$$ |  $$ | $$  $$<  
$$$$$$\\$$$$$$  |$$$$$$$$\ \$$$$$$  /$$$$$$$  |$$  /\$$\ 
\______|\______/ \________| \______/ $$  ____/ \__/  \__|
                                     $$ |                
                                     $$ |                
                                     \__|                


  ##################################################################################################################### */
  @media (min-width: 1920px) {
    .sidebar-container {
        /* width: 320px; */ 
    }
    .main-content-area {
      padding: 50px;
    }
  }
  
  

/* #####################################################################################################################

                        $$\       $$\ $$\                                     $$\           
                        $$ |      \__|$$ |                                    $$ |          
$$$$$$\$$$$\   $$$$$$\  $$$$$$$\  $$\ $$ | $$$$$$\         $$$$$$\  $$$$$$$\  $$ |$$\   $$\ 
$$  _$$  _$$\ $$  __$$\ $$  __$$\ $$ |$$ |$$  __$$\       $$  __$$\ $$  __$$\ $$ |$$ |  $$ |
$$ / $$ / $$ |$$ /  $$ |$$ |  $$ |$$ |$$ |$$$$$$$$ |      $$ /  $$ |$$ |  $$ |$$ |$$ |  $$ |
$$ | $$ | $$ |$$ |  $$ |$$ |  $$ |$$ |$$ |$$   ____|      $$ |  $$ |$$ |  $$ |$$ |$$ |  $$ |
$$ | $$ | $$ |\$$$$$$  |$$$$$$$  |$$ |$$ |\$$$$$$$\       \$$$$$$  |$$ |  $$ |$$ |\$$$$$$$ |
\__| \__| \__| \______/ \_______/ \__|\__| \_______|       \______/ \__|  \__|\__| \____$$ |
                                                                                  $$\   $$ |
                                                                                  \$$$$$$  |
                                                                                    \______/   
##################################################################################################################### */                                             
                                              
 @media (max-width: 1024px) {
}


/* ##################################################################################################################### */
/* #### Helper ######################################################################################################### */


/* Dateiname: styles-userarea.css */
/* Version: 1.5 */