/* --- 1. GRUNDGERÜST --- */
html, body { background: #f8fafc !important; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; }
.grid-container { display: grid !important; grid-template-columns: 293px 1fr !important; min-height: 100vh !important; }
/* --- 2. SIDEBAR --- */
.grid-header { background: #dbeafe !important; padding: 20px !important; width: 293px !important; min-width: 293px !important; max-width: 293px !important; box-sizing: border-box; overflow: hidden !important; }
.logo-container { width: 100% !important; max-width: 220px !important; margin: 0 auto 20px auto !important; text-align: center !important; }
.logo-container img { width: 100% !important; height: auto !important; display: block !important; }
.sidebar-search { margin-bottom: 20px; padding: 0 10px; }
.sidebar-search input { width: 100%; padding: 8px; border: 1px solid #94a3b8; border-radius: 4px; box-sizing: border-box; }
/* --- 3. MENÜ-DESIGN --- */
.cy-nav, .cy-nav ul, .cy-nav li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.cy-nav a { text-decoration: none !important; border-bottom: 1px solid #bfdbfe !important; display: block !important; padding: 8px 10px; color: #1e293b !important; width: 270px !important; }
.cy-nav a:hover { background-color: #bfdbfe !important; }
.cy-nav .active > a { color: #1e3a8a !important; font-weight: 700 !important; }
.cy-nav > li > a { font-weight: 700 !important; color: #1e293b !important; padding: 10px 0 !important; display: block !important; }
.cy-nav ul li a { font-weight: 400 !important; padding: 5px 0 5px 25px !important; position: relative !important; color: #475569 !important; display: block !important; }
.cy-nav ul li a::before { content: ">" !important; position: absolute !important; left: 10px !important; color: #3b82f6 !important; font-weight: 700 !important; }
/* --- 4. CONTENT-LAYOUT --- */
.grid-main { padding: 0 !important; }
.subpage-hero { background-size: cover; background-position: center; padding: 60px 20px; text-align: center; color: white; min-height: 200px; display: flex; align-items: center; justify-content: center; background-color: #1e3a8a; }
.breadcrumb { padding: 20px 40px 0 40px; font-size: 0.9rem; color: #64748b; }
.subpage-content { padding: 20px 40px 40px 40px; max-width: 900px; line-height: 1.6; color: #1e293b; }
.project-footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid #e2e8f0; font-size: 0.85rem; color: #64748b; text-align: center; }
/* --- 5. TWIN4CLIM DESIGN-SYSTEM (BEREINIGT) --- */
blockquote { margin: 20px 0 !important; padding: 0 !important; border: none !important; display: block !important; }
blockquote strong { display: block !important; border-left: 6px solid #3b82f6 !important; background: #eff6ff !important; padding: 20px !important; margin: 0 !important; color: #1e3a8a !important; font-weight: normal !important; font-size: 1.05rem !important; }
blockquote a { display: block !important; border-left: 6px solid #ef4444 !important; background: #fee2e2 !important; padding: 20px !important; margin: 0 !important; color: #991b1b !important; text-decoration: none !important; font-size: 1.05rem !important; }
blockquote em { display: block !important; border-left: 6px solid #22c55e !important; background: #dcfce7 !important; padding: 20px !important; margin: 0 !important; color: #166534 !important; font-style: normal !important; font-size: 1.05rem !important; }
blockquote code { display: block !important; border-left: 6px solid #f59e0b !important; background: #fff7ed !important; padding: 20px !important; margin: 0 !important; color: #92400e !important; font-family: inherit !important; font-size: 1.05rem !important; }
/* --- 6. HILFSKLASSEN --- */
.shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 6px; border: 1px solid #e5e7eb; }
.badge { background: #e2e8f0 !important; padding: 2px 8px !important; border-radius: 12px !important; font-size: 0.8rem !important; color: #475569 !important; }
.button { display: inline-block; padding: 10px 20px; background: #3b82f6; color: white !important; border-radius: 6px; text-decoration: none; }
/* --- 7. MOBILE --- */
@media screen and (max-width: 768px) {
/* GLOBAL FIX: verhindert Überbreite durch Padding */
* {
box-sizing: border-box;
}
/* GRID auf 1 Spalte */
.grid-container {
grid-template-columns: 1fr !important;
}
/* SIDEBAR AUSBLENDEN */
.grid-header {
display: none !important;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
/* BURGER BUTTON SICHTBAR */
.mobile-menu-toggle {
display: block !important;
background: #1e3a8a;
color: white;
padding: 12px 16px;
font-size: 20px;
cursor: pointer;
text-align: center;
margin-bottom: 10px;
}
/* SIDEBAR ALS VOLLBREITES OVERLAY (statt 80%-Off-Canvas-Panel) */
body.sidebar-open .grid-header {
display: block !important;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh; /* korrekte Höhe auch bei ein-/ausblendender iOS-Adressleiste */
max-height: 100vh;
max-height: 100dvh;
background: #dbeafe;
z-index: 9999;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 20px;
transform: translateX(0);
}
/* Alle Links über die volle Breite, größere Tap-Fläche */
body.sidebar-open .cy-nav a {
width: 100% !important;
padding: 14px 16px !important;
font-size: 1.05rem !important;
box-sizing: border-box;
}
/* Verhindert, dass innere Menü-Elemente aus dem Grund-Theme
(z.B. #contentnav) selbst eine feste Höhe mit overflow:hidden
mitbringen und dadurch das Scrollen der Sidebar wirkungslos machen */
body.sidebar-open .grid-header #contentnav,
body.sidebar-open .grid-header .cy-nav,
body.sidebar-open .grid-header nav {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* CONTENT-BEREICH FIX: verhindert Überbreite */
.grid-main,
.grid-content,
.tm-content,
#content {
max-width: 100% !important;
width: 100% !important;
padding: 0 15px;
overflow-x: hidden;
}
}
/* verhindert das Verrutschen der Seite */
body.sidebar-open {
overflow: hidden;
}
/* Burger-Menü auf großen Bildschirmen ausblenden */
.mobile-menu-toggle {
display: none !important;
}
/* Nur auf Handy anzeigen */
@media screen and (max-width: 768px) {
.mobile-menu-toggle {
display: block !important;
}
}
/* --- 8. BACK TO TOP BUTTON — modernisiert --- */
.back-to-top {
position: fixed;
bottom: 22px;
right: 22px;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(0, 91, 187, 0.85); /* leicht transparent */
color: #ffffff !important;
border: 2px solid rgba(255,255,255,0.8); /* weißer Rand */
backdrop-filter: blur(4px); /* moderner Frosted-Glass-Effekt */
font-size: 22px;
text-decoration: none !important;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
transition: all 0.25s ease;
}
/* --- GLOBALER HEADER-FIX FÜR ALLE SEITEN --- */
.subpage-hero {
width: 100%;
height: 260px; /* Standardhöhe für Handy/Tablet */
background-size: cover; /* Bild füllt den Container */
background-position: center; /* Fokus zentriert */
background-repeat: no-repeat;
}
/* Große Monitore */
@media screen and (min-width: 1200px) {
.subpage-hero {
height: 200px; /* etwas flacher */
}
}
@media screen and (min-width: 1600px) {
.subpage-hero {
height: 160px; /* noch flacher */
}
}
.back-to-top:hover {
background: rgba(10, 106, 214, 0.95);
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
/* Footer-Logo gezielt verkleinern */
.footer-logo {
max-width: 250px !important; /* Passe diesen Wert an, z.B. 150px, 200px etc. */
height: auto !important;
display: block !important;
margin: 0 auto !important; /* Zentriert das Logo im Footer */
}