/* Inter Variable – selbst gehostet (DSGVO-konform, kein Google-Server) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/inter-01-260c81a475.woff2) format('woff2-variations');
}


/* ══════════════════════════════════════════
   FORMULARE: Rückruf + Heizungscheck
   ══════════════════════════════════════════ */
.fmodal{
  position:fixed;inset:0;z-index:9000;
  display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(20,26,14,.55);backdrop-filter:blur(3px);
}
.fmodal.show{display:flex;}
.fmodal-box{
  background:var(--bg);border-radius:var(--r);
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  position:relative;
  animation:fmIn .25s ease;
}
@keyframes fmIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.fmodal-head{
  padding:24px 28px 18px;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:var(--bg);z-index:2;border-radius:var(--r) var(--r) 0 0;
}
.fmodal-title{font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.fmodal-sub{font-size:.84rem;color:var(--ink3);margin-top:3px;}
.fmodal-close{
  position:absolute;top:16px;right:16px;
  width:38px;height:38px;border:none;background:none;
  font-size:1.6rem;line-height:1;color:var(--ink3);cursor:pointer;
  border-radius:50%;transition:background .2s,color .2s;
}
.fmodal-close:hover{background:var(--gp);color:var(--ink);}
.fmodal-body{padding:22px 28px 28px;}

/* Felder */
.ff{margin-bottom:16px;}
.ff label{display:block;font-size:.82rem;font-weight:700;color:var(--ink2);margin-bottom:6px;}
.ff label .req{color:#c0392b;}
.ff input,.ff select,.ff textarea{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--rule);border-radius:9px;
  background:var(--surf);color:var(--ink);
  font-family:inherit;font-size:.92rem;
  transition:border-color .2s,box-shadow .2s;
}
.ff input:focus,.ff select:focus,.ff textarea:focus{
  outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(138,171,92,.18);
}
.ff textarea{resize:vertical;min-height:78px;}
.ff-hint{font-size:.74rem;color:var(--ink3);margin-top:5px;}
.ff-err{font-size:.76rem;color:#c0392b;margin-top:5px;display:none;font-weight:600;}
.ff.has-err input,.ff.has-err select,.ff.has-err textarea{border-color:#c0392b;}
.ff.has-err .ff-err{display:block;}
/* Honeypot – für Menschen unsichtbar */
.ff-hp{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;}

/* Zeitfenster-Chips */
.ff-chips{display:flex;flex-wrap:wrap;gap:8px;}
.ff-chip{
  padding:9px 15px;border:1.5px solid var(--rule);border-radius:100px;
  background:var(--surf);color:var(--ink2);
  font-size:.83rem;font-weight:600;cursor:pointer;
  transition:all .18s;font-family:inherit;
}
.ff-chip:hover{border-color:var(--g2);color:var(--ink);}
.ff-chip.on{background:var(--g2);border-color:var(--g2);color:#fff;}

/* Wizard-Schritte */
.wz-steps{display:flex;gap:6px;margin-bottom:20px;}
.wz-dot{flex:1;height:4px;border-radius:2px;background:var(--rule);transition:background .3s;}
.wz-dot.on{background:var(--g2);}
.wz-step{display:none;}
.wz-step.on{display:block;animation:fmIn .2s ease;}
.wz-q{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:14px;}
.wz-opts{display:flex;flex-direction:column;gap:9px;}
.wz-opt{
  padding:13px 16px;border:1.5px solid var(--rule);border-radius:10px;
  background:var(--surf);color:var(--ink);text-align:left;
  font-size:.92rem;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .18s;
}
.wz-opt:hover{border-color:var(--g2);background:var(--gp);}
.wz-opt.on{border-color:var(--g2);background:var(--g2);color:#fff;}

/* Ergebnis-Box */
.wz-result{
  padding:16px 18px;border-radius:10px;margin-bottom:18px;
  background:var(--gp);border-left:4px solid var(--g2);
}
.wz-result-t{font-weight:800;color:var(--g3);font-size:.95rem;margin-bottom:5px;}
.wz-result-x{font-size:.86rem;color:var(--ink2);line-height:1.55;}

/* Buttons */
.fmodal-actions{display:flex;gap:10px;margin-top:22px;}
.fbtn{
  flex:1;padding:13px 20px;border:none;border-radius:100px;
  font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;
  transition:transform .15s,box-shadow .2s,background .2s;
}
.fbtn-p{background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;box-shadow:0 4px 14px rgba(110,144,64,.35);}
.fbtn-p:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(110,144,64,.45);}
.fbtn-p:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.fbtn-s{background:none;border:1.5px solid var(--rule);color:var(--ink2);flex:0 0 auto;padding:13px 22px;}
.fbtn-s:hover{border-color:var(--g2);color:var(--ink);}

/* Status */
.fstatus{padding:14px 16px;border-radius:10px;font-size:.88rem;margin-top:14px;display:none;}
.fstatus.show{display:block;}
.fstatus.ok{background:#eaf6ea;border-left:4px solid #2a7d2a;color:#1e5c1e;}
.fstatus.err{background:#fdeaea;border-left:4px solid #c0392b;color:#8c2318;}

/* Erfolgs-Ansicht */
.fdone{text-align:center;padding:16px 0;}
.fdone-ico{font-size:2.6rem;margin-bottom:10px;}
.fdone-t{font-size:1.1rem;font-weight:800;color:var(--g3);margin-bottom:7px;}
.fdone-x{font-size:.9rem;color:var(--ink2);line-height:1.6;}

/* Trigger-Buttons */
.cb-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:100px;border:1.5px solid var(--g2);
  background:none;color:var(--g3);
  font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:all .2s;margin-top:10px;
}
.cb-btn:hover{background:var(--g2);color:#fff;}
.hc-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:100px;border:none;
  background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;
  font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(110,144,64,.35);transition:transform .15s,box-shadow .2s;
}
.hc-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(110,144,64,.45);}

@media(max-width:640px){
  .fmodal{padding:0;align-items:flex-end;}
  .fmodal-box{max-width:100%;max-height:94vh;border-radius:16px 16px 0 0;}
  .fmodal-head{padding:20px 20px 15px;}
  .fmodal-body{padding:18px 20px 26px;}
  .fmodal-actions{flex-direction:column-reverse;gap:9px;}
  .fbtn-s{width:100%;}
  /* 16px verhindert das automatische Zoomen von iOS beim Antippen */
  .ff input,.ff select,.ff textarea{font-size:16px;padding:13px 13px;}
  .ff textarea{min-height:92px;}
  /* Komfortable Touch-Flächen */
  .ff-chip{padding:13px 16px;font-size:.88rem;flex:1 1 calc(50% - 4px);text-align:center;min-height:46px;}
  .ff-chips{gap:8px;}
  .wz-opt{padding:15px 16px;font-size:.95rem;}
  .fbtn{padding:15px 20px;font-size:.95rem;}
  .fmodal-close{width:44px;height:44px;top:12px;right:12px;}
  .cb-btn{padding:12px 18px;font-size:.86rem;}
  .hc-btn{padding:15px 24px;font-size:.92rem;width:100%;justify-content:center;}
}
[data-theme="dark"] .fmodal-box{background:var(--surf);}
[data-theme="dark"] .fmodal-head{background:var(--surf);}
/* Felder im Dark Mode klar vom Modal-Hintergrund abheben */
[data-theme="dark"] .ff input,
[data-theme="dark"] .ff select,
[data-theme="dark"] .ff textarea{background:var(--bg);border-color:#3a3a34;}
[data-theme="dark"] .ff-chip,
[data-theme="dark"] .wz-opt{background:var(--bg);border-color:#3a3a34;}
[data-theme="dark"] .ff-chip.on{background:var(--g2);border-color:var(--g2);}
[data-theme="dark"] .wz-opt.on{background:var(--g2);border-color:var(--g2);}
[data-theme="dark"] .wz-opt:hover{background:#22221e;}
[data-theme="dark"] .fmodal{background:rgba(0,0,0,.65);}


/* Bilder blenden sanft ein, sobald sie geladen sind */
img{background:var(--surf,#f2f4ee);}
img[loading="lazy"]{opacity:0;transition:opacity .35s ease;}
img[loading="lazy"].img-ready{opacity:1;}
@media(prefers-reduced-motion:reduce){
  img[loading="lazy"]{opacity:1;transition:none;}
}



:root{
  --g:#A7BE7F;--g2:#8aab5c;--g3:#6d9040;--g4:#527030;
  --o:#FF751F;--o2:#e0611a;
  --gp:#f0f6e8;--gm:#c8dea0;--gd:#daeeb8;
  --op:#fff3ec;--om:#ffd0b0;
  --ink:#0f0f0f;--ink2:#3a3a3a;--ink3:#808080;
  --rule:#e5e5e1;--bg:#f8f9f5;--surf:#ffffff;
  --r:12px;--rsm:6px;
  --sh:0 4px 24px rgba(0,0,0,.07);
  --sh2:0 16px 56px rgba(0,0,0,.14);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
/* height:auto ist zwingend, seit die Bilder width/height im HTML
   tragen: Ohne diese Zeile wuerden sie auf schmalen Bildschirmen
   gestaucht, weil die feste Hoehe aus dem HTML stehen bliebe.
   Genauere Regeln (z. B. .gth img) gehen weiterhin vor. */
img{max-width:100%;height:auto;}

/* ── LAYOUT ── */
.w{max-width:1140px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.w{padding:0 18px;}}

/* ═══════════════════════════════════════════
   KEYFRAMES – Premium set
═══════════════════════════════════════════ */
@keyframes fadeUp{0%{opacity:0;transform:translateY(36px) scale(.98);}100%{opacity:1;transform:none;}}
@keyframes fadeLeft{0%{opacity:0;transform:translateX(-36px);}100%{opacity:1;transform:none;}}
@keyframes fadeRight{0%{opacity:0;transform:translateX(36px);}100%{opacity:1;transform:none;}}
@keyframes zoomIn{0%{opacity:0;transform:scale(.92);}100%{opacity:1;transform:none;}}
@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@keyframes gradFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes shimmer{0%{background-position:200% center;}100%{background-position:-200% center;}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);}33%{transform:translateY(-12px) rotate(.5deg);}66%{transform:translateY(-6px) rotate(-.3deg);}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(138,171,92,.5);}50%{box-shadow:0 0 0 16px rgba(138,171,92,0);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes slideDown{0%{opacity:0;transform:translateY(-16px) scale(.97);}100%{opacity:1;transform:none;}}
@keyframes ripple{0%{transform:scale(0);opacity:.6;}100%{transform:scale(4);opacity:0;}}
@keyframes countUp{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:none;}}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(30px,-20px) scale(1.05);}66%{transform:translate(-20px,15px) scale(.97);}}
@keyframes lineGrow{0%{width:0;}100%{width:100%;}}
@keyframes cardFlip{0%{opacity:0;transform:rotateX(-15deg) translateY(20px);}100%{opacity:1;transform:none;}}

/* Scroll-reveal states */
.rv{opacity:0;}
.rv.on{animation:fadeUp .75s cubic-bezier(.16,1,.3,1) both;}
.rv-l{opacity:0;}
.rv-l.on{animation:fadeLeft .75s cubic-bezier(.16,1,.3,1) both;}
.rv-r{opacity:0;}
.rv-r.on{animation:fadeRight .75s cubic-bezier(.16,1,.3,1) both;}
.rv-z{opacity:0;}
.rv-z.on{animation:zoomIn .65s cubic-bezier(.16,1,.3,1) both;}
.d1{animation-delay:.07s!important;}
.d2{animation-delay:.14s!important;}
.d3{animation-delay:.21s!important;}
.d4{animation-delay:.28s!important;}
.d5{animation-delay:.35s!important;}

/* ── TOPBAR ── */
.topbar{
  background:linear-gradient(270deg,var(--g4),var(--g3),var(--g2),var(--g3),var(--g4));
  background-size:400% auto;
  animation:gradFlow 12s ease infinite;
  padding:8px 0;font-size:.74rem;color:rgba(255,255,255,.9);
  position:relative;z-index:600;
}
.topbar .w{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.topbar a{color:white;font-weight:500;transition:opacity .2s;}
.topbar a:hover{opacity:.7;}
.tb-soc{display:flex;gap:14px;align-items:center;}
.tb-soc a{display:flex;align-items:center;gap:5px;font-size:.72rem;transition:transform .2s;}
.tb-soc a:hover{transform:scale(1.1);}
.tb-soc svg{width:12px;height:12px;}

/* ── HEADER ── */
header{
  background:var(--surf);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:500;
  box-shadow:0 2px 20px rgba(0,0,0,.06);
}
.hdr{display:flex;align-items:center;justify-content:space-between;height:116px;gap:20px;}
.logo-a{display:flex;align-items:center;flex-shrink:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.logo-a:hover{transform:scale(1.03);}
.logo-a img{height:104px;width:auto;display:block;}
.hdr-r{display:flex;align-items:center;gap:18px;}
/* ── Öffnungszeiten-Ampel ── */
.oz-status{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:100px;
  background:var(--gp);border:1px solid var(--rule);
  font-size:.74rem;font-weight:600;color:var(--ink2);
  white-space:nowrap;transition:background .2s,border-color .2s;
  text-decoration:none;
}
.oz-status:hover{background:var(--surf);border-color:var(--g2);}
.oz-status-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:var(--ink3);position:relative;
}
.oz-status.is-open .oz-status-dot{background:#38a34a;box-shadow:0 0 0 3px rgba(56,163,74,.2);animation:ozPulse 2s infinite;}
.oz-status.is-soon .oz-status-dot{background:#e8a01e;box-shadow:0 0 0 3px rgba(232,160,30,.2);}
.oz-status.is-closed .oz-status-dot{background:#c14545;}
.oz-status.is-open .oz-status-txt{color:var(--ink);}
@keyframes ozPulse{0%,100%{box-shadow:0 0 0 3px rgba(56,163,74,.2);}50%{box-shadow:0 0 0 5px rgba(56,163,74,.05);}}
/* Mobile-Variante in der Topbar */
.oz-status-mobile{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);
  color:#fff;padding:3px 9px;font-size:.7rem;vertical-align:middle;
}
.oz-status-mobile:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.35);}
.oz-status-mobile .oz-status-txt{color:#fff;}
.oz-status-mobile.is-open .oz-status-txt{color:#fff;}
/* Desktop (Standard): Mobile-Ampel aus, Header-Ampel an */
.oz-status-mobile{display:none;}
@media(max-width:640px){
  #ozStatusHeader{display:none;}          /* Header-Ampel weg auf Mobile */
  .tb-addr{display:none;}                  /* Adresse weicht dem Status */
  .oz-status-mobile{display:inline-flex;}  /* Mobile-Ampel zeigen */
}
.hdr-phone{text-align:right;}
.hdr-phone small{display:block;font-size:.64rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;}
.hdr-phone a{font-size:1.15rem;font-weight:800;color:var(--g2);letter-spacing:-.02em;transition:color .2s;}
.hdr-phone a:hover{color:var(--g3);}
.hdr-btn{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--g),var(--g2),var(--g3));
  background-size:200% auto;
  color:white;font-size:.8rem;font-weight:700;
  padding:11px 24px;border-radius:100px;
  border:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 18px rgba(110,144,64,.45);
  transition:background-position .4s,transform .2s,box-shadow .2s;
  animation:glow 3.5s infinite;
}
.hdr-btn:hover{background-position:right center;transform:translateY(-2px);box-shadow:0 8px 28px rgba(110,144,64,.55);}
.hdr-btn::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.3),transparent);
  opacity:0;transition:opacity .3s;
}
.hdr-btn:hover::after{opacity:1;}
@media(max-width:560px){.hdr-btn{display:none;}}

/* ══════════════════════════════
   NAV – KEY FIX: no overflow on container
   Dropdown lives outside scroll clip
══════════════════════════════ */
nav{
  background:var(--surf);
  border-bottom:2px solid var(--gm);
  position:sticky;top:116px;z-index:490;
  box-shadow:0 2px 16px rgba(0,0,0,.04);
}
/* Scroll wrapper – clips horizontally but NOT vertically for dropdowns */
.nav-scroll{
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.nav-scroll::-webkit-scrollbar{display:none;}
/* Nav row – must be position:relative so dropdowns are positioned relative to it */
.nav-row{
  display:flex;
  align-items:stretch;
  position:relative;
  width:max-content;
  min-width:100%;
}

/* Top-level items */
.nt{
  position:relative;
  display:flex;align-items:center;gap:5px;
  font-size:.82rem;font-weight:600;color:var(--ink3);
  padding:0 17px;height:48px;
  white-space:nowrap;cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .2s,border-color .2s,background .2s;
  user-select:none;flex-shrink:0;
}
.nt:hover{color:var(--g2);background:rgba(167,190,127,.05);}
.nt.active{color:var(--g2);border-bottom-color:var(--g);font-weight:700;}
/* nt.active::before removed – single border-bottom only */
.nav-arr{font-size:.55rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1);line-height:1;opacity:.6;}
.nt.open .nav-arr{transform:rotate(180deg);opacity:1;}

/* DROPDOWN – positioned fixed relative to viewport so no clipping */
.ndrop{
  position:fixed;
  /* top/left set by JS */
  background:var(--surf);
  border:1px solid var(--rule);
  border-top:3px solid var(--g);
  border-radius:0 0 var(--r) var(--r);
  min-width:210px;
  box-shadow:0 20px 60px rgba(0,0,0,.15),0 4px 16px rgba(0,0,0,.08);
  opacity:0;pointer-events:none;
  transform:translateY(-8px) scale(.97);
  transform-origin:top left;
  transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1);
  z-index:9999;overflow:hidden;
  backdrop-filter:blur(8px);
}
.ndrop.open{
  opacity:1;pointer-events:all;
  transform:translateY(0) scale(1);
  animation:slideDown .22s cubic-bezier(.16,1,.3,1);
}
.ndi{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;
  font-size:.82rem;font-weight:500;color:var(--ink2);
  cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.04);
  transition:background .15s,color .15s,padding-left .2s;
  position:relative;overflow:hidden;
}
.ndi:last-child{border-bottom:none;}
.ndi::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(to bottom,var(--g),var(--g2));
  transform:scaleY(0);transition:transform .2s;
}
.ndi:hover{background:var(--gp);color:var(--g2);padding-left:22px;}
.ndi:hover::before{transform:scaleY(1);}
.ndi-dot{width:6px;height:6px;border-radius:50%;background:var(--gm);flex-shrink:0;transition:background .15s,transform .2s;}
.ndi:hover .ndi-dot{background:var(--g);transform:scale(1.5);}

/* ── SOCIAL BAR ── */
.sbar{
  background:linear-gradient(90deg,var(--gp),white 30%,white 70%,var(--gp));
  border-bottom:1px solid var(--gm);
  position:sticky;top:164px;z-index:480;
}
.sbar .w{display:flex;align-items:center;justify-content:center;height:40px;}
.sbl{
  display:flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:600;color:var(--ink3);
  padding:0 18px;height:100%;
  border-right:1px solid var(--gm);
  transition:color .2s,background .2s;white-space:nowrap;cursor:pointer;
}
.sbl:first-child{border-left:1px solid var(--gm);}
.sbl:hover{color:var(--g2);background:rgba(167,190,127,.08);}
.sbl svg{width:13px;height:13px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.sbl:hover svg{transform:scale(1.3) rotate(-8deg);}
@media(max-width:500px){.sbl span{display:none;}.sbl{padding:0 13px;}}

/* ── SECTIONS ── */
.sec{display:none;}.sec.active{display:block;}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero{
  background:var(--surf);
  position:relative;overflow:hidden;
  padding:80px 0 72px;
  border-bottom:1px solid var(--rule);
}
/* Animated orbs */
.orb{position:absolute;border-radius:50%;pointer-events:none;overflow:hidden;}
.orb1{width:700px;height:700px;top:-250px;right:-180px;
  background:radial-gradient(circle,rgba(167,190,127,.18) 0%,transparent 65%);
  animation:orbFloat 10s ease-in-out infinite;}
.orb2{width:450px;height:450px;bottom:-120px;left:-100px;
  background:radial-gradient(circle,rgba(138,171,92,.12) 0%,transparent 65%);
  animation:orbFloat 8s ease-in-out infinite reverse;animation-delay:-3s;}
.orb3{width:200px;height:200px;top:40%;left:45%;
  background:radial-gradient(circle,rgba(167,190,127,.08) 0%,transparent 65%);
  animation:orbFloat 6s ease-in-out infinite;animation-delay:-5s;}
.hero-in{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:1;}
@media(max-width:780px){.hero-in{grid-template-columns:1fr;gap:40px;}}

.hero-eye{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--g2);margin-bottom:16px;
}
.hero-eye::before{content:'';width:30px;height:2px;
  background:linear-gradient(90deg,var(--g),var(--g2));border-radius:2px;}
.hero-h1{
  font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;
  letter-spacing:-.05em;line-height:1.03;color:var(--ink);margin-bottom:20px;
}
.hero-h1 .gw{
  background:linear-gradient(270deg,var(--g2),var(--g3),var(--g),var(--g3),var(--g2));
  background-size:300% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 6s linear infinite;
  display:inline-block;
}
.hero-sub{font-size:.95rem;color:var(--ink2);line-height:1.8;max-width:440px;margin-bottom:32px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.btn-p{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--g),var(--g2),var(--g3));
  background-size:200% auto;
  color:white;font-size:.88rem;font-weight:700;
  padding:14px 28px;border-radius:100px;border:none;cursor:pointer;
  box-shadow:0 6px 24px rgba(110,144,64,.4);
  transition:background-position .4s,transform .2s,box-shadow .2s;
}
.btn-p:hover{background-position:right;transform:translateY(-3px);box-shadow:0 10px 36px rgba(110,144,64,.5);}
.btn-p::after{content:'';position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.25);transform:scale(0);opacity:0;transition:none;}
.btn-p:active::after{animation:ripple .5s ease-out;}
.btn-g{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--g2);
  font-size:.88rem;font-weight:600;
  padding:14px 28px;border-radius:100px;
  border:2px solid var(--gm);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s,transform .2s;
}
.btn-g:hover{border-color:var(--g);background:var(--gp);transform:translateY(-2px);}

