/* ===== DM Sans – lokale Schriftart ===== */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-500.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/dm-sans-600.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dm-sans-700.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/dm-sans-800.ttf') format('truetype');
}

/* ===== Schutz der Bootstrap‑Icons ===== */
.bi,
.bi::before {
  font-family: "bootstrap-icons" !important;
}

/* ===== Farbvariablen ===== */
:root{
  --blue:#2196D3; --blue-d:#1565A8; --blue-l:rgba(33,150,211,.12);
  --red:#D32F1E;  --red-d:#A51F11;  --red-l:rgba(211,47,30,.1);
  --yel:#F5C400;  --yel-d:#C49A00;  --yel-l:rgba(245,196,0,.13);
  --dark:#1A1A1A; --mid:#2D2D2D;    --light:#F5F5F5; --white:#fff;
  --muted:rgba(255,255,255,.55);  --glass:rgba(255,255,255,.08);
  --r:16px; --rs:10px; --tr:all .3s cubic-bezier(.4,0,.2,1);
}

/* ===== Globale Grundeinstellungen ===== */
*, *::before, *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#111}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--light);
  color:var(--dark);
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--dark);
}
a{
  color:var(--blue);
  text-decoration:none;
  transition:var(--tr);
}
a:hover{color:var(--blue-d)}

