/* =========================================================
BSE Optical Bonding – style.css (FINAL bereinigt)
Fokus:
- Stabiles Sticky-Header Verhalten (nie ausblenden)
- Logo-Swap per .header.is-compact
- Layout: Logo links / NAV (inkl. Optical Bonding) mittig / CTA rechts
- Content max 1600px, Header max 1800px
========================================================= */
/* ---------- Variables ---------- */
:root{
--bg0:#f7f9fc;
--bg1:#ffffff;
--text:#0b1220;
--muted: rgba(11,18,32,.70);
--line: rgba(11,18,32,.12);
--card: rgba(11,18,32,.03);
--card2: rgba(11,18,32,.05);
/* Brand accents */
--accent:#c2177a; /* Magenta */
--accent2:#6a2bbf; /* Violett */
--shadow: 0 16px 44px rgba(11,18,32,.12);
--r: 18px;
/* Breiten */
--max: 1600px;
--maxHeader: 1800px;
--check: var(--accent, #c2177a); /* nutzt deinen Brand-Magenta */
}
html{
font-size: 18px; /* Test: macht ALLES mit rem sichtbar größer */
scroll-padding-top: 90px; /* Höhe deines Headers grob geschätzt */
}
/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family:"Barlow", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
font-weight:300;
font-size: 1.18rem;
line-height:1.7;
color:var(--text);
/* Platz für den fixen Header */
padding-top: 100px; /* ggf. auf 120–140px feintunen */
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
/* Content Container */
.container{
max-width: var(--max);
margin: 0 auto;
padding: 0 24px;
}
/* =========================================================
HEADER (Sticky, stabil)
========================================================= */
/* Fixierter Header – bleibt immer oben sichtbar */
.header{
position: fixed; /* statt sticky */
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* etwas „Luft“ im Header, damit er immer gleich hoch bleibt */
.header .container{
padding-top: 0px;
padding-bottom: 0px;
}
/* Layout: Logo | NAV (center) | Actions */
.navwrap{
display: grid;
grid-template-columns: 260px 1fr auto;
align-items: center;
gap: 18px;
padding: 4px 0; /* weniger Luft oben/unten */
min-height: 88px; /* statt 112px – Header wird spürbar schmaler */
transition: min-height .22s ease, box-shadow .22s ease;
}
.header.is-compact .navwrap{
min-height: 112px; /* gleiche Höhe wie normal */
box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
/* ---------- Logo Swap ---------- */
.brand{
position: relative;
display: block;
width: 260px; /* stabilisiert die Logo-Zone */
height: 96px;
}
.brand .logo{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: auto;
max-width: none;
opacity: 0;
transition: opacity .18s ease, transform .22s ease;
transform-origin: left center;
pointer-events: none;
}
.brand .logo--default{
height: 96px;
opacity: 1;
pointer-events: auto;
}
.brand .logo--compact{
height: 64px;
}
.header.is-compact .brand .logo--default{
opacity: 0;
pointer-events: none;
}
.header.is-compact .brand .logo--compact{
opacity: 1;
transform: translateY(-50%) scale(1.12);
pointer-events: auto;
}
/* ---------- NAV (center) ---------- */
.nav{
display:flex;
align-items:center;
justify-content:center; /* echte Zentrierung */
gap:18px;
margin:0;
padding:0;
}
/* Standard-Menü-Link */
.header .nav a{
font-family:"Barlow", Arial, sans-serif;
font-size: .9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .18em;
padding: 8px 10px;
border-radius: 12px;
color: rgba(11,18,32,.75);
position: relative;
white-space: nowrap;
transition: color .2s ease, background-color .2s ease;
}
.header .nav a:hover{ color:#4a2491; }
.header .nav a.active{
color:#4a2491;
background-color: rgba(74,36,145,.10);
}
/* Hover-Linie nur wenn nicht active */
.header .nav a:not(.active)::after{
content:"";
position:absolute;
left:50%;
bottom:-6px;
width:60%;
height:1px;
background:#4a2491;
border-radius:2px;
opacity:0;
transform: translateX(-50%) scaleX(0);
transform-origin:center;
transition: transform .2s ease, opacity .2s ease;
pointer-events:none;
}
.header .nav a:not(.active):hover::after{
opacity:1;
transform: translateX(-50%) scaleX(1);
}
/* Optical Bonding als Menü-Button:
-> Im HTML bitte als: Optical Bonding INS