.hero-img-wrap{
  position:relative;
  animation:float 7s ease-in-out infinite;
}
.hero-img-inner{
  border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--sh2);
  position:relative;
}
.hero-img-inner img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.hero-img-inner:hover img{transform:scale(1.05);}
/* Decorative ring */

.hero-badge{
  position:absolute;bottom:-16px;left:-16px;
  background:white;border-radius:var(--r);
  padding:14px 18px;box-shadow:0 8px 32px rgba(0,0,0,.12);
  display:flex;align-items:center;gap:10px;
  min-width:180px;
  animation:fadeUp .6s .4s both;
}
.hb-icon{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--g),var(--g2));
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;
}
.hb-text strong{display:block;font-size:.88rem;font-weight:800;color:var(--ink);line-height:1.1;}
.hb-text span{font-size:.72rem;color:var(--ink3);}

/* STATS */
.stats{background:var(--surf);border-bottom:1px solid var(--rule);padding:24px 0;}
.stats-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;}
@media(max-width:600px){.stats-g{grid-template-columns:1fr 1fr;}}
.stat{background:var(--surf);padding:20px 24px;text-align:center;transition:background .25s;cursor:default;}
.stat:hover{background:var(--gp);}
.sn{
  font-size:2rem;font-weight:900;letter-spacing:-.06em;line-height:1;margin-bottom:4px;
  background:linear-gradient(135deg,var(--g2),var(--g3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sl{font-size:.72rem;color:var(--ink3);line-height:1.35;}

/* LEISTUNGEN */
.leist{padding:72px 0;}
.eyebrow{font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g2);margin-bottom:6px;}
.sec-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:28px;}
.l-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:900px){.l-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:500px){.l-grid{grid-template-columns:1fr;}}
.lc{
  /* display:block noetig, seit die Kachel ein <a> ist – ohne das
     wuerde sie als Inline-Element aus dem Raster fallen. */
  display:block;color:inherit;
  background:var(--surf);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;cursor:pointer;position:relative;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s;
}
.lc::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--g),var(--g2),var(--g3));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.lc:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.12);border-color:var(--gm);}
.lc:hover::after{transform:scaleX(1);}
.lc-img{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--bg);}
.lc-img img{transition:none;object-fit:cover;object-position:center;}
.lc:hover .lc-img img{transform:none;}
.lc-img::after{display:none;}
.lc-body{padding:18px;}
.lc-tag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--gp);color:var(--g2);border:1px solid var(--gm);padding:3px 9px;border-radius:100px;margin-bottom:8px;}
.lc-name{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:5px;}
.lc-desc{font-size:.78rem;color:var(--ink3);line-height:1.5;}
.lc-arr{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:.76rem;font-weight:700;color:var(--g2);transition:gap .25s;}
.lc:hover .lc-arr{gap:9px;}

/* ÜBER STRIP */
.ueber-strip{
  padding:72px 0;
  background:linear-gradient(155deg,var(--gp) 0%,var(--surf) 55%);
  border-top:1px solid var(--gm);border-bottom:1px solid var(--gm);
}
.ug{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
@media(max-width:720px){.ug{grid-template-columns:1fr;gap:36px;}}
.u-title{font-size:clamp(1.35rem,2.5vw,1.9rem);font-weight:800;letter-spacing:-.035em;margin-bottom:18px;line-height:1.2;}
.u-title mark{
  background:none;
  background:linear-gradient(135deg,var(--g2),var(--g3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.u-body{font-size:.9rem;color:var(--ink2);line-height:1.8;}
.u-body p{margin-bottom:12px;}
.u-body a{color:var(--g2);font-weight:600;}
.r-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;}
.r-tag{
  font-size:.71rem;font-weight:600;padding:4px 12px;border-radius:100px;
  border:1.5px solid var(--gm);background:white;color:var(--g2);
  transition:all .25s cubic-bezier(.34,1.56,.64,1);cursor:default;
}
.r-tag:hover{background:var(--g);color:white;border-color:var(--g);transform:scale(1.06);}
.u-cards{display:flex;flex-direction:column;gap:12px;}



.uc:hover 



/* PARTNER STRIP */
.pstrip{background:white;border-bottom:1px solid var(--rule);padding:40px 0;}
.p-label{font-size:.67rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);text-align:center;margin-bottom:28px;
  position:relative;
}
.p-label::before,.p-label::after{
  content:'';position:absolute;top:50%;width:80px;height:1px;background:var(--rule);
}
.p-label::before{right:calc(50% + 160px);}
.p-label::after{left:calc(50% + 160px);}
.p-track{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;}
.p-logo{
  display:flex;align-items:center;justify-content:center;
  padding:12px 24px;border-radius:var(--rsm);
  filter:grayscale(100%);opacity:.45;
  transition:filter .4s,opacity .4s,transform .4s cubic-bezier(.34,1.56,.64,1);
  cursor:default;
}
.p-logo:hover{filter:grayscale(0%);opacity:1;transform:scale(1.06);}
.p-logo svg{height:32px;width:auto;}

/* ═══════════════ INNER PAGE BANNER ═══════════════ */
.pb{
  background:linear-gradient(135deg,var(--gp) 0%,white 55%,rgba(167,190,127,.06) 100%);
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--g),var(--g2),var(--g3)) 1;
  padding:52px 0;position:relative;overflow:hidden;
}
.pb::before{content:'';position:absolute;top:-80px;right:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(167,190,127,.16),transparent 70%);}
.pb::after{content:'';position:absolute;bottom:-60px;left:20px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(167,190,127,.1),transparent 70%);animation:orbFloat 6s ease-in-out infinite;}
.pb-eye{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g2);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.pb-eye::before{content:'';width:24px;height:2px;background:linear-gradient(90deg,var(--g),var(--g2));border-radius:2px;}
.pb-t{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:900;letter-spacing:-.045em;color:var(--ink);line-height:1.07;position:relative;z-index:1;}
.pb-s{font-size:.93rem;color:var(--ink3);margin-top:8px;}

/* CONTENT */
.ca{padding:52px 0;}
.cg{display:grid;grid-template-columns:1fr 310px;gap:36px;align-items:start;}
@media(max-width:860px){.cg{grid-template-columns:1fr;}}

/* Gallery */
.gal{border-radius:var(--r);overflow:hidden;border:1px solid var(--rule);margin-bottom:18px;box-shadow:var(--sh);}
.gm-wrap{aspect-ratio:16/9;overflow:hidden;cursor:pointer;position:relative;}
.gm-wrap img{transition:transform .6s cubic-bezier(.16,1,.3,1);}
.gm-wrap:hover img{transform:scale(1.04);}
.gm-wrap::after{content:'→';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;color:var(--g2);transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.gm-wrap:hover::after{transform:translate(-50%,-50%) scale(1);}
.gt{display:flex;gap:4px;padding:4px;background:var(--bg);}
.gth{flex:1;aspect-ratio:16/9;overflow:hidden;cursor:pointer;border-radius:3px;border:2px solid transparent;transition:border-color .2s,opacity .2s;opacity:.7;}
.gth.on{border-color:var(--g);opacity:1;}
.gth:hover{opacity:1;}
.gth img{width:100%;height:100%;object-fit:cover;}

/* Prose */
.prose{background:var(--surf);border:1px solid var(--rule);border-radius:var(--r);padding:36px;margin-bottom:18px;}
.prose h2{font-size:1rem;font-weight:700;color:var(--ink);margin:28px 0 10px;padding-top:24px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:10px;}
.prose h2::before{content:'';width:4px;height:20px;background:linear-gradient(to bottom,var(--g),var(--g2));border-radius:3px;flex-shrink:0;}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:none;}
.prose p{font-size:.91rem;color:var(--ink2);line-height:1.8;margin-bottom:10px;}
.prose ul{margin-bottom:12px;list-style:none;padding-left:0;}
.prose li{font-size:.91rem;color:var(--ink2);padding:5px 0 5px 18px;position:relative;list-style:none;}
.prose li::before{content:'';position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--g2));}
.callout{display:flex;align-items:center;gap:14px;background:var(--gp);border:1px solid var(--gm);border-left:4px solid var(--g);padding:18px 20px;margin-top:24px;border-radius:0 var(--r) var(--r) 0;}
.callout div{font-size:.88rem;color:var(--ink2);}
.callout a{color:var(--g2);font-weight:700;}

/* Sidebar */
.sb-wrap{display:flex;flex-direction:column;gap:14px;}
.sb{background:var(--surf);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:box-shadow .25s;}
.sb:hover{box-shadow:var(--sh);}
.sbh{padding:12px 18px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:white;}
.sbh-g{background:linear-gradient(135deg,var(--g),var(--g2));}
.sbh-dk{background:var(--ink);}
.sbb{padding:14px 18px;}
.sbb p{font-size:.83rem;color:var(--ink2);margin-bottom:10px;line-height:1.6;}
.sb-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--rule);font-size:.84rem;color:var(--ink2);}
.sb-row:last-child{border-bottom:none;}
.sb-row a{color:var(--g2);font-weight:600;}
.bw{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.badge{background:var(--gp);color:var(--g2);border:1px solid var(--gm);font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:100px;}

/* Ausstellung cards */
.ag{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:8px;}
.ac{
  background:white;border:1px solid var(--rule);border-radius:var(--r);
  padding:24px;display:flex;flex-direction:column;gap:10px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;
  cursor:default;
}
.ac:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.11);border-color:var(--gm);}
.ac-ico{width:48px;height:48px;border-radius:50%;background:var(--gp);display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.ac:hover .ac-ico{transform:scale(1.15) rotate(-10deg);}
.ac-name{font-size:.9rem;font-weight:700;color:var(--ink);}
.ac-addr{font-size:.77rem;color:var(--ink3);line-height:1.5;}
.ac-tip{font-size:.76rem;color:var(--g2);font-weight:600;margin-top:4px;}

/* Team */
.team-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;padding:60px 0;}
.team-orb{
  position:relative;
  width:280px;height:280px;
}
.team-orb-bg{
  position:absolute;inset:-16px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--g),var(--g2),var(--g3),var(--g));
  animation:spin 8s linear infinite;
  opacity:.25;
}
.team-orb-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(white,white) padding-box,
    linear-gradient(135deg,var(--g),transparent 50%,var(--g2)) border-box;
  animation:spin 12s linear infinite reverse;
}
.team-photo{
  position:relative;z-index:1;
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,var(--gp),var(--gd));
  display:flex;align-items:center;justify-content:center;font-size:5.5rem;
  border:3px solid white;
  box-shadow:0 8px 40px rgba(0,0,0,.15);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.team-orb:hover .team-photo{transform:scale(1.04);}
.team-name{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-align:center;}
.team-role{font-size:.9rem;color:var(--ink3);text-align:center;}
.team-owner{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--g),var(--g2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:block;text-align:center;margin-top:6px;
}
.team-note{
  background:var(--gp);border:1.5px dashed var(--gm);border-radius:var(--r);
  padding:18px 28px;font-size:.87rem;color:var(--ink3);text-align:center;
  max-width:380px;
}

/* News */
.news{background:var(--surf);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-bottom:18px;box-shadow:var(--sh);}
.news-top{height:5px;background:linear-gradient(90deg,var(--g),var(--g2),var(--g3));}
.news-body{padding:32px;}
.news-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.news-tag{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--gp);color:var(--g2);padding:4px 10px;border-radius:100px;border:1px solid var(--gm);}
.news-date{font-size:.77rem;color:var(--ink3);}
.news-title{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px;line-height:1.3;}
.news-text{font-size:.91rem;color:var(--ink2);line-height:1.8;}
.news-text p{margin-bottom:10px;}
.news-text a{color:var(--g2);font-weight:600;}

