:root{
--primary:#0f3a63;
--accent:#3a86ff;
--bg:#f6f8fb;
--surface:#ffffff;
--surface-2:#f2f4f7;
--text:#101828;
--muted:#667085;
--border:#e5e7eb;
--radius:12px;
--radius-sm:8px;
--shadow:0 6px 14px rgba(16,24,40,.06);
--header-h:72px;
--sidebar-w:260px;
--sidebar-collapsed-w:64px;
--section-y:64px;
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
--t-fast:180ms;
--t-med:280ms;
--t-slow:380ms;
--ease-out:cubic-bezier(.22,.61,.36,1);
--mnav-h:64px;
--mnav-blur:8px;
--collapsed-switch-nudge:-1px;
--icon-size:72px;
--icon-radius:16px;
--icon-pad:10px
}
html{
scroll-padding-top:var(--header-h)
}
[id]{
scroll-margin-top:var(--header-h)
}
section[id]{
scroll-margin-top:var(--header-h)
}
body.dark-theme{
--bg:#0b1220;
--surface:#0f172a;
--surface-2:#0b1220;
--text:#e5e7eb;
--muted:#d4d9e3;
--border:rgba(255,255,255,.14);
--primary:#60a5fa;
--accent:#60a5fa;
--shadow:0 8px 22px rgba(0,0,0,.45)
}
*{
margin:0;
padding:0;
box-sizing:border-box
}
html,body{
min-height:auto
}
html{
scroll-behavior:smooth
}
@media (prefers-reduced-motion: reduce), (pointer: coarse){
  html{ scroll-behavior:auto }
}
html,body{
overflow-x:hidden;
overscroll-behavior-x:none
}
img,video{
max-width:100%;
height:auto;
display:block
}
:focus-visible{
outline:2px dashed var(--accent);
outline-offset:3px
}
.hidden{
display:none!important
}
body{
background:var(--bg);
color:var(--text);
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
line-height:1.6;
padding-top:var(--header-h);
margin-left:0;
transition:margin-left var(--t-med) var(--ease-out),background .25s ease,color .25s ease;
will-change:auto
}
section{
padding:var(--section-y) 20px
}

