/* === Basislayout === */
body, html {
margin: 0;
padding: 0;
height: 100%;
transition: background-color 0.3s, color 0.3s;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
transition: background-color 0.3s, color 0.3s;
}
/* === Header === */
.header {
height: 10vh;
min-height: 10vh;
display: flex;
justify-content: space-between;
align-items: center;
background: #0B0C0E;
color: #D9D9D9;
transition: background-color 0.3s, color 0.3s;
}
.header-left, .header-middle, .header-right {
display: flex;
flex: 1;
height: 100%;
align-items: center;
}
.header-left {
justify-content: left;
}
.header-middle {
justify-content: center;
}
.header-right {
display: flex;
flex-direction: row;
justify-content: right;
margin-right: 2vw;
gap: 20px;
}
.header-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.header-title h1 {
font-weight: 700;
font-size: 4vmin;
}
/* === Navbar === */
.navbar {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 5vh;
font-size: 2vmin;
background: #16181B;
color: #D9D9D9;
}
/* === Navbar Links === */
.navbar-items {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: center;
}
.navbar-link {
position: relative;
padding: 0.5rem 1rem;
text-decoration: none;
color: #D9D9D9;
font-weight: 500;
border-radius: 6px;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.navbar-link:hover {
color: #8AA6FF;
background-color: rgba(255, 255, 255, 0.05);
border-color: #8AA6FF;
}
/* Aktives Item */
.navbar-link.active {
color: #8AA6FF;
border-color: #8AA6FF;
box-shadow: 0 0 10px rgba(138, 166, 255, 0.3);
}
/* Disabled / keine Navigationseinträge */
.navbar-link.disabled {
color: #6C6F73;
cursor: default;
border: 1px dashed #6C6F73;
background-color: rgba(100,100,100,0.05);
}
/* Kleine Hover-Animation mit Underline */
.navbar-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
height: 2px;
width: 0;
background-color: #8AA6FF;
transition: width 0.3s ease;
}
.navbar-link:hover::after,
.navbar-link.active::after {
width: 100%;
}
/* === Content === */
.content-container {
display: flex;
flex: 1;
min-height: 80vh;
background-color: rgba(11,12,14,0.7);
}
.content-left, .content-right {
width: 10vw;
min-width: 5vw;
background-color: #0b0c0ea8;
}
.content-mid {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
background-color: rgba(11,12,14,0.7);
}
.footer {
display: flex;
height: auto;
width: 100%;
background: #16181B;
color: #D9D9D9;
justify-content: center;
}
.footer-wrapper {
display: flex;
flex-direction: column;
width: 50%;
}
.footer-link-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
gap: 5vw;
margin-top: 3.5vh;
margin-bottom: 6vh;
width: 100%;
box-sizing: border-box;
}
.footer-copyright {
text-align: center;
font-size: 1.5vmin;
margin-bottom: 2.5vh;
}
/* ===================================== */
/* === Light Mode Styles über === */
/* ===================================== */
body.light-mode .header {
background: #060B18;
color: #E6F1FF;
}
body.light-mode .navbar {
background: #0E1A2A;
color: #E6F1FF;
}
body.light-mode .navbar-item a {
color: #E6F1FF;
}
body.light-mode .navbar-item a:hover {
color: #6FA8FF; /* Blauer Hover-Effekt */
}
body.light-mode .content-container .content-mid {
background-color: rgba(14,26,42,0.7);
}
body.light-mode .content-left,
body.light-mode .content-right {
background-color: rgba(6,11,24,0.5);
}
body.light-mode .footer {
background: #0E1A2A;
color: #AFC7E8;
}
.header-btn {
padding: 10px 20px;
cursor: pointer;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
/* Dark Mode Button */
body.dark-mode .header-btn {
background-color: rgba(11, 12, 14, 0.8);
color: #D9D9D9;
border: 1px solid #2B2E33;
box-shadow: 0 0 12px rgba(11, 12, 14, 0.4);
}
/* Light Mode Button */
body.light-mode .header-btn {
background-color: rgba(6, 11, 24, 0.8);
color: #E6F1FF;
border: 1px solid #12294A;
box-shadow: 0 0 12px rgba(6, 11, 24, 0.4);
}
/* === Burger Menu Button === */
.burger-menu-btn {
display: none;
cursor: pointer;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
padding: 5px;
border-radius: 6px;
transition: background-color 0.3s;
}
.burger-menu-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.burger-menu-btn img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* === Mobile Menu === */
.mobile-menu {
display: none;
position: fixed;
top: 10vh;
right: -100%;
width: 70%;
max-width: 300px;
height: calc(100vh - 10vh);
background: #16181B;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
transition: right 0.3s ease-in-out;
z-index: 1000;
overflow-y: auto;
}
.mobile-menu.open {
right: 0;
}
.mobile-menu-items {
display: flex;
flex-direction: column;
padding: 20px;
gap: 15px;
}
.mobile-menu-link {
padding: 15px 20px;
text-decoration: none;
color: #D9D9D9;
font-weight: 500;
font-size: 16px;
border-radius: 6px;
transition: all 0.3s ease;
border: 1px solid transparent;
display: block;
}
.mobile-menu-link:hover {
color: #8AA6FF;
background-color: rgba(255, 255, 255, 0.05);
border-color: #8AA6FF;
}
.mobile-menu-link.active {
color: #8AA6FF;
border-color: #8AA6FF;
box-shadow: 0 0 10px rgba(138, 166, 255, 0.3);
}
.mobile-menu-link.disabled {
color: #6C6F73;
cursor: default;
border: 1px dashed #6C6F73;
background-color: rgba(100,100,100,0.05);
}
/* Light Mode Mobile Menu */
body.light-mode .mobile-menu {
background: #0E1A2A;
}
body.light-mode .mobile-menu-link {
color: #E6F1FF;
}
body.light-mode .mobile-menu-link:hover {
color: #6FA8FF;
}
/* ===================================== */
/* === Responsive Mobile Design === */
/* ===================================== */
@media (max-width: 768px) {
/* Hide sidebars on mobile to maximize content space */
.content-left,
.content-right {
display: none;
}
/* Expand content to full width on mobile */
.content-mid {
width: 100%;
-webkit-overflow-scrolling: touch;
}
/* Hide desktop navbar on mobile */
.navbar {
display: none;
}
/* Show burger menu button on mobile */
.burger-menu-btn {
display: flex;
}
/* Show mobile menu */
.mobile-menu {
display: block;
}
/* Adjust header title size for mobile readability */
.header-title h1 {
font-size: 5vmin;
}
/* Adjust header buttons for mobile */
.header-login {
display: none;
}
.header-right {
gap: 10px;
}
/* Adjust footer for mobile */
.footer-wrapper {
width: 90%;
max-width: 100%;
box-sizing: border-box;
}
.footer-link-wrapper {
flex-direction: column;
gap: 2vh;
padding: 0 10px;
}
}
/* Very small devices (max-width: 368px) */
@media (max-width: 368px) {
.header-title h1 {
font-size: 6vmin;
}
.header-right {
margin-right: 1vw;
gap: 5px;
}
.burger-menu-btn {
width: 35px;
height: 35px;
}
.header-btn {
padding: 8px 12px;
font-size: 0.85rem;
}
.mobile-menu {
width: 80%;
}
.mobile-menu-items {
padding: 15px;
gap: 10px;
}
.mobile-menu-link {
padding: 12px 15px;
font-size: 14px;
}
.footer-wrapper {
width: 95%;
max-width: 100%;
box-sizing: border-box;
}
.footer-link-wrapper {
gap: 1.5vh;
padding: 0 5px;
}
.footer-link-container {
padding: 10px;
}
.footer-link-logo {
height: 5vh;
}
.footer-link-line a {
font-size: 2.5vmin;
}
}