*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 112.5%; } /* 18px Basis statt 16px – skaliert alle rem-Werte im ganzen Stylesheet */
body {
font-family: var(--font);
color: var(--gray-90);
background: #eef0f5;
margin: 0;
min-width: 320px;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}

h1,h2,h3,h4 { 
font-family: var(--font); 
}

img { 
max-width: 100%; 
height: auto; 
}
a { 
text-decoration: none; 
}

/* ══════════════════════════════════════
TOP NAVIGATION
══════════════════════════════════════ */
.main-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1100;
height: var(--nav-height);
background: var(--white);
border-bottom: 2px solid var(--purple);
box-shadow: var(--shadow-sm);
}
.nav-inner {
max-width: 1024px;
margin: 0 auto;
padding: 0 1rem;
height: 100%;
display: flex;
align-items: center;
gap: 1rem;
}
.nav-logo img { height: 36px; width: auto; display: block; }
.nav-links {
display: flex;
align-items: center;
gap: .25rem;
list-style: none;
margin: 0 0 0 auto;
padding: 0;
}
.nav-links a {
display: flex;
align-items: center;
gap: .35rem;
padding: .45rem .85rem;
border-radius: var(--radius-full);
font-size: .9rem;
font-weight: 500;
color: var(--gray-70);
transition: background .15s, color .15s;
white-space: nowrap;
}
.nav-links a:hover { background: var(--color-buttonPrimaryHover); color: var(--color-backgroundBrandDark); }
.nav-links a.active { background: var(--color-buttonPrimaryHover); color: var(--color-backgroundBrandDark); font-weight: 700; }
.nav-links a i { font-size: 1rem; }
.nav-profile {
display: flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--color-backgroundBrandDark);
color: var(--color-textProminentInverted);
font-size: 1.2rem;
cursor: pointer;
border: none;
transition: background .15s;
margin-left: .5rem;
text-decoration: none;
}
.nav-profile:hover { background: var(--color-linkTextHover); color: var(--white); }

.nav-logout {
display: flex;
align-items: center;
gap: .35rem;
padding: .4rem .85rem;
border-radius: var(--radius-full);
font-size: .85rem;
font-weight: 500;
color: var(--gray-70);
border: 1.5px solid var(--gray-20);
background: none;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
white-space: nowrap;
text-decoration: none;
margin-left: .25rem;
}
.nav-logout:hover { background: #fff0f3; color: var(--color-error); border-color: var(--color-error); }
@media (max-width: 680px) { .nav-logout { display: none; } }


.burger-btn {
display: none;
margin-left: auto;
background: none;
border: none;
cursor: pointer;
padding: .4rem;
color: var(--gray-90);
font-size: 1.5rem;
line-height: 1;
}
@media (max-width: 680px) {
.nav-links, .nav-profile { display: none; }
.burger-btn { display: flex; align-items: center; }
}

/* ══════════════════════════════════════
MOBILE MENU OVERLAY
══════════════════════════════════════ */
.mobile-menu-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 1200;
}
.mobile-menu-overlay.open { display: block; }
.mobile-menu {
position: fixed;
top: 0; left: 0; bottom: 0;
width: min(300px, 85vw);
background: var(--white);
z-index: 1300;
transform: translateX(-100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--gray-20);
background: var(--color-backgroundBrandDark);
}
.mobile-menu-header img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.mobile-menu-close {
background: none; border: none; cursor: pointer;
color: var(--white); font-size: 1.4rem; padding: .25rem;
}
.mobile-nav-links { list-style: none; padding: 1rem 0; margin: 0; flex: 1; }
.mobile-nav-links li a {
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--gray-90);
transition: background .15s, color .15s;
}
.mobile-nav-links li a:hover,
.mobile-nav-links li a.active { background: var(--color-buttonPrimaryHover); color: var(--color-textProminent); }
.mobile-nav-links li a.active { font-weight: 700; }
.mobile-nav-links li a i { font-size: 1.2rem; color: var(--color-linkTextHighlight); }
.mobile-menu-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--gray-20);
font-size: .8rem;
color: var(--gray-40);
text-align: center;
}

/* ══ LAYOUT ══ */
.nav-spacer { height: var(--nav-height); }
.page-content { max-width: 1024px; margin: 0 auto; padding: 1.5rem 1rem 5rem; }
@media (max-width: 680px) { .page-content { padding-bottom: 7rem; } }

/* ══ PAGE HEADER ══ */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 800; color: var(--gray-90); margin: 0 0 .25rem; }
.page-header p { font-size: .92rem; color: var(--gray-70); margin: 0; line-height: 1.5; }

/* ══ BOTTOM NAVIGATION ══ */
.bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; background: var(--white); border-top: 1.5px solid var(--gray-20); padding: .4rem 0 max(.4rem, env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(0,0,0,.08); }
@media (max-width: 680px) { .bottom-nav { display: flex; justify-content: space-around; } }
.bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem .75rem; background: none; border: none; color: var(--gray-40); font-size: .74rem; font-weight: 500; text-decoration: none; transition: color .15s; flex: 1; }
.bottom-nav-item i { font-size: 1.3rem; }
.bottom-nav-item.active { color: var(--color-textProminent); }
.bottom-nav-item:hover { color: var(--color-textProminent); }