@media (max-width:768px){
:root{
--section-y:48px
}

}
@media (min-width:961px){
body{
margin-left:var(--sidebar-collapsed-w)
}
body.sidebar-open{
margin-left:var(--sidebar-w)
}
.sidebar{
transform:none;
left:0
}
.sidebar.collapsed{
width:var(--sidebar-collapsed-w)
}
.sidebar .toggle{
position:absolute;
top:24px;
right:11px;
transform:none;
width:40px;
height:40px;
border-radius:999px;
display:grid;
place-items:center;
background:var(--surface);
color:#0e1624;
border:1px solid var(--border);
box-shadow:0 6px 16px rgba(16,24,40,.1);
z-index:1101;
cursor:pointer;
transition:transform var(--t-med) var(--ease-out),left var(--t-med) var(--ease-out),right var(--t-med) var(--ease-out);
will-change:left,right,transform
}
.sidebar.collapsed .toggle{
right:auto;
left:50%;
transform:translateX(-50%)
}

}
@media (max-width:960px){
body{
margin-left:0
}
.sidebar{
transform:translateX(-100%);
transition:transform var(--t-med) var(--ease-out);
will-change:transform;
box-shadow:0 16px 30px rgba(0,0,0,.22);
border-right:1px solid var(--border)
}
body.sidebar-open .sidebar{
transform:translateX(0)
}
body.sidebar-open{
margin-left:0;
transition:none
}
body.sidebar-open::before{
display:block
}
.sidebar .toggle{
position:fixed;
left:12px;
top:calc(var(--header-h)+10px);
width:40px;
height:40px;
border-radius:999px;
display:grid;
place-items:center;
background:var(--surface);
color:#0e1624;
border:1px solid var(--border);
box-shadow:0 6px 16px rgba(0,0,0,.12);
z-index:1202;
cursor:pointer;
pointer-events:auto;
padding:0;
line-height:1;
-webkit-tap-highlight-color:transparent;
transition:box-shadow .18s,transform .18s
}
body.sidebar-open .sidebar .toggle{
left:calc(min(88vw,var(--sidebar-w)) - 22px);
transition:left var(--t-med) var(--ease-out)
}
.sidebar .toggle:hover{
box-shadow:0 10px 22px rgba(0,0,0,.14)
}
.sidebar .toggle:active{
transform:scale(.98)
}
body.dark-theme .sidebar .toggle{
background:#0f172a;
color:#e6e9ef;
border-color:rgba(255,255,255,.14);
box-shadow:0 6px 16px rgba(0,0,0,.45)
}
.sidebar .top-bar{
padding-top:10px;
padding-bottom:10px
}
.sidebar .nav-links a,.sidebar .user-links a{
height:44px
}
body.sidebar-open::before{
content:"";
position:fixed;
top:var(--header-h);
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.35);
z-index:1200;
pointer-events:none
}

}
.sidebar{
position:fixed;
top:var(--header-h);
left:0;
width:var(--sidebar-w);
height:calc(100vh - var(--header-h));
background:var(--surface);
border-right:1px solid var(--border);
padding:18px;
overflow-y:auto;
overflow-x:hidden;
border-top-right-radius:var(--radius);
border-bottom-right-radius:var(--radius);
z-index:1100;
box-shadow:0 8px 24px rgba(13,27,42,0.1);
transform:translateZ(0);
backface-visibility:hidden;
contain:paint;
will-change:transform;
transition:transform var(--t-slow) var(--ease-out),width calc(var(--t-slow)+80ms) var(--ease-out),box-shadow var(--t-med) ease
}
.sidebar.collapsed{
width:var(--sidebar-collapsed-w)
}
.sidebar::-webkit-scrollbar{
width:10px
}
.sidebar::-webkit-scrollbar-track{
background:transparent
}
.sidebar::-webkit-scrollbar-thumb{
background:#d9dee7;
border-radius:8px;
border:2px solid transparent;
background-clip:content-box
}
body.dark-theme .sidebar::-webkit-scrollbar-thumb{
background:#334155
}
header#mainHeader{
z-index:1000
}
.container{
max-width:1200px;
margin:0 auto;
padding:0 20px
}
.muted{
color:var(--muted)
}
.sr-only{
position:absolute;
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0
}
header#mainHeader{
position:fixed;
top:0;
left:0;
right:0;
height:var(--header-h);
background:rgba(255,255,255,.78);
backdrop-filter:saturate(140%) blur(8px);
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px
}
body.dark-theme header#mainHeader{
background:rgba(15,23,42,.65)
}
header .logo{
display:flex;
align-items:center;
gap:12px
}
header .logo img{
height:40px;
width:auto
}
header .logo a,header .logo a:visited{
color:inherit;
text-decoration:none
}
.skip-link{
position:absolute;
left:-999px;
top:auto;
width:1px;
height:1px;
overflow:hidden
}
.skip-link:focus{
left:12px;
top:12px;
width:auto;
height:auto;
padding:.5rem .75rem;
background:#fff;
border:1px solid var(--border);
border-radius:10px;
z-index:15000
}
.datum-anzeige{
color:var(--muted);
font-size:.95rem
}
.hb-logo-btn{
--border-right:4px;
--text-stroke-color:rgba(15,58,99,.5);
--animation-color:#3a86ff;
--fs-size:16px;
letter-spacing:.08em;
text-decoration:none;
font-size:var(--fs-size);
font-weight:700;
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
position:relative;
text-transform:uppercase;
color:transparent;
-webkit-text-stroke:1px var(--text-stroke-color);
display:inline-block;
line-height:1;
user-select:none
}
.hb-logo-btn .actual-text{
text-decoration:none
}
.hb-logo-btn .hover-text{
position:absolute;
inset:0;
box-sizing:border-box;
color:var(--animation-color);
width:0%;
border-right:var(--border-right) solid var(--animation-color);
overflow:hidden;
transition:.35s ease;
will-change:width;
-webkit-text-stroke:1px var(--animation-color)
}
.hb-logo-btn:hover .hover-text{
width:100%
}
.hb-logo-btn,.hb-logo-btn:visited{
border:none
}
.hb-logo-btn:focus-visible{
outline:2px solid var(--accent);
border-radius:4px
}
.top-bar{
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:"logo btn";
align-items:center;
gap:8px;
padding:12px 12px;
border-bottom:1px solid rgba(0,0,0,.06);
min-height:60px
}
body.dark-theme .top-bar{
border-bottom-color:rgba(255,255,255,.10)
}
.sidebar-logo{
grid-area:logo;
min-width:0;
overflow:hidden;
display:flex;
align-items:center;
gap:10px
}
.sidebar-logo .logo-text{
font-weight:700;
font-size:1.05rem;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
color:var(--primary)
}
body.dark-theme .sidebar-logo .logo-text{
color:#e6e9ef
}
.toggle{
grid-area:btn;
display:inline-grid;
place-items:center;
width:38px;
height:38px;
border:none;
border-radius:999px;
background:#fff;
color:#0e1624;
cursor:pointer;
box-shadow:0 6px 16px rgba(0,0,0,.08);
transition:transform var(--t-med) var(--ease-out),left var(--t-med) var(--ease-out),right var(--t-med) var(--ease-out);
backface-visibility:hidden
}
.toggle:active{
transform:scale(.96)
}
body.dark-theme .toggle{
background:#141a2a;
color:#e6e9ef
}
.sidebar.collapsed .top-bar{
grid-template-columns:1fr;
grid-template-areas:"logo" "btn";
row-gap:10px;
justify-items:center
}
.sidebar.collapsed .logo-text{
display:none
}
.search-box{
position:relative;
padding:8px 10px 12px
}
.search-box input{
width:100%;
height:40px;
border-radius:12px;
border:none;
padding:0 40px 0 14px;
background:#fff;
color:#0e1624;
box-shadow:inset 0 0 0 1px #e8ecf3;
transition:box-shadow .18s ease
}
.search-box input:focus{
box-shadow:0 0 0 3px rgba(58,134,255,.18);
outline:none
}
.search-box i{
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%);
color:#7a8699;
pointer-events:none
}
body.dark-theme .search-box input{
background:#0f172a;
color:#e6e9ef;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)
}
body.dark-theme .search-box i{
color:#ffffff
}
.sidebar.collapsed .search-box{
padding:10px 8px;
min-height:48px;
display:flex;
justify-content:center;
align-items:center
}
.sidebar.collapsed .search-box input{
display:none
}
.sidebar.collapsed .search-box i{
position:static;
transform:none;
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:12px;
background:var(--surface-2);
color:inherit
}
.nav-links,.user-links{
list-style:none;
margin:10px 0;
padding:0
}
/* selector fixed above */
.nav-links a,.user-links a{
position:relative;
display:flex;
align-items:center;
gap:12px;
height:44px;
padding:10px 12px;
border-radius:12px;
color:inherit;
text-decoration:none;
border-left:3px solid transparent;
transition:background .18s ease,border-color .18s ease,color .18s ease
}
.nav-links a:hover,.user-links a:hover{
background:linear-gradient(145deg,var(--surface),var(--surface-2));
border-left-color:transparent;
color:var(--primary);
box-shadow:0 2px 6px rgba(0,0,0,.08);
transform:translateY(-1px);
transition:all .25s var(--ease-out)
}
body.dark-theme .nav-links a:hover,body.dark-theme .user-links a:hover{
background:linear-gradient(145deg,#111827,#1e293b);
color:var(--accent);
box-shadow:0 2px 6px rgba(0,0,0,.5)
}
.nav-links a.active{
background:linear-gradient(145deg,var(--surface-2),var(--surface));
color:var(--primary);
border-left:3px solid var(--accent);
font-weight:600;
box-shadow:inset 0 0 6px rgba(0,0,0,.08)
}
body.dark-theme .nav-links a.active{
background:linear-gradient(145deg,#1e293b,#111827);
color:var(--accent);
border-left:3px solid var(--accent);
font-weight:600;
box-shadow:inset 0 0 6px rgba(255,255,255,.08)
}
.nav-links i,.user-links i{
min-width:20px;
font-size:18px
}
.section-title{
margin:12px 8px 6px;
color:var(--muted);
font-size:.8rem;
text-transform:uppercase;
letter-spacing:.08em
}
.sidebar.collapsed .section-title{
display:none
}
.sidebar.collapsed .nav-links{
padding:8px 0!important
}
.sidebar.collapsed .nav-links li{
margin:6px 0!important;
display:flex!important;
justify-content:center!important
}
.sidebar.collapsed .nav-links a,.sidebar.collapsed .bottom-controls a{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:46px!important;
height:46px!important;
border-radius:12px!important;
padding:0!important;
margin:0 auto!important;
gap:0!important;
background:transparent!important;
border:1px solid transparent!important;
box-shadow:none!important;
transition:background var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) ease!important
}
.sidebar.collapsed .bottom-controls a{
margin:0 auto!important;
justify-content:center!important
}
.sidebar.collapsed .nav-links a:hover,.sidebar.collapsed .bottom-controls a:hover{
background:var(--surface-2)!important;
border-color:var(--border)!important;
transform:translateY(-1px);
box-shadow:0 2px 6px rgba(0,0,0,.06)!important
}
.sidebar.collapsed .nav-links a i,.sidebar.collapsed .bottom-controls a i{
display:grid!important;
place-items:center!important;
width:22px!important;
height:22px!important;
min-width:0!important;
margin:0!important;
line-height:1!important;
font-size:20px!important;
opacity:.92
}
.sidebar.collapsed .nav-links a span,.sidebar.collapsed .user-links a span{
display:none
}
.sidebar.collapsed .bottom-controls .theme-toggle{
position:relative;
width:46px;
height:46px;
display:grid;
place-items:center;
margin:0 auto;
padding:0!important;
left:auto;
right:auto;
transform:none;
justify-self:center;
box-sizing:border-box
}
.sidebar.collapsed .bottom-controls .theme-toggle span{
display:none
}
.sidebar.collapsed .bottom-controls .switch{
display:none!important
}
.sidebar.collapsed .bottom-controls .theme-toggle::before{
content:"\f186";
font-family:"Font Awesome 6 Free";
font-weight:400;
font-style:normal;
font-size:20px;
line-height:1;
display:grid;
place-items:center;
width:46px;
height:46px;
border-radius:12px;
border:1px solid transparent;
background:transparent;
color:inherit;
box-shadow:none;
transition:background var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) ease,box-shadow var(--t-fast) ease
}
.sidebar.collapsed .bottom-controls .theme-toggle:hover::before{
background:var(--surface-2);
border-color:var(--border);
transform:translateY(-1px);
box-shadow:0 2px 6px rgba(0,0,0,.08)
}
body.dark-theme .sidebar.collapsed .bottom-controls .theme-toggle::before{
background:#111827;
border-color:rgba(255,255,255,.14)
}
body.dark-theme .sidebar.collapsed .bottom-controls .theme-toggle:hover::before{
background:#1e293b;
box-shadow:0 2px 6px rgba(0,0,0,.45)
}
.sidebar.collapsed #themeToggle{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
border:0;
outline:0
}
.sidebar.collapsed #themePuck,.sidebar.collapsed .theme-puck,.sidebar.collapsed .theme-button{
display:none!important
}
.sidebar:not(.collapsed) #themePuck,.sidebar:not(.collapsed) .theme-puck,.sidebar:not(.collapsed) .theme-button{
display:inline-flex!important
}
.sidebar.collapsed .bottom-controls{
width:var(--sidebar-collapsed-w);
margin:0 auto;
padding:8px 0 10px;
display:grid;
grid-template-columns:1fr;
justify-items:center
}
.sidebar.collapsed .bottom-controls>*{
justify-self:center
}
.sidebar.collapsed .bottom-controls .switch{
margin:0 auto!important
}
.sidebar.collapsed .nav-links a[data-label]::after{
content:attr(data-label);
position:absolute;
left:calc(100%+10px);
top:50%;
transition:opacity .18s ease .06s,transform .18s ease .06s;
background:rgba(0,0,0,.85);
color:#fff;
font-size:.85rem;
padding:6px 10px;
border-radius:8px;
box-shadow:0 6px 18px rgba(0,0,0,.18);
opacity:0;
pointer-events:none
}
.sidebar.collapsed .nav-links a:hover::after{
opacity:1;
transform:translateY(-50%) translateX(2px)
}
.bottom-controls{
margin-top:auto;
padding:8px 10px 10px;
display:grid;
gap:10px
}
.bottom-controls a{
display:flex;
align-items:center;
gap:12px;
height:44px;
padding:0 12px;
border-radius:12px;
color:inherit;
text-decoration:none
}
.bottom-controls .theme-toggle{
display:flex;
align-items:center;
gap:10px
}
.bottom-controls .switch{
position:relative;
display:inline-block;
width:46px;
height:26px
}
#themeSwitcher,#themePuck,#themeToggle{
will-change:transform
}
#themeToggle{
-webkit-appearance:none;
appearance:none;
width:46px;
height:26px;
border-radius:999px;
background:#e5e7eb;
position:relative;
border:1px solid var(--border);
cursor:pointer;
outline:none;
transition:background var(--t-fast) ease;
display:inline-block
}
#themeToggle::after{
content:"";
position:absolute;
top:50%;
left:3px;
transform:translateY(-50%);
width:20px;
height:20px;
border-radius:50%;
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.15);
transition:left var(--t-fast) var(--ease-out)
}
#themeToggle:checked{
background:rgba(58,134,255,.28);
border-color:rgba(58,134,255,.6)
}
#themeToggle:checked::after{
left:23px
}
body.dark-theme #themeToggle{
background:#0f172a;
border-color:rgba(255,255,255,.14)
}
body.dark-theme #themeToggle::after{
background:#e6e9ef
}
#why-us{
background:linear-gradient(180deg,#e3e6ec,#cbd3df 85%);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border)
}
/* =========================================================
   ÜBER UNS – Blaues Panel wie Sticky-Bridge + Logo zentriert
========================================================= */

.about-image.about-image--logo{
  position:relative;
  width:100%;
  max-width:520px;
  margin-inline:auto;

  /* gleiche „Bildfläche“ Wirkung */
  aspect-ratio: 4 / 3;

  border-radius:18px;
  overflow:hidden;
  display:grid;
  place-items:center;

  border:1px solid color-mix(in oklab, var(--border), transparent 10%);
  background:
    radial-gradient(900px 420px at 30% 20%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(900px 420px at 70% 10%, rgba(109,40,217,.18), transparent 64%),
    radial-gradient(900px 420px at 55% 70%, rgba(245,158,11,.12), transparent 66%),
    linear-gradient(135deg, #040611 0%, #08122f 55%, #0b1220 100%);

  box-shadow:0 28px 70px rgba(16,24,40,.18);
}

/* Subtiles Grid wie im Sticky-Bridge */
.about-image.about-image--logo::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(720px circle at 50% 30%, #000 40%, transparent 74%);
  -webkit-mask-image: radial-gradient(720px circle at 50% 30%, #000 40%, transparent 74%);
  pointer-events:none;
}

/* Logo perfekt zentriert (nicht riesig, wirkt wie Bild-Motiv) */
.about-image.about-image--logo .about-image__logo{
  position:relative;
  z-index:1;
  width:min(220px, 48%);
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.55));
  transform: translateY(6px);
}

/* Tablet */
@media (max-width:900px){
  .about-image.about-image--logo{ max-width:420px; }
}

/* Handy */
@media (max-width:640px){
  .about-image.about-image--logo{
    max-width:420px;
    aspect-ratio: 16 / 13;
  }
  .about-image.about-image--logo .about-image__logo{
    width:min(190px, 54%);
    transform: translateY(4px);
  }
}




#why-us .about-container{
display:grid;
grid-template-columns:1fr;
align-items:center;
justify-items:center;
padding:16px 0;
text-align:center
}
#why-us .about-text{
max-width:820px;
margin:0 auto;
text-align:center
}
#why-us h3{
font-size:clamp(1.9rem,1.1rem+1.6vw,2.4rem);
font-weight:900;
color:#18304b;
margin:0 0 14px;
position:relative;
padding-bottom:10px;
text-align:left;
margin-left:0;
margin-right:auto
}
#why-us h3::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:96px;
height:3px;
border-radius:3px;
background:var(--primary);
opacity:.7
}
#why-us ul{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:10px 12px;
max-width:980px;
justify-content:center;
align-items:center;
margin-inline:auto
}
#why-us li{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:10px 18px;
border:1px solid var(--border);
border-radius:999px;
background:linear-gradient(180deg,#fafbfc,#edf0f5);
color:var(--text);
font-weight:600;
box-shadow:0 2px 4px rgba(16,24,40,.06);
transition:all .2s ease
}
#why-us li:hover{
background:linear-gradient(180deg,#ffffff,#f3f6fa);
border-color:color-mix(in oklab,var(--border),var(--primary) 25%);
box-shadow:0 8px 20px rgba(16,24,40,.12);
transform:translateY(-2px)
}
@media (max-width:900px){
#why-us .about-text{
margin:0 auto;
text-align:center
}

}