/* ===== Navbar ===== */
.navbar{
  background:rgba(26,26,26,.96)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:.8rem 0;
  transition:var(--tr);
}
.navbar.scrolled{
  padding:.45rem 0;
  background:#1A1A1A!important;
  box-shadow:0 4px 30px rgba(0,0,0,.5);
}
.nlogo{height:42px;width:auto;display:block;border-radius:6px}
.navbar .nav-link{
  color:rgba(255,255,255,.65)!important;
  font-weight:500;
  font-size:.88rem;
  padding:.4rem .85rem!important;
  border-radius:8px;
  transition:var(--tr);
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:#fff!important;
  background:rgba(255,255,255,.1);
}
.dropdown-menu{
  background:#2D2D2D!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:var(--rs)!important
}
.dropdown-item{
  color:rgba(255,255,255,.65)!important;
  font-size:.88rem;
  display:flex;
  align-items:center;
  gap:8px
}
.dropdown-item:hover{
  background:rgba(255,255,255,.1)!important;
  color:#fff!important
}
.navbar-toggler{border-color:rgba(255,255,255,.2)}
.navbar-toggler-icon{filter:invert(1)}
.ci{color:#7EC8F0!important}
.ch{color:#F5948A!important}
.cg{color:#FFE066!important}

/* ===== Notdienst‑Float‑Button ===== */
.float-em{
  position:fixed;
  bottom:2rem;right:2rem;
  z-index:1000;
  background:linear-gradient(135deg,var(--red),var(--red-d));
  color:#fff!important;
  border-radius:50px;
  padding:.75rem 1.4rem;
  font-weight:700;
  font-size:.88rem;
  box-shadow:0 6px 24px rgba(211,47,30,.5);
  display:flex;align-items:center;gap:8px;
  transition:var(--tr);
  text-decoration:none;
  animation:pem 2.5s ease-in-out infinite
}
.float-em:hover{
  color:#fff!important;
  transform:translateY(-3px) scale(1.04);
  animation:none
}
@keyframes pem{
  0%,100%{box-shadow:0 6px 24px rgba(211,47,30,.5)}
  50%{box-shadow:0 6px 44px rgba(211,47,30,.85)}
}

/* ===== Buttons ===== */
.btn{
  font-weight:600;
  border-radius:50px;
  padding:.65rem 1.8rem;
  transition:var(--tr);
  border:none;
  font-size:.92rem;
}
.btn-b{
  background:linear-gradient(135deg,var(--blue),var(--blue-d));
  color:#fff;
  box-shadow:0 4px 18px rgba(33,150,211,.35);
}
.btn-b:hover{
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(33,150,211,.6);
}
.btn-r{
  background:linear-gradient(135deg,var(--red),var(--red-d));
  color:#fff;
  box-shadow:0 4px 18px rgba(211,47,30,.35);
}
.btn-r:hover{
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(211,47,30,.6);
}
.btn-y{
  background:linear-gradient(135deg,var(--yel),var(--yel-d));
  color:var(--dark);
  font-weight:700;
  box-shadow:0 4px 18px rgba(245,196,0,.35);
}
.btn-y:hover{
  color:var(--dark);
  transform:translateY(-3px);
}
.btn-ow{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.45);
}
.btn-ow:hover{
  background:rgba(255,255,255,.12);
  color:#fff
}
.btn-wh{
  background:#fff;
  color:var(--dark);
  font-weight:700;
  box-shadow:0 4px 18px rgba(0,0,0,.12);
}
.btn-wh:hover{
  transform:translateY(-3px);
  color:var(--dark);
}

/* ===== Hero Slider ===== */
.hero-slider{
  position:relative;
  min-height:100vh;
  max-height:960px;
  overflow:hidden;
  background:var(--dark);
}
.hg{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  animation:gf 8s ease-in-out infinite;
}
.hg1{width:550px;height:550px;top:-10%;left:-5%}
.hg2{width:400px;height:400px;bottom:-5%;right:5%;animation-delay:-4s}
.hero-slide.sb{background:linear-gradient(160deg,#0a0f1a 0%,#0d1e35 40%,#112644 100%)}
.sb .hg1,.sb .hg2{background:radial-gradient(circle,rgba(33,150,211,.38) 0%,transparent 70%)}
.hero-slide.sr{background:linear-gradient(160deg,#120608 0%,#1e0c0a 40%,#2a1210 100%)}
.sr .hg1,.sr .hg2{background:radial-gradient(circle,rgba(211,47,30,.38) 0%,transparent 70%)}
.hero-slide.sy{background:linear-gradient(160deg,#111008 0%,#1c1a0a 40%,#25200c 100%)}
.sy .hg1,.sy .hg2{background:radial-gradient(circle,rgba(245,196,0,.3) 0%,transparent 70%)}
/* ===== Neu by BT ===== */
.sg .hg1,.sg .hg2{background:radial-gradient(circle,rgba(51, 230, 7, 0.3) 0%,transparent 70%)}

@keyframes gf{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.05)}
  66%{transform:translate(-20px,15px) scale(.97)}
}
.hgrid{
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
  pointer-events:none
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
  display:flex;
  align-items:center
}
.hero-slide.active{opacity:1}
.hero-slide .container{position:relative;z-index:3}
.hbadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.2);
  font-size:.78rem;
  font-weight:600;
  padding:.38rem 1rem;
  border-radius:50px;
  margin-bottom:1.5rem;
  backdrop-filter:blur(8px);
  letter-spacing:.04em;
  text-transform:uppercase
}
.bb{border-color:rgba(33,150,211,.5)!important;background:rgba(33,150,211,.15)!important;color:#7EC8F0!important}
.br{border-color:rgba(211,47,30,.5)!important;background:rgba(211,47,30,.15)!important;color:#F5948A!important}
.by{border-color:rgba(245,196,0,.5)!important;background:rgba(245,196,0,.15)!important;color:#FFE066!important}
/* by BT 
.sg{border-color:rgba(245,196,0,.5)!important;background:rgba(245,196,0,.15)!important;color:#FFE066!important}
*/
.htitle{
  font-size:clamp(2.4rem,5.5vw,4.2rem);
  font-weight:800;
  color:#fff;
  line-height:1.12;
  letter-spacing:-.04em;
  margin-bottom:1.2rem
}
.hsub{
  color:rgba(255,255,255,.65);
  font-size:1.05rem;
  max-width:500px;
  margin-bottom:2rem
}
.hgc{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r);
  padding:1.8rem;
  color:#fff
}
.hgc h5{
  font-weight:700;
  margin-bottom:.8rem
}
.hgc ul{
  list-style:none;
  padding:0;
  margin:0
}
.hgc ul li{
  padding:.35rem 0;
  color:rgba(255,255,255,.75);
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:8px
}
.sdots{
  position:absolute;
  bottom:2.5rem;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  gap:8px
}
.sdot{
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  border:none;
  cursor:pointer;
  transition:var(--tr)
}
.sdot.db.active{background:var(--blue);width:26px;border-radius:4px}
.sdot.dr.active{background:var(--red);width:26px;border-radius:4px}
.sdot.dy.active{background:var(--yel);width:26px;border-radius:4px}
.hwave{
  position:absolute;
  bottom:-2px;left:0;right:0;
  z-index:4;
  line-height:0
}
.hwave svg{display:block;width:100%}

/* ===== 3‑Spalten‑Strip ===== */
.strip-d{background:var(--dark)}
.spill{
  border-radius:var(--r);
  padding:2.2rem;
  position:relative;
  overflow:hidden;
  transition:var(--tr);
  text-decoration:none;
  display:block
}
.spill:hover{transform:translateY(-6px)}
.spill::after{
  content:'';
  position:absolute;
  bottom:-30px;right:-30px;
  width:120px;height:120px;
  border-radius:50%;
  background:rgba(255,255,255,.08)
}
.sp-b{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff!important}
.sp-r{background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff!important}
.sp-y{background:linear-gradient(135deg,var(--yel),var(--yel-d));color:var(--dark)!important}
.sp-y h3,.sp-y p,.sp-y .spl{color:var(--dark)!important}
.spico{font-size:2.5rem;margin-bottom:1rem;display:block}
.splbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:.5rem}
.spill h3{
  font-size:1.4rem;
  font-weight:800;
  margin-bottom:.5rem
}
.spill p{
  font-size:.9rem;
  opacity:.8;
  margin-bottom:1rem
}
.spl{
  font-size:.85rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.85)
}

/* ===== Sections ===== */
section{padding:5.5rem 0}
.bg-l{background:var(--light)}
.bg-w{background:var(--white)}
.bg-d{background:var(--dark)}
.slbl{
  font-size:.73rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:.5rem
}
.lb{color:var(--blue)}
.lr{color:var(--red)}
.ly{color:var(--yel-d)}
.stit{
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.18
}
.ab{color:var(--blue)}
.ar{color:var(--red)}
.ay{color:var(--yel-d)}

/* ===== Service Cards ===== */
.scard{
  background:#fff;
  border-radius:var(--r);
  padding:2rem;
  box-shadow:0 2px 20px rgba(0,0,0,.07);
  transition:var(--tr);
  border:1px solid rgba(0,0,0,.06);
  position:relative;
  overflow:hidden
}
.scard::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  transform:scaleX(0);
  transform-origin:left;
  transition:var(--tr)
}
.scard.cb::after{background:linear-gradient(90deg,var(--blue),#7EC8F0)}
.scard.cr::after{background:linear-gradient(90deg,var(--red),#F5948A)}
.scard.cy::after{background:linear-gradient(90deg,var(--yel),#FFE066)}
.scard:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,.12)
}
.scard:hover::after{transform:scaleX(1)}
.sico{
  width:56px;height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin-bottom:1.2rem
}
.sib{background:var(--blue-l);color:var(--blue)}
.sir{background:var(--red-l);color:var(--red)}
.siy{background:var(--yel-l);color:var(--yel-d)}
.sig{background:rgba(22,163,74,.15);color:#16a34a}
.statnum{
  font-size:3rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em
}
.statlbl{
  color:var(--muted);
  font-size:.85rem;
  margin-top:.3rem
}

/* ===== Info Cards ===== */
.icard{
  background:#fff;
  border-radius:var(--r);
  padding:1.6rem;
  box-shadow:0 2px 16px rgba(0,0,0,.07);
  border-left:4px solid var(--blue)
}
.ib{border-left-color:var(--blue)}
.icard.ir{border-left-color:var(--red)}
.icard.iy{border-left-color:var(--yel)}
.icard.iw{border-left-color:var(--red)}

/* ===== Feature List ===== */
.fl{
  list-style:none;
  padding:0;
  margin:0
}
.fl li{
  padding:.45rem 0;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.93rem;
  color:#374151
}
.fl li:last-child{border:none}
.fib{color:var(--blue)!important;flex-shrink:0;margin-top:3px}
.fir{color:var(--red)!important;flex-shrink:0;margin-top:3px}
.fiy{color:var(--yel-d)!important;flex-shrink:0;margin-top:3px}

/* ===== Sub‑Hero ===== */
.sub-hero{
  background:var(--dark);
  padding:5.5rem 0 4.5rem;
  position:relative;
  overflow:hidden
}
.sub-hero::after{
  content:'';
  position:absolute;
  bottom:-2px;left:0;right:0;
  height:60px;
  background:var(--light);
  clip-path:ellipse(55% 100% at 50% 100%)
}
.sub-hero.sh-w::after{background:var(--white)}
.sub-hero .container{position:relative;z-index:3}
.sub-hero h1{color:#fff;font-size:2.6rem}
.sub-hero .lead{color:rgba(255,255,255,.6)}
.sub-hero .sg{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none
}
.sub-hero .sg1{width:400px;height:400px;top:-20%;left:-5%;animation:gf 8s ease-in-out infinite}
.sub-hero .sg2{width:300px;height:300px;bottom:-10%;right:5%;animation:gf 8s ease-in-out infinite;animation-delay:-4s}
.shg{
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
  pointer-events:none
}

/* ===== Accordion ===== */
.accordion-item{
  border:1px solid rgba(0,0,0,.1)!important;
  border-radius:var(--rs)!important;
  margin-bottom:.75rem;
  overflow:hidden
}
.accordion-button{
  font-weight:600;
  background:#fff!important;
  color:var(--dark)!important;
  box-shadow:none!important
}
.accordion-button:not(.collapsed){color:var(--blue)!important}

/* ===== Forms ===== */
.form-control,
.form-select{
  border:2px solid rgba(0,0,0,.1);
  border-radius:var(--rs);
  padding:.75rem 1rem;
  font-family:'DM Sans',sans-serif;
  transition:var(--tr)
}
.form-control:focus,
.form-select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(33,150,211,.15)
}
.form-control.is-invalid{border-color:var(--red)}
.form-label{
  font-weight:600;
  font-size:.84rem;
  color:#555;
  margin-bottom:.4rem
}

/* ===== Footer ===== */
footer{
  background:#111;
  padding:4rem 0 0
}
footer h6{
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  font-size:.73rem;
  letter-spacing:.1em;
  margin-bottom:1.2rem
}
footer p,footer li,footer a{
  color:rgba(255,255,255,.45);
  font-size:.87rem
}
footer a:hover{color:var(--blue)}
.fdiv{border-color:rgba(255,255,255,.07);margin:2.5rem 0 0}
.fbot{
  background:rgba(0,0,0,.3);
  padding:1.2rem 0;
  font-size:.8rem;
  color:rgba(255,255,255,.28)
}
.fsoc a{
  display:inline-flex;
  width:36px;height:36px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.45)!important;
  margin-right:6px;
  transition:var(--tr)
}
.fsoc a:hover{
  background:var(--blue);
  color:#fff!important
}

/* ===== Misc ===== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:50px;
  font-size:.77rem;
  font-weight:600;
  padding:.25rem .75rem;
  border:1px solid
}
.ohnohoney{
  opacity:0;
  position:absolute;
  top:0;left:0;
  height:0;width:0;
  z-index:-1;
  overflow:hidden
}
#ppl{
  position:fixed;
  inset:0;
  background:var(--dark);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition:opacity .5s ease
}
.pring{
  width:48px;height:48px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .9s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s ease,transform .65s ease
}
.reveal.visible{
  opacity:1;
  transform:translateY(0)
}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
@media(max-width:992px){
  .hero-slider{min-height:85vh}
  .float-em{bottom:1.2rem;right:1.2rem}
}
@media(max-width:576px){
  section{padding:3.5rem 0}
  .htitle{font-size:2.1rem}
  .statnum{font-size:2.2rem}
}
/* main.css oder style.css */
.btn-glass {
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  border-radius: 2rem;
  padding: .55rem 1.4rem;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}
.btn-glass:hover {
  background: rgba(255, 255, 255, .25);
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}
/* ══════════════════════════════════════════
   WÄRMEPUMPE – Grüne Varianten (4. Bereich)
   Passend zu: .sg, .bg, .dg, .btn-g, .sp-g
   ══════════════════════════════════════════ */

/* CSS-Variable */
:root { --grn: #4ade80; }

/* ── Hero Slide 4 (Grün) ── */
.hero-slide.sg {
  background: linear-gradient(135deg, #062b18 0%, #0a3d22 55%, #0c4a2a 100%);
}
.hero-slide.sg .htitle { color: #fff; }
.hero-slide.sg .hsub   { color: rgba(255,255,255,.75); }

/* ── Badge grün ── */
.hbadge.bg {
  background: rgba(74,222,128,.15);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,.3);
}

/* ── Slider-Dot grün ── */
.sdot.dg.active {
  background: #4ade80;
  width:26px;
  border-radius:4px;
  box-shadow: 0 0 0 3px rgba(74,222,128,.25);
}

/* ── Stat-Akzent grün ── */
.ag { color: #4ade80; }

/* ── Button grün ── */
.btn-g{
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff;
  box-shadow:0 4px 18px rgba(22,163,74,.35);
}
.btn-g:hover{
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(22,163,74,.6);
}

/* ── Leistungskarte Wärmepumpe (.sp-g) ── */
.sp-g{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff!important}
.spill.sp-g {
  transition: box-shadow .2s, transform .2s;
}
.spill.sp-g .spico {
  color: #fff;
  background: transparent;
}
.spill.sp-g .splbl { color: rgba(255,255,255,.8); }
.spill.sp-g .spl   { color: rgba(255,255,255,.9); }
.spill.sp-g h3,
.spill.sp-g p      { color: #fff; }
.spill.sp-g:hover  {
  box-shadow: 0 8px 28px rgba(22,163,74,.45);
  transform: translateY(-3px);
}

/* ── Logo-Größe Navbar ── */
.navbar-brand img {
  height: 38px;
  width: auto;
  max-height: 38px;
  object-fit: contain;
}

/* ===== Fehlende Utility ===== */
.fw-800{font-weight:800!important}




/* ===== Dunklere Service-Karten ===== */
.scard {
  background: #F8F9FA !important;
  border: 1px solid rgba(0,0,0,.04);
}
/* Noch dezenter für Sidebar-Karten */
.icard {
  background: #F9FAFB !important;
}



/* ══════════════════════════════════════════
   KLIMAANLAGE – Cyan-Varianten (5. Bereich)
   Passend zu: .sc, .bc, .dc, .btn-c, .sp-c
══════════════════════════════════════════ */
:root { --cyan: #06b6d4; --cyan-d: #0891b2; --cyan-l: rgba(6,182,212,.12); }

/* ── Hero Slide 5 (Cyan) ── */
.hero-slide.sc { background: linear-gradient(160deg,#030f14 0%,#071e26 40%,#0a2d3d 100%); }
.sb .hg1,.sb .hg2 { background: radial-gradient(circle,rgba(6,182,212,.38) 0%,transparent 70%); }

/* ── Badge Cyan ── */
.hbadge.bc { background:rgba(6,182,212,.15); color:#67e8f9; border:1px solid rgba(6,182,212,.3); }

/* ── Slider-Dot Cyan ── */
.sdot.dc.active { background:var(--cyan); width:26px; border-radius:4px; }

/* ── Akzent Cyan ── */
.ac { color:var(--cyan); }

/* ── Button Cyan ── */
.btn-c { background:linear-gradient(135deg,var(--cyan),var(--cyan-d)); color:#fff; box-shadow:0 4px 18px rgba(6,182,212,.35); }
.btn-c:hover { color:#fff; transform:translateY(-3px); box-shadow:0 10px 30px rgba(6,182,212,.6); }

/* ── Hero Slide background ── */
.hero-slide.sc .hg1,
.hero-slide.sc .hg2 { background: radial-gradient(circle,rgba(6,182,212,.38) 0%,transparent 70%); }

/* ── Leistungskarte Klimaanlage (.sp-c) ── */
.sp-c { background:linear-gradient(135deg,var(--cyan),var(--cyan-d)); color:#fff!important; }
.spill.sp-c .spico { color:#fff; background:transparent; }
.spill.sp-c .splbl { color:rgba(255,255,255,.8); }
.spill.sp-c .spl   { color:rgba(255,255,255,.85); }
.spill.sp-c h3,
.spill.sp-c p      { color:#fff; }
.spill.sp-c:hover  { box-shadow:0 8px 28px rgba(6,182,212,.45); transform:translateY(-3px); }

/* ── Sub-Hero Cyan ── */
.sub-hero.sc { background: linear-gradient(160deg,#030f14 0%,#071e26 40%,#0a2d3d 100%); }

/* ── sico/icard Cyan ── */
.sic { background:var(--cyan-l); color:var(--cyan); }
.icard.ic { border-left-color:var(--cyan); }
.fic { color:var(--cyan)!important; flex-shrink:0; margin-top:3px; }


@media (max-width: 767.98px) {
  .navbar-brand img { height: 30px; max-height: 30px; }
}
/* ── Kompaktere Karte für 2. Reihe (.spill-sm) ── */
.spill-sm { padding: 1.4rem 1.5rem 1.2rem; }
.spill-sm .spico { width:42px; height:42px; font-size:1.1rem; margin-bottom:.7rem; }
.spill-sm h3 { font-size:1rem; margin-bottom:.35rem; }
.spill-sm p  { font-size:.85rem; margin-bottom:.5rem; }

/* Dropdown-Icon Farbe Klimaanlage */
.cc { color: var(--cyan); margin-right: .45rem; }

/* ══════════════════════════════════════════
   BARRIEREFREIHEIT – Accessibility Styles
══════════════════════════════════════════ */

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4, 1rem);
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 0 0 6px 6px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-slider, .hero-slide {
    transition: none !important;
  }
}
/* ══ Mobile-Fix: Dots unter den Content ══ */
@media (max-width: 991.98px) {
  .sdots {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    justify-content: center;
    padding: 1.5rem 0 1rem;
  }

  .hero-slider {
    overflow: visible;
  }
}
.sdots {
  display: none !important;
}