/* Jobs */
.jc{
  background:var(--surf);border:1px solid var(--rule);border-radius:var(--r);
  padding:28px 32px;margin-bottom:14px;
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.jc::before{content:'';position:absolute;top:0;left:0;bottom:0;width:5px;background:linear-gradient(to bottom,var(--g),var(--g2),var(--g3));border-radius:var(--r) 0 0 var(--r);}
.jc:hover{transform:translateY(-3px) translateX(3px);box-shadow:var(--sh);}
.jt{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:8px;}
.jm{display:flex;gap:16px;flex-wrap:wrap;font-size:.79rem;color:var(--ink3);margin-bottom:12px;}
.jd{font-size:.87rem;color:var(--ink2);line-height:1.7;margin-bottom:16px;}
.jbtn{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--g),var(--g2));color:white;
  font-size:.8rem;font-weight:700;padding:10px 20px;border-radius:100px;
  box-shadow:0 4px 16px rgba(110,144,64,.35);transition:opacity .2s,transform .2s;
}
.jbtn:hover{opacity:.9;transform:translateY(-2px);}
.perks-box{background:linear-gradient(135deg,var(--gp),white);border:1px solid var(--gm);border-radius:var(--r);padding:28px 32px;margin-top:20px;}
.perks-t{font-size:.87rem;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.perks-t::after{content:'';flex:1;height:1px;background:var(--gm);}
.perks-g{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:500px){.perks-g{grid-template-columns:1fr;}}
.perk{background:white;border:1px solid var(--gm);border-radius:var(--rsm);padding:12px 14px;font-size:.83rem;color:var(--ink2);display:flex;align-items:flex-start;gap:8px;}
.perk::before{content:'✓';color:var(--g2);font-weight:800;flex-shrink:0;}

/* Über uns placeholder */
.quote-block{
  position:relative;
  margin-top:28px;
  background:var(--surf); border:1px solid var(--rule); border-left:4px solid var(--g2);
  border-radius:var(--r);
  padding:44px 40px;text-align:center;
}
.quote-mark{
  font-family:Georgia,serif;font-size:3.4rem;font-weight:900;line-height:1;
  color:var(--g2);opacity:.35;margin-bottom:-8px;
}
.quote-text{
  font-size:1.08rem;line-height:1.7;color:var(--ink);
  font-weight:500;max-width:620px;margin:0 auto 22px;
}
.quote-author{display:flex;flex-direction:column;align-items:center;gap:2px;}
.quote-name{font-size:.95rem;font-weight:800;color:var(--g3);}
.quote-role{font-size:.78rem;color:var(--ink3);}
@media(max-width:640px){
  .quote-block{padding:32px 22px;margin-top:20px;}
  .quote-text{font-size:.98rem;}
  .quote-mark{font-size:2.8rem;}
}

/* Kontakt */
.kl{display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start;padding:52px 0;}
@media(max-width:720px){.kl{grid-template-columns:1fr;}}
.kb{background:var(--surf);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);}
.kh{padding:14px 22px;background:linear-gradient(135deg,var(--g),var(--g2),var(--g3));color:white;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.kb-body{padding:22px;}
.kr{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule);font-size:.87rem;color:var(--ink2);}
.kr:last-child{border-bottom:none;}
.kr a{color:var(--g2);font-weight:600;}
.k-soc{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--rule);background:var(--gp);}
.ks{display:flex;align-items:center;gap:6px;border:1.5px solid var(--gm);background:white;padding:8px 14px;border-radius:100px;font-size:.76rem;font-weight:600;color:var(--ink);transition:border-color .2s,color .2s,transform .2s;cursor:pointer;}
.ks:hover{border-color:var(--g);color:var(--g2);transform:scale(1.04);}
.ks svg{width:13px;height:13px;fill:currentColor;}
.mwrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--rule);box-shadow:var(--sh);}
.mwrap iframe{display:block;width:100%;height:340px;border:none;}
.map-consent{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:340px;
  background:linear-gradient(135deg,var(--surf,#f4f6ef),var(--bg,#fbfcf8));
  text-align:center;
}
.map-consent-inner{max-width:340px;padding:24px;}
.map-consent-ico{font-size:2rem;display:block;margin-bottom:10px;}
.map-consent-inner strong{display:block;font-size:1rem;color:var(--ink);margin-bottom:8px;}
.map-consent-inner p{font-size:.78rem;line-height:1.55;color:var(--ink3);margin:0 0 16px;}
.map-consent-btn{
  background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;
  border:none;border-radius:100px;padding:11px 26px;
  font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;
  transition:transform .15s, box-shadow .15s;
}
.map-consent-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(109,144,64,.3);}
.mlink{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  background:linear-gradient(135deg,var(--g),var(--g2));color:white;
  font-size:.83rem;font-weight:700;padding:12px 22px;border-radius:100px;
  box-shadow:0 4px 18px rgba(110,144,64,.35);transition:opacity .2s,transform .2s;
}
.mlink:hover{opacity:.9;transform:translateY(-2px);}

/* Öffnungszeiten */
.oz{background:var(--surf);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:14px;}
.ozh{padding:12px 18px;background:linear-gradient(135deg,var(--g),var(--g2));color:white;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.ozh svg{width:13px;height:13px;fill:currentColor;}
.oz-row{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;border-bottom:1px solid var(--rule);font-size:.83rem;transition:background .15s;}
.oz-row:last-child{border-bottom:none;}
.oz-row:hover{background:var(--gp);}
.oz-day{font-weight:600;color:var(--ink);}
.oz-time{color:var(--ink3);font-size:.79rem;text-align:right;}
.oz-today{background:linear-gradient(90deg,var(--gp),white)!important;}
.oz-today .oz-day{color:var(--g2);}
.oz-dot{width:7px;height:7px;border-radius:50%;background:var(--g);display:inline-block;margin-right:6px;animation:glow 1.8s infinite;}

/* Legal */
.lw{max-width:780px;padding:48px 0;}
.lb{background:var(--surf);border:1px solid var(--rule);border-radius:var(--r);padding:32px;margin-bottom:12px;}
.lb h2{font-size:.91rem;font-weight:700;color:var(--ink);margin:20px 0 8px;padding-top:18px;border-top:1px solid var(--rule);}
.lb h2:first-child{margin-top:0;padding-top:0;border-top:none;}
.lb p{font-size:.86rem;color:var(--ink2);line-height:1.8;margin-bottom:8px;}
.lb a{color:var(--g2);}

/* FOOTER */
footer{background:#0f0f0d;padding:48px 0 24px;}
.ft{display:grid;grid-template-columns:1fr auto;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.08);align-items:start;}
@media(max-width:640px){.ft{grid-template-columns:1fr;gap:20px;}}
.f-tag{font-size:.87rem;color:rgba(255,255,255,.8);font-weight:500;line-height:1.6;}
.f-sub{font-size:.77rem;color:rgba(255,255,255,.5);}
.fc{display:flex;flex-direction:column;gap:6px;text-align:right;}
@media(max-width:640px){.fc{text-align:left;}}
.fc a{font-size:.84rem;color:rgba(255,255,255,.45);transition:color .2s;}
.fc a:hover{color:var(--g);}
.f-phone{font-size:1.05rem;font-weight:700;color:var(--g)!important;}
.fl{display:flex;flex-wrap:wrap;gap:6px 20px;padding:24px 0 12px;}
.fl :is(span,a){font-size:.77rem;color:rgba(255,255,255,.32);cursor:pointer;transition:color .2s;}
.fl :is(span,a):hover{color:var(--g);}
.fb{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);font-size:.72rem;color:rgba(255,255,255,.22);}
.fs{display:flex;gap:14px;}
.fs a{color:rgba(255,255,255,.3);transition:color .2s;}
.fs a:hover{color:var(--g);}
.fs svg{width:15px;height:15px;fill:currentColor;display:block;}

/* FAB */
.fab{
  display:none;position:fixed;bottom:24px;right:20px;z-index:9999;
  background:linear-gradient(135deg,var(--g),var(--g2));
  color:white;width:60px;height:60px;border-radius:50%;
  align-items:center;justify-content:center;
  box-shadow:0 6px 28px rgba(110,144,64,.55);
  animation:glow 3s infinite;text-decoration:none;transition:transform .2s;
}
.fab:hover{transform:scale(1.1);}
.fab svg{width:26px;height:26px;fill:white;}
@media(max-width:768px){.fab{display:flex;}}

@media(max-width:700px){
  nav{top:100px;}
  .sbar{top:148px;}
  .hero{padding:56px 0 48px;}
  .leist{padding:44px 0;}
  .ca{padding:32px 0;}
}

/* ══ DARK MODE TOKENS ══ */
/* Flash-prevention: set in <head> before render */
:root { color-scheme: light; }

/* Auto dark from OS when no manual preference */
@media (prefers-color-scheme: dark) and (min-width:99999px) {
  :root:not([data-theme="light"]) {
    --g:#A7BE7F; --g2:#b8cf90; --g3:#8aab5c; --g4:#6d9040;
    --o:#FF751F; --o2:#ff8c42;
    --gp:rgba(167,190,127,.12); --gm:rgba(167,190,127,.25); --gd:rgba(167,190,127,.18);
    --op:rgba(255,117,31,.1); --om:rgba(255,117,31,.2);
    --ink:#f0f0ed; --ink2:#c5c5c0; --ink3:#888880;
    --rule:#2e2e2a; --bg:#111110; --surf:#1a1a18;
    color-scheme: dark;
  }
}
/* Manual dark override */
[data-theme="dark"] {
  --g:#A7BE7F; --g2:#b8cf90; --g3:#8aab5c; --g4:#6d9040;
  --o:#FF751F; --o2:#ff8c42;
  --gp:rgba(167,190,127,.12); --gm:rgba(167,190,127,.25); --gd:rgba(167,190,127,.18);
  --op:rgba(255,117,31,.1); --om:rgba(255,117,31,.2);
  --ink:#f0f0ed; --ink2:#c5c5c0; --ink3:#888880;
  --rule:#2e2e2a; --bg:#111110; --surf:#1a1a18;
  color-scheme: dark;
}
/* Manual light override */
[data-theme="light"] { color-scheme: light; }

/* Smooth transition on theme switch – only key properties, not * */
body, header, nav, .nt, .ndrop, .sbar, .hero, .stats, .stat,
.lc, .uc, .sb, .prose, .news, .jc, .kb, .oz, .oz-row, .ac,
.partner-footer, .pf-logo, footer, .lb, .uphold, .perks-box, .perk,
.pb, .callout, .team-photo, .team-note, .gal, .gt {
  transition: background-color .35s ease, color .25s ease,
    border-color .3s ease, box-shadow .3s ease;
}

/* Dark mode adjustments */
[data-theme="dark"] header,
@media (prefers-color-scheme: dark) and (min-width:99999px) { :root:not([data-theme="light"]) header { box-shadow:0 2px 20px rgba(0,0,0,.4); } }
[data-theme="dark"] .hero { background: var(--surf); }
[data-theme="dark"] .hero::before { background:radial-gradient(circle,rgba(167,190,127,.08),transparent 70%); }
[data-theme="dark"] .hero::after { background:radial-gradient(circle,rgba(167,190,127,.05),transparent 70%); }
[data-theme="dark"] .stats { background:var(--surf); }
[data-theme="dark"] .ueber-strip { background:linear-gradient(155deg,rgba(167,190,127,.08) 0%,var(--surf) 55%); }

[data-theme="dark"] .pstrip { background:var(--surf); }
[data-theme="dark"] .pb { background:linear-gradient(135deg,rgba(167,190,127,.08) 0%,var(--surf) 55%,rgba(167,190,127,.04) 100%); }
[data-theme="dark"] .prose { background:var(--surf); }
[data-theme="dark"] .sb { background:var(--surf); }
[data-theme="dark"] .news { background:var(--surf); }
[data-theme="dark"] .jc { background:var(--surf); }
[data-theme="dark"] .kb { background:var(--surf); }
[data-theme="dark"] .lb { background:var(--surf); }
[data-theme="dark"] .oz { background:var(--surf); }
[data-theme="dark"] .ac { background:rgba(255,255,255,.04); }
[data-theme="dark"] .ac:hover { background:rgba(167,190,127,.08); }
[data-theme="dark"] .gal { border-color:var(--rule); }
[data-theme="dark"] .gt { background:var(--bg); }
[data-theme="dark"] .uphold { background:linear-gradient(135deg,rgba(167,190,127,.08),var(--surf)); }
[data-theme="dark"] .perks-box { background:rgba(167,190,127,.06); }
[data-theme="dark"] .perk { background:rgba(255,255,255,.04); }
[data-theme="dark"] .hero-badge { background:var(--surf); }
[data-theme="dark"] .team-photo { background:linear-gradient(135deg,rgba(167,190,127,.15),rgba(167,190,127,.08)); }
[data-theme="dark"] .team-note { background:rgba(167,190,127,.08); }
[data-theme="dark"] .sbar { background:linear-gradient(90deg,rgba(167,190,127,.06),var(--surf) 30%,var(--surf) 70%,rgba(167,190,127,.06)); }
[data-theme="dark"] .k-soc { background:rgba(255,255,255,.06); }
[data-theme="dark"] .p-logo { background:rgba(255,255,255,.04); border-radius:8px; }
[data-theme="dark"] .ndrop { background:var(--surf); border-color:var(--rule); }
/* Media query equivalents for auto dark */
@media (prefers-color-scheme: dark) and (min-width:99999px) {
  :root:not([data-theme="light"]) header { box-shadow:0 2px 20px rgba(0,0,0,.4); }
  :root:not([data-theme="light"]) .uc { background:rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .pstrip { background:var(--surf); }
  :root:not([data-theme="light"]) .k-soc { background:rgba(255,255,255,.06); }
}

/* ══ DARK MODE TOGGLE BUTTON ══ */
.theme-toggle {
  position:relative;
  width:52px; height:28px;
  background:var(--rule);
  border-radius:100px;
  border:none; cursor:pointer;
  padding:0; flex-shrink:0;
  transition:background .3s;
  outline:none;
}
.theme-toggle:focus-visible { box-shadow:0 0 0 3px rgba(167,190,127,.5); }
.theme-toggle::before {
  content:'';
  position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:50%;
  background:white;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s;
}
[data-theme="dark"] .theme-toggle,
@media (prefers-color-scheme: dark) and (min-width:99999px) {
  :root:not([data-theme="light"]) .theme-toggle { background:var(--g2); }
}
[data-theme="dark"] .theme-toggle { background:var(--g2); }
[data-theme="dark"] .theme-toggle::before { transform:translateX(24px); background:#1a1a18; }
.toggle-icons { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 7px; pointer-events:none; font-size:.7rem; }
.ti-sun { opacity:1; transition:opacity .25s; }
.ti-moon { opacity:.4; transition:opacity .25s; }
[data-theme="dark"] .ti-sun { opacity:.4; }
[data-theme="dark"] .ti-moon { opacity:1; }

/* ══ CURSOR GLOW ══ */
.cursor-glow {
  position:fixed; pointer-events:none; z-index:9998;
  width:400px; height:400px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(167,190,127,.12) 0%,transparent 65%);
  transform:translate(-50%,-50%);
  transition:opacity .4s;
  will-change:transform;
  mix-blend-mode:normal;
}
[data-theme="dark"] .cursor-glow {
  background:radial-gradient(circle,rgba(167,190,127,.18) 0%,transparent 65%);
}
@media (hover:none) { .cursor-glow { display:none; } }

/* ══ MAGNETIC BUTTON ══ */
.btn-p { will-change:transform; }

/* ══ SECTION TRANSITION ══ */
@keyframes secIn  { 0%{opacity:0;transform:translateY(18px);} 100%{opacity:1;transform:none;} }
@keyframes secOut { 0%{opacity:1;transform:none;} 100%{opacity:0;transform:translateY(-10px);} }
/* secOut handled by overlay */

/* Marquee dark mode text fix */
[data-theme="dark"] 
[data-theme="dark"] 
[data-theme="dark"] 
@media (prefers-color-scheme: dark) and (min-width:99999px) {
  :root:not([data-theme="light"]) 
}

/* secIn handled by overlay */

/* ══ MARQUEE ══ */








@keyframes marqueeScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}






/* Sidebar dark mode readability */
[data-theme="dark"] .sb-row { color:var(--ink2); border-bottom-color:var(--rule); }
[data-theme="dark"] .sbh-dk { background:#111; color:rgba(255,255,255,.9); }
[data-theme="dark"] .sbh-g  { }
[data-theme="dark"] .sbb { background:transparent; }
@media (prefers-color-scheme: dark) and (min-width:99999px) {
  :root:not([data-theme="light"]) .sb-row { color:var(--ink2); }
  :root:not([data-theme="light"]) .sbh-dk { background:#111; color:rgba(255,255,255,.9); }
}


/* ══ PARTNER FOOTER STRIP ══ */
.partner-footer {
  background:var(--surf);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:32px 0;
  overflow:hidden;
}
[data-theme="dark"] .partner-footer { background:var(--surf); }
@media (prefers-color-scheme: dark) and (min-width:99999px){:root:not([data-theme="light"]) .partner-footer{background:var(--surf);}}
.pf-label {
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);text-align:center;margin-bottom:22px;
}
.pf-track-outer {
  overflow:hidden;position:relative;
}
.pf-track-outer::before,.pf-track-outer::after {
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.pf-track-outer::before{left:0;background:linear-gradient(to right,var(--surf),transparent);}
.pf-track-outer::after {right:0;background:linear-gradient(to left, var(--surf),transparent);}
.pf-track-inner { overflow:hidden; }
.pf-track {
  display:flex;align-items:center;
  width:max-content;
  animation:marqueeScroll 26s linear infinite;
}
.pf-track:hover { animation-play-state:paused; }



.pf-sep { width:1px; height:34px; background:var(--rule); flex-shrink:0; align-self:center; margin:0 8px; }

/* marqueeScroll already defined in the old CSS, reuse it */


/* SVG partner logos dark mode text fix */
[data-theme="dark"] .pf-logo svg text[fill="currentColor"] { fill:var(--ink2); }
[data-theme="dark"] .pf-track-outer::before{background:linear-gradient(to right,var(--surf),transparent);}
[data-theme="dark"] .pf-track-outer::after {background:linear-gradient(to left, var(--surf),transparent);}


/* ══ COMPREHENSIVE DARK MODE FIXES ══ */

/* Footer always dark regardless of theme */
footer { background:#0f0f0d !important; }
[data-theme="dark"] footer,
[data-theme="light"] footer { background:#0f0f0d !important; }

/* Impressum/Datenschutz text in footer links */
[data-theme="dark"] .fl span { color:rgba(255,255,255,.38); }
[data-theme="dark"] .fb { color:rgba(255,255,255,.28); border-top-color:rgba(255,255,255,.08); }
[data-theme="dark"] .f-tag { color:rgba(255,255,255,.85); }
[data-theme="dark"] .f-sub { color:rgba(255,255,255,.5); }
[data-theme="dark"] .fc a { color:rgba(255,255,255,.5); }
[data-theme="dark"] .f-phone { color:var(--g) !important; }
[data-theme="dark"] .ft { border-bottom-color:rgba(255,255,255,.08); }

/* uc cards (over uns) – white bg not adapting */




/* Hero badge */
[data-theme="dark"] .hero-badge { background:var(--surf); }
[data-theme="dark"] .hb-text strong { color:var(--ink); }
[data-theme="dark"] .hb-text span { color:var(--ink3); }

/* Prose backgrounds */
[data-theme="dark"] .prose { background:var(--surf); color:var(--ink2); }
[data-theme="dark"] .callout { background:rgba(167,190,127,.08); border-left-color:var(--g); }

/* Stats */
[data-theme="dark"] .stats { background:var(--surf); }
[data-theme="dark"] .stat { background:var(--surf); }
[data-theme="dark"] .stat:hover { background:rgba(167,190,127,.06); }

/* News */
[data-theme="dark"] .news { background:var(--surf); }
[data-theme="dark"] .news-title { color:var(--ink); }

/* Jobs */
[data-theme="dark"] .jc { background:var(--surf); }
[data-theme="dark"] .jt { color:var(--ink); }
[data-theme="dark"] .perks-box { background:rgba(167,190,127,.06); }
[data-theme="dark"] .perk { background:rgba(255,255,255,.04); color:var(--ink2); }

/* Kontakt */
[data-theme="dark"] .kb { background:var(--surf); }
[data-theme="dark"] .kr { color:var(--ink2); border-bottom-color:var(--rule); }
[data-theme="dark"] .oz { background:var(--surf); }
[data-theme="dark"] .oz-row { color:var(--ink2); }
[data-theme="dark"] .oz-day { color:var(--ink); }

/* Ausstellung cards */
[data-theme="dark"] .ac { background:rgba(255,255,255,.04); }
[data-theme="dark"] .ac-name { color:var(--ink); }
[data-theme="dark"] .ac-addr { color:var(--ink3); }

/* Über uns strip */
[data-theme="dark"] .ueber-strip { background:linear-gradient(155deg,rgba(167,190,127,.06) 0%,var(--surf) 55%); }
[data-theme="dark"] .u-title { color:var(--ink); }
[data-theme="dark"] .u-body { color:var(--ink2); }

/* Legal pages */
[data-theme="dark"] .lb { background:var(--surf); }
[data-theme="dark"] .lb h2 { color:var(--ink); border-top-color:var(--rule); }
[data-theme="dark"] .lb p { color:var(--ink2); }

/* Team */
[data-theme="dark"] .team-note { color:var(--ink3); }
[data-theme="dark"] .team-name { color:var(--ink); }
[data-theme="dark"] .team-role { color:var(--ink3); }

/* Page banner */
[data-theme="dark"] .pb { background:linear-gradient(135deg,rgba(167,190,127,.07) 0%,var(--surf) 55%,rgba(167,190,127,.03) 100%); }
[data-theme="dark"] .pb-t { color:var(--ink); }
[data-theme="dark"] .pb-s { color:var(--ink3); }

/* Hero */
[data-theme="dark"] .hero { background:var(--bg); }
[data-theme="dark"] .hero-h1 { color:var(--ink); }
[data-theme="dark"] .hero-sub { color:var(--ink2); }

/* Nav */
[data-theme="dark"] nav { background:var(--surf); border-bottom-color:var(--rule); }
[data-theme="dark"] .nt { color:var(--ink3); }
[data-theme="dark"] .nt:hover { color:var(--g2); }
[data-theme="dark"] .ndrop { background:var(--surf); border-color:var(--rule); }
[data-theme="dark"] .ndi { color:var(--ink2); }
[data-theme="dark"] .ndi:hover { background:rgba(167,190,127,.08); color:var(--g2); }

/* Social bar */
[data-theme="dark"] .sbar { background:linear-gradient(90deg,rgba(167,190,127,.05),var(--surf) 30%,var(--surf) 70%,rgba(167,190,127,.05)); }
[data-theme="dark"] .sbl { color:var(--ink3); border-right-color:var(--rule); }
[data-theme="dark"] .sbl:first-child { border-left-color:var(--rule); }

/* Partner footer */
[data-theme="dark"] .partner-footer { background:var(--surf); border-color:var(--rule); }
[data-theme="dark"] .pf-label { color:var(--ink3); }
[data-theme="dark"] .pf-track-outer::before { background:linear-gradient(to right,var(--surf),transparent); }
[data-theme="dark"] .pf-track-outer::after  { background:linear-gradient(to left, var(--surf),transparent); }

/* Uphold placeholder */
[data-theme="dark"] .uphold h2 { color:var(--ink); }
[data-theme="dark"] .uphold p { color:var(--ink3); }

/* Sb (sidebar) rows */
[data-theme="dark"] .sb-row { color:var(--ink2); border-bottom-color:var(--rule); }
[data-theme="dark"] .sbb p { color:var(--ink2); }

/* Media query equivalents for auto-dark */
@media (prefers-color-scheme: dark) and (min-width:99999px) {
  :root:not([data-theme="light"]) footer { background:#0f0f0d !important; }
  :root:not([data-theme="light"]) .fl span { color:rgba(255,255,255,.38); }
  :root:not([data-theme="light"]) .fb { color:rgba(255,255,255,.28); }
  :root:not([data-theme="light"]) .f-tag { color:rgba(255,255,255,.85); }
  :root:not([data-theme="light"]) .f-sub { color:rgba(255,255,255,.5); }
  :root:not([data-theme="light"]) .uc { background:rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .hero-badge { background:var(--surf); }
  :root:not([data-theme="light"]) .pb-t { color:var(--ink); }
  :root:not([data-theme="light"]) .hero-h1 { color:var(--ink); }
  :root:not([data-theme="light"]) .ac { background:rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .jc { background:var(--surf); }
  :root:not([data-theme="light"]) .perk { background:rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .lb { background:var(--surf); }
  :root:not([data-theme="light"]) .oz { background:var(--surf); }
}


/* uc card arrow + clickable */
.uc-arr {
  margin-left:auto;flex-shrink:0;
  font-size:1rem;color:var(--g2);
  opacity:0;transform:translateX(-6px);
  transition:opacity .2s,transform .2s;
}
.uc:hover .uc-arr { opacity:1;transform:translateX(0); }


/* ════════════════════════════════════════════════════════
   MOBILE RESPONSIVE – Full overhaul
   Tested breakpoints: 390px (iPhone), 414px, 768px (tablet)
════════════════════════════════════════════════════════ */

/* ── Global mobile base ── */
@media(max-width:768px){
  /* Prevent any horizontal overflow */
  html, body { overflow-x:hidden; max-width:100%; }

  /* Wrapper padding */
  .w { padding:0 16px; }

  /* ── HEADER ── */
  .hdr { height:80px; gap:12px; }
  .logo-a img { height:64px; }
  .hdr-phone small { display:none; }
  .hdr-phone a { font-size:.95rem; }
  .hdr-btn { padding:9px 16px; font-size:.76rem; }

  /* ── NAV ── */
  nav { top:80px; }
  .sbar { top:124px; }
  .nav-row { gap:0; }
  .nt { padding:0 12px; font-size:.78rem; height:44px; }

  /* ── SOCIAL BAR ── */
  .sbl { padding:0 12px; font-size:.72rem; gap:5px; }

  /* ── HERO ── */
  .hero { padding:36px 0 32px; }
  .hero-in { grid-template-columns:1fr; gap:28px; }
  .hero-h1 { font-size:clamp(1.7rem,7vw,2.4rem); margin-bottom:14px; }
  .hero-sub { font-size:.88rem; margin-bottom:24px; max-width:100%; }
  .hero-btns { gap:10px; }
  .btn-p, .btn-g { padding:12px 20px; font-size:.84rem; }
  /* Hero image full width on mobile */
  .hero-img-wrap { width:100%; }
  .hero-img-inner { aspect-ratio:16/9; }
  /* Hero badge smaller or hidden on small screens */
  .hero-badge { bottom:-10px; left:-8px; padding:10px 12px; min-width:auto; }
  .hb-icon { width:32px; height:32px; font-size:1rem; }
  .hb-text strong { font-size:.78rem; }
  .hb-text span { font-size:.64rem; }

  /* ── STATS ── */
  .stats { padding:16px 0; }
  .stats-g { grid-template-columns:1fr 1fr; gap:1px; }
  .stat { padding:14px 12px; }
  .sn { font-size:1.5rem; }
  .sl { font-size:.68rem; }

  /* ── LEISTUNGEN ── */
  .leist { padding:36px 0; }
  .l-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .lc-body { padding:12px; }
  .lc-name { font-size:.85rem; }
  .lc-desc { font-size:.74rem; }
  .lc-tag { font-size:.58rem; }
  .lc-arr { font-size:.72rem; margin-top:6px; }

  /* ── ÜBER UNS ── */
  .ueber-strip { padding:40px 0; }
  .ug { grid-template-columns:1fr; gap:28px; }
  .u-title { font-size:1.35rem; }
  .u-body { font-size:.86rem; }
  .uc { padding:14px 16px; }
  .uc-ico { width:38px; height:38px; font-size:1.1rem; }
  .uc-txt strong { font-size:.84rem; }
  .uc-txt span { font-size:.73rem; }
  .uc-arr { font-size:.85rem; }

  /* ── PAGE BANNER ── */
  .pb { padding:32px 0; }
  .pb-t { font-size:clamp(1.4rem,6vw,2rem); }
  .pb-s { font-size:.84rem; margin-top:5px; }

  /* ── CONTENT AREA (inner pages) ── */
  .ca { padding:24px 0; }
  .cg { grid-template-columns:1fr; gap:20px; }

  /* ── GALLERY ── */
  .gal { margin-bottom:14px; }
  .gm-wrap { aspect-ratio:16/10; }
  /* Thumbs: scrollable row on mobile */
  .gt {
    display:flex; gap:4px; padding:4px;
    overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .gt::-webkit-scrollbar { display:none; }
  .gth {
    flex:0 0 72px;   /* fixed width, don't shrink */
    height:48px;
    aspect-ratio:unset;
  }

  /* ── PROSE ── */
  .prose { padding:20px 18px; }
  .prose h2 { font-size:.92rem; }
  .prose p, .prose li { font-size:.86rem; }

  /* ── SIDEBAR ── */
  .sb-wrap { gap:10px; }
  .sb { border-radius:var(--rsm); }
  .sbh { padding:10px 14px; font-size:.64rem; }
  .sbb { padding:10px 14px; }
  .sb-row { font-size:.8rem; padding:7px 0; }

  /* ── AUSSTELLUNG CARDS ── */
  .ag { grid-template-columns:1fr 1fr; gap:10px; }
  .ac { padding:16px; }
  .ac-ico { width:38px; height:38px; font-size:1.1rem; }
  .ac-name { font-size:.84rem; }
  .ac-addr, .ac-tip { font-size:.72rem; }

  /* ── TEAM ── */
  .team-wrap { padding:36px 0; }
  .team-orb { width:220px; height:220px; }
  .team-name { font-size:1.2rem; }
  .team-role { font-size:.84rem; }

  /* ── NEWS ── */
  .news-body { padding:20px 18px; }
  .news-title { font-size:1rem; }
  .news-text { font-size:.86rem; }

  /* ── JOBS ── */
  .jc { padding:20px 18px 20px 24px; }
  .jt { font-size:.92rem; }
  .jm { font-size:.74rem; gap:10px; }
  .jd { font-size:.83rem; }
  .perks-box { padding:20px 18px; }
  .perks-g { grid-template-columns:1fr; gap:8px; }

  /* ── ÜBER UNS PAGE ── */
  .uphold { padding:40px 20px; }

  /* ── KONTAKT ── */
  .kl { grid-template-columns:1fr; gap:14px; padding:28px 0; }
  .kb-body { padding:16px; }
  .kr { font-size:.83rem; padding:8px 0; }
  .k-soc { padding:12px 16px; gap:6px; flex-wrap:wrap; }
  .ks { padding:7px 12px; font-size:.73rem; }
  .oz { margin-top:10px; }
  .oz-row { padding:8px 14px; font-size:.78rem; }
  .mwrap iframe { height:240px; }

  /* ── PARTNER FOOTER ── */
  .partner-footer { padding:24px 0; }
  .pf-label { font-size:.62rem; margin-bottom:16px; }
  .pf-logo { padding:6px 24px; }
  .pf-logo svg { height:30px; }

  /* ── FOOTER ── */
  footer { padding:32px 0 20px; }
  .ft { grid-template-columns:1fr; gap:16px; padding-bottom:20px; }
  .fc { text-align:left; }
  .f-tag { font-size:.84rem; }
  .f-sub { font-size:.74rem; }
  .fl { gap:4px 14px; padding:16px 0 8px; }
  .fl span { font-size:.73rem; }
  .fb { font-size:.68rem; gap:10px; flex-direction:column; align-items:flex-start; }

  /* ── FAB ── */
  .fab { bottom:20px; right:16px; width:54px; height:54px; }
  .fab svg { width:22px; height:22px; }

  /* ── DROPDOWN ── */
  .ndrop { min-width:180px; }
  .ndi { padding:10px 16px; font-size:.8rem; }
}

/* ── Extra small: 390px and below ── */
@media(max-width:420px){
  .hdr { height:70px; }
  nav { top:64px; }
  .sbar { top:108px; }
  .logo-a img { height:54px; }
  .hdr-phone a { font-size:.85rem; }
  .hero { padding:28px 0 24px; }
  .hero-h1 { font-size:clamp(1.5rem,8vw,2rem); }
  .l-grid { grid-template-columns:1fr; gap:10px; }
  .ag { grid-template-columns:1fr; }
  .stats-g { grid-template-columns:1fr 1fr; }
  .hero-badge { display:none; } /* too cramped on tiny screens */
  .pb-t { font-size:clamp(1.3rem,7vw,1.8rem); }
  .nt { padding:0 9px; font-size:.74rem; }
  .sbl { padding:0 10px; }
}

/* ── Tablet 769-1024px ── */
@media(min-width:769px) and (max-width:1024px){
  .w { padding:0 24px; }
  .hero-h1 { font-size:clamp(1.8rem,4vw,2.6rem); }
  .l-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
  .cg { grid-template-columns:1fr 280px; gap:24px; }
  .ug { gap:40px; }
  .kl { grid-template-columns:320px 1fr; }
}


/* Mobile performance: reduce transitions */
@media(max-width:768px){
  /* Disable heavy transitions on mobile for performance */
  .hero-img-wrap { animation-duration:9s; }
  .lc { transition:transform .2s,box-shadow .2s; }
  .uc { transition:transform .2s,box-shadow .2s; }
  /* Disable cursor glow on touch */
  .cursor-glow { display:none!important; }
  /* No magnetic effect (handled in JS too) */
  .btn-p { animation:none; }
  .hdr-btn { animation:none; }
}


/* ── Hide large orbs on mobile (cause overflow) ── */
@media(max-width:768px){
  .orb1,.orb2,.orb3 { display:none; }
}

/* ── Hero badge mobile ── */
@media(max-width:768px){
  .hero-badge {
    position:static;
    margin-top:16px;
    bottom:auto; left:auto;
    width:100%;
    border-radius:var(--r);
  }
}
@media(max-width:420px){
  .hero-badge { display:none; }
}

/* ── Nav mobile fixes ── */
@media(max-width:768px){
  .nav-row { min-width:unset; }
  .nav-scroll { max-width:100%; }
  .ndrop { min-width:160px; max-width:calc(100% - 16px); }
}

/* ── Partner footer mobile ── */
@media(max-width:768px){
  .pf-logo { padding:6px 20px; }
  .pf-logo svg { height:26px; }
  .pf-sep { height:22px; }
}

/* ── Gallery mobile ── */
@media(max-width:768px){
  .gm-wrap { aspect-ratio:4/3; }
  .gt { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .gth { flex:0 0 64px; height:44px; aspect-ratio:unset; min-width:64px; }
  .gal { border-radius:var(--rsm); }
}

/* ── Content mobile ── */
@media(max-width:768px){
  /* Prose */
  .prose { padding:18px 16px; border-radius:var(--rsm); }
  .prose h2 { font-size:.9rem; gap:8px; }
  .prose p, .prose li { font-size:.85rem; line-height:1.7; }
  .prose li { padding-left:16px; }
  .prose li::before { width:6px; height:6px; top:12px; }
  .callout { padding:14px 16px; gap:10px; }
  .callout div { font-size:.83rem; }

  /* Sidebar */
  .sb-wrap { gap:10px; }
  .sbh { font-size:.64rem; padding:10px 14px; letter-spacing:.06em; }
  .sbb { padding:12px 14px; }
  .sb-row { font-size:.8rem; gap:8px; }

  /* Ausstellung */
  .ag { grid-template-columns:1fr; gap:10px; }
  .ac { padding:16px; flex-direction:row; align-items:center; gap:14px; }
  .ac-ico { flex-shrink:0; width:40px; height:40px; }

  /* Jobs */
  .jc { padding:18px 16px 18px 20px; }
  .jc::before { width:4px; }
  .jt { font-size:.9rem; margin-bottom:6px; }
  .jm { font-size:.72rem; gap:8px; margin-bottom:8px; }
  .jm span { white-space:nowrap; }
  .jd { font-size:.82rem; margin-bottom:12px; }
  .jbtn { font-size:.78rem; padding:9px 16px; }
  .perks-box { padding:18px 16px; }
  .perks-g { grid-template-columns:1fr; gap:8px; }
  .perk { font-size:.8rem; padding:10px 12px; }

  /* Legal */
  .lw { padding:32px 0; }
  .lb { padding:20px 18px; }
  .lb h2 { font-size:.88rem; }
  .lb p { font-size:.83rem; }

  /* Kontakt */
  .k-soc { gap:6px; }
  .ks { font-size:.72rem; padding:7px 10px; }
  .oz-row { padding:8px 14px; font-size:.78rem; }
  .oz-day, .oz-time { font-size:.76rem; }
  .mwrap iframe { height:200px; }
  .mlink { font-size:.8rem; padding:10px 18px; }

  /* Team */
  .team-orb { width:220px; height:220px; }
  .team-note { padding:14px 20px; font-size:.83rem; }
  .team-name { font-size:1.15rem; }
  .team-role { font-size:.84rem; }

  /* News */
  .news-body { padding:18px 16px; }
  .news-meta { margin-bottom:12px; }
  .news-title { font-size:1rem; margin-bottom:10px; }
  .news-text { font-size:.85rem; }

  /* Über uns page */
  .uphold { padding:36px 18px; }
  .uphold h2 { font-size:1.2rem; }

  /* Page banner */
  .pb { padding:28px 0; }
  .pb-eye { font-size:.62rem; }
  .pb-t { font-size:clamp(1.3rem,6vw,1.9rem); letter-spacing:-.03em; }
  .pb-s { font-size:.82rem; }

  /* Section titles */
  .sec-title { font-size:1.4rem; margin-bottom:20px; }
  .eyebrow { font-size:.64rem; }

  /* Leistungen cards */
  .l-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .lc-body { padding:12px; }
  .lc-tag { font-size:.6rem; padding:2px 8px; }
  .lc-name { font-size:.84rem; margin-bottom:4px; }
  .lc-desc { font-size:.74rem; }
  .lc-arr { font-size:.72rem; margin-top:6px; }
  .lc-img { aspect-ratio:4/3; }

  /* Stats */
  .stat { padding:14px 10px; }
  .sn { font-size:1.4rem; }
  .sl { font-size:.66rem; }

  /* Footer */
  .fl { gap:4px 12px; padding:14px 0 8px; }
  .fl span { font-size:.71rem; }
  .fb { flex-direction:column; align-items:flex-start; gap:8px; }
  .fs { gap:12px; }
  .fs svg { width:14px; height:14px; }
}

/* ── Touch feedback for clickable cards ── */
@media(max-width:768px){
  
  .lc:active { transform:translateY(-3px); }
}

/* ── Extra small: 390px and below ── */
@media(max-width:420px){
  .hdr { height:60px; }
  nav { top:70px !important; }
  .sbar { top:110px !important; }
  .logo-a img { height:44px; }
  .hdr-phone a { font-size:.82rem; }
  .hdr-btn { display:none; }
  .hero { padding:24px 0 20px; }
  .hero-h1 { font-size:clamp(1.4rem,8vw,1.9rem); }
  .hero-btns { gap:8px; }
  .btn-p, .btn-g { padding:11px 18px; font-size:.82rem; }
  .l-grid { grid-template-columns:1fr; }
  .ag { grid-template-columns:1fr; }
  .nt { padding:0 8px; font-size:.72rem; height:40px; }
  .sbl { padding:0 10px; }
  .pb-t { font-size:clamp(1.2rem,7vw,1.6rem); }
  .cg { gap:16px; }
  .stats-g { grid-template-columns:1fr 1fr; }
  .hero-img-inner { aspect-ratio:16/10; }
}


/* ════ HEIZUNG & SANITÄR – Mobile Fix ════ */
@media(max-width:768px){

  /* Gallery: allow thumbs to scroll horizontally */
  .gal {
    overflow:visible;       /* don't clip the scrollable thumb row */
    border-radius:var(--rsm);
  }
  .gm-wrap {
    border-radius:var(--rsm) var(--rsm) 0 0;
    overflow:hidden;        /* main image still clipped */
    aspect-ratio:16/10;
  }
  .gt {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:3px;
    padding:3px;
    background:var(--bg);
    border:1px solid var(--rule);
    border-top:none;
    border-radius:0 0 var(--rsm) var(--rsm);
  }
  .gt::-webkit-scrollbar { display:none; }

  /* Thumbnails: fixed width, no aspect-ratio constraint */
  .gth {
    flex:0 0 56px;
    min-width:56px;
    height:40px;
    aspect-ratio:unset;
    border-radius:2px;
  }
  .gth img {
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Gallery click hint */
  .gm-wrap::after { display:none; }

  /* Sidebar on mobile: horizontal compact cards */
  .sb-wrap {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  /* Kontakt sidebar takes full width */
  .sb-wrap .sb:first-child {
    grid-column:1 / -1;
  }

  /* Prose: ensure text wraps, no overflow */
  .prose {
    word-break:break-word;
    overflow-wrap:break-word;
  }
  .prose ul {
    padding-left:0;
  }

  /* Callout box */
  .callout {
    flex-direction:column;
    gap:8px;
    padding:14px;
  }

  /* Page banner subtitle wraps nicely */
  .pb-s {
    word-break:break-all;
  }
}

@media(max-width:420px){
  .gth { flex:0 0 48px; min-width:48px; height:34px; }
  .sb-wrap { grid-template-columns:1fr; }
  .sb-wrap .sb:first-child { grid-column:auto; }
}


/* ── Über uns Fakten-Block ── */
.u-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.u-fact {
  background:white;
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:22px 20px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s;
}
.u-fact:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  border-color:var(--gm);
}
.u-fact-num {
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.05em;
  line-height:1;
  margin-bottom:6px;
  background:linear-gradient(135deg,var(--g2),var(--g3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.u-fact-label {
  font-size:.78rem;
  color:var(--ink3);
  line-height:1.45;
}
[data-theme="dark"] .u-fact {
  background:rgba(255,255,255,.04);
  border-color:var(--rule);
}
[data-theme="dark"] .u-fact-label { color:var(--ink3); }
@media(max-width:768px){
  .u-facts { grid-template-columns:1fr 1fr; gap:10px; }
  .u-fact { padding:16px 14px; }
  .u-fact-num { font-size:1.6rem; }
  .u-fact-label { font-size:.73rem; }
}
@media(max-width:420px){
  .u-facts { grid-template-columns:1fr 1fr; }
}


/* ═══════════ FEATURE 1: COUNTER ═══════════ */
.sn { font-variant-numeric: tabular-nums; }

/* ═══════════ FEATURE 3: KINETIC TEXT ═══════════ */
.kinetic-prefix {
  display:inline-block;
  background:linear-gradient(135deg,var(--g2),var(--g3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  min-width:1ch;
}
.kinetic-cursor {
  display:inline-block;
  color:var(--g2);
  animation:blink 1s step-end infinite;
  font-weight:300;
}
@keyframes blink {
  0%,100% { opacity:1; }
  50% { opacity:0; }
}

/* ═══════════ FEATURE 4: ICON MICRO-INTERACTIONS ═══════════ */
.lc-icon {
  position:absolute;
  top:12px; left:12px;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  z-index:2;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] .lc-icon { background:rgba(26,26,24,.92); }
.lc:hover .lc-icon { transform:scale(1.15) rotate(-8deg); }
/* Per-icon micro animation on hover */
.lc:hover .lc-icon .ic-flame { animation:flicker .6s ease-in-out infinite; }
.lc:hover .lc-icon .ic-drop  { animation:dropBounce 1s ease-in-out infinite; }
.lc:hover .lc-icon .ic-bath  { animation:wobble 1s ease-in-out infinite; }
.lc:hover .lc-icon .ic-air   { animation:sway 1.5s ease-in-out infinite; }
.ic-flame,.ic-drop,.ic-bath,.ic-air { display:inline-block; }
@keyframes flicker {
  0%,100% { transform:scale(1) rotate(0deg); }
  25% { transform:scale(1.1) rotate(-3deg); }
  75% { transform:scale(1.05) rotate(3deg); }
}
@keyframes dropBounce {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
@keyframes wobble {
  0%,100% { transform:rotate(0deg); }
  25% { transform:rotate(-6deg); }
  75% { transform:rotate(6deg); }
}
@keyframes sway {
  0%,100% { transform:translateX(0); }
  50% { transform:translateX(4px); }
}

/* ═══════════ FEATURE 2: PARALLAX ═══════════ */
.hero-img-wrap { will-change:transform; }
.orb { will-change:transform; }

/* Reduce-motion: disable all decorative animation */
@media (prefers-reduced-motion: reduce) {
  .kinetic-cursor, .lc-icon .ic-flame, .lc-icon .ic-drop,
  .lc-icon .ic-bath, .lc-icon .ic-air { animation:none !important; }
  .hero-img-wrap, .orb { transform:none !important; }
}


/* Kinetic text: prevent layout shift on word change */
.hero-h1 { min-height:2.1em; }
@media(max-width:768px){
  .hero-h1 { min-height:auto; }
  /* On mobile: counter still works, parallax disabled (handled in JS) */
  .lc-icon { width:34px; height:34px; font-size:1rem; top:10px; left:10px; }
}
/* kinetic word: keep on its own line, stable width */
.kinetic-prefix { white-space:nowrap; }


/* ═══════════ GRADIENT MESH BACKGROUND ═══════════ */
.hero-mesh {
  position:absolute;
  inset:-20%;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(circle at 20% 30%, rgba(167,190,127,.35), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(138,171,92,.28), transparent 40%),
    radial-gradient(circle at 60% 75%, rgba(109,144,64,.22), transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(167,190,127,.20), transparent 45%);
  background-size:200% 200%, 180% 180%, 220% 220%, 200% 200%;
  filter:blur(8px);
  animation:meshDrift 24s ease-in-out infinite;
}
[data-theme="dark"] .hero-mesh { opacity:.4; }
@media (prefers-color-scheme: dark) and (min-width:99999px){:root:not([data-theme="light"]) .hero-mesh{opacity:.4;}}
@keyframes meshDrift {
  0%   { background-position:0% 0%, 100% 0%, 50% 100%, 0% 100%; }
  25%  { background-position:50% 30%, 60% 40%, 80% 60%, 30% 70%; }
  50%  { background-position:100% 100%, 0% 100%, 20% 0%, 100% 0%; }
  75%  { background-position:50% 70%, 40% 60%, 60% 40%, 70% 30%; }
  100% { background-position:0% 0%, 100% 0%, 50% 100%, 0% 100%; }
}

/* ═══════════ PARTICLES CANVAS ═══════════ */
.hero-particles {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

/* Mesh + particles sit behind content but above base bg */
.hero-in { position:relative; z-index:2; }
.orb { z-index:1; }

/* Mobile: mesh lighter, particles disabled via JS */
@media(max-width:768px){
  .hero-mesh { opacity:.4; animation-duration:30s; filter:blur(12px); }
}
@media(prefers-reduced-motion:reduce){
  .hero-mesh { animation:none; }
  .hero-particles { display:none; }
}


/* ── NAV: sauberes natives Scrollen, kein Drag-Wabbeln ── */
.nav-scroll {
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-behavior:smooth;
  touch-action:pan-x;          /* nur horizontal, kein diagonales Ziehen */
  overscroll-behavior-x:contain;
}
.nav-scroll::-webkit-scrollbar { display:none; }
.nav-row {
  display:flex;
  width:max-content;
  /* KEIN transform, KEIN drag */
}
.nt {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;   /* verhindert Zoom-Doppeltipp-Delay & Drag */
}


/* ═══════════════════════════════════════════════
   FINALE MOBILE-KORREKTUREN (überschreibt Konflikte)
═══════════════════════════════════════════════ */
@media(max-width:768px){
  /* Sidebar IMMER einspaltig – verhindert Cut/Overflow auf Heizung etc. */
  .sb-wrap {
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }
  .sb-wrap .sb:first-child { grid-column:auto !important; }

  /* Content-Grid sicher einspaltig */
  .cg { grid-template-columns:1fr !important; gap:20px !important; }

  /* Galerie: Hauptbild + scrollbare Thumbs, nichts wird abgeschnitten */
  .gal { overflow:visible !important; }
  .gm-wrap { overflow:hidden; aspect-ratio:16/10; }
  .gt {
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:4px; padding:4px;
  }
  .gt::-webkit-scrollbar { display:none; }
  .gth {
    flex:0 0 60px !important;
    min-width:60px !important;
    width:60px !important;
    height:42px !important;
    aspect-ratio:unset !important;
  }
  .gth img { width:100%; height:100%; object-fit:cover; }

  /* Alles im Content-Bereich bleibt in der Breite */
  .ca, .cg, .prose, .sb-wrap, .sb, .gal { max-width:100%; box-sizing:border-box; }
  .prose { word-break:break-word; overflow-wrap:anywhere; }

  /* Tabellen/Listen nicht überlaufen */
  .prose ul { padding-left:0; }
  .prose li { padding-left:16px; }
}

@media(max-width:420px){
  .gth { flex:0 0 52px !important; min-width:52px !important; width:52px !important; height:38px !important; }
}


/* ═══ HEIZUNG/GALERIE OVERFLOW FIX ═══
   CSS-Grid 1fr = minmax(auto,1fr) → auto kann breiter als Container werden.
   Die 8 Thumbnails zwangen die Spalte auf >Viewport-Breite.
   Fix: minmax(0,1fr) + min-width:0 auf Grid-Kindern. */
.cg { grid-template-columns: 1fr minmax(0, 310px); }
.cg > div { min-width: 0; }          /* erlaubt Schrumpfen unter Inhaltsbreite */
.gt { min-width: 0; max-width: 100%; }

@media(max-width:860px){
  .cg { grid-template-columns: minmax(0, 1fr) !important; }
  .cg > div { min-width: 0 !important; max-width: 100% !important; }
}
@media(max-width:768px){
  .cg { grid-template-columns: minmax(0, 1fr) !important; }
  .cg > div, .prose, .gal, .gt, .sb-wrap { min-width:0 !important; max-width:100% !important; }
}


/* ── SHK-Innung Logo (Footer-Badge) ── */
.footer-badges {
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-top:8px;
}
.innung-logo {
  height:56px;
  width:auto;
  background:white;
  border-radius:8px;
  padding:8px 12px;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.badge-text {
  font-size:.78rem;
  color:rgba(255,255,255,.6);
  line-height:1.4;
  font-weight:500;
}
@media(max-width:768px){
  .footer-badges { gap:12px; padding:18px 0; }
  .innung-logo { height:46px; }
  .badge-text { font-size:.72rem; }
}


/* ── Team-Gruppen-Platzhalter ── */
.team-group-placeholder {
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--gp);
  border:1.5px dashed var(--gm);
  border-radius:var(--r);
  padding:24px 32px;
  max-width:440px;
  margin-top:8px;
}
.tgp-icon {
  width:56px; height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--g),var(--g2));
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  flex-shrink:0;
}
.tgp-text { display:flex; flex-direction:column; gap:3px; }
.tgp-text strong { font-size:.95rem; font-weight:700; color:var(--ink); }
.tgp-text span { font-size:.82rem; color:var(--ink3); }
[data-theme="dark"] .team-group-placeholder { background:rgba(167,190,127,.08); }
@media(max-width:768px){
  .team-group-placeholder { padding:18px 20px; gap:14px; max-width:100%; }
  .tgp-icon { width:46px; height:46px; font-size:1.4rem; }
  .tgp-text strong { font-size:.88rem; }
  .tgp-text span { font-size:.78rem; }
}


/* ═══════════ WÄRMEPUMPE BANNER ═══════════ */
.wp-banner-wrap {
  padding:0 0 8px;
  background:var(--surf);
}
.wp-banner {
  position:relative;
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:32px;
  padding:28px 32px;
  border-radius:var(--r);
  background:linear-gradient(120deg, var(--g3) 0%, var(--g2) 55%, var(--g) 100%);
  background-size:160% 160%;
  animation:gradFlow 14s ease infinite;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(110,144,64,.32);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.wp-banner:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 56px rgba(110,144,64,.42);
}
.wp-banner-glow {
  position:absolute;
  top:-50%; right:-10%;
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(255,255,255,.25), transparent 65%);
  pointer-events:none;
}
.wp-banner-icon {
  font-size:2.6rem;
  flex-shrink:0;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
  position:relative; z-index:1;
}
.wp-banner-text { flex:1; min-width:0; position:relative; z-index:1; }
.wp-banner-eyebrow {
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.85); margin-bottom:5px;
}
.wp-banner-title {
  font-size:1.25rem; font-weight:800; letter-spacing:-.02em;
  color:white; line-height:1.2; margin-bottom:6px;
}
.wp-banner-sub {
  font-size:.86rem; color:rgba(255,255,255,.9); line-height:1.5; max-width:560px;
}
.wp-banner-cta { flex-shrink:0; position:relative; z-index:1; }
.wp-banner-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:white; color:var(--g3);
  font-size:.85rem; font-weight:700;
  padding:12px 22px; border-radius:100px;
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  transition:gap .25s, transform .2s;
}
.wp-banner:hover .wp-banner-btn { gap:10px; }

[data-theme="dark"] .wp-banner-wrap { background:var(--bg); }

@media(max-width:768px){
  .wp-banner {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:22px 20px;
    margin-top:24px;
  }
  .wp-banner-icon { font-size:2.2rem; }
  .wp-banner-title { font-size:1.08rem; }
  .wp-banner-sub { font-size:.82rem; }
  .wp-banner-cta { width:100%; }
  .wp-banner-btn { width:100%; justify-content:center; padding:12px; }
  .wp-banner-glow { width:240px; height:240px; }
}


/* ── Partner-Logos (echte Logos auf weißem Badge) ── */
.pf-logo {
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  height:64px;
  padding:12px 22px;
  margin:0 4px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.pf-logo:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.pf-logo img {
  height:38px; width:auto; display:block;
  object-fit:contain;
}
[data-theme="dark"] .pf-logo { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.3); }
@media(max-width:768px){
  .pf-logo { height:54px; padding:10px 16px; }
  .pf-logo img { height:30px; }
}


/* Quadratische Logos (GC-Gruppe) etwas größer für Balance */
.pf-logo-square img { height:48px; }
@media(max-width:768px){ .pf-logo-square img { height:40px; } }


/* ═══════════ 100-JAHRE JUBILÄUMS-SIEGEL ═══════════ */
.jubilee-badge {
  position:absolute;
  top:-22px; right:-18px;
  width:108px; height:108px;
  z-index:5;
  filter:drop-shadow(0 8px 24px rgba(109,144,64,.4));
  animation:jubileeFloat 5s ease-in-out infinite;
}
.jubilee-badge svg { width:100%; height:100%; display:block; overflow:visible; }
/* Only the ring text rotates; center numbers stay upright */
.jub-ring {
  transform-origin:60px 60px;
  animation:jubileeSpin 30s linear infinite;
}
@keyframes jubileeSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes jubileeFloat {
  0%,100% { margin-top:0; }
  50% { margin-top:-6px; }
}
/* Keep the inner number block upright by counter-spinning */
.jubilee-badge text[text-anchor="middle"] {
  /* These are static – only the textPath ring appears to rotate via the whole SVG */
}
@media(max-width:768px){
  .jubilee-badge { width:84px; height:84px; top:-16px; right:-8px; }
}
@media(max-width:420px){
  .jubilee-badge { width:70px; height:70px; top:-12px; right:-4px; }
}
@media(prefers-reduced-motion:reduce){
  .jubilee-badge, .jub-ring { animation:none; }
}



.jub-banner-wrap { padding:24px 0 0; background:var(--surf); }
[data-theme="dark"] .jub-banner-wrap { background:var(--bg); }
.jub-banner {
  display:flex;
  align-items:center;
  gap:28px;
  padding:26px 34px;
  border-radius:var(--r);
  background:
    radial-gradient(circle at 90% 20%, rgba(167,190,127,.14), transparent 55%),
    linear-gradient(135deg, var(--ink) 0%, #1a1a18 100%);
  position:relative;
  overflow:hidden;
}
.jub-banner-years {
  display:flex; flex-direction:column; align-items:center;
  flex-shrink:0;
  line-height:1;
}
.jub-100 {
  font-size:3.4rem; font-weight:900; letter-spacing:-.04em;
  background:linear-gradient(135deg, var(--g), var(--g2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.jub-jahre {
  font-size:.95rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--g2); margin-top:2px;
}
.jub-banner-text { flex:1; min-width:0; }
.jub-banner-title {
  font-size:1.3rem; font-weight:800; letter-spacing:-.02em;
  color:white; margin-bottom:7px; line-height:1.2;
}
.jub-banner-sub {
  font-size:.88rem; color:rgba(255,255,255,.7); line-height:1.55; max-width:600px;
}
.jub-banner-deco {
  flex-shrink:0;
  font-size:1.1rem; font-weight:800; letter-spacing:.1em;
  color:rgba(255,255,255,.25);
  display:flex; align-items:center; gap:6px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
}
.jub-banner-deco span { color:var(--g3); }

@media(max-width:768px){
  .jub-banner {
    flex-direction:column;
    text-align:center;
    gap:14px;
    padding:24px 20px;
  }
  .jub-100 { font-size:2.8rem; }
  .jub-banner-title { font-size:1.1rem; }
  .jub-banner-sub { font-size:.83rem; }
  .jub-banner-deco {
    writing-mode:horizontal-tb;
    font-size:.9rem;
  }
}


/* ═══════════ JUBILÄUMS-BANNER (hell & dezent) ═══════════ */
.jub-banner-wrap { padding:28px 0 4px; background:var(--surf); }
[data-theme="dark"] .jub-banner-wrap { background:var(--bg); }
.jub-banner {
  display:flex;
  align-items:center;
  gap:22px;
  padding:20px 28px;
  border-radius:var(--r);
  background:linear-gradient(120deg, rgba(167,190,127,.14), rgba(167,190,127,.04) 60%, transparent);
  border:1px solid var(--gm);
  cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, border-color .25s;
}
.jub-banner:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(110,144,64,.16);
  border-color:var(--g2);
}
.jub-seal { flex-shrink:0; width:64px; height:64px; filter:drop-shadow(0 4px 12px rgba(109,144,64,.3)); }
.jub-seal svg { width:100%; height:100%; }
.jub-banner-text { flex:1; min-width:0; }
.jub-banner-title {
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-bottom:4px; line-height:1.25;
}
.jub-banner-sub { font-size:.85rem; color:var(--ink3); line-height:1.5; }
.jub-banner-link {
  flex-shrink:0; font-size:.85rem; font-weight:700; color:var(--g3);
  display:flex; align-items:center; gap:5px; transition:gap .25s;
}
.jub-banner:hover .jub-banner-link { gap:9px; }
[data-theme="dark"] .jub-banner-title { color:var(--ink); }
[data-theme="dark"] .jub-banner-link { color:var(--g2); }

@media(max-width:768px){
  .jub-banner { flex-direction:column; text-align:center; gap:12px; padding:20px; }
  .jub-banner-link { font-size:.82rem; }
  .jub-seal { width:56px; height:56px; }
  .jub-banner-title { font-size:1.05rem; }
}


/* ═══════════ ZEITSTRAHL (interaktiv) ═══════════ */
.timeline {
  margin-top:48px; padding:36px 32px;
  background:var(--surf); border:1px solid var(--rule); border-radius:var(--r);
}
.timeline-head {
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:32px; text-align:center;
}
.timeline-track { display:flex; justify-content:space-between; position:relative; gap:12px; }
.timeline-track::before {
  content:''; position:absolute; top:7px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--g), var(--g3)); z-index:0;
}
.tl-item { position:relative; flex:1; text-align:center; z-index:1; cursor:pointer; }
.tl-dot {
  width:16px; height:16px; border-radius:50%;
  background:var(--g2); border:3px solid var(--surf);
  margin:0 auto 14px; box-shadow:0 0 0 2px var(--g2); transition:transform .25s, box-shadow .25s;
}
.tl-item:hover .tl-dot, .tl-active .tl-dot { transform:scale(1.35); }
.tl-active .tl-dot { box-shadow:0 0 0 2px var(--g2), 0 0 14px rgba(167,190,127,.6); }
.tl-current .tl-dot {
  background:var(--o); box-shadow:0 0 0 2px var(--o), 0 0 16px rgba(255,117,31,.5);
  animation:tlPulse 2.5s ease-in-out infinite;
}
.tl-current.tl-active .tl-dot { box-shadow:0 0 0 2px var(--o), 0 0 22px rgba(255,117,31,.8); }
@keyframes tlPulse {
  0%,100% { box-shadow:0 0 0 2px var(--o), 0 0 16px rgba(255,117,31,.5); }
  50% { box-shadow:0 0 0 2px var(--o), 0 0 24px rgba(255,117,31,.8); }
}
.tl-year { font-size:1.05rem; font-weight:900; color:var(--g3); margin-bottom:5px; transition:color .2s; }
.tl-current .tl-year { color:var(--o); }
.tl-item:hover .tl-year { color:var(--g); }
.tl-mobile-detail { display:none; }

/* Desktop detail panel */
.tl-panel {
  margin-top:36px; padding:24px;
  background:var(--bg); border-radius:var(--r); border-left:4px solid var(--g2);
  transition:opacity .2s ease, transform .2s ease;
  display:flex; gap:26px; align-items:center;
}
.tl-panel-img {
  flex:0 0 42%; max-width:42%;
  overflow:hidden;
  aspect-ratio:4/3; background:var(--surf);
  /* JS überschreibt aspect-ratio mit dem echten Bildverhältnis (nichts abschneiden) */
}
.tl-panel-img img { width:100%; height:100%; object-fit:cover; display:block; }
/* 2026: kein Foto – Jubiläums-Platzhalter */
.tl-panel-img-empty { position:relative; }
.tl-panel-img-empty img { opacity:0; }
.tl-panel-img-empty::after {
  content:'100'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:3.2rem; font-weight:900; letter-spacing:-.03em;
  color:#fff; background:linear-gradient(135deg, var(--g), var(--g3));
}
.tl-panel-img-empty::before {
  content:'JAHRE · 1926–2026'; position:absolute; left:0; right:0; bottom:22%;
  z-index:1; text-align:center; color:rgba(255,255,255,.9);
  font-size:.72rem; font-weight:700; letter-spacing:.15em;
}
.tl-panel-body { flex:1; min-width:0; }
.tl-panel-year { font-size:1.7rem; font-weight:900; color:var(--g3); line-height:1; margin-bottom:4px; }
.tl-panel-title { font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
.tl-panel-text { font-size:.92rem; color:var(--ink2); line-height:1.65; }
.tl-current.tl-active ~ .tl-panel .tl-panel-year,
.tl-panel-year.is-current { color:var(--o); }
[data-theme="dark"] .timeline { background:rgba(255,255,255,.03); }
[data-theme="dark"] .tl-panel { background:rgba(0,0,0,.2); }
[data-theme="dark"] .tl-dot { border-color:var(--surf); }
.timeline-note { margin-top:24px; text-align:center; font-size:.78rem; color:var(--ink3); }

/* ── Mobile: vertikal + Tap-to-expand ── */
@media(max-width:768px){
  .timeline { padding:28px 20px; }
  .timeline-track { flex-direction:column; gap:0; }
  .timeline-track::before {
    top:0; bottom:0; left:7px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--g), var(--g3));
  }
  .tl-item {
    text-align:left; padding-left:32px; padding-bottom:8px;
  }
  .tl-dot { position:absolute; left:0; top:2px; margin:0; }
  .tl-year { margin-bottom:2px; }
  /* Hide desktop panel on mobile */
  .tl-panel { display:none; }
  /* Mobile detail expands inline */
  .tl-mobile-detail {
    display:block;
    max-height:0; opacity:0; overflow:hidden;
    font-size:.83rem; color:var(--ink2); line-height:1.55;
    transition:max-height .35s ease, opacity .3s ease, margin .3s ease;
    margin-top:0;
  }
  .tl-open .tl-mobile-detail {
    max-height:680px; opacity:1; margin-top:10px; margin-bottom:16px;
  }
  .tl-mobile-img {
    overflow:hidden; margin-bottom:10px;
    background:var(--surf);
  }
  .tl-mobile-img img { width:100%; height:auto; display:block; }
  .tl-mobile-title { font-weight:700; color:var(--ink); font-size:.9rem; margin-bottom:5px; }
  .tl-mobile-detail p { margin:0; }
  .tl-item { padding-bottom:18px; }
  /* tap hint */
  .tl-year::after {
    content:' +'; color:var(--g2); font-weight:700; font-size:.9rem;
  }
  .tl-open .tl-year::after { content:' –'; }
}

@media(prefers-reduced-motion:reduce){
  .tl-panel, .tl-mobile-detail { transition:none; }
  .tl-current .tl-dot { animation:none; }
}



@media(prefers-reduced-motion:reduce){
  .jbar-track { animation:none; }
  .jbar-seal { animation:none; }
}
@media(max-width:768px){
  .jbar { top:124px; }
  .jbar-chip { font-size:.66rem; }
  .jbar-c-text { font-size:.72rem; }
}
@media(max-width:420px){
  .jbar { top:114px; }
}


/* ═══════════ #2: SEIT 1926 im Header ═══════════ */
.logo-a { display:flex; align-items:center; gap:12px; }
.logo-est {
  font-size:.58rem; font-weight:600; line-height:1.1;
  color:var(--ink3); letter-spacing:.08em; text-transform:uppercase;
  padding-left:12px; border-left:1.5px solid var(--gm);
}
.logo-est strong {
  display:block; font-size:.92rem; font-weight:900; color:var(--g3); letter-spacing:.02em;
}
[data-theme="dark"] .logo-est strong { color:var(--g2); }
@media(max-width:768px){
  .logo-est { font-size:.5rem; padding-left:8px; }
  .logo-est strong { font-size:.78rem; }
}
@media(max-width:420px){ .logo-est { display:none; } }



/* ═══════════════════════════════════════════
   INTERAKTIVE WÄRMEPUMPEN-GRAFIK (Layered Parallax)
═══════════════════════════════════════════ */
.wp3d-stage {
  --wp-ground:#eef2e6; --wp-line:#3a4a2a; --wp-house:#fafdf5; --wp-roof:#c9d9b0;
  --wp-pv:#2c5f8a; --wp-window:#bcd9e8; --wp-door:#8aab5c; --wp-warm:#FF751F;
  --wp-cool:#7cb3d9; --wp-tank:#dce8c8; --wp-tank-top:#c9d9b0; --wp-unit:#e4ebd6;
  --wp-fan-bg:#f0f4e8; --wp-fan:#8aab5c;
}
[data-theme="dark"] .wp3d-stage {
  --wp-ground:#1e241a; --wp-line:#7d9456; --wp-house:#1a1f15; --wp-roof:#2a3320;
  --wp-pv:#3a6f9a; --wp-window:#2a4a5a; --wp-door:#6d9040; --wp-warm:#FF8c42;
  --wp-cool:#5a8ab0; --wp-tank:#252e1a; --wp-tank-top:#2a3320; --wp-unit:#222a18;
  --wp-fan-bg:#1a2012; --wp-fan:#7d9456;
}

/* ── Kalkschutz-Grafik: CSS-Variablen (identisch zu WP) ── */
.ks3d-stage {
  --ks-ground:#eef2e6; --ks-line:#3a4a2a; --ks-house:#fafdf5; --ks-wall:#e4ebd6;
  --ks-ceil:#c9d9b0;   --ks-window:#bcd9e8; --ks-pipe:#bcd9e8; --ks-pipe-s:#4a8ab0;
  --ks-tank:#dce8c8;   --ks-tank-top:#c9d9b0; --ks-harz:#8aab5c;
  --ks-salt:#eef2e6;   --ks-salt-b:#c9d9b0;
  --ks-warm:#FF751F;   --ks-ion:#e8e0d0;  --ks-ion-s:#8aab5c;  --ks-flow:#4a8ab0;
  --ks-tap:#e4ebd6;
  position:relative; overflow:hidden;
  aspect-ratio:900/490; border-radius:var(--r);
  background:linear-gradient(180deg,#c9d9b0 0%,#c9d9b0 38%,#eef2e6 38%);
}
[data-theme="dark"] .ks3d-stage {
  --ks-ground:#1e241a; --ks-line:#7d9456; --ks-house:#1a1f15; --ks-wall:#222a18;
  --ks-ceil:#2a3320;   --ks-window:#2a4a5a; --ks-pipe:#3a6070; --ks-pipe-s:#5a8ab0;
  --ks-tank:#252e1a;   --ks-tank-top:#2a3320; --ks-harz:#7d9456;
  --ks-salt:#252e1a;   --ks-salt-b:#2a3320;
  --ks-warm:#FF8c42;   --ks-ion:#3a3428;  --ks-ion-s:#7d9456;  --ks-flow:#5a9ac0;
  --ks-tap:#222a18;
  background:linear-gradient(180deg,#1a2012 0%,#1a2012 38%,#111110 38%);
}
.ks3d-svg { width:100%; height:100%; display:block; }

/* Pipe animation (seamless via JS getTotalLength) */
.ks3d-pipe { stroke-dasharray:12 8; stroke-dashoffset:0; stroke-linecap:round; }

/* Kalk-Partikel driften nach rechts und faden aus */
@keyframes ksIonDrift {
  0%   { transform:translateX(0);  opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateX(48px); opacity:0; }
}
.ks3d-ion { animation:ksIonDrift 2.2s ease-in infinite; }
.ks3d-ion:nth-child(2) { animation-delay:.55s; }
.ks3d-ion:nth-child(3) { animation-delay:1.1s; }
.ks3d-ion:nth-child(4) { animation-delay:1.65s; }

/* Harz-Gitter pulsiert wenn Wasser durchfließt */
@keyframes ksHarzPulse { 0%,100%{opacity:.55} 50%{opacity:.95} }
.ks3d-harz { animation:ksHarzPulse 2s ease-in-out infinite; }

/* Wasser-Tropfen vom Hahn */
@keyframes ksDrop {
  0%  { transform:translateY(0);  opacity:.9; }
  80% { opacity:.6; }
  100%{ transform:translateY(12px); opacity:0; }
}
.ks3d-drop1 { animation:ksDrop 1.6s ease-in infinite; }
.ks3d-drop2 { animation:ksDrop 1.6s ease-in .8s infinite; }
@keyframes ksDist { 0%,100%{opacity:.4;transform:translateY(0)} 50%{opacity:.85;transform:translateY(-4px)} }
.ks3d-dist { animation:ksDist 2s ease-in-out infinite; }

/* Luft-Pfeile analog zu WP */
@keyframes ksAir { 0%,100%{opacity:.4;transform:translateX(0)} 50%{opacity:.85;transform:translateX(5px)} }
.ks3d-air path { animation:ksAir 2s ease-in-out infinite; }
.ks3d-air path:nth-child(2){animation-delay:.35s}
.ks3d-air path:nth-child(3){animation-delay:.7s}

/* Galerie-Slot (wie WP) */
.ks-slide { display:none; }
.ks-slide.on { display:block; }
.ks-slide-anim .ks3d-stage { margin:0; max-width:100%; border-radius:var(--r); }
.ks-slide-photo img { width:100%; border-radius:var(--r); display:block; }

@media(prefers-reduced-motion:reduce){
  .ks3d-pipe,.ks3d-ion,.ks3d-harz,.ks3d-drop1,.ks3d-drop2,.ks3d-air path { animation:none !important; }
}

.wp3d-eyebrow {
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--g3); text-align:center; margin-bottom:10px;
}
.wp3d-title {
  font-size:clamp(1.4rem,3vw,2rem); font-weight:800; letter-spacing:-.02em;
  color:var(--ink); text-align:center; margin-bottom:10px; line-height:1.2;
}
.wp3d-intro {
  font-size:.9rem; color:var(--ink3); text-align:center; max-width:520px;
  margin:0 auto 40px;
}
/* Stage */
.wp3d-stage {
  position:relative;
  max-width:760px; margin:0 auto;
  aspect-ratio:11/6;
  border-radius:var(--r);
  overflow:hidden;
  background:linear-gradient(180deg, var(--wp-window) 0%, #eaf2f7 30%, var(--surf) 60%);
  border:1px solid var(--rule);
  box-shadow:var(--sh);
}
.wp3d-layer { position:absolute; inset:0; pointer-events:none; }
.wp3d-sky {
  background:radial-gradient(circle at 70% 18%, rgba(255,255,255,.4), transparent 40%);
}
.wp3d-sun {
  background:radial-gradient(circle at 78% 16%, rgba(255,200,80,.55), rgba(255,200,80,0) 14%);
}
.wp3d-svg { position:relative; width:100%; height:100%; display:block; z-index:1; }

/* Animationen in der Grafik */
.wp3d-fan { animation:wp3dFanSpin 3s linear infinite; }
@keyframes wp3dFanSpin { to { transform:rotate(360deg); } }
/* wp3d-pipe: animation applied via JS (seamless dashoffset) */
.wp3d-pipe { stroke-dasharray:12 8; stroke-dashoffset:0; }
@keyframes wp3dFlow { from { stroke-dashoffset:0; } to { stroke-dashoffset:-20; } }
.wp3d-pipe { animation:wp3dFlow 1s linear infinite; }
.wp3d-solar { animation:wp3dSolar 2.5s ease-in-out infinite; }
.wp3d-floorglow { animation:wp3dFloorPulse 3s ease-in-out infinite; }
@keyframes wp3dFloorPulse { 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
@keyframes wp3dSolar { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.wp3d-air path { animation:wp3dAir 3s ease-in-out infinite; }
.wp3d-air path:nth-child(2){ animation-delay:.4s; }
.wp3d-air path:nth-child(3){ animation-delay:.8s; }
@keyframes wp3dAir { 0%,100%{ transform:translateX(0); opacity:.6; } 50%{ transform:translateX(-10px); opacity:1; } }

/* Hotspots */
.wp3d-hotspot {
  position:absolute; z-index:3;
  width:30px; height:30px;
  transform:translate(-50%,-50%);
  background:none; border:none; cursor:pointer; padding:0;
}
.wp3d-hotspot span {
  display:block; width:18px; height:18px; margin:6px auto;
  pointer-events:none;
  border-radius:50%;
  background:var(--g2);
  box-shadow:0 0 0 4px rgba(167,190,127,.4), 0 2px 8px rgba(0,0,0,.3);
  position:relative;
  transition:transform .25s, background .25s;
}
.wp3d-hotspot span::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--g2); opacity:.6;
  animation:wp3dPulse 2s ease-out infinite;
}
@keyframes wp3dPulse {
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(2.2); opacity:0; }
}
.wp3d-hotspot:hover span, .wp3d-hotspot.active span {
  background:var(--o); transform:scale(1.25);
  box-shadow:0 0 0 5px rgba(255,117,31,.35), 0 2px 10px rgba(0,0,0,.4);
}
.wp3d-hotspot.active span::after { border-color:var(--o); }



@media(max-width:768px){
  .wp3d-section { padding:48px 0; }
  
  
  
  
  .wp3d-hotspot { width:36px; height:36px; }
  .wp3d-hotspot span { width:20px; height:20px; }
  
}
@media(prefers-reduced-motion:reduce){
  .wp3d-fan, .wp3d-pipe, .wp3d-air path, .wp3d-hotspot span::after { animation:none; }
}




/* ── Chip-Navigation unter dem Frame ── *  /* Chips entfernt – Interaktion nur über Hotspots *

@media(max-width:768px){
  .wp3d-overlay { padding:14px 16px; gap:12px; }
  .wp3d-ov-num { font-size:1.4rem; }
  .wp3d-ov-title { font-size:.95rem; }
  .wp3d-ov-text { font-size:.78rem; }
}


/* ── Wärmepumpe-Galerie: Animation + Fotos umschaltbar ── */
.wp-gm { position:relative; padding:0 !important; background:none !important; aspect-ratio:auto !important; }
.wp-slide { display:none; }
.wp-slide.on { display:block; }
.wp-slide-anim .wp3d-stage { margin:0; max-width:100%; border-radius:var(--r); }
.wp-slide-photo img { width:100%; border-radius:var(--r); display:block; }

/* Animation-Thumbnail (statt Bild) */
.wpth-anim {
  position:relative;
  width:100%; height:100%;
  overflow:hidden; border-radius:inherit;
}
.wpth-mini { width:100%; height:100%; display:block; object-fit:cover; }
.wpth-label {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(45,58,30,.92), rgba(45,58,30,.5) 70%, transparent);
  color:#fff; font-size:.4rem; font-weight:700; letter-spacing:.02em;
  text-align:center; padding:5px 2px 3px; line-height:1;
}
.gth.wpth { overflow:hidden; position:relative; }
.gth.wpth::after {
  content:'▶'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-60%); color:#fff; font-size:.7rem;
  text-shadow:0 1px 4px rgba(0,0,0,.5); pointer-events:none;
  opacity:.9;
}
@media(max-width:768px){
  .wpth-label { font-size:.34rem; }
  .gth.wpth::after { font-size:.6rem; }
}

/* Chips: etwas Abstand wenn unter Galerie */




/* ── Hinweis-Badge ── */
.wp3d-hint-badge {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:7;
  background:rgba(45,58,30,.88); color:#fff;
  border-radius:12px; padding:10px 18px;
  text-align:center; pointer-events:none;
  animation:wp3dHintFloat 2.4s ease-in-out infinite;
  white-space:nowrap;
}
.wp3d-hint-title {
  display:block;
  font-size:.8rem; font-weight:700; letter-spacing:.01em;
  line-height:1.3;
}
.wp3d-hint-sub {
  display:block; overflow:hidden;
  max-height:2em; opacity:.8;
  font-size:.68rem; font-weight:500;
  margin-top:3px; line-height:1.3;
  transition:max-height .4s ease, opacity .35s ease, margin-top .35s ease;
}
/* Nach erstem Klick: nur noch Titelzeile */
.wp3d-hint-badge.seen .wp3d-hint-sub {
  max-height:0; opacity:0; margin-top:0;
}
.wp3d-hint-badge.seen {
  padding:7px 16px;
  animation:wp3dHintFloat 2.4s ease-in-out infinite;
}
.wp3d-hint-badge.hidden { opacity:0; }
@keyframes wp3dHintFloat {
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-3px); }
}
/* Mobile: etwas kleiner */
@media(max-width:640px){
  .wp3d-hint-title { font-size:.72rem; }
  .wp3d-hint-sub   { font-size:.62rem; }
  .wp3d-hint-badge { padding:8px 14px; top:8px; }
  .wp3d-hint-badge.seen { padding:6px 12px; }
  /* SVG-Labels auf Mobile ausblenden – Hotspots erklären den Rest */
  .ks3d-svg text, .wp3d-svg text { display:none; }
  /* Touch-Targets: Popup-Buttons mindestens 42px (Spezifität > Basisregel) */
  .wp3d-popup .wp3d-nav-btn { width:42px; height:42px; font-size:1.15rem; }
  .wp3d-popup .wp3d-popup-close { width:42px; height:42px; top:6px; right:6px; font-size:1.7rem; }
}

/* ── POPUP ── */
.wp3d-popup {
  position:absolute;
  z-index:12;
  left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.92);
  width:min(86%, 360px);
  background:var(--surf);
  border:1px solid var(--rule);
  border-radius:16px;
  padding:22px 24px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  opacity:0; visibility:hidden;
  transition:opacity .25s, transform .25s, visibility .25s;
}
.wp3d-popup.show { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.wp3d-popup-close {
  position:absolute; top:10px; right:12px;
  width:30px; height:30px; border:none; background:none;
  font-size:1.5rem; line-height:1; color:var(--ink3); cursor:pointer;
  border-radius:50%; transition:background .2s, color .2s;
}
.wp3d-popup-close:hover { background:var(--gp); color:var(--ink); }
.wp3d-popup-num {
  font-size:1.4rem; font-weight:900; color:var(--g3); line-height:1; margin-bottom:8px; letter-spacing:-.04em;
}
.wp3d-popup-num i { font-size:.75rem; font-weight:600; color:var(--ink3); font-style:normal; }
.wp3d-popup-title { font-size:1.1rem; font-weight:800; color:var(--ink); margin-bottom:8px; }
.wp3d-popup-text { font-size:.9rem; line-height:1.6; color:var(--ink2); }
.wp3d-popup-nav {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:16px; gap:8px;
}
.wp3d-nav-btn {
  width:32px; height:32px; padding:0;
  border:1.5px solid var(--rule); border-radius:50%;
  background:none; color:var(--ink3);
  font-size:1rem; line-height:1; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
  display:flex; align-items:center; justify-content:center;
}
.wp3d-nav-btn:hover { background:var(--g); color:#fff; border-color:var(--g); }
.wp3d-nav-btn:disabled { opacity:0; pointer-events:none; }
[data-theme="dark"] .wp3d-popup { background:var(--surf); }

@media(max-width:768px){
  .wp3d-popup { width:88%; padding:20px; }
  .wp3d-popup-title { font-size:1.02rem; }
  .wp3d-popup-text { font-size:.85rem; }
}


/* Zweiter CTA im Wärmepumpen-Banner */

@media(max-width:768px){
  .wp-banner-cta{width:100%;}
  
}

/* ── Sekundärer Hero-Button (Heizungs-Check) ── */
.btn-sec{
  display:inline-flex;align-items:center;gap:8px;
  background:none;color:var(--g3);
  font-family:inherit;font-size:.88rem;font-weight:700;
  padding:14px 26px;border:2px solid var(--g2);border-radius:100px;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,transform .15s,box-shadow .2s;
}
.btn-sec:hover{
  background:var(--g2);color:#fff;
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(110,144,64,.3);
}
[data-theme="dark"] .btn-sec{color:var(--g);border-color:var(--g2);}
[data-theme="dark"] .btn-sec:hover{background:var(--g2);color:#fff;}

/* ── Textlink-Button (Rückruf im Fließtext) ── */
.link-btn{
  background:none;border:none;padding:0;
  font-family:inherit;font-size:inherit;font-weight:700;
  color:var(--g3);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  transition:color .2s;
}
.link-btn:hover{color:var(--g2);}
.tel-alt{color:var(--ink3);}
[data-theme="dark"] .link-btn{color:var(--g);}

@media(max-width:560px){
  .hero-btns{flex-direction:column;align-items:stretch;gap:10px;}
  .btn-p,.btn-sec{width:100%;justify-content:center;min-height:50px;padding:14px 24px;}
}

/* ══════════════════════════════════════════
   MOBILE: Touch-Flächen vergrößern
   ══════════════════════════════════════════ */
@media(max-width:640px){
  /* Kontaktzeilen in Sidebars – mehr Platz zum Antippen */
  .sb-row{padding:6px 0;line-height:1.7;}
  .sb-row a{display:inline-block;padding:6px 2px;min-height:36px;line-height:24px;}

  /* Kontaktseite: Telefon/Mail-Zeilen */
  .kr a{display:inline-block;padding:7px 2px;min-height:38px;line-height:24px;}

  /* Social-Links im Footer und in der Leiste */
  .tb-soc a,.sbar a{min-height:40px;display:inline-flex;align-items:center;padding:4px 8px;}

  /* Stellenanzeigen-Buttons */
  .jc a[href^="mailto"],.jbtn{min-height:46px;display:inline-flex;align-items:center;padding:12px 20px;}

  /* Hotspots in den interaktiven Grafiken */
  .wp3d-hotspot{width:42px;height:42px;}
  .wp3d-hotspot span{width:20px;height:20px;margin:11px auto;}

  /* Popup-Steuerung in den Grafiken */
  .wp3d-popup .wp3d-nav-btn{width:46px;height:46px;}
  .wp3d-popup .wp3d-popup-close{width:46px;height:46px;}

  /* Telefon-Link im Fließtext der Startseite */
  .prose p a[href^="tel"],.prose p .link-btn,
  .lw p a[href^="tel"],.lw p .link-btn,
  p a[href^="tel"],p .link-btn{
    display:inline-block;padding:9px 4px;min-height:38px;line-height:20px;
    vertical-align:middle;
  }

  /* Social-Links auf der Kontaktseite */
  .k-soc a,.k-soc .ks{
    min-height:44px;display:inline-flex;align-items:center;padding:9px 13px;
  }
}

/* ══════════════════════════════════════════
   RÜCKRUF-BUTTON IM HEADER (Desktop)
   ══════════════════════════════════════════ */
.hdr-cb{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:100px;
  border:1.5px solid var(--g2);background:none;color:var(--g3);
  font-family:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .15s,box-shadow .2s;
}
.hdr-cb svg{width:14px;height:14px;fill:currentColor;flex:0 0 14px;}
.hdr-cb:hover{
  background:var(--g2);color:#fff;border-color:var(--g2);
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(110,144,64,.28);
}
/* Außerhalb der Öffnungszeiten optisch betonen – dann ist Rückruf die sinnvolle Aktion */
.hdr-cb.is-highlight{
  background:linear-gradient(135deg,var(--g),var(--g2));
  color:#fff;border-color:transparent;
  box-shadow:0 3px 12px rgba(110,144,64,.32);
}
.hdr-cb.is-highlight:hover{box-shadow:0 5px 16px rgba(110,144,64,.42);}
[data-theme="dark"] .hdr-cb{color:var(--g);border-color:var(--g2);}
[data-theme="dark"] .hdr-cb:hover{background:var(--g2);color:#fff;}

/* Auf schmalen Schirmen ausblenden – dort übernimmt der Speed-Dial */
@media(max-width:900px){ .hdr-cb{display:none;} }

/* ══════════════════════════════════════════
   SPEED-DIAL (Mobile) – ersetzt den alten FAB
   ══════════════════════════════════════════ */
.fab-wrap{position:fixed;right:16px;bottom:20px;z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.fab{
  width:54px;height:54px;border-radius:50%;border:none;padding:0;
  background:linear-gradient(135deg,var(--g),var(--g2));
  color:#fff;cursor:pointer;
  box-shadow:0 6px 20px rgba(110,144,64,.45);
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s ease,box-shadow .2s;
}
.fab:hover{transform:scale(1.06);}
.fab svg{width:24px;height:24px;fill:#fff;position:absolute;transition:opacity .2s,transform .25s;}
.fab-ico-close{opacity:0;transform:rotate(-90deg);}
.fab-wrap.open .fab{transform:rotate(90deg);}
.fab-wrap.open .fab-ico-phone{opacity:0;transform:rotate(90deg);}
.fab-wrap.open .fab-ico-close{opacity:1;transform:rotate(-90deg);}

.fab-menu{
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.fab-wrap.open .fab-menu{opacity:1;visibility:visible;transform:none;}
.fab-item{
  display:inline-flex;align-items:center;gap:10px;
  padding:0;border:none;background:none;cursor:pointer;
  font-family:inherit;text-decoration:none;
}
.fab-item-txt{
  background:var(--bg);color:var(--ink);
  padding:9px 14px;border-radius:100px;
  font-size:.84rem;font-weight:700;white-space:nowrap;
  box-shadow:0 3px 12px rgba(0,0,0,.16);
  border:1px solid var(--rule);
}
.fab-item-ico{
  width:44px;height:44px;border-radius:50%;flex:0 0 44px;
  background:var(--bg);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.16);
}
.fab-item-ico svg{width:19px;height:19px;fill:var(--g3);}
.fab-item:hover .fab-item-txt,.fab-item:hover .fab-item-ico{background:var(--gp);}
[data-theme="dark"] .fab-item-txt,[data-theme="dark"] .fab-item-ico{background:var(--surf);border-color:#3a3a34;}
[data-theme="dark"] .fab-item-ico svg{fill:var(--g);}

/* Abdunkelnder Hintergrund, solange der Speed-Dial offen ist */
.fab-backdrop{
  position:fixed;inset:0;z-index:890;background:rgba(20,26,14,.28);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.fab-backdrop.show{opacity:1;visibility:visible;}

@media(prefers-reduced-motion:reduce){
  .fab,.fab svg,.fab-menu,.fab-backdrop{transition:none;}
}

/* ══════════════════════════════════════════
   AUSSERHALB DER OEFFNUNGSZEITEN
   Der Rueckruf bekommt mehr Gewicht, weil
   Anrufen dann nichts bringt.
   ══════════════════════════════════════════ */
.hdr-cb-urgent{
  background:linear-gradient(135deg,var(--g),var(--g2));
  border-color:var(--g2);
  color:#fff;
  box-shadow:0 3px 12px rgba(110,144,64,.32);
}
.hdr-cb-urgent:hover{
  background:linear-gradient(135deg,var(--g2),var(--g3));
  color:#fff;
}
.hdr-cb-urgent svg{fill:#fff;}

/* Der schwebende Button pulsiert dezent, wenn geschlossen ist */
.fab-wrap.fab-urgent .fab::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--g2);opacity:0;
  animation:fabPulse 2.6s ease-out infinite;
}
@keyframes fabPulse{
  0%{transform:scale(.9);opacity:.7;}
  70%{transform:scale(1.25);opacity:0;}
  100%{opacity:0;}
}
.fab{position:relative;}
@media(prefers-reduced-motion:reduce){
  .fab-wrap.fab-urgent .fab::after{animation:none;}
}

/* ══════════════════════════════════════════
   Korrekturen schwebender Kontakt-Button
   ══════════════════════════════════════════ */

/* Der Container selbst darf keine Klicks abfangen –
   sonst ist die Ecke unten rechts blockiert, obwohl dort
   nichts sichtbar ist. Nur Button und Menue reagieren. */
.fab-wrap{pointer-events:none;}
.fab-wrap .fab,
.fab-wrap .fab-item{pointer-events:auto;}
.fab-wrap.open .fab-menu{pointer-events:auto;}

/* Auf Desktop uebernimmt der Header-Button die Aufgabe –
   dort waere der schwebende Button doppelt. */
@media(min-width:901px){
  .fab-wrap{display:none;}
}

/* ══════════════════════════════════════════
   Kontaktseite: Grid-Overflow beheben
   ══════════════════════════════════════════
   "1fr" schrumpft nicht unter die Breite seines Inhalts.
   Bei mittleren Fensterbreiten ragte die Kartenspalte
   dadurch aus dem Bildschirm. "minmax(0,1fr)" erlaubt
   das Schrumpfen. */
.kl{grid-template-columns:360px minmax(0,1fr);}
.kl > *{min-width:0;}
.mwrap,.map-consent,.mlink{max-width:100%;}
@media(max-width:1100px){
  .kl{grid-template-columns:320px minmax(0,1fr);}
}
@media(max-width:720px){
  .kl{grid-template-columns:minmax(0,1fr);}
}

/* ══════════════════════════════════════════
   Einblende-Animation: kein Scrollleisten-Flackern
   ══════════════════════════════════════════
   Elemente, die von rechts einfliegen, ragen fuer den
   Bruchteil einer Sekunde ueber den Bildschirmrand und
   liessen kurz eine waagerechte Scrollleiste aufblitzen.
   "clip" schneidet das ab, ohne – anders als "hidden" –
   ein Scroll-Element zu erzeugen (wichtig fuer sticky). */
.sec{overflow-x:clip;}

/* Aeltere Browser ohne clip-Unterstuetzung */
@supports not (overflow-x: clip){
  .kl{overflow-x:hidden;}
}

/* ══════════════════════════════════════════
   Touch-Flaechen: letzte Nachbesserung
   Empfehlung ist 44px, alles darunter trifft
   man auf dem Handy leicht daneben.
   ══════════════════════════════════════════ */
@media(max-width:640px){
  /* Kontaktzeilen in den Leistungs-Sidebars */
  .sb-row{padding:3px 0;}
  .sb-row a{min-height:44px;line-height:26px;padding:9px 2px;}

  /* Kontaktseite: Telefon, Mail, Karte-laden */
  .kr a{min-height:44px;line-height:26px;padding:9px 2px;}
  .map-consent-btn{min-height:44px;padding:12px 22px;}

  /* Topbar: Ampel und Telefonnummer antippbar machen */
  .topbar .w{padding-top:2px;padding-bottom:2px;}
  .oz-status-mobile{min-height:38px;padding:8px 12px;}
  .tb-phone a{display:inline-block;min-height:38px;line-height:24px;padding:7px 4px;}

  /* Aufzaehlungslinks in Fliesstexten (z.B. "Waermepumpe (Luft-Wasser...)") */
  .prose li a,.lw li a{display:inline-block;min-height:38px;line-height:22px;padding:8px 0;}
}

/* Telefonnummer in Hinweisboxen (z.B. Ausstellungsseite) antippbar */
@media(max-width:640px){
  .callout a[href^="tel"],.callout a[href^="mailto"]{
    display:inline-block;min-height:38px;line-height:24px;padding:7px 3px;
  }
}

/* ══════════════════════════════════════════════════════
   LESBARKEIT: Kontraste nach WCAG AA (4.5:1)
   ══════════════════════════════════════════════════════ */

/* ---- 1. DARK MODE: fest verdrahtetes Weiss korrigieren ----
   Diese Elemente behielten im dunklen Modus einen weissen
   Hintergrund, waehrend die Schrift hell wurde – der Text
   war dadurch praktisch unsichtbar. */
[data-theme="dark"] .ks{
  background:var(--surf);
  border-color:var(--rule);
  color:var(--ink);
}
[data-theme="dark"] .ks:hover{
  border-color:var(--g);
  color:var(--g);
}
[data-theme="dark"] .r-tag{
  background:var(--surf);
  border-color:var(--rule);
  color:var(--g);
}
/* Der Banner-Knopf sitzt auf gruenem Grund und bleibt weiss –
   dort muss die Schrift auch im dunklen Modus dunkel bleiben. */
[data-theme="dark"] .wp-banner-btn{ color:#4f6d2b; }

/* ---- 2. LIGHT MODE: gruene Schrift auf hellem Grund ----
   Das mittlere Gruen (#8aab5c) erreicht auf Weiss nur 2,6:1.
   Fuer Flaechen und Rahmen bleibt es, fuer Text nehmen wir
   das dunklere Marken-Gruen (#527030 = 5,65:1). */
:root{ --g-txt:#527030; }
[data-theme="dark"] :root,
[data-theme="dark"]{ --g-txt:#A7BE7F; }

.eyebrow, .pb-eye, .hero-eye,
.lc-tag, .news-tag, .badge,
.lc-arr, .ac-tip, .r-tag,
.oz-day, .tl-year,
.quote-name, .link-btn, .cb-btn,
.btn-sec, .wp-banner-btn, .jub-banner-link,
.sb-row a, .kr a, .callout a,
p a[href^="tel"], p a[href^="mailto"],
.hdr-phone a{
  color:var(--g-txt);
}
.link-btn:hover, .cb-btn:hover, .lc-arr:hover{ color:#3f5722; }

/* Dunkler Modus: dort ist heller Text auf dunklem Grund richtig */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .pb-eye,
[data-theme="dark"] .hero-eye,
[data-theme="dark"] .lc-tag,
[data-theme="dark"] .news-tag,
[data-theme="dark"] .badge,
[data-theme="dark"] .lc-arr,
[data-theme="dark"] .ac-tip,
[data-theme="dark"] .oz-day,
[data-theme="dark"] .tl-year,
[data-theme="dark"] .quote-name,
[data-theme="dark"] .link-btn,
[data-theme="dark"] .cb-btn,
[data-theme="dark"] .btn-sec,
[data-theme="dark"] .jub-banner-link,
[data-theme="dark"] .sb-row a,
[data-theme="dark"] .kr a,
[data-theme="dark"] .callout a,
[data-theme="dark"] p a[href^="tel"],
[data-theme="dark"] p a[href^="mailto"],
[data-theme="dark"] .hdr-phone a{
  color:var(--g);
}

/* ---- 3. Graue Nebentexte etwas abdunkeln ----
   #808080 erreicht nur 3,95:1 – #6e6e6e kommt auf 5,1:1. */
:root{ --ink3:#6e6e6e; }

/* Das Jubilaeums-Jahr im Zeitstrahl bleibt orange,
   aber kraeftiger, damit es lesbar ist. */
.tl-current .tl-year, .tl-year.is-current{ color:#c95207; }
[data-theme="dark"] .tl-current .tl-year,
[data-theme="dark"] .tl-year.is-current{ color:#FF8c42; }

/* Korrektur: Das Grau nur im hellen Modus abdunkeln.
   Im dunklen Modus braucht es ein HELLERES Grau. */
[data-theme="dark"]{ --ink3:#9a9a92; }

/* Links im Impressum und in Rechtstexten */
.lb a, .lw a{ color:var(--g-txt); }
[data-theme="dark"] .lb a, [data-theme="dark"] .lw a{ color:var(--g); }

/* Jubilaeums-Jahr: einen Hauch dunkler fuer klare Lesbarkeit */
.tl-current .tl-year, .tl-year.is-current{ color:#bf4c05; }

/* Emojis in Schaltflaechen sind rein dekorativ –
   Vorlesehilfen sollen sie ueberspringen. */
.ti-sun, .ti-moon{ }

/* ══════════════════════════════════════════
   Logo-Groessen fein abgestuft
   ══════════════════════════════════════════
   Das Logo ist ein breiter Schriftzug. Damit es sich
   auf mittleren Bildschirmen nicht mit der rechten
   Kopfleiste ins Gehege kommt, wird es dort etwas
   kleiner. */
@media(min-width:769px) and (max-width:1150px){
  .logo-a img{ height:72px; }
}
@media(min-width:1151px) and (max-width:1300px){
  .logo-a img{ height:88px; }
}

/* ══════════════════════════════════════════════════
   KOPFZEILE – Platzaufteilung
   ══════════════════════════════════════════════════
   Die Nummer brach in zwei Zeilen um, weil das Flex-
   Layout sie zusammengestaucht hat. Sie darf nie
   umbrechen. Damit trotzdem alles passt, blenden wir
   auf schmaleren Bildschirmen die Teile aus, die
   ohnehin doppelt vorhanden sind (Ampel und Nummer
   stehen dort in der obersten Leiste). */

.hdr-phone a,
.hdr-phone small{ white-space:nowrap; }
.hdr-phone{ flex:0 0 auto; }
.oz-status{ flex:0 0 auto; }
.hdr-cb{ flex:0 0 auto; }
.logo-a{ min-width:0; }

/* Logo: Groesse an den verfuegbaren Platz angepasst */
.logo-a img{ height:88px; }
@media(max-width:1300px){ .logo-a img{ height:78px; } }
@media(max-width:1150px){ .logo-a img{ height:70px; } }
@media(max-width:1023px){ .logo-a img{ height:64px; } }
@media(max-width:768px) { .logo-a img{ height:56px; } }
@media(max-width:560px) { .logo-a img{ height:48px; } }
@media(max-width:420px) { .logo-a img{ height:40px; } }
@media(max-width:340px) { .logo-a img{ height:34px; } }

/* Ampel und Rueckruf-Knopf erst, wenn wirklich Platz ist.
   Darunter zeigt die oberste Leiste den Oeffnungsstatus. */
@media(max-width:1023px){
  #ozStatusHeader{ display:none; }
  .hdr-cb{ display:none; }
}
/* Sehr schmale Geraete: Nummer steht bereits oben in der Leiste */
@media(max-width:400px){
  .hdr-phone{ display:none; }
}

/* Der Zusatz "seit 1926" neben dem Logo braucht Platz.
   Auf schmalen Geraeten weglassen – das Jubilaeum steht
   ohnehin auf der Startseite und im Zeitstrahl. */
@media(max-width:520px){ .logo-est{ display:none !important; } }

/* Aufzaehlungen und Hervorhebungen in Rechtstexten */
.lb ul{ margin:6px 0 12px 0; padding-left:22px; }
.lb li{
  font-size:.86rem; color:var(--ink2); line-height:1.75;
  margin-bottom:5px;
}
.lb li::marker{ color:var(--g2); }
.lb strong{ color:var(--ink); font-weight:700; }

/* ══════════════════════════════════════════════════
   BEDIENUNG MIT DEM FINGER
   ══════════════════════════════════════════════════
   Gilt fuer alle Geraete mit Touchbedienung – also
   auch fuer Tablets, die breiter als ein Handy sind.
   Empfohlene Mindestgroesse fuer Schaltflaechen: 44px. */
@media (pointer: coarse){

  /* Umschalter hell/dunkel:
     Das Aussehen bleibt unveraendert, nur die Trefferflaeche
     wird unsichtbar vergroessert. */
  .theme-toggle{ position:relative; }
  .theme-toggle::after{
    content:''; position:absolute;
    top:50%; left:50%; transform:translate(-50%,-50%);
    width:56px; height:46px;
  }

  /* Kontaktzeilen in den Randspalten */
  .sb-row{ padding:3px 0; }
  .sb-row a{ min-height:44px; line-height:26px; padding:9px 2px; display:inline-block; }

  /* Kontaktseite */
  .kr a{ min-height:44px; line-height:26px; padding:9px 2px; display:inline-block; }
  .map-consent-btn{ min-height:44px; padding:12px 22px; }
  .k-soc a,.k-soc .ks{ min-height:44px; display:inline-flex; align-items:center; padding:9px 13px; }

  /* Telefon und E-Mail in Hinweisboxen und Fliesstexten */
  .callout a[href^="tel"], .callout a[href^="mailto"],
  p a[href^="tel"], p a[href^="mailto"], p .link-btn,
  .prose li a, .lw li a{
    display:inline-block; min-height:40px; line-height:22px;
    padding:9px 3px; vertical-align:middle;
  }

  /* Knoepfe */
  .cb-btn{ min-height:44px; padding:11px 18px; }
  .jc a[href^="mailto"], .jbtn{ min-height:46px; display:inline-flex; align-items:center; padding:12px 20px; }

  /* Punkte und Steuerung in den erklaerenden Grafiken */
  .wp3d-hotspot{ width:44px; height:44px; }
  .wp3d-hotspot span{ width:20px; height:20px; margin:12px auto; }
  .wp3d-popup .wp3d-nav-btn,
  .wp3d-popup .wp3d-popup-close{ width:46px; height:46px; }

  /* Oberste Leiste */
  .oz-status{ min-height:40px; }
  .topbar a{ min-height:40px; display:inline-flex; align-items:center; }

  /* Galerie-Vorschaubilder bequem treffbar */
  .gth{ min-height:44px; }
}

/* ══════════════════════════════════════════════════
   GERÄTERÄNDER (iPhone mit Aussparung)
   ══════════════════════════════════════════════════
   Moderne iPhones haben unten eine Bedienleiste und im
   Querformat seitliche Aussparungen. Feste Elemente
   halten dazu Abstand, damit nichts verdeckt wird. */
.fab-wrap{
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right:  calc(16px + env(safe-area-inset-right, 0px));
}
.topbar,
header,
nav{
  padding-left:  env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* Formulare: unten Platz lassen, damit der Absenden-Knopf
   nicht unter der Bedienleiste liegt */
@media(max-width:640px){
  .fmodal-body{ padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════════════
   14 · Kontaktzeilen: Symbole mittig statt oben
   ══════════════════════════════════════════════════ */
.kr{ align-items:center; }



/* ══════════════════════════════════════════════════
   TAGESVERLAUF – Haustechnik im Zusammenspiel
   ══════════════════════════════════════════════════ */
.tv-wrap{ position:relative; }
.tv-buehne{
  position:relative; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--sh2); background:#bcdcf2;
}
.tv-buehne svg{ width:100%; height:100%; display:block; }

/* ── Die Kreisläufe: fließende Striche ── */
.tv-fluss{
  stroke-dasharray:13 17;
  animation:tvFliessen 2.6s linear infinite;
  opacity:.25;
  transition:opacity .6s ease;
}
@keyframes tvFliessen{ to{ stroke-dashoffset:-30 } }
#tvStrom1{ animation-duration:2.1s }
#tvStrom2{ animation-duration:2.4s }
#tvWaerme1{ animation-duration:3.1s }
#tvWaerme2{ animation-duration:2.8s }
#tvWaerme3{ animation-duration:3.4s }
#tvWasser1{ animation-duration:3.6s }
#tvWasser2{ animation-duration:3.2s }

/* ── Himmel ── */
.tv-wolke ellipse{ fill:#fff; }
.tv-wolke{ opacity:.85; }
.tv-w1{ animation:tvZieh1 74s linear infinite }
.tv-w2{ animation:tvZieh2 98s linear infinite }
.tv-w3{ animation:tvZieh3 122s linear infinite }
@keyframes tvZieh1{ from{transform:translate(-90px,78px)} to{transform:translate(890px,78px)} }
@keyframes tvZieh2{ from{transform:translate(-70px,146px)} to{transform:translate(880px,146px)} }
@keyframes tvZieh3{ from{transform:translate(-60px,214px)} to{transform:translate(870px,214px)} }

#tvSterne circle{ fill:#fff; animation:tvFunkel 4s ease-in-out infinite }
#tvSterne circle:nth-child(3n+2){ animation-delay:1.4s }
#tvSterne circle:nth-child(3n){ animation-delay:2.7s }
@keyframes tvFunkel{ 0%,100%{opacity:.95} 50%{opacity:.4} }

#tvStrahlenkranz{ animation:tvDreh 44s linear infinite; transform-origin:0 0 }
@keyframes tvDreh{ to{ transform:rotate(360deg) } }

.tv-vogel{ animation:tvFlug 26s linear infinite }
.tv-v1{ animation-delay:2s }
.tv-v2{ animation-duration:31s; animation-delay:9s }
@keyframes tvFlug{
  0%{ transform:translate(-40px,120px) } 100%{ transform:translate(840px,68px) }
}

/* ── Bauteile ── */
#tvLuefter{ animation:tvDrehen var(--tv-luefter,5s) linear infinite }
@keyframes tvDrehen{ to{ transform:rotate(360deg) } }

#tvHarz circle{ animation:tvSchweb 5.5s ease-in-out infinite }
#tvHarz circle:nth-child(2){ animation-delay:.8s }
#tvHarz circle:nth-child(3){ animation-delay:1.7s }
#tvHarz circle:nth-child(4){ animation-delay:2.5s }
#tvHarz circle:nth-child(5){ animation-delay:3.4s }
#tvHarz circle:nth-child(6){ animation-delay:4.2s }
@keyframes tvSchweb{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.tv-blase{ animation:tvSteigen 4.2s ease-in infinite }
.tv-blase:nth-child(2){ animation-delay:1.4s }
.tv-blase:nth-child(3){ animation-delay:2.8s }
@keyframes tvSteigen{
  0%{ transform:translateY(0); opacity:0 } 15%{ opacity:.9 }
  100%{ transform:translateY(-54px); opacity:0 }
}

#tvPvGlanz{ animation:tvGlanzZug 6.5s ease-in-out infinite }
@keyframes tvGlanzZug{
  0%,72%{ transform:translateX(0); opacity:0 }
  76%{ opacity:.9 } 92%{ transform:translateX(190px); opacity:.9 }
  100%{ transform:translateX(210px); opacity:0 }
}

.tv-tropfen{ animation:tvTropf 1.4s linear infinite }
.tv-tropfen:nth-child(2){ animation-delay:.45s }
.tv-tropfen:nth-child(3){ animation-delay:.9s }
@keyframes tvTropf{
  0%{ opacity:0; transform:translateY(-5px) } 25%{ opacity:1 }
  100%{ opacity:0; transform:translateY(13px) }
}

.tv-dampf{ animation:tvSteigt 3.8s ease-out infinite }
.tv-dampf:nth-child(2){ animation-delay:1.6s }
@keyframes tvSteigt{
  0%{ opacity:0; transform:translateY(6px) scale(.7) }
  35%{ opacity:.75 } 100%{ opacity:0; transform:translateY(-24px) scale(1.25) }
}

.tv-weht{ animation:tvWeht 3.4s ease-in-out infinite }
.tv-weht:nth-child(2){ animation-delay:.9s }
.tv-weht:nth-child(3){ animation-delay:1.8s }
@keyframes tvWeht{
  0%,100%{ opacity:.2; transform:translateX(0) } 50%{ opacity:.95; transform:translateX(-8px) }
}

.tv-auf{ animation:tvAufsteigen 4.4s ease-out infinite }
.tv-auf:nth-child(2){ animation-delay:1.5s }
.tv-auf:nth-child(3){ animation-delay:2.9s }
@keyframes tvAufsteigen{
  0%{ opacity:0; transform:translateY(8px) } 30%{ opacity:.8 }
  100%{ opacity:0; transform:translateY(-22px) }
}

.tv-puls{ animation:tvPulsieren 3.2s ease-out infinite }
@keyframes tvPulsieren{
  0%{ opacity:.7; transform:scale(1) } 100%{ opacity:0; transform:scale(1.14) }
}
#tvSpeicherPuls{ transform-origin:464px 454px }
.tv-puls{ transform-origin:464px 454px }

/* Weiche Übergänge für alles, was der Regler steuert */
#tvH1,#tvH2,#tvH3,#tvSterne,#tvSonne,#tvMond,#tvSchein,#tvSchatten,#tvGestirn,
#tvBadFenster,#tvWohnFenster,#tvSpeicherWarm,#tvKesselFlamme,#tvSpeicherPuls,
#tvWasser,#tvDampf,#tvLuftstrom,#tvWpLuft,#tvWaermewellen,#tvFbhWelle,
#tvBlasen,#tvVoegel,#tvWagen,.tv-fluss{
  transition:opacity .6s ease, fill .8s ease, stop-color .8s ease,
             transform .6s ease, cx .6s ease, rx .6s ease;
}

/* Anklickbare Bereiche */
.tv-zone{ cursor:pointer }
.tv-zone:focus{ outline:none }
.tv-feld{ fill:transparent; stroke:none; transition:all .2s }
.tv-zone:hover .tv-feld,
.tv-zone:focus-visible .tv-feld{
  stroke:var(--o); stroke-width:2.4; stroke-dasharray:7 5; fill:rgba(255,117,31,.07);
}

/* ── Bedienleiste ── */
.tv-leiste{ margin-top:14px }
.tv-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px }
.tv-uhr{ font-size:1.05rem; font-weight:800; color:var(--g-txt); font-variant-numeric:tabular-nums }
.tv-jetzt{
  background:none; border:1.5px solid var(--rule); color:var(--ink3);
  font-family:inherit; font-size:.72rem; font-weight:700;
  padding:5px 13px; border-radius:100px; cursor:pointer;
  opacity:0; pointer-events:none; transition:all .25s;
}
.tv-jetzt.an{ opacity:1; pointer-events:auto }
.tv-jetzt:hover{ border-color:var(--g2); color:var(--g-txt) }

.tv-schiene{ position:relative; height:34px }
.tv-spur{ position:absolute; left:0; right:0; top:14px; height:6px; border-radius:3px; background:var(--rule) }
.tv-oeffnung{
  position:absolute; top:14px; height:6px; border-radius:3px;
  background:var(--g2); opacity:.5; left:33.33%; width:35.42%;
}
.tv-marke{ position:absolute; top:24px; width:1px; height:6px; background:var(--rule) }
.tv-marke span{ position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:.62rem; color:var(--ink3) }
.tv-regler{
  position:absolute; left:0; right:0; top:0; width:100%; height:34px;
  margin:0; background:none; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.tv-regler:focus{ outline:none }
.tv-regler::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--g2); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.tv-regler::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--g2); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.tv-regler:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(138,171,92,.4) }
.tv-regler:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px rgba(138,171,92,.4) }

.tv-text{ font-size:.86rem; color:var(--ink2); line-height:1.6; margin-top:11px; min-height:2.9em }
.tv-text b{ color:var(--ink); font-weight:700 }

@media(max-width:640px){
  .tv-text{ font-size:.82rem; min-height:3.4em }
  .tv-regler::-webkit-slider-thumb{ width:26px; height:26px }
  .tv-regler::-moz-range-thumb{ width:26px; height:26px }
  .tv-w3,#tvVoegel,#tvSterne circle:nth-child(n+9){ display:none }
}

@media(prefers-reduced-motion:reduce){
  .tv-fluss,.tv-wolke,#tvSterne circle,#tvStrahlenkranz,#tvLuefter,#tvHarz circle,
  .tv-blase,#tvPvGlanz,.tv-tropfen,.tv-dampf,.tv-weht,.tv-auf,.tv-puls,.tv-vogel{
    animation:none !important;
  }
  #tvH1,#tvH2,#tvH3,#tvGestirn,#tvSchatten{ transition:none !important }
}

[data-theme="dark"] .tv-spur{ background:#3a3a34 }

/* Stundenzahlen der Zeitleiste: dunkler, damit sie
   auch auf der hellen Spur gut lesbar sind */
.tv-marke span{ color:var(--ink2); font-weight:600; }

/* Der Zurück-Knopf muss mit dem Finger gut zu treffen sein */
@media (pointer: coarse){
  .tv-jetzt{ min-height:40px; padding:8px 16px; }
}

/* ══════════════════════════════════════════════════
   LESBARKEIT DER SCHALTFLÄCHEN
   ══════════════════════════════════════════════════
   Weiße Schrift auf dem hellen Markengrün erreichte nur
   2,4:1 – deutlich unter der Vorgabe von 4,5:1. Die
   Verläufe beginnen jetzt dunkler. Die Farbfamilie
   bleibt dieselbe, nur die Helligkeit ändert sich. */
:root{
  --btn-hell:#5f7f38;   /* 4,6:1 gegen Weiß */
  --btn-dunkel:#456024; /* 7,1:1 gegen Weiß */
}
.btn-p, .hdr-cb, .hc-btn, .fbtn-p,
.wp-banner-alt, .fab, .fbtn.fbtn-p{
  background:linear-gradient(135deg, var(--btn-hell), var(--btn-dunkel)) !important;
  background-size:200% auto;
  color:#fff !important;
}
.btn-p:hover, .hdr-cb:hover, .hc-btn:hover, .fbtn-p:hover{
  background-position:right center;
}

/* Umriss-Knöpfe: im dunklen Modus war die Schrift
   fast unsichtbar (1,07:1). */
[data-theme="dark"] .btn-sec{
  color:var(--g) !important;
  border-color:var(--g2) !important;
  background:rgba(167,190,127,.10) !important;
}
[data-theme="dark"] .btn-sec:hover{
  background:var(--g2) !important;
  color:#14140f !important;
  border-color:var(--g2) !important;
}
[data-theme="dark"] .cb-btn{
  color:var(--g) !important;
  border-color:var(--g2) !important;
}
[data-theme="dark"] .cb-btn:hover{
  background:var(--g2) !important;
  color:#14140f !important;
}

/* Die übrigen Knöpfe mit hellgrünem Verlauf –
   dieselbe Korrektur wie oben */
.jbtn, .map-consent-btn, .mlink{
  background:linear-gradient(135deg, var(--btn-hell), var(--btn-dunkel)) !important;
  color:#fff !important;
}

/* Öffnungszeiten-Ampel in der obersten Leiste:
   Der grüne Balken ist zu hell für weiße Schrift.
   Die Ampel bekommt eine eigene dunklere Fläche. */
.oz-status-mobile{
  background:rgba(0,0,0,.30) !important;
  border-color:rgba(255,255,255,.30) !important;
}
.oz-status-mobile .oz-status-txt{ color:#fff !important; }

/* Ampel in der Kopfzeile: im dunklen Modus hatte sie
   eine helle Fläche behalten, während die Schrift hell
   wurde – dadurch war der Text kaum zu lesen. */
[data-theme="dark"] #ozStatusHeader{
  background:var(--bg) !important;
  border-color:var(--rule) !important;
}
[data-theme="dark"] #ozStatusHeader .oz-status-txt{
  color:var(--ink) !important;
}

/* Der Textfarbe der Ampel folgt jetzt dem Farbmodus */
[data-theme="dark"] #ozStatusHeader,
[data-theme="dark"] #ozStatusHeader .oz-status-txt{
  color:#f0f0ed !important;
}
[data-theme="dark"] #ozStatusHeader{
  background:#1a1a18 !important;
  border-color:#2e2e2a !important;
}

/* ══════════════════════════════════════════════════
   TEAM: Porträt und Gruppenbild
   ══════════════════════════════════════════════════ */
.team-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  display:block;
}

.team-foto{
  margin:8px auto 0; max-width:560px; width:100%;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--rule); box-shadow:var(--sh);
  background:var(--surf);
}
.team-foto img{ width:100%; height:auto; display:block; }
.team-foto figcaption{
  padding:12px 18px; text-align:center;
  font-size:.82rem; color:var(--ink3);
  border-top:1px solid var(--rule);
}
@media(max-width:640px){
  .team-foto{ max-width:100%; }
  .team-foto figcaption{ font-size:.78rem; padding:10px 14px; }
}
[data-theme="dark"] .team-foto{ background:var(--surf); border-color:var(--rule); }

/* ══════════════════════════════════════════════════
   TEAM: Qualifikationen und Zitate von Jens Hupp
   ══════════════════════════════════════════════════ */
.jens-quali{
  max-width:560px; margin:26px auto 0; width:100%;
}
.jq-liste{
  display:flex; flex-direction:column; gap:2px;
  background:var(--surf); border:1px solid var(--rule);
  border-radius:var(--r); padding:20px 24px;
}
.jq-punkt{
  display:flex; gap:16px; align-items:baseline;
  padding:9px 0;
}
.jq-punkt + .jq-punkt{ border-top:1px solid var(--rule); }
.jq-jahr{
  flex:0 0 auto; min-width:52px;
  font-size:.82rem; font-weight:800; color:var(--g-txt);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.jq-text{
  flex:1 1 auto; font-size:.87rem; color:var(--ink2); line-height:1.62;
}

.jens-zitate{
  max-width:560px; margin:22px auto 0; width:100%;
}
.jz{
  margin:0 0 12px; padding:16px 20px;
  background:var(--surf); border:1px solid var(--rule);
  border-left:3px solid var(--g2); border-radius:var(--r);
}
.jz p{
  margin:0; font-size:.88rem; line-height:1.7;
  color:var(--ink2); font-style:italic;
}
.jz-name{
  text-align:right; font-size:.8rem; font-weight:700;
  color:var(--ink3); margin-top:-2px; padding-right:4px;
}
.jz-name::before{ content:"— "; }

/* ══════════════════════════════════════════════════
   REFERENZEN
   ══════════════════════════════════════════════════ *

@media(max-width:640px){
  .jq-liste{ padding:16px 18px; }
  .jq-punkt{ flex-direction:column; gap:3px; }
  .jq-jahr{ min-width:0; }
  .jz{ padding:14px 16px; }
}

/* ══════════════════════════════════════════════════
   LESBARKEIT: farbige Flächen mit weißer Schrift
   ══════════════════════════════════════════════════
   Weiße Schrift auf dem hellen Markengrün erreichte nur
   1,7 bis 2,6:1. Diese Flächen bekommen jetzt dunklere
   Verläufe – dieselbe Farbfamilie, nur kräftiger. */
.topbar{
  background:linear-gradient(270deg,#3d5622,#4a6828,#5f7f38,#4a6828,#3d5622) !important;
  background-size:400% auto;
}
.sbh-g{ background:linear-gradient(135deg,#5f7f38,#456024) !important; }
.kh   { background:linear-gradient(135deg,#5f7f38,#4a6828,#3d5622) !important; }
.ozh  { background:linear-gradient(135deg,#5f7f38,#456024) !important; }
.wp-banner{
  background:linear-gradient(135deg,#5f7f38,#456024) !important;
}

/* Fußzeile: die grauen Zeilen waren auf dem dunklen
   Grund zu schwach (2,0 bis 2,9:1). */
footer .f-sub{ color:rgba(255,255,255,.72) !important; }
footer .fc a{ color:rgba(255,255,255,.86) !important; }
footer span[style*="rgba(255,255,255,.3)"],
footer .f-addr{ color:rgba(255,255,255,.68) !important; }
footer .f-links a,
footer a[onclick]{ color:rgba(255,255,255,.78) !important; }
footer .f-copy,
footer small{ color:rgba(255,255,255,.66) !important; }

/* Öffnungszeiten-Kasten auf der Kontaktseite:
   blieb im dunklen Modus weiß, während die Schrift
   hell wurde. */
[data-theme="dark"] .ozb,
[data-theme="dark"] .oz-row{ background:var(--surf); }
[data-theme="dark"] .oz-day{ color:var(--ink) !important; }
[data-theme="dark"] .oz-time{ color:var(--ink2) !important; }

/* Fußzeile: die Verweise und die Zeile mit dem
   Urheberrechtshinweis waren zu blass. */
footer .fl :is(span,a){ color:rgba(255,255,255,.74) !important; }
footer .fl :is(span,a):hover{ color:#fff !important; }
footer .fb span{ color:rgba(255,255,255,.70) !important; }
footer .fb a{ color:rgba(255,255,255,.80) !important; }

/* Wärmepumpen-Banner: die halbdurchsichtige weiße
   Schrift blieb knapp unter der Vorgabe. */
.wp-banner-eyebrow{ color:rgba(255,255,255,.96) !important; }
.wp-banner-sub{ color:#fff !important; }

/* Die kleine Überschrift im Banner ganz weiß */
.wp-banner-eyebrow{ color:#fff !important; }

/* ══════════════════════════════════════════════════
   REFERENZEN: Einleitung als eigener Kasten
   ══════════════════════════════════════════════════
   Der Absatz stand frei zwischen Seitenkopf und Karten
   und wirkte dadurch unverankert. Jetzt bekommt er
   einen Rahmen wie die Karten und mehr Luft nach oben. *
/* ══════════════════════════════════════════════════
   ÜBER UNS: Kasten "Alles aus einer Hand"
   ══════════════════════════════════════════════════
   Füllt die bisher leere zweite Spalte der Leiste. */
.u-hand{
  background:var(--bg);
  border:1px solid var(--rule);
  border-left:4px solid var(--g2);
  border-radius:var(--r);
  padding:32px 34px;
  box-shadow:var(--sh);
}
.uh-icon{ font-size:2rem; line-height:1; margin-bottom:14px; }
.uh-title{
  font-size:1.18rem; font-weight:800; color:var(--ink);
  letter-spacing:-.02em; margin-bottom:9px;
}
.uh-text{
  margin:0; font-size:.9rem; line-height:1.75; color:var(--ink2);
}
@media(max-width:900px){
  .u-hand{ padding:26px 24px; }
  .uh-title{ font-size:1.08rem; }
  .uh-text{ font-size:.86rem; }
}
[data-theme="dark"] .u-hand{ background:var(--surf); }

/* ══════════════════════════════════════════════════
   BÄDERMACHER: Leistungsübersicht am Seitenanfang
   ══════════════════════════════════════════════════
   Auf breiten Bildschirmen steht die Liste bereits in
   der Randspalte. Auf schmalen rutscht sie unter den
   langen Text – dort blenden wir sie oben ein. */
.bm-uebersicht{ display:none; }

@media(max-width:1023px){
  .bm-uebersicht{
    display:block;
    margin:0 0 28px;
    padding:20px 24px;
    background:var(--surf);
    border:1px solid var(--rule);
    border-left:4px solid var(--g2);
    border-radius:var(--r);
  }
  .bmu-titel{
    font-size:.72rem; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:var(--g-txt);
    margin-bottom:12px;
  }
  .bmu-liste{ margin:0; padding:0; list-style:none; }
  .bmu-liste li{
    display:flex; align-items:flex-start; gap:10px;
    padding:8px 0; font-size:.88rem; line-height:1.5;
    color:var(--ink2);
  }
  .bmu-liste li + li{ border-top:1px solid var(--rule); }
  .bmu-liste li span{ flex:0 0 auto; font-size:1rem; line-height:1.35; }
}
[data-theme="dark"] .bm-uebersicht{ background:var(--surf); }

/* Die Leistungsliste steht auf schmalen Bildschirmen
   bereits oben – dann ist die Randspalte überflüssig. */
@media(max-width:1023px){
  .sb-nur-breit{ display:none !important; }
}

/* ══════════════════════════════════════════════════
   HERO: sachliche Zeile statt Werbespruch
   ══════════════════════════════════════════════════
   Ruhiger als der bisherige Farbverlauf – die Zeile
   nennt Betriebsart und Ort statt einer Behauptung. */
.hero-ort{
  display:block;
  font-size:clamp(1rem, 1.9vw, 1.5rem);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.25;
  color:var(--ink2);
  margin-top:6px;
}
@media(max-width:640px){
  .hero-ort{ font-size:1rem; margin-top:4px; }
}

/* ══════════════════════════════════════════════════
   HERO: Spaltenverhältnis
   ══════════════════════════════════════════════════
   Seit der Werbespruch entfallen ist, füllte der Text
   nur noch 43 % der Höhe – die 4:3-Grafik gab die Höhe
   vor. Die Textspalte bekommt mehr Breite, dadurch wird
   die Grafik flacher und der Leerraum kleiner. */
@media(min-width:901px){
  .hero-in{
    grid-template-columns:1.15fr 0.85fr;
    gap:56px;
  }
}
@media(min-width:1600px){
  .hero-in{
    grid-template-columns:1.1fr 0.9fr;
    gap:68px;
  }
}

/* ══════════════════════════════════════════════════
   AUSWAHLLEISTE IN DEN INTERAKTIVEN GRAFIKEN
   ══════════════════════════════════════════════════
   Die Leiste liegt jetzt im Bild statt darunter –
   unten mittig über der Grafik schwebend, damit sie
   das Motiv nicht auseinanderzieht. *

/* Auf schmalen Bildschirmen würde die Leiste über mehrere
   Zeilen laufen und das halbe Bild verdecken. Dort wird
   daraus eine einzeilige Reihe, die sich seitlich schieben
   lässt. */


/* ══════════════════════════════════════════════════
   PFEILE IN DEN INFOFENSTERN
   ══════════════════════════════════════════════════
   Die Pfeile waren am ersten bzw. letzten Punkt mit
   opacity:0 komplett unsichtbar – das wirkte wie ein
   Fehler. Sie laufen jetzt um und bleiben immer da. */
.wp3d-nav-btn:disabled{
  opacity:1;
  pointer-events:auto;
}

/* ══════════════════════════════════════════════════
   WEITER-PFEIL IN DEN GALERIEN
   ══════════════════════════════════════════════════
   Rechts im Bild, blättert zum nächsten Foto. */
.gal{ position:relative; }
.gal-next{
  position:absolute;
  right:12px;
  top:calc(50% - 46px);
  transform:translateY(-50%);
  z-index:8;
  width:46px; height:46px;
  padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#2d3a1e;
  font-size:1.25rem; line-height:1;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.gal-next:hover{
  background:#fff;
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.gal-next:active{ transform:translateY(-50%) scale(.96); }
.gal-next:focus-visible{ outline:2px solid var(--o); outline-offset:2px; }

@media(max-width:640px){
  .gal-next{ right:8px; width:42px; height:42px; font-size:1.1rem; }
}
[data-theme="dark"] .gal-next{
  background:rgba(240,240,237,.94);
  color:#14140f;
}

/* ══════════════════════════════════════════════════
   WEITERBLÄTTERN IN DEN GALERIEN MIT GRAFIK
   ══════════════════════════════════════════════════
   Wie bei Lüftung & Klima: ein Pfeil in der Bildmitte,
   der beim Darüberfahren erscheint. Er sitzt nur auf
   den Fotos – die interaktive Grafik bekommt keinen,
   dort wird über die Punkte bedient. */
#wp-slide-photo,
#ks-slide-photo{
  position:relative;
  cursor:pointer;
}
#wp-slide-photo::after,
#ks-slide-photo::after{
  content:'→';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:700;
  color:var(--g2);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
#wp-slide-photo:hover::after,
#ks-slide-photo:hover::after{
  transform:translate(-50%,-50%) scale(1);
}
/* Auf Touch-Geräten gibt es kein Darüberfahren –
   dort bleibt der Pfeil dauerhaft sichtbar. */
@media (pointer: coarse){
  #wp-slide-photo::after,
  #ks-slide-photo::after{
    transform:translate(-50%,-50%) scale(1);
    width:52px; height:52px;
    background:rgba(255,255,255,.86);
  }
}

/* ══════════════════════════════════════════════════
   ALTEN PFEIL DES BILDBEREICHS ABSCHALTEN
   ══════════════════════════════════════════════════
   .gm-wrap::after zeichnet beim Darüberfahren einen
   eigenen Pfeil. Er lag über dem Foto und schluckte
   den Klick – auf Mobilgeräten fiel das nicht auf,
   weil er dort schon ausgeblendet war.
   Die Galerien mit Grafik nutzen jetzt den Pfeil auf
   dem Fotoslide, deshalb muss der alte weg. */
.wp-gm::after{ display:none !important; }
.gm-wrap::after{ pointer-events:none; }