/* =========================================================*/
/* =========================================================
   MEGA HERO – FINAL (no photo, pro typography, smooth)
========================================================= */

.hero.hero--mega{
  --brand-purple:#6d28d9;
  --brand-cyan:#22d3ee;
  --brand-orange:#f59e0b;

  --mx:55%;
  --my:42%;
  --px:0px;
  --py:0px;

  --rx:0deg;
  --ry:0deg;

  position:relative;
  display:grid;
  align-items:center;
  min-height: clamp(620px, 86vh, 980px);
  padding: calc(var(--header-h) + 44px) 20px 72px;
  overflow:hidden;
  color:#fff;
  text-align:center;

  background: linear-gradient(135deg, #040611 0%, #08122f 55%, #0b1220 100%);
}

.hero.hero--mega .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* Aurora 1 (strong + smooth) */
.hero.hero--mega .bg-aurora{
  position:absolute;
  inset:-22%;
  opacity:0;
  background:
    radial-gradient(900px circle at var(--mx) var(--my), rgba(109,40,217,.56), transparent 62%),
    radial-gradient(820px circle at calc(var(--mx) + 16%) calc(var(--my) - 10%), rgba(34,211,238,.34), transparent 66%),
    radial-gradient(620px circle at calc(var(--mx) - 16%) calc(var(--my) + 16%), rgba(245,158,11,.22), transparent 66%);
  filter: blur(14px);
  transform: translate3d(var(--px), var(--py), 0);
  transition: opacity 900ms var(--ease-out) 120ms;
  will-change: transform, opacity;
}

/* Aurora 2 (depth) */
.hero.hero--mega .bg-aurora2{
  position:absolute;
  inset:-28%;
  opacity:0;
  background:
    conic-gradient(from 210deg at var(--mx) var(--my),
      rgba(34,211,238,.22),
      rgba(109,40,217,.18),
      rgba(245,158,11,.14),
      rgba(34,211,238,.22));
  filter: blur(22px);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--px) * -0.6), calc(var(--py) * -0.6), 0);
  transition: opacity 900ms var(--ease-out) 160ms;
  animation: auroraSpin 16s linear infinite;
  will-change: transform, opacity;
}

@keyframes auroraSpin{
  0%{ transform: translate3d(calc(var(--px) * -0.6), calc(var(--py) * -0.6), 0) rotate(0deg); }
  100%{ transform: translate3d(calc(var(--px) * -0.6), calc(var(--py) * -0.6), 0) rotate(360deg); }
}

/* Grid (crisp but subtle) */
.hero.hero--mega .bg-grid{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    linear-gradient(rgba(255,255,255,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.085) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(860px circle at var(--mx) var(--my),
    rgba(0,0,0,1), rgba(0,0,0,.18) 62%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(860px circle at var(--mx) var(--my),
    rgba(0,0,0,1), rgba(0,0,0,.18) 62%, rgba(0,0,0,0) 100%);
  transition: opacity 900ms var(--ease-out) 200ms;
}

/* Sheen sweep (visible, cheap) */
.hero.hero--mega .bg-sheen{
  position:absolute;
  inset:0;
  opacity:0;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,0) 65%);
  transform: translateX(-60%);
  mix-blend-mode: overlay;
  animation: sheenMove 7.5s linear infinite;
  transition: opacity 900ms var(--ease-out) 240ms;
  will-change: transform;
}

@keyframes sheenMove{
  0%{ transform: translateX(-65%); }
  100%{ transform: translateX(65%); }
}

/* Vignette + focus */
.hero.hero--mega .bg-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px circle at 50% 18%, rgba(0,0,0,.06), rgba(0,0,0,.68) 72%),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.72) 82%);
  opacity:1;
}

/* Noise (light) */
.hero.hero--mega .bg-noise{
  position:absolute;
  inset:0;
  opacity:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.5"/></svg>');
  mix-blend-mode: normal;
  transition: opacity 900ms var(--ease-out) 280ms;
}

/* Layout shell */
.hero.hero--mega .hero-shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  display:grid;
  place-items:center;
}

/* Card – typography + spacing polished */
.hero.hero--mega .hero-card{
  position:relative;
  width:min(920px, 100%);
  padding: 34px 26px;

  border-radius: calc(var(--radius) + 14px);
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);

  box-shadow: 0 46px 140px rgba(0,0,0,.52), 0 16px 40px rgba(0,0,0,.28);

  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity 900ms var(--ease-out) 140ms, transform 900ms var(--ease-out) 140ms;

  display:grid;
  justify-items:center;
  gap: 10px;
}

/* Glow ring (more “pro”) */
.hero.hero--mega .hero-card::before{
  content:"";
  position:absolute;
  inset:-28px;
  border-radius: inherit;
  z-index:-1;
  background:
    radial-gradient(closest-side at var(--mx) var(--my), rgba(34,211,238,.22), transparent 62%),
    radial-gradient(closest-side at calc(var(--mx) - 14%) calc(var(--my) + 12%), rgba(109,40,217,.22), transparent 62%);
  filter: blur(18px);
  opacity: .88;
}

/* Brand row */
.hero.hero--mega .hero-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom: 4px;
}

.hero.hero--mega .hero-logo{
  width: 90px;
  height: auto;
  aspect-ratio: 1/1;
  filter: drop-shadow(0 24px 52px rgba(109,40,217,.42))
          drop-shadow(0 16px 40px rgba(34,211,238,.26));
}

.hero.hero--mega .hero-tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 750;
  font-size: .92rem;
  letter-spacing: .01em;
}

