/* ==========================================================================
   bee-com — dezentes 3D + interaktive Bausteine (Startseite)
   Nutzt ausschließlich die vorhandenen Logo-Farben und Schriften aus style.css.
   Wird NACH css/style.css geladen. Zum Abschalten: Link auf diese Datei entfernen.
   ========================================================================== */

/* ---------- Tasten-Optik für Buttons ---------- */
.btn-primary{
  background:linear-gradient(180deg,#FF7C3C 0%,#F26522 55%,#E4591A 100%);
  box-shadow:0 4px 0 #B8470F,0 12px 20px rgba(242,101,34,.30),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 #B8470F,0 16px 26px rgba(242,101,34,.36),inset 0 1px 0 rgba(255,255,255,.4);}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #B8470F,0 4px 8px rgba(242,101,34,.3);}
.btn-ghost{background:linear-gradient(180deg,#fff,#F3F3F3);box-shadow:0 3px 0 #D9D9D9,0 8px 14px rgba(17,17,17,.06);}
.btn-ghost:hover{box-shadow:0 5px 0 #D9D9D9,0 12px 18px rgba(17,17,17,.08);}

/* ---------- Icon-Kacheln mit Tiefe ---------- */
.hero-badge-panel .row .ic,.card .ic{
  background:linear-gradient(145deg,#FFF1E8,#FDDCC6);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 #F2B48E,0 10px 16px rgba(242,101,34,.22);
}
.card:hover .ic{background:var(--black);}

/* ==========================================================================
   Baustein 1 — Geräte im Hero
   ========================================================================== */
.hero.b3-on .hero-grid{align-items:center;}
.b3-right{display:grid;gap:14px;min-width:0;}
.b3-stage{position:relative;aspect-ratio:6/5;width:100%;max-width:100%;touch-action:pan-y;}
.b3-stage::before{content:"";position:absolute;inset:8% 4% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(242,101,34,.20),transparent 72%);}
.b3-dev{position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;will-change:transform;transition:transform .12s linear;}
.b3-dev img{display:block;width:100%;height:auto;animation:b3float 6s ease-in-out infinite;filter:drop-shadow(0 22px 18px rgba(17,17,17,.2));transition:filter .25s;}
.b3-dev:hover img,.b3-dev.sel img{filter:drop-shadow(0 22px 18px rgba(17,17,17,.2)) drop-shadow(0 0 14px rgba(242,101,34,.55));}
.b3-dev .dot{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--orange-600);border:3px solid #fff;box-shadow:0 2px 6px rgba(17,17,17,.3);}
.b3-dev .dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--orange-600);animation:b3ping 2.2s ease-out infinite;}
.b3-dev.sel .dot{background:var(--ok);}
.b3-dev.sel .dot::after{border-color:var(--ok);}
.b3-kp{left:1%;top:14%;width:34%;}.b3-cm{left:36%;top:0;width:38%;}.b3-rd{left:74%;top:20%;width:24%;}.b3-card{left:48%;top:64%;width:27%;}
.b3-kp img{animation-delay:-1s;}.b3-cm img{animation-delay:-3s;}.b3-rd img{animation-delay:-2s;}.b3-card img{animation-delay:-4.5s;}
@keyframes b3float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes b3ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.b3-info{display:grid;gap:4px;padding:16px 20px;border-radius:14px;background:var(--white);border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff,0 14px 30px -12px rgba(17,17,17,.22);}
.b3-info .tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-700);}
.b3-info strong{font-family:var(--font-display);color:var(--black);font-size:1.05rem;}
.b3-info p{font-size:.9rem;margin:0;}
.b3-info a{color:var(--orange-700);font-weight:700;font-size:.88rem;justify-self:start;}
/* bisheriges Leistungs-Panel: unter dem Hero als Leiste */
.b3-panel-row{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px;padding:14px 22px;}
.b3-panel-row .row{border-bottom:none;}

/* ==========================================================================
   Baustein 2 — Objekt-Schutz (isometrisches Haus)
   ========================================================================== */
.b3-house{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px;align-items:center;}
.b3-layers{display:grid;gap:12px;min-width:0;}
.b3-layer{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;text-align:left;font:inherit;color:inherit;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;box-shadow:0 3px 0 #D9D9D9;transition:transform .15s,border-color .15s,box-shadow .15s;}
.b3-layer:hover{transform:translateY(-2px);}
.b3-layer .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--fog-100);color:var(--slate-600);box-shadow:inset 0 1px 0 #fff,0 3px 0 #D9D9D9;transition:background .2s,color .2s;}
.b3-layer .ic svg{width:22px;height:22px;}
.b3-layer strong{font-family:var(--font-display);color:var(--black);display:block;font-size:1rem;}
.b3-layer small{font-size:.8rem;line-height:1.35;display:block;}
.b3-layer.prev{border-color:var(--orange-600);border-style:dashed;}
.b3-layer.prev .ic{background:var(--orange-100);color:var(--orange-700);}
.b3-layer[aria-pressed="true"]{border-color:var(--orange-600);box-shadow:0 3px 0 var(--orange-700);}
.b3-layer[aria-pressed="true"] .ic{background:var(--orange-600);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 var(--orange-700);}
.b3-note{margin-top:6px;font-size:.92rem;min-height:3.1em;}
.b3-scene{perspective:1200px;min-width:0;}
.b3-scene-in{transition:transform .2s ease-out;transform-style:preserve-3d;border-radius:18px;background:linear-gradient(180deg,var(--fog-100),var(--white));border:1px solid var(--line);padding:6px;}
.b3-scene svg{display:block;width:100%;height:auto;max-width:100%;}
.b3-scene .ground{fill:#F0F0F0;stroke:var(--line);stroke-width:1;}
.b3-scene .wl{fill:#fff;stroke:#D9D9D9;stroke-width:1;}
.b3-scene .wr{fill:#E3E3E3;stroke:#D9D9D9;stroke-width:1;}
.b3-scene .rf{fill:#2B2B2B;stroke:#3C3C3C;stroke-width:1;}
.b3-scene .win{fill:#9fb7c9;fill-opacity:.55;stroke:#D9D9D9;stroke-width:1;}
.b3-scene .door{fill:var(--orange-600);stroke:var(--orange-700);stroke-width:1;transition:fill .3s;}
.b3-scene.acc .door{fill:var(--ok);}
.b3-scene .g{opacity:0;pointer-events:none;transition:opacity .35s;}
.b3-scene .g.on{opacity:1;}
.b3-scene .o{fill:var(--orange-600);stroke:var(--orange-700);stroke-width:1;}
.b3-scene .cone{fill:var(--orange-600);fill-opacity:.22;stroke:var(--orange-600);stroke-width:1;stroke-dasharray:4 3;animation:b3scan 3s ease-in-out infinite;}
.b3-scene .cone.b{animation-delay:-1.5s;}
.b3-scene .rack{fill:#2E2E2E;stroke:#1A1A1A;stroke-width:1;}
.b3-scene .rackl{fill:#1A1A1A;stroke:#2E2E2E;stroke-width:1;}
.b3-scene .cable{fill:none;stroke:var(--orange-600);stroke-width:2;stroke-dasharray:6 5;animation:b3dash 1.2s linear infinite;}
.b3-scene .wifi{fill:none;stroke:var(--orange-600);stroke-width:3;stroke-linecap:round;animation:b3wifi 1.8s ease-in-out infinite;}
.b3-scene .wifi:nth-child(2){animation-delay:.25s;}.b3-scene .wifi:nth-child(3){animation-delay:.5s;}
.b3-scene .ring{fill:none;stroke:var(--orange-600);stroke-width:2;animation:b3ring 2s ease-out infinite;transform-box:fill-box;transform-origin:center;}
.b3-scene .ring:nth-child(2){animation-delay:1s;}
.b3-scene .pulse{fill:var(--orange-600);animation:b3blink 1.4s ease-in-out infinite;}
.b3-scene .led{fill:var(--ok);}
@keyframes b3scan{0%,100%{fill-opacity:.12}50%{fill-opacity:.32}}
@keyframes b3dash{to{stroke-dashoffset:-22}}
@keyframes b3wifi{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes b3ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes b3blink{0%,100%{opacity:.4}50%{opacity:1}}

/* ==========================================================================
   Baustein 3 — Leistungskarten: Neigung, Glanz, Umdrehen
   ========================================================================== */
.grid-4.b3-cards{perspective:1400px;}
.card.b3-tilt{display:flex;flex-direction:column;padding:0;overflow:visible;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .3s;border:none;background:none;box-shadow:none;}
.card.b3-tilt.hov{transition:transform .15s ease-out,box-shadow .3s;}
.card.b3-tilt::after{display:none;}
.card.b3-tilt:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:none;}
.b3-flip{flex:1;display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
.b3-tilt.flipped .b3-flip{transform:rotateY(180deg);}
.b3-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);padding:28px;background:var(--white);border:1px solid #EDEDED;box-shadow:inset 0 1px 0 #fff,0 2px 0 #E9E9E9,0 18px 34px -14px rgba(17,17,17,.2);position:relative;overflow:hidden;display:flex;flex-direction:column;}
.b3-face.back{transform:rotateY(180deg);background:#2B2B2B;border-color:#3C3C3C;color:#E6E6E6;}
.b3-face.back h3{color:#fff;}
.b3-face.back ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:9px;font-size:.88rem;}
.b3-face.back li{display:flex;gap:9px;align-items:flex-start;}
.b3-face.back li::before{content:"";flex:none;width:7px;height:7px;margin-top:.5em;background:var(--orange-600);transform:rotate(45deg);}
.b3-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.6),transparent 55%);opacity:0;transition:opacity .25s;}
.b3-tilt.hov .b3-glare{opacity:.55;}
.b3-flipbtn{font:600 .84rem var(--font-body);color:var(--orange-700);background:none;border:0;padding:6px 0;cursor:pointer;margin-top:auto;align-self:flex-start;}
.b3-face.back .b3-flipbtn{color:var(--orange-600);}
.b3-face.front .card-link{margin-top:auto;margin-bottom:2px;}
.b3-face.front .b3-flipbtn{margin-top:0;}
.b3-face p{flex:0 0 auto;}

/* ==========================================================================
   Baustein 4 — Menüboard zum Ausprobieren
   ========================================================================== */
.b3-mb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center;margin-top:44px;text-align:left;}
.b3-mb-stage{perspective:1400px;padding:10px 0 30px;min-width:0;}
.b3-board{--bx:-9deg;--by:3deg;transform:rotateY(var(--bx)) rotateX(var(--by));transition:transform .2s ease-out;transform-style:preserve-3d;max-width:100%;}
.b3-screen{border-radius:16px;background:#2B2B2B;padding:12px;box-shadow:0 0 0 2px #1a1a1a,0 34px 50px -14px rgba(17,17,17,.4),0 0 0 1px rgba(242,101,34,.35);}
.b3-screen-in{border-radius:8px;overflow:hidden;background:linear-gradient(145deg,#222,#0B0B0B);color:#fff;min-height:330px;display:flex;flex-direction:column;}
.b3-top{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(90deg,#F26522,#FF8A3D);color:#111;padding:14px 20px;font-family:var(--font-display);font-weight:700;letter-spacing:.12em;}
.b3-top small{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;font-weight:500;}
.b3-rows{display:grid;gap:8px;padding:14px;flex:1;}
.b3-row{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.07);animation:b3rowin .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i)*70ms);}
.b3-row .pic{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFC089,#F26522 60%,#B8470F);box-shadow:inset 0 -4px 6px rgba(0,0,0,.25);}
.b3-row .nm{font-family:var(--font-display);font-weight:700;font-size:1.05rem;}
.b3-row .pr{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:#111;background:var(--orange-600);border-radius:999px;padding:5px 16px;font-variant-numeric:tabular-nums;min-width:86px;text-align:center;transition:background .3s,transform .3s;}
.b3-row .pr.flash{background:#fff;transform:scale(1.12);}
@keyframes b3rowin{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.b3-ticker{overflow:hidden;white-space:nowrap;background:#000;border-top:1px solid #2a2a2a;color:var(--orange-600);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;padding:9px 0;display:none;}
.b3-ticker.on{display:block;}
.b3-ticker span{display:inline-block;padding-left:100%;animation:b3tick 16s linear infinite;}
@keyframes b3tick{to{transform:translateX(-100%)}}
.b3-stand{width:22%;height:26px;margin:0 auto;background:linear-gradient(180deg,#3a3a3a,#1a1a1a);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);}
.b3-ctl{display:grid;gap:18px;min-width:0;justify-items:start;}
.b3-chips{display:flex;flex-wrap:wrap;gap:10px;}
.b3-chip{font:600 .88rem var(--font-body);color:var(--black);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;box-shadow:0 3px 0 #D9D9D9;transition:transform .15s;}
.b3-chip:hover{transform:translateY(-2px);}
.b3-more{align-self:center;font:600 .88rem var(--font-body);color:var(--orange-700);padding:9px 4px;}
.b3-more:hover{text-decoration:underline;}
.b3-chip[aria-pressed="true"]{background:var(--orange-600);color:#fff;border-color:var(--orange-700);box-shadow:0 3px 0 var(--orange-700);}
.b3-sample{font-size:.8rem;color:var(--slate-300);}

.b3-head{max-width:640px;margin:0 auto 34px;text-align:left;}
.b3-head h2{margin:8px 0 10px;}

@media (max-width:980px){
  .b3-house,.b3-mb{grid-template-columns:minmax(0,1fr);}
  .b3-panel-row{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .b3-panel-row{grid-template-columns:minmax(0,1fr);}
  .b3-row{grid-template-columns:34px 1fr auto;gap:10px;padding:9px 10px;}
  .b3-row .pic{width:32px;height:32px;}.b3-row .nm{font-size:.92rem;}.b3-row .pr{min-width:70px;padding:4px 10px;font-size:.9rem;}
  .b3-top{padding:12px 14px;}
}
@media (prefers-reduced-motion: reduce){
  .b3-dev img,.b3-dev .dot::after,.b3-scene *,.b3-row,.b3-ticker span{animation:none !important;}
  .b3-flip,.b3-board,.card.b3-tilt{transition:none !important;}
}

/* ---- Banner: bleibt stehen, Inhalt schiebt sich darüber; Taschenlampe beim Darüberfahren ---- */
.masthead.b3-mast{position:relative;}
@media (min-width:700px){
  .masthead.b3-mast{position:sticky;top:var(--b3-hh,70px);z-index:1;overflow:hidden;}
  .masthead.b3-mast ~ main,.masthead.b3-mast ~ footer{position:relative;z-index:2;}
  .masthead.b3-mast ~ main{box-shadow:0 -14px 30px rgba(0,0,0,.28);}
  .masthead.b3-mast img{transform:scale(calc(1 + var(--b3-p,0) * .05));filter:brightness(calc(1 - var(--b3-p,0) * .45));transform-origin:50% 0;will-change:transform,filter;}
}
.b3-flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle 190px at var(--fx,50%) var(--fy,50%),rgba(255,255,255,0) 0,rgba(255,255,255,.0) 55%,rgba(8,8,8,.62) 100%),rgba(8,8,8,.0);}
.b3-flash::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle 190px at var(--fx,50%) var(--fy,50%),rgba(255,214,150,.22) 0,rgba(242,101,34,.10) 45%,rgba(242,101,34,0) 100%);mix-blend-mode:screen;}
.masthead.b3-lit .b3-flash{opacity:1;}
@media (hover:none){.b3-flash{display:none;}}
@media (prefers-reduced-motion: reduce){.masthead.b3-mast img{transform:none !important;filter:none !important;}}

.masthead.b3-mast.b3-gone{visibility:hidden;}
.masthead.b3-mast ~ main{background:var(--white,#fff);}

/* Banner reduziert: mittig, flacher, Ränder laufen weich aus */
.masthead.b3-mast img{width:min(100%,1400px);aspect-ratio:3.5/1;object-fit:cover;object-position:50% 60%;margin:0 auto;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,#000 90%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,#000 90%,transparent);mask-composite:intersect;}

/* Hero: breites Technik-Bild statt der Einzelgeräte */
.hero.b3-wide .hero-grid{grid-template-columns:.95fr 1.05fr;gap:36px;}
@media (max-width:900px){.hero.b3-wide .hero-grid{grid-template-columns:1fr;}}
.b3-heroimg{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.12);background:#f0eeea;}
.b3-heroimg img{display:block;width:100%;height:auto;}
/* Banner: neues Bild, ganz zeigen, nur seitlich weich auslaufen */
.masthead.b3-mast img{aspect-ratio:auto !important;object-fit:contain;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);}

/* Weiche Übergänge im Stil der neuen Bilder: hell, silbrig, sanftes Leuchten */
.masthead.b3-mast{background:linear-gradient(to bottom,#fff 0,var(--fog-100,#f6f6f6) 100%);}
.masthead.b3-mast img{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,#000 0,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,#000 0,#000 90%,transparent 100%);mask-composite:intersect;}
.masthead.b3-mast ~ main{box-shadow:none !important;}
.hero.b3-wide{background:radial-gradient(ellipse 60% 70% at 78% 45%,rgba(242,101,34,.09),rgba(242,101,34,0) 70%),var(--fog-100,#f6f6f6);}
.b3-heroimg{box-shadow:none !important;border-radius:0 !important;background:transparent !important;overflow:visible;}
.b3-heroimg img{
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 72%,transparent 100%);
  mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 72%,transparent 100%);}

/* Hero-Bild größer: ragt nach rechts über die Spalte hinaus */
@media (min-width:901px){
  .hero.b3-wide .hero-grid{grid-template-columns:.78fr 1.22fr;gap:24px;}
  .b3-heroimg{margin-right:-90px;margin-left:-30px;}
}
/* Menüboard-Beispielfotos */
.b3-mb-photo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
.b3-mb-photo .b3-mb-stage{display:flex;justify-content:center;}
.b3-board.b3-photo{width:min(100%,430px);border-radius:14px;overflow:hidden;background:#111;box-shadow:0 30px 60px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08);}
.b3-board.b3-photo img{display:block;width:100%;height:auto;}

/* Hotspots auf dem Technik-Bild */
.b3-heroimg{position:relative;}
.b3-hs{position:absolute;left:0;right:0;top:0;aspect-ratio:1408/412;}
.b3-hot{position:absolute;background:transparent;border:2px solid transparent;border-radius:18px;cursor:pointer;padding:0;transition:border-color .2s,box-shadow .2s,background .2s;}
.b3-hot:hover,.b3-hot.on{border-color:rgba(242,101,34,.85);background:rgba(242,101,34,.07);box-shadow:0 0 0 4px rgba(242,101,34,.12),0 0 26px rgba(242,101,34,.35);}
.b3-hot[aria-pressed="true"]{border-style:solid;border-color:#F26522;}
.b3-hot:focus-visible{outline:2px solid #F26522;outline-offset:3px;}
.b3-hinfo{margin:10px 24px 0 34px;min-height:112px;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 8px 24px rgba(0,0,0,.08);}
.b3-hinfo.hint{background:transparent;box-shadow:none;color:#6b6b6b;font-size:.9rem;min-height:112px;display:flex;align-items:center;}
.b3-hinfo .tag{display:block;font:700 .68rem/1 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-600,#F26522);margin-bottom:6px;}
.b3-hinfo strong{display:block;color:#111;font-size:1.02rem;margin-bottom:4px;}
.b3-hinfo p{margin:0 0 8px;font-size:.88rem;color:#555;}
.b3-hinfo a{font-weight:700;font-size:.86rem;color:var(--orange-600,#F26522);text-decoration:none;}
.b3-hinfo.pinned{box-shadow:0 8px 24px rgba(0,0,0,.08),0 0 0 2px rgba(242,101,34,.5);}