/*
KassLa Design-System
Layout-Grundlagen
*/


/*
Gesamtstruktur
*/

body {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}


/*
Header
*/

header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background-color: var(--color-background);

}


/*
Hauptinhalt
*/

main {

    flex: 1;

    width: 100%;

}


/*
Zentraler Inhaltsbereich
*/

.container {

    width: 100%;

    max-width: var(--container-max-width);

    margin: 0 auto;

    padding-left: var(--space-md);

    padding-right: var(--space-md);

}


/*
Footer
*/

footer {

    margin-top: var(--space-xl);

    padding-top: var(--space-md);

    padding-bottom: var(--space-md);

    border-top: 1px solid var(--color-border);

}


/*
Nach oben Symbol
*/

.back-to-top {

    float: right;

}

/*
Schwebender Nach-oben Button
*/


.floating-back-to-top {

    position: fixed;

    right: var(--space-md);

    bottom: var(--space-lg);

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: 1px solid var(--color-border);

    background-color: transparent;

   color: var(--color-primary);

    font-size: 0.9rem;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}


.floating-back-to-top.visible {

    opacity: 1;

    pointer-events: auto;

}


/*
Header / Navigation
*/


.site-header {

    border-bottom: 1px solid var(--color-border);

}


.header-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.brand h1 {

    margin-bottom: 0;

}


/*
Desktop Navigation
*/


.main-navigation {

    display: flex;

    gap: var(--space-md);

}


.main-navigation a {

    color: var(--color-text);

}


.main-navigation a:hover {

    color: var(--color-primary);

}


/*
Dropdown Navigation
*/


.menu-group {

    position: relative;

}


.menu-group-title {

    cursor: pointer;

    color: var(--color-text);

    display: block;

}


.menu-dropdown {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 220px;

    background: var(--color-background);

    padding: var(--space-sm);

    border-radius: var(--radius-md);

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    z-index: 1000;

}


.menu-group:hover .menu-dropdown {

    display: block;

}


.menu-dropdown a {

    display: block;

    padding: var(--space-sm);

    white-space: nowrap;

}


.menu-dropdown a:hover {

    color: var(--color-primary);

}


/*
Mobile Menügruppen
*/


.mobile-menu-group {

    margin-bottom: var(--space-md);

}


.mobile-menu-group strong {

    display: block;

    margin-bottom: var(--space-sm);

}



/*
Mobile Menü Button
*/


.mobile-menu-toggle {

    display: none;

    background: transparent;

    border: 1px solid var(--color-border);

    color: var(--color-text);

    font-size: 1.3rem;

    padding: var(--space-xs);

}


/*
Mobiles Seitenmenü
*/


.mobile-side-menu {

    position: fixed;

    top: 0;

    right: -280px;

    width: 280px;
	
	box-sizing: border-box;

    height: 100vh;

    background-color: var(--color-background);

    border-left: 1px solid var(--color-border);

    z-index: 2000;

    padding: var(--space-xl);

    transition: right 0.3s ease;

}


.mobile-side-menu.open {

    right: 0;

}


.mobile-side-menu nav {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

}


.mobile-side-menu a {

    color: var(--color-text);

    font-size: 1.1rem;

}


.mobile-menu-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.45);

    z-index: 1500;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}


.mobile-menu-overlay.open {

    opacity: 1;

    pointer-events: auto;

}


/*
Navigation Zustände
*/


.main-navigation a,
.mobile-side-menu a {

    text-decoration: none;

    color: var(--color-text);

    transition: color 0.2s ease;

}


.main-navigation a:hover,
.main-navigation a.active,
.mobile-side-menu a:hover,
.mobile-side-menu a.active {

    color: var(--color-primary);

}


/*
KassLa Logo
*/


.brand img {

    display: block;

    height: 42px;

    width: auto;

}


/*
KassLa Logo Desktop Korrektur
*/

.brand {

    display: flex;

    align-items: center;

}


.brand img {

    display: block;

    height: 42px;

    width: auto;

}


/*
Mobile Menü Gruppen
*/


.mobile-menu-group-toggle {

    appearance: none;
	
	width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: transparent;

    border: none;

    padding: var(--space-sm) 0;

    font: inherit;

    color: var(--color-text);

    cursor: pointer;

    text-align: left;
		
	

}


.mobile-menu-arrow {

    transition: transform 0.2s ease;

}


.mobile-menu-group.open .mobile-menu-arrow {

    transform: rotate(90deg);

}


.mobile-menu-subitems {

    display: none;

    padding-left: var(--space-md);

}


.mobile-menu-group.open .mobile-menu-subitems {

    display: block;

}


.mobile-menu-subitems a {

    display: block;

    padding: var(--space-sm) 0;

}


/* Sterne Farben */

.quality-star.active {

    color: var(--color-primary);

}