/* Headline polished */
.hero.hero--mega h1{
  font-size: clamp(2.25rem, 3.35vw + 1rem, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 950;
  margin: 2px 0 6px;
  text-wrap: balance;
}

/* Copy polished */
.hero.hero--mega p{
  margin: 0 auto;
  max-width: 68ch;
  font-size: 1.08rem;
  line-height: 1.62;
  color: rgba(255,255,255,.90);
  text-wrap: pretty;
}

/* Trust pills */
.hero.hero--mega .hero-trust{
  margin-top: 10px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px 14px;
  color: rgba(255,255,255,.84);
  font-weight: 750;
  font-size: .95rem;
}

.hero.hero--mega .hero-trust span{
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

/* Intro trigger */
.hero.hero--mega.is-loaded .bg-aurora{ opacity:1; }
.hero.hero--mega.is-loaded .bg-aurora2{ opacity:.95; }
.hero.hero--mega.is-loaded .bg-grid{ opacity:.28; }
.hero.hero--mega.is-loaded .bg-sheen{ opacity:.35; }
.hero.hero--mega.is-loaded .bg-noise{ opacity:.08; }

.hero.hero--mega.is-loaded .hero-card{
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform, opacity;
}



/* =========================================================
   Mobile: wowiger (sichtbarer, aber ohne Lag)
========================================================= */

@media (pointer: coarse), (max-width: 640px){
  .hero.hero--mega{
    padding: calc(var(--header-h) + 22px) 16px 54px;
    min-height: 58vh;
  }

  /* Mobile: keine Parallax/Tracking => stabil */
  .hero.hero--mega .bg-aurora,
  .hero.hero--mega .bg-aurora2{
    transform: none !important;
  }

  /* Mobile sichtbarer */
  .hero.hero--mega .bg-aurora{ filter: blur(12px); }
  .hero.hero--mega .bg-aurora2{ filter: blur(18px); opacity: .0; } /* Intro regelt */

  .hero.hero--mega.is-loaded .bg-aurora2{ opacity: .98; }
  .hero.hero--mega .bg-sheen{ animation-duration: 9.5s; opacity: .28; }
  .hero.hero--mega.is-loaded .bg-grid{ opacity: .24; background-size: 64px 64px; }
  .hero.hero--mega.is-loaded .bg-noise{ opacity: .06; }

  .hero.hero--mega .hero-card{
    padding: 20px 14px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,.08);
  }

  .hero.hero--mega .hero-logo{ width: 76px; }
  .hero.hero--mega h1{
    font-size: clamp(1.85rem, 5.4vw + 1rem, 2.55rem);
    letter-spacing: -0.03em;
  }
  .hero.hero--mega p{ font-size: .98rem; max-width: 46ch; }
  .hero.hero--mega .hero-tag{ font-size: .86rem; padding: 7px 10px; }

  /* Card kein Tilt */
  .hero.hero--mega.is-loaded .hero-card{ transform: translateY(0) scale(1) !important; }
}

/* Reduced motion */
.hero.hero--mega.reduced-motion .bg-aurora2,
.hero.hero--mega.reduced-motion .bg-sheen{
  animation: none !important;
}
.hero.hero--mega.reduced-motion .bg-aurora,
.hero.hero--mega.reduced-motion .bg-aurora2,
.hero.hero--mega.reduced-motion .bg-grid,
.hero.hero--mega.reduced-motion .bg-sheen,
.hero.hero--mega.reduced-motion .bg-noise,
.hero.hero--mega.reduced-motion .hero-card{
  transition: none !important;
}




.scroll-down{
position:absolute;
left:50%;
bottom:20px;
transform:translateX(-50%);
display:inline-grid;
place-items:center;
width:44px;
height:44px;
border-radius:999px;
color:#fff;
background:rgba(0,0,0,.22);
backdrop-filter:blur(6px) saturate(120%);
-webkit-backdrop-filter:blur(6px) saturate(120%);
border:1px solid rgba(255,255,255,.25);
box-shadow:0 6px 16px rgba(0,0,0,.22);
text-decoration:none;
transition:transform .18s var(--ease-out),filter .18s ease,opacity .18s ease;
opacity:.95;
z-index:2
}
.scroll-down i{
font-size:18px;
line-height:1
}
.scroll-down:hover{
transform:translateX(-50%) translateY(-2px);
filter:brightness(1.05)
}
.scroll-down:active{
transform:translateX(-50%) translateY(0)
}
body.dark-theme .scroll-down{
background:rgba(255,255,255,.10);
border-color:rgba(255,255,255,.22);
color:#e6e9ef
}
/* Performance: reduce expensive blur/backdrop on mobile */
@media (pointer: coarse), (max-width: 640px){
  header#mainHeader{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.92);
  }
  body.dark-theme header#mainHeader{
    background:rgba(15,23,42,.88);
  }
  .scroll-down{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
@media (max-width:520px){
.scroll-down{
width:40px;
height:40px;
bottom:16px
}

}

/* =========================================================
   QUICK OFFERS (3 Cards) – FINAL PRO
   - zentriert (Desktop & Laptop)
   - responsive: 3 / 2 / 1 Spalten
   - Hover/Fokus: Base-Text verschwindet, Overlay erscheint
========================================================= */

.quick-offers{
  /* wie andere Sections: kein extra "Band" */
  padding: var(--section-y) 20px;
  background: transparent;
  border: 0;
}

.offers-wrap{
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
}

.offers-head{ display:none; }

.offers-grid{
  width: 100%;
  max-width: 960px; /* stärker zentriert */
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px; /* deutlich mehr Luft */
  justify-items: center;
}

.offer-card{
  --accent:#22d3ee;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  isolation: isolate;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s ease;
  max-width: 300px;
}

.offer-card--cyan{--accent:#22d3ee}
.offer-card--purple{--accent:#6d28d9}
.offer-card--orange{--accent:#f59e0b}

.offer-hit{
  position:absolute;
  inset:0;
  z-index:1;
}

.offer-media{
  height: 160px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(520px 200px at 30% 25%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in oklab, var(--surface-2), var(--surface) 35%), var(--surface));
}

.offer-media img{
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(16,24,40,.18));
  transform: translateY(6px);
  transition: transform .25s var(--ease-out);
}

.offer-base{
  position:relative;
  z-index:2;
  padding: 14px 14px 18px;
  display:grid;
  gap:6px;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}

.offer-badge{
  width:fit-content;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #111827));
}

.offer-base h4{
  margin:0;
  font-weight:900;
  font-size:1.1rem;
}

.offer-base p{
  margin:0;
  color:var(--muted);
  font-weight:600;
}

.offer-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,6,23,.18), rgba(2,6,23,.74) 65%),
    radial-gradient(520px 260px at 30% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%);
  transform: translateY(10px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}

.offer-overlay-inner{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  display:grid;
  gap:8px;
  color:#fff;
}

.offer-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.offer-btn{
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  color:#071019;
  background: linear-gradient(135deg, #22d3ee, #6d28d9);
}

.offer-btn--ghost{
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
@media (hover:hover){
  .offer-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(16,24,40,.14);
    border-color: color-mix(in oklab, var(--border), var(--primary) 18%);
  }
  .offer-card:hover .offer-base{ opacity:0; transform:translateY(8px) }
  .offer-card:hover .offer-overlay{ opacity:1; transform:translateY(0); pointer-events:auto }
  .offer-card:hover .offer-media img{ transform:translateY(0) }
}

.offer-card:focus-within .offer-base{ opacity:0; transform:translateY(8px) }
.offer-card:focus-within .offer-overlay{ opacity:1; transform:translateY(0); pointer-events:auto }

@media (max-width: 1024px){
  .offers-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 680px;
    gap: 26px;
  }
}

@media (max-width: 640px){
  .quick-offers{ padding: 42px 16px; }
  .offers-grid{
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 20px;
  }
  .offer-media{ height: 142px; }
  .offer-media img{ width: 84px; height: 84px; }
  .offer-base{ padding: 14px 14px 18px; }
}
.card-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

@media (max-width: 480px){
  .card-container{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* =========================================================
   STICKY BRIDGE (pro) – Bild bleibt sticky, Content „schwebt“ drüber
   - kein background-attachment:fixed (iOS lag)
========================================================= */

.sticky-bridge{
  padding: 0 20px;
}

.sticky-bridge__wrap{
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

/* Sticky Bildfläche */
.sticky-bridge__sticky{
  position: sticky;
  top: calc(var(--header-h) + 14px);
  height: clamp(320px, 56vh, 520px);
  border-radius: calc(var(--radius) + 14px);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border), transparent 10%);
  background:
    radial-gradient(900px 420px at 30% 20%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(900px 420px at 70% 10%, rgba(109,40,217,.18), transparent 64%),
    radial-gradient(900px 420px at 55% 70%, rgba(245,158,11,.12), transparent 66%),
    linear-gradient(135deg, #040611 0%, #08122f 55%, #0b1220 100%);
  box-shadow: 0 46px 140px rgba(0,0,0,.22);
}

body.dark-theme .sticky-bridge__sticky{
  border-color: rgba(255,255,255,.14);
}

/* Subtiles Grid */
.sticky-bridge__sticky::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(720px circle at 50% 30%, #000 40%, transparent 74%);
  -webkit-mask-image: radial-gradient(720px circle at 50% 30%, #000 40%, transparent 74%);
  pointer-events:none;
}

/* Center piece */
.sticky-bridge__center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:1;
}

.sticky-bridge__center img{
  width: 168px;
  height: 168px;
  object-fit: contain;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.55));
  transform: translateY(8px);
}

/* Sticky-Bridge Center Logo – icon-like rotation */
.sticky-bridge__logo{
  animation: stickyLogoSpin 12s linear infinite, stickyLogoFloat 3.6s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

@keyframes stickyLogoSpin{
  from{ transform: translateY(8px) rotate(0deg); }
  to{ transform: translateY(8px) rotate(360deg); }
}
@keyframes stickyLogoFloat{
  0%,100%{ transform: translateY(8px) rotate(0deg); }
  50%{ transform: translateY(2px) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .sticky-bridge__logo{ animation: none !important; }
}

/* Floating Content Card */
.sticky-bridge__float{
  position: relative;
  z-index: 2;
  margin-top: -92px;
  padding: 18px;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  box-shadow: 0 18px 52px rgba(16,24,40,.14);
}

body.dark-theme .sticky-bridge__float{
  background: rgba(15,23,42,.78);
  border-color: rgba(255,255,255,.14);
}

.sticky-bridge__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.sticky-bridge__item{
  border: 1px solid color-mix(in oklab, var(--border), transparent 5%);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid;
  gap: 4px;
}

body.dark-theme .sticky-bridge__item{
  background: var(--surface);
  border-color: rgba(255,255,255,.14);
}

.sticky-bridge__item strong{ font-weight: 900; }
.sticky-bridge__item p{
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.45;
}

.sticky-bridge__item a{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 900;
  color: var(--primary);
}
.sticky-bridge__item a:hover{ text-decoration: underline; }

/* Spacer, damit danach nicht „nichts“ kommt */
.sticky-bridge__spacer{ height: 54px; }

@media (max-width: 980px){
  .sticky-bridge__grid{ grid-template-columns: 1fr; }
  .sticky-bridge__float{ margin-top: -72px; }
  .sticky-bridge__sticky{ height: clamp(280px, 44vh, 460px); }
  .sticky-bridge__center img{ width: 140px; height: 140px; }
}

@media (max-width: 640px){
  .sticky-bridge{ padding: 0 16px; }
  .sticky-bridge__float{ margin-top: -64px; padding: 14px; }
  .sticky-bridge__spacer{ height: 34px; }
  /* Mobile: sticky aus, sonst fühlt es sich komisch an */
  .sticky-bridge__sticky{ position: relative; top: auto; }
}
.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow);
transition:transform .18s ease,box-shadow .18s ease,background .25s ease;
display:flex;
flex-direction:column;
height:100%
}
.card:hover{
transform:translateY(-4px);
box-shadow:0 12px 26px rgba(0,0,0,.12)
}
.card h4{
margin-bottom:8px;
font-weight:800;
font-size:1.12rem;
color:var(--primary)
}
.card p{
margin:0;
color:var(--text);
line-height:1.6
}
.card-icon{
width:48px;
height:48px;
margin-bottom:8px
}
.card-icon img{
width:48px;
height:48px;
object-fit:contain;
display:block
}
#services{
  max-width:1100px;
  margin-inline:auto;
}

#services h2,
#services h3,
#services .section-head{
  font-size:clamp(1.8rem,2vw+1rem,2.4rem);
  font-weight:800;
  letter-spacing:.005em;
  color:var(--primary);
  margin-bottom:6px;
}

#services h2::after,
#services h3::after,
#services .section-head::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  margin-top:10px;
  border-radius:3px;
  background:var(--accent);
  opacity:.6;
}