/* ══ FOOTER ══ */
.site-footer {
  background: #ffffff;
  border-top: 1px solid var(--color-borderDeemphasized);
  padding: 2.5rem 0 1.5rem;
  color: var(--gray-70);
}

.site-footer .container { max-width:1024px; margin:0 auto; padding:0 1rem; }
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-borderDeemphasized);
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-social {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-borderDeemphasized);
  color: var(--gray-70);
  font-size: 1.1rem;
  transition: border-color .18s, color .18s, background .18s;
  text-decoration: none;
}
.footer-social-btn:hover {
  border-color: var(--color-borderDeemphasized);
  color: var(--color-borderDeemphasized);
  background: var(--color-buttonPrimaryHover);
  text-decoration: none;
}


.footer-nav-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem 3rem; }
.footer-nav-heading { font-family:var(--font); font-weight:700; font-size:.9rem; color:var(--gray-90); margin-bottom:.6rem; padding-bottom:.4rem; border-bottom:2.5px solid var(--color-borderDeemphasized); display:inline-block; }
.footer-nav-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-nav-list a { font-family:var(--font); font-weight:400; font-size:.9rem; color:var(--gray-70); text-decoration:none; transition:color .15s; }
.footer-nav-list a:hover { color:var(--purple); text-decoration:none; }
.footer-copyright { margin-top:1.25rem; font-size:.8rem; color:var(--gray-40); text-align:center; }
@media (max-width:600px) { .footer-nav-grid { grid-template-columns:1fr 1fr; gap:1rem 1.5rem; } .footer-grid { gap:2rem; } }

/* ══════════════════════════════════════
TYPOGRAFIE
══════════════════════════════════════ */
h1 { font-size: clamp(1.75rem, 4vw + .5rem, 2.5rem); font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.5rem; line-height: 1.35; font-weight: 500; }
h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 500; }
h4 { font-size: var(--fontSizes-md); line-height: 1.4; font-weight: 500; }
p, li { font-family: var(--fonts-body); font-weight: var(--fontWeights-normal); line-height: 1.6; }
strong, b { font-weight: var(--fontWeights-semibold); }
a { color: var(--color-buttonPrimary); }
a:hover { text-decoration: underline; }

/* ══════════════════════════════════════
BARRIEREFREIHEIT
══════════════════════════════════════ */
.skip-link {
position: absolute; top: -100%; left: 1rem; z-index: 9999;
background: var(--color-backgroundInverted); color: var(--color-textProminent);
padding: .5rem 1rem; border-radius: 0 0 var(--radius) var(--radius);
font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ══════════════════════════════════════
BACKEND-MELDUNGEN
══════════════════════════════════════ */
.message,
.alert-message {
display: flex;
align-items: flex-start;
gap: .7rem;
padding: .8rem 1rem;
margin-bottom: .75rem;
border-radius: var(--radius-lg);
font-size: .9rem;
font-weight: 500;
line-height: 1.5;
border-left: 4px solid;
}
.message p, .alert-message p { margin: 0; }
.message::before,
.alert-message::before {
font-family: 'Bootstrap-Icons';
font-size: 1.05rem;
flex-shrink: 0;
margin-top: .1rem;
}
.message {
background: var(--color-buttonPrimaryHover);
border-color: var(--color-textProminent);
color: var(--color-backgroundBrandDark);
}
.message::before { content: '\F26A'; color: var(--color-textProminent); }
.alert-message {
background: var(--color-errorLow);
border-color: var(--color-error);
color: var(--color-errorHigh);
}
.alert-message::before { content: '\F333'; color: var(--color-error); }

/* ══════════════════════════════════════
ÖFFENTLICHER HEADER (Datenschutz, AGB, Impressum …)
══════════════════════════════════════ */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 2205;
background: var(--white);
border-bottom: 2px solid var(--color-backgroundBrandDark);
}
.site-header .inner {
max-width: 1024px;
margin: 0 auto;
padding: 0 1rem;
height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
}
.site-header .logo-wrap a {
display: flex;
align-items: center;
gap: .5rem;
}
.header-spacer { height: 74px; }

/* ══════════════════════════════════════
HERO / CONTENT (öffentliche Seiten)
══════════════════════════════════════ */
.hero { position: relative; overflow: hidden; padding: 0; }
.hero-inner { display: flex; flex-direction: column; position: relative; z-index: 1; }
.hero-content {
padding: 1rem 1.5rem 1.5rem;
color: var(--color-textProminent);
background: var(--white);
}
@media (min-width: 768px) {
.hero-content { padding: 1rem 2.5rem 2rem 2.5rem; }
}
.hero h1 {
color: var(--color-textProminent);
font-size: var(--fontSizes-md);
line-height: 1.2;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}