#services .lead,
#services p.lead{
  font-size:1.06rem;
  color:var(--muted);
  max-width:70ch;
}

/* Card Layout sauber zentriert */
#services .card-container{
  max-width:1100px;
  margin-inline:auto;
  justify-items:center;
  align-items:stretch;
}

#services .card{
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 6px 14px rgba(16,24,40,.06);
  transition:box-shadow var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out);
  max-width:380px;
  width:100%;
}

#services .card:hover{
  box-shadow:0 10px 20px rgba(16,24,40,.10);
  border-color:color-mix(in oklab,var(--border),var(--primary) 18%);
}

#services .card h4{
  font-size:1.12rem;
  font-weight:800;
  color:var(--primary);
  margin-top:2px;
  margin-bottom:6px;
}

#services .card p{
  color:var(--text);
}

#services .card .card-icon{
  margin-bottom:10px;
}
.about-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  max-width:1100px;
  margin-inline:auto;
}
@media (max-width:900px){
  .about-container{
    grid-template-columns:1fr;
    gap:32px;
    text-align:center;
  }
}
.card .card-icon{
position:relative;
display:inline-grid;
place-items:center;
width:var(--icon-size);
height:var(--icon-size);
margin-bottom:12px;
padding:0;
background:transparent;
border:0;
box-shadow:none
}
.icon-plate{
position:relative;
display:inline-grid;
place-items:center;
width:var(--icon-size);
height:var(--icon-size);
padding:10px;
border-radius:var(--icon-radius);
background:linear-gradient(180deg,#ffffff,#f4f7fb);
border:1px solid var(--border);
box-shadow:0 8px 18px rgba(16,24,40,.10)
}
body.dark-theme .icon-plate{
background:linear-gradient(180deg,#0f172a,#0b1220);
border-color:rgba(255,255,255,.14);
box-shadow:0 10px 24px rgba(0,0,0,.55)
}
.icon-ghost{
position:relative;
display:inline-grid;
place-items:center;
width:var(--icon-size);
height:var(--icon-size);
border-radius:14px;
background:transparent;
box-shadow:0 14px 30px rgba(16,24,40,.10)
}
body.dark-theme .icon-ghost{
box-shadow:0 16px 36px rgba(0,0,0,.55)
}
.icon-ring{
position:relative;
display:inline-grid;
place-items:center;
width:calc(var(--icon-size)+8px);
height:calc(var(--icon-size)+8px);
border-radius:16px;
background:transparent;
border:1px solid color-mix(in oklab,var(--border),var(--primary) 16%)
}
body.dark-theme .icon-ring{
border-color:color-mix(in oklab,rgba(255,255,255,.14),var(--accent) 20%)
}
.card .card-icon img,.icon-plate>img,.icon-ghost>img,.icon-ring>img{
width:100%;
height:100%;
object-fit:contain;
image-rendering:-webkit-optimize-contrast;
image-rendering:crisp-edges;
filter:drop-shadow(0 6px 14px rgba(16,24,40,.16));
transform:translateZ(0);
transition:filter var(--t-fast) var(--ease-out)
}
.card:hover .card-icon,.card:hover .icon-plate,.card:hover .icon-ghost,.card:hover .icon-ring{
box-shadow:0 12px 26px rgba(16,24,40,.14)
}
.card:hover .card-icon img,.card:hover .icon-plate>img,.card:hover .icon-ghost>img,.card:hover .icon-ring>img{
filter:drop-shadow(0 10px 20px rgba(16,24,40,.20))
}
#services .card:hover .card-icon,#services .card:hover .icon-plate,#services .card:hover .icon-ghost,#services .card:hover .icon-ring{
box-shadow:none!important;
transform:none!important
}
#services .card:hover .card-icon img,#services .card:hover .icon-plate>img,#services .card:hover .icon-ghost>img,#services .card:hover .icon-ring>img{
filter:none!important;
transform:none!important
}
body.dark-theme .card .card-icon,body.dark-theme .icon-plate{
background:linear-gradient(180deg,#0f172a,#0b1220);
border-color:rgba(255,255,255,.14);
box-shadow:0 10px 24px rgba(0,0,0,.55)
}
body.dark-theme .card .card-icon img,body.dark-theme .icon-plate>img{
filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))
}
.card .card-icon.is-3d{
--icon-size:80px;
--icon-radius:18px;
--icon-pad:12px
}
.icon-3d{
display:grid;
place-items:center;
width:var(--icon-size);
height:var(--icon-size);
padding:var(--icon-pad);
border-radius:var(--icon-radius);
background:linear-gradient(180deg,#ffffff,#f4f7fb);
border:1px solid var(--border);
box-shadow:0 8px 18px rgba(16,24,40,.10)
}
.icon-3d>img{
width:100%;
height:100%;
object-fit:contain
}
.about{
background:var(--surface-2)
}
.about-container{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:40px;
align-items:center
}
@media (max-width:900px){
.about-container{
grid-template-columns:1fr;
text-align:center
}

}
.about-text h3{
font-size:2.2rem;
margin-bottom:10px;
font-weight:800;
color:var(--primary);
position:relative;
display:inline-block;
padding-bottom:4px
}
.about-text h3::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:100%;
height:3px;
background:var(--primary);
border-radius:3px;
opacity:.8
}

.zones-highlight{
background:linear-gradient(180deg,#f7fafc,#eef2f7);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border)
}
.zones-inner{
max-width:900px;
margin:0 auto;
text-align:center;
padding:42px 20px
}
.zones-inner h3{
font-size:2rem;
margin-bottom:8px;
color:var(--primary);
font-weight:800
}
.zones-inner p{
max-width:70ch;
margin:0 auto 14px;
color:var(--text)
}
#zones.zones-highlight{
background:linear-gradient(180deg,#fafbfc,#f3f5f8);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border)
}
#zones .zones-inner{
max-width:980px;
padding:44px 20px;
text-align:left
}
#zones .zones-inner h3{
margin-bottom:6px;
font-size:clamp(1.8rem,1.2rem+1.2vw,2.2rem);
color:var(--primary);
font-weight:800
}
#zones .zones-inner>p.muted{
margin-bottom:18px
}
#zones .zones-pro{
display:grid;
grid-template-columns:1fr;
gap:10px
}
#zones .zones-head{
display:grid;
grid-template-columns:80px 1fr 120px;
gap:12px;
padding:10px 12px;
color:var(--muted);
font-weight:700;
font-size:.9rem;
border-bottom:1px solid var(--border)
}
#zones .zones-row{
display:grid;
grid-template-columns:80px 1fr 120px;
gap:12px;
align-items:center;
padding:14px 12px;
background:var(--surface);
border:1px solid var(--border);
border-radius:10px;
box-shadow:none;
transition:background .16s ease,border-color .16s ease
}
#zones .zones-row:hover{
background:color-mix(in oklab,var(--surface),var(--surface-2) 45%);
border-color:color-mix(in oklab,var(--border),var(--primary) 18%)
}
#zones .zones-col--badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:64px;
height:36px;
border-radius:8px;
background:var(--surface-2);
color:var(--primary);
font-weight:800;
box-shadow:inset 0 0 0 1px var(--border)
}
#zones .zones-row:nth-child(2) .zones-col--badge{
background:color-mix(in oklab,var(--surface-2),#22c55e 10%)
}
#zones .zones-row:nth-child(3) .zones-col--badge{
background:color-mix(in oklab,var(--surface-2),#f59e0b 10%)
}
#zones .zones-row:nth-child(4) .zones-col--badge{
background:color-mix(in oklab,var(--surface-2),#ef4444 10%)
}
#zones .zones-col strong{
display:block;
color:var(--text);
font-weight:800
}
#zones .zones-col small{
display:block;
color:var(--muted);
font-size:.92rem;
margin-top:2px
}
#zones .zones-col--price{
justify-self:end;
padding:6px 12px;
border:1px solid var(--border);
border-radius:999px;
background:linear-gradient(180deg,#ffffff,#f6f8fb);
color:var(--primary);
font-weight:900
}
#zones .zones-foot{
margin-top:12px
}
@media (max-width:640px){
#zones .zones-head{
display:none
}
#zones .zones-row{
grid-template-columns:64px 1fr
}
#zones .zones-col--price{
grid-column:2/3;
justify-self:start;
margin-top:6px
}

}
body.dark-theme #zones .zones-row{
background:var(--surface);
border-color:rgba(255,255,255,.14)
}
body.dark-theme #zones .zones-col--badge{
background:#0f172a;
color:#e6e9ef;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)
}
body.dark-theme #zones .zones-col--price{
background:linear-gradient(180deg,#0f172a,#0b1220);
border-color:rgba(255,255,255,.14);
color:var(--accent)
}
.reviews{
background:var(--surface)
}
.reviews h3{
font-size:clamp(1.6rem,1.1rem+1.2vw,2rem);
color:var(--primary);
margin-bottom:10px;
font-weight:900;
letter-spacing:.01em
}
.reviews .card-container>.card.animate-on-scroll,.reviews .card-container>.card.animate-on-scroll.visible{
display:flex;
align-items:center;
gap:10px;
padding:8px 14px;
background:var(--surface-2);
border:1px solid var(--border);
border-radius:10px;
box-shadow:none;
max-width:420px;
margin-inline:auto
}
.reviews .card-container>.card.animate-on-scroll>div:first-child{
font-size:0.9rem!important;
font-weight:700!important;
line-height:1;
color:var(--primary);
background:var(--surface);
border:1px solid var(--border);
border-radius:8px;
padding:4px 8px;
display:inline-block
}
.reviews .card-container>.card.animate-on-scroll .stars{
--size:14px;
--gap:4px;
position:relative;
top:0.5px
}
.reviews .card-container>.card.animate-on-scroll .muted{
margin-left:auto;
font-size:0.82rem;
opacity:.8;
color:var(--muted)
}
body.dark-theme .reviews .card-container>.card.animate-on-scroll,body.dark-theme .reviews .card-container>.card.animate-on-scroll.visible{
background:var(--surface);
border-color:rgba(255,255,255,.16)
}
body.dark-theme .reviews .card-container>.card.animate-on-scroll>div:first-child{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.16);
color:var(--accent)
}
.reviews .card-container{
margin-bottom:12px
}
.reviews .card{
align-items:center;
gap:10px;
background:var(--surface);
border:1px solid var(--border);
border-radius:12px;
box-shadow:none
}
body.dark-theme .reviews .card{
background:var(--surface);
border-color:rgba(255,255,255,.16);
box-shadow:none
}
.reviews-aggregate{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px
}
.reviews-aggregate .avg-score{
font-weight:800;
font-size:0.95rem;
line-height:1;
padding:6px 8px;
border:1px solid var(--border);
border-radius:999px;
background:var(--surface-2)
}
.reviews-aggregate .avg-stars{
display:inline-block
}
.reviews-aggregate .avg-count{
margin-left:auto;
font-size:.93rem
}
body.dark-theme .reviews-aggregate .avg-score{
background:rgba(255,255,255,.05)
}
.stars{
--size:16px;
--gap:5px;
--value:0;
position:relative;
display:inline-block;
width:calc(var(--size) * 5+var(--gap) * 4);
height:var(--size)
}
.stars::before,.stars::after{
content:"";
position:absolute;
inset:0;
background-repeat:space no-repeat;
background-size:var(--size) var(--size)
}

.stars::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.6l2.47 5.01 5.54.8-4 3.9.94 5.5L12 16.9l-4.95 2.6.94-5.5-4-3.9 5.54-.8L12 3.6z' fill='none' stroke='%23cbd5e1' stroke-width='1.8' stroke-linejoin='round'/></svg>");
}

.stars::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.6l2.47 5.01 5.54.8-4 3.9.94 5.5L12 16.9l-4.95 2.6.94-5.5-4-3.9 5.54-.8L12 3.6z' fill='%23f59e0b'/></svg>");
  width:calc((var(--value) / 5) * 100%);
  overflow:visible;
}

body.dark-theme .stars::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.6l2.47 5.01 5.54.8-4 3.9.94 5.5L12 16.9l-4.95 2.6.94-5.5-4-3.9 5.54-.8L12 3.6z' fill='%23fbbf24'/></svg>");
}
.rev-stars{
font-size:18px;
line-height:1;
letter-spacing:1px
}
.reviews-carousel{
position:relative;
display:flex;
align-items:center;
gap:10px
}
.rev-viewport{
overflow:visible;
scrollbar-width:none;
-ms-overflow-style:none;
width:100%
}
.rev-viewport::-webkit-scrollbar{
display:none
}
/* Reviews Track – Desktop & Tablet */
.rev-track {
  display: flex;
  gap: 24px;
  transition: transform .4s ease;
}
.rev-card{
min-width:clamp(280px,72vw,420px);
max-width:420px;
flex:0 0 auto;
scroll-snap-align:start;
background:var(--surface);
border:1px solid var(--border);
border-radius:12px;
padding:16px;
box-shadow:none
}
.rev-card h4{
font-size:1.08rem;
font-weight:800;
margin-bottom:6px;
color:var(--primary)
}
.rev-card p{
margin-bottom:8px;
color:var(--text)
}
.rev-card .meta{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px
}
.rev-card .avatar{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover
}
.rev-nav{
width:36px;
height:36px;
border-radius:999px;
display:grid;
place-items:center;
flex:0 0 auto;
border:1px solid var(--border);
background:var(--surface);
box-shadow:none;
cursor:pointer;
transition:transform .12s ease,background .12s ease,border-color .12s ease
}
.rev-nav:hover{
background:var(--surface-2);
border-color:color-mix(in oklab,var(--border),var(--text) 18%);
transform:translateY(-1px)
}
.rev-nav:active{
transform:translateY(0)
}
.rev-nav:focus-visible{
outline:2px solid var(--accent);
outline-offset:2px
}
.rev-dots{
display:flex;
gap:8px;
justify-content:center;
margin-top:10px
}
.rev-dot{
width:6px;
height:6px;
border-radius:50%;
background:#cbd5e1;
border:none;
cursor:pointer;
opacity:.9
}
.rev-dot.active{
background:var(--accent);
opacity:1
}
@media (max-width:520px){
.rev-card{
min-width:88vw
}

}
.video{
background:var(--primary);
color:#fff;
text-align:center;
padding:80px 20px
}
.video .frame{
max-width:960px;
margin:0 auto;
border-radius:12px;
overflow:hidden;
box-shadow:0 12px 30px rgba(0,0,0,.25)
}
footer{
background:var(--surface-2);
color:var(--text);
padding:48px 20px;
text-align:center;
border-top:1px solid var(--border)
}
.footer-links{
display:flex;
justify-content:center;
gap:.8rem;
flex-wrap:wrap;
margin-top:12px
}
.footer-links a{
color:inherit;
text-decoration:none;
padding-bottom:1px;
border-bottom:1px solid transparent;
transition:border-color .2s ease
}
.footer-links a:hover{
border-bottom-color:var(--accent)
}
#cookie-banner,#cookieBanner{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:9000;
background:var(--surface);
border-top:1px solid var(--border);
box-shadow:0 -6px 14px rgba(0,0,0,.12);
padding:16px 20px;
display:none
}
#cookie-banner.show,#cookieBanner.show{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center
}
#cookie-banner p,#cookieBanner p{
margin:0;
font-size:.95rem;
line-height:1.5;
color:var(--text)
}
#cookie-banner a,#cookieBanner a{
color:var(--primary);
text-decoration:underline
}
#cookie-banner button,#cookieBanner button{
margin-left:auto;
background:var(--primary);
color:#fff;
border:none;
padding:.6rem 1.2rem;
font-weight:700;
border-radius:8px;
cursor:pointer;
transition:filter .15s ease
}
#cookie-banner button:hover,#cookieBanner button:hover{
filter:brightness(1.06)
}
#loader{
position:fixed;
inset:0;
display:none;
place-items:center;
z-index:12000;
background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,.8))
}
#loader.show{
display:grid
}
.loader-cube-scene{
display:grid;
place-items:center;
color:#e5f0ff;
gap:12px
}
.loader-label{
font-weight:600;
letter-spacing:.02em
}
.scan-line{
display:none
}
.a-btn,a.button,a.btn,.btn,.button{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
vertical-align:middle
}
.scan{
position:relative;
width:min(520px,90vw);
height:220px;
border:1px solid rgba(255,255,255,.18);
border-radius:12px;
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0))
}

.mobile-nav{
position:fixed;
left:0;
right:0;
bottom:0;
height:var(--mnav-h);
padding:8px 12px calc(8px+env(safe-area-inset-bottom,0px));
background:rgba(255,255,255,.95);
border-top:1px solid var(--border);
display:none;
grid-template-columns:repeat(4,1fr);
gap:8px;
z-index:14000;
backdrop-filter:saturate(140%) blur(var(--mnav-blur));
-webkit-backdrop-filter:saturate(140%) blur(var(--mnav-blur));
box-shadow:0 -8px 24px rgba(0,0,0,.12);
transform:translateZ(0);
backface-visibility:hidden
}
body.dark-theme .mobile-nav{
background:rgba(15,23,42,.92);
border-top-color:rgba(255,255,255,.14)
}
.mobile-nav .mnav-item{
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
height:100%;
min-width:44px;
border-radius:12px;
color:var(--text);
text-decoration:none;
font-size:13px;
font-weight:600;
line-height:1
}
.mobile-nav .mnav-item i{
font-size:20px;
line-height:1
}
.mobile-nav .mnav-item:hover{
background:rgba(0,0,0,.06)
}
body.dark-theme .mobile-nav .mnav-item:hover{
background:rgba(255,255,255,.08)
}
.mobile-nav .mnav-item.active{
color:var(--accent);
text-shadow:0 0 1px rgba(0,0,0,.08)
}
@media (max-width:960px){
.mobile-nav{
display:grid
}
body{
padding-bottom:calc(var(--mnav-h)+env(safe-area-inset-bottom,0px))!important
}
}
@media (max-width:640px){
.sidebar .toggle{
top:calc(var(--header-h)+8px)
}
}
@supports (height:100dvh){
@media (max-width:640px){
.mobile-nav{
padding-bottom:max(8px,env(safe-area-inset-bottom,0px))
}

}

}
html.resizing *,body.resizing *{
transition:none!important
}
.section-tight-top{
padding-top:calc(var(--section-y) * .75)!important
}
.section-roomy-bottom{
padding-bottom:calc(var(--section-y) * 1.25)!important
}
.review-section{
margin:40px auto;
padding:0 16px;
max-width:720px
}
.review-summary{
background:#fff;
border-radius:12px;
padding:20px;
box-shadow:0 2px 4px rgba(0,0,0,0.06);
display:flex;
flex-direction:column;
align-items:center;
gap:18px
}
.review-score .avg-rating{
font-size:2rem;
font-weight:800;
color:#0f3a63
}
.review-stars{
font-size:1.5rem;
color:#facc15
}
.review-count{
font-size:0.95rem;
color:#666;
margin-top:4px
}
.rating-bars{
width:100%;
display:flex;
flex-direction:column;
gap:8px
}
.rating-row{
display:flex;
align-items:center;
gap:10px;
font-size:0.9rem
}
.rating-label{
width:32px;
font-weight:600;
text-align:right
}
.rating-bar{
flex:1;
height:6px;
background:#e5e7eb;
border-radius:4px;
overflow:visible
}
.rating-bar-fill{
height:100%;
background-color:#0f3a63;
border-radius:4px
}
.rating-percent{
width:48px;
text-align:left;
color:#333
}
@media (max-width:480px){
.review-summary{
padding:16px
}
.review-score .avg-rating{
font-size:1.6rem
}
.review-stars{
font-size:1.2rem
}
.rating-label,.rating-percent{
width:28px;
font-size:0.85rem
}

}






.info-ticker{
position:relative;
overflow:visible;
border:1px solid var(--border);
background:var(--surface);
box-shadow:0 6px 14px rgba(16,24,40,.06);
padding:10px 0;
margin:16px 0
}
body.dark-theme .info-ticker{
background:var(--surface);
border-color:rgba(255,255,255,.14);
box-shadow:0 8px 22px rgba(0,0,0,.45)
}
.info-ticker .ticker-inner{
position:relative;
white-space:nowrap;
will-change:transform
}
.info-ticker .ticker-track{
display:inline-flex;
align-items:center;
gap:18px;
padding-inline:16px;
animation:ticker-scroll 38s linear infinite
}
@media (min-width:1400px){
.info-ticker .ticker-track{
animation-duration:48s
}

}
.info-ticker:hover .ticker-track{
animation-play-state:paused
}
.ticker-item{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
color:var(--text);
font-weight:600;
font-size:.95rem;
line-height:1
}
body.dark-theme .ticker-item{
background:linear-gradient(180deg,#0f172a,#0b1220);
border-color:rgba(255,255,255,.14);
color:var(--text);
box-shadow:0 1px 2px rgba(0,0,0,.4)
}
@keyframes ticker-scroll{
0%{
transform:translateX(0)
}
100%{
transform:translateX(-50%)
}

}
@media (prefers-reduced-motion:reduce){
.info-ticker .ticker-track{
animation:none
}

}
.info-ticker.is-compact{
padding:6px 0;
border-radius:10px
}
.info-ticker.is-compact .ticker-item{
padding:6px 10px;
font-size:.9rem
}
@media (max-width:1024px){
.sidebar{
transform:translateX(-110%);
opacity:0;
pointer-events:none;
transition:transform 420ms var(--ease-out),opacity 320ms var(--ease-out);
will-change:transform,opacity;
visibility:visible;
box-shadow:0 16px 30px rgba(0,0,0,.22);
border-right:1px solid var(--border)
}
body.sidebar-open .sidebar{
transform:translateX(0);
opacity:1;
pointer-events:auto
}
body{
margin-left:0;
transition:none;
padding-bottom:calc(var(--mnav-h)+env(safe-area-inset-bottom,0px))!important
}
body.sidebar-open{
margin-left:0
}
header#mainHeader,.mobile-nav{
transform:none;
transition:none
}
.sidebar .toggle{
position:fixed;
left:12px;
top:calc(var(--header-h)+10px);
z-index:1250
}
body.sidebar-open .sidebar .toggle{
left:calc(min(88vw,var(--sidebar-w)) - 22px);
transition:left var(--t-med) var(--ease-out)
}
/* Sidebar Overlay: darf Desktop-Hover NICHT blockieren */
body.sidebar-open::before{
  content:"";
  position:fixed;
  top:var(--header-h);
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.28);
  z-index:1200;
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}

body::before{
opacity:0;
pointer-events:none;
transition:opacity 220ms ease
}
.mobile-nav{
display:grid;
z-index:1400
}

}

@media (max-width:960px){
  body.sidebar-open::before{
  pointer-events:none;
  opacity:0;
  }
}
@media (min-width:1025px){
.sidebar{
transform:none!important;
opacity:1!important;
pointer-events:auto!important;
visibility:visible!important
}
.mobile-nav{
display:none!important
}
body{
padding-bottom:0!important
}

}
@media (max-width:640px){
:root{
--header-h:60px;
--mnav-h:64px;
--icon-size:56px;
--sidebar-w:86vw
}
body{
font-size:15px;
line-height:1.5;
padding-top:var(--header-h);
-webkit-font-smoothing:antialiased
}
header#mainHeader{
height:var(--header-h);
padding:0 12px;
align-items:center
}
header#mainHeader .logo img{
height:36px
}
.datum-anzeige{
display:none
}

.card-container{
grid-template-columns:1fr!important;
gap:14px
}
.card{
padding:16px;
border-radius:12px
}
.card h4{
font-size:1.02rem
}
.card p{
font-size:.98rem
}
.about-container,#zones .zones-inner{
grid-template-columns:1fr!important;
text-align:center
}
#zones .zones-row{
grid-template-columns:64px 1fr!important;
gap:10px;
padding:12px
}
.rev-card{
min-width:88vw;
max-width:88vw;
padding:14px
}
.rev-viewport{
padding-left:6px;
padding-right:6px
}
.mobile-nav{
height:calc(var(--mnav-h)+env(safe-area-inset-bottom));
padding:6px 8px calc(6px+env(safe-area-inset-bottom));
grid-template-columns:repeat(4,1fr);
gap:6px;
align-items:center
}
.mobile-nav .mnav-item{
gap:6px;
font-size:12px;
padding:8px 6px;
min-width:48px
}
.mobile-nav .mnav-item i{
font-size:20px
}
.mobile-nav .mnav-item.active{
background:rgba(58,134,255,.08);
border-radius:12px
}
.sidebar{
transform:translateX(-110%);
opacity:0;
pointer-events:none
}
body.sidebar-open .sidebar{
transform:translateX(0);
opacity:1;
pointer-events:auto
}
body,.container{
margin-left:0!important
}
.sidebar .toggle{
left:10px;
top:calc(var(--header-h)+8px);
width:44px;
height:44px;
box-shadow:0 8px 22px rgba(0,0,0,.14)
}
form.inline,.form-row{
display:flex;
flex-direction:column;
gap:8px;
align-items:stretch
}
form.inline input[type="text"],form.inline input[type="email"],form.inline input[type="number"],form.inline input[type="tel"],form.inline select,form.inline textarea{
width:100%;
box-sizing:border-box;
padding:12px 14px;
font-size:15px;
border-radius:10px
}
form.inline .btn,form.inline button,.btn.block{
width:100%;
padding:12px;
border-radius:10px;
font-size:15px
}
.responsive-table{
overflow-x:auto;
-webkit-overflow-scrolling:touch
}
.responsive-table table{
min-width:720px;
width:100%
}
.muted{
font-size:.95rem
}
.section-note{
font-size:.92rem;
color:var(--muted);
margin-top:6px
}
footer{
padding:20px 12px
}
#cookie-banner,#cookieBanner{
padding:12px;
flex-direction:column;
gap:8px
}
.card .card-icon,.icon-plate,.icon-ghost,.icon-ring{
width:56px;
height:56px
}
.card,.sidebar,header#mainHeader{
box-shadow:none
}
.scroll-down{
bottom:12px;
width:40px;
height:40px
}

.list .row,.row{
  padding:10px 6px;
  border-radius:10px;
  margin-bottom:8px
}

/* Mobile: Sidebar links etwas höher */
.nav-links a,.user-links a{
  min-height:48px;
  padding:10px 12px
}
:root{
--t-med:180ms;
--t-fast:120ms;
--t-slow:260ms
}
:focus-visible{
outline:3px solid var(--accent);
outline-offset:3px
}

body{
padding-bottom:calc(var(--mnav-h)+env(safe-area-inset-bottom))
}

}
.mobile-nav{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:1400;
display:grid;
place-items:center;
pointer-events:auto;
background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(250,250,250,0.98));
border-top:1px solid rgba(0,0,0,0.06);
padding:8px 10px;
box-shadow:0 -6px 20px rgba(0,0,0,0.06)
}
.mobile-nav .mnav-inner{
width:min(980px,100%);
display:flex;
gap:10px;
justify-content:space-around;
align-items:center;
max-width:980px
}
.mnav-item{
display:flex;
flex-direction:column;
gap:4px;
align-items:center;
justify-content:center;
text-decoration:none;
color:var(--text);
font-size:12px;
min-width:54px;
padding:6px;
border-radius:10px;
transition:background .18s ease,transform .12s ease
}
.mnav-item i{
font-size:18px;
display:block
}
.mnav-item span{
font-size:11px;
line-height:1;
color:var(--muted)
}
.mnav-item:active{
transform:translateY(1px)
}
.mnav-item.active{
background:rgba(58,134,255,0.08);
color:var(--accent)
}
.mnav-toggle{
background:var(--accent);
color:#fff;
width:48px;
height:48px;
display:inline-grid;
place-items:center;
border-radius:12px;
border:none;
box-shadow:0 8px 20px rgba(58,134,255,0.12)
}
.mobile-nav-sheet{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:1500;
height:0;
pointer-events:none;
display:flex;
justify-content:center;
align-items:flex-end;
transition:background-color .22s ease
}
.mobile-nav-sheet[aria-hidden="true"]{
background:rgba(0,0,0,0)
}
.mobile-nav-sheet[aria-hidden="false"]{
background:rgba(0,0,0,0.28);
pointer-events:auto
}
.mnav-sheet-inner{
width:100%;
max-width:980px;
background:var(--surface);
border-radius:14px 14px 0 0;
box-shadow:0 -20px 48px rgba(0,0,0,0.15);
transform:translateY(110%);
transition:transform .36s cubic-bezier(.22,.9,.3,1),opacity .2s ease;
opacity:0;
max-height:82vh;
overflow:visible;
display:flex;
flex-direction:column;
pointer-events:auto
}
.mobile-nav-sheet[aria-hidden="false"] .mnav-sheet-inner{
transform:translateY(0);
opacity:1
}
.mnav-sheet-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px;
border-bottom:1px solid rgba(0,0,0,0.06)
}
.mnav-sheet-header h3{
margin:0;
font-size:1rem
}
.mnav-close{
background:transparent;
border:none;
font-size:18px;
color:var(--muted);
padding:8px;
border-radius:8px
}
.mnav-sheet-body{
overflow:auto;
-webkit-overflow-scrolling:touch;
padding:12px 10px
}
.mnav-links{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:8px
}
.mnav-links a{
display:block;
padding:12px 14px;
border-radius:10px;
text-decoration:none;
color:var(--text);
background:transparent;
transition:background .12s ease
}
.mnav-links a:hover,.mnav-links a:focus{
background:rgba(0,0,0,0.03);
outline:none
}
.mnav-links a.active{
background:rgba(58,134,255,0.06);
color:var(--accent)
}
.mnav-sheet-footer{
padding:10px 12px;
border-top:1px solid rgba(0,0,0,0.04);
text-align:center;
font-size:12px;
color:var(--muted)
}
@media (max-width:420px){
.mobile-nav .mnav-inner{
gap:8px;
padding:0 6px
}
.mnav-item span{
display:none
}
.mnav-toggle{
width:44px;
height:44px
}

}
@media (max-width:600px){
.rev-card{
width:90vw!important;
max-width:90vw!important;
box-sizing:border-box;
margin:0 auto
}
.rev-track{
gap:12px!important
}
.rev-viewport{
overflow-x:scroll;
scroll-snap-type:x mandatory
}
.rev-card{
scroll-snap-align:center
}

}
/*PATCH-remove-collapsed-moon*/.sidebar.collapsed .bottom-controls .theme-toggle::before{
content:none!important;
display:none!important
}
.sidebar.collapsed .bottom-controls .theme-toggle{
background:transparent!important;
box-shadow:none!important
}


/* =========================================================
   MOBILE FIXES – Reviews & Pricing (Handy-Version)
   Nur Mobile, kein Einfluss auf Desktop
========================================================= */
@media (max-width: 640px) {

  /* ---------- REVIEWS BEREICH ---------- */
  .reviews {
    padding-left: 16px;
    padding-right: 16px;
  }

  .reviews .card-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .reviews-aggregate {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .reviews-aggregate .avg-score {
    font-size: 1.4rem;
  }

  .reviews-aggregate .avg-count {
    margin-left: 0;
    font-size: 0.9rem;
  }

  .stars {
    margin: 6px auto 0;
  }

  .rating-bars {
    width: 100%;
  }

  .rating-row {
    gap: 8px;
  }

  .rating-label {
    width: 28px;
    font-size: 0.85rem;
  }

  .rating-percent {
    width: 40px;
    font-size: 0.85rem;
  }

  /* Review Karten / Slider */
/* Review Card – Desktop & Tablet */
.rev-card {
  width: 360px;
  flex-shrink: 0;
  border-radius: 14px;
}

  .reviews-carousel {
    gap: 6px;
  }

  .rev-nav {
    display: none;
  }

  /* ---------- KOSTEN / PREISE ---------- */
  .zones-inner,
  .card-container {
    text-align: center;
  }

  .zones-row {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 8px;
  }

  .zones-col--badge {
    margin: 0 auto;
  }

  .zones-col--price {
    justify-self: center;
    margin: 6px auto 0;
  }

  .card {
    text-align: center;
  }
}
/* Reviews – Mobile Darstellung (kein Slider) */
@media (max-width: 640px) {

  .reviews-carousel {
    overflow: visible;
  }

  .rev-viewport {
    overflow: visible;
  }

  .rev-track {
    flex-direction: column;
    gap: 16px;
    transform: none;
  }

  .rev-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
}
/* =========================================
   Preise & Konditionen – Mobile Fix
   ========================================= */
@media (max-width: 640px) {

  /* Überschrift & Text zentrieren */
  #preise h3,
  #preise p {
    text-align: center;
  }

  /* Tabelle auf Mobile in Cards umwandeln */
  #preise table,
  #preise thead,
  #preise tbody,
  #preise tr,
  #preise th,
  #preise td {
    display: block;
    width: 100%;
  }

  #preise thead {
    display: none;
  }

  #preise tr {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 12px;
    text-align: center;
  }

  #preise td {
    padding: 6px 0;
    text-align: center !important; /* nötig wegen Inline-Styles */
  }

  #preise td:first-child {
    font-weight: 800;
    color: #0f3a63;
    font-size: 1.05rem;
  }

  #preise td:last-child {
    font-size: 1.3rem;
    font-weight: 900;
    margin-top: 6px;
  }

  /* Konditionen: 2 Spalten → 1 Spalte */
  #preise > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  #preise ul {
    padding-left: 0;
    list-style-position: inside;
    text-align: center;
  }
}
/* ===== HARD OVERRIDE: alte .hero Regeln neutralisieren ===== */
#hero.hero--mega{
  background: linear-gradient(135deg, #040611 0%, #08122f 55%, #0b1220 100%) !important;
  min-height: clamp(620px, 86vh, 980px) !important;
  padding: calc(var(--header-h) + 44px) 20px 72px !important;
}
/* Performance: pause hero background animations while sidebar/nav is opening */
body.sidebar-open #hero.hero--mega .bg-aurora2,
body.sidebar-open #hero.hero--mega .bg-sheen{
  animation-play-state: paused;
}
body.sidebar-open #hero.hero--mega .bg-aurora,
body.sidebar-open #hero.hero--mega .bg-aurora2{
  filter: blur(10px);
}






/* =========================================================
   PATCH: Headings konsistent (Unsere Leistungen = Über uns)
========================================================= */
#services h2,
#services h3,
#services .section-head,
.about-text h3{
  font-size:clamp(1.8rem,2vw + 1rem,2.4rem);
}
.about-text h3::after{
  width:64px;
  background:var(--accent);
  opacity:.6;
}

/* =========================================================
   ÜBER UNS – Premium Layout Verbesserung
   - Bild sauber zentriert
   - bessere Proportionen
   - mehr Tiefe & Balance
========================================================= */

/* Container ruhiger & edler */
.about-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  max-width:1100px;
  margin-inline:auto;
}

/* Textblock etwas schmaler für bessere Lesbarkeit */
.about-text{
  max-width:560px;
}

/* Bild sauber mittig */

/* Großes Bild eleganter */
.about-image img{
  width:100%;
  max-width:480px;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 28px 70px rgba(16,24,40,.18);
  transition:transform .3s ease;
}

/* Optional ganz leichte Hover-Veredelung */
@media (hover:hover){
  .about-image img:hover{
    transform:translateY(-4px);
  }
}

/* ===== Mobile ===== */
@media (max-width:900px){

  .about-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:32px;
  }

  .about-text{
    margin-inline:auto;
  }

  .about-image img{
    max-width:420px;
  }
}
/* =========================================================
   PATCH: Über uns – Cards untereinander
   Desktop + Mobile: 1 Spalte
========================================================= */
.about .card-container{
  max-width:720px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.about .card{
  width:100%;
  max-width:100%;
}
/* =========================================================
   PATCH: Reviews – Blau unterlegen wie Services
========================================================= */
.reviews h3::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  margin-top:10px;
  border-radius:3px;
  background:var(--accent);
  opacity:.6;
}
@media (max-width:640px){
  .reviews h3{ text-align:center; }
  .reviews h3::after{ margin-left:auto; margin-right:auto; }
}
/* =========================================================
   PATCH: Reviews – 5,0/5 zentrieren
========================================================= */
.reviews-aggregate{
  justify-content:center;
  flex-wrap:wrap;
}
.reviews-aggregate .avg-count{
  margin-left:0;
}
/* =========================================================
   PATCH: Reviews – Text sauber umbrechen (kein Overflow)
========================================================= */
.rev-card p,
.rev-card h4{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* =========================================================
   HOVER / CURSOR FIX
   Reason: Many effects are gated behind `@media (hover:hover)`.
   On some devices (touch laptops / tablets) `hover:hover` is false,
   so hover looks "broken" and cursor feels odd.
========================================================= */

/* Ensure normal cursor baseline */
html,body{ cursor:auto; }

/* Ensure interactive things show pointer */
a,button,[role="button"],.btn,.button,.toggle,.mnav-item,.rev-nav,.offer-hit{ cursor:pointer; }

/* Touch/pen devices: mirror key hover effects on :active/:focus */
@media (hover:none){
  /* Sidebar links */
  .nav-links a:active,
  .nav-links a:focus-visible,
  .user-links a:active,
  .user-links a:focus-visible{
    background:linear-gradient(145deg,var(--surface),var(--surface-2));
    color:var(--primary);
    box-shadow:0 2px 6px rgba(0,0,0,.08);
  }

  /* Generic cards */
  .card:active,
  .card:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,0,0,.12);
  }

  /* Why-us pills */
  #why-us li:active,
  #why-us li:focus-visible{
    background:linear-gradient(180deg,#ffffff,#f3f6fa);
    border-color:color-mix(in oklab,var(--border),var(--primary) 25%);
    box-shadow:0 8px 20px rgba(16,24,40,.12);
    transform:translateY(-1px);
  }

  /* Quick-offers cards (these were hover-gated) */
  .offer-card:active .offer-base,
  .offer-card:focus-within .offer-base{ opacity:0; transform:translateY(8px); }

  .offer-card:active .offer-overlay,
  .offer-card:focus-within .offer-overlay{ opacity:1; transform:translateY(0); pointer-events:auto; }

  .offer-card:active{
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(16,24,40,.14);
    border-color: color-mix(in oklab, var(--border), var(--primary) 18%);
  }

  /* Reviews nav buttons (if used) */
  .rev-nav:active{
    background:var(--surface-2);
    border-color:color-mix(in oklab,var(--border),var(--text) 18%);
  }

  /* Mobile sheet links */
  .mnav-links a:active,
  .mnav-links a:focus-visible{
    background:rgba(0,0,0,0.03);
    outline:none;
  }
}

/* Dark theme touch states */
@media (hover:none){
  body.dark-theme .nav-links a:active,
  body.dark-theme .nav-links a:focus-visible,
  body.dark-theme .user-links a:active,
  body.dark-theme .user-links a:focus-visible{
    background:linear-gradient(145deg,#111827,#1e293b);
    color:var(--accent);
    box-shadow:0 2px 6px rgba(0,0,0,.5);
  }
}