/* ============================================================
   FABLE — Übernahme in die Live-Seite
   (1) changierender Hintergrund Blau + wenig Orange
   (4) neu gestaltete Buttons (Gradient Blau→Orange)
   + Hero-Visual (Porträt + neuronales Netz + 3 Glas-Blöcke) NUR Startseite
   Wird NACH dem Seiten-eigenen <style> geladen → gewinnt per Reihenfolge.
   ============================================================ */
:root{
  --cyan:#38BDF8; --amber:#FB923C; --amber-2:#F59E0B; --amber-3:#FDBA74;
  --line-soft:rgba(255,255,255,.16);
}

/* (1) Energiewolke + Bokeh statt statischer Blobs ---------------- */
.atmosphere{display:none!important}
.grid-overlay{display:none!important}
.cloud{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cloud b{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:screen}
.cloud .x1{width:55vw;height:55vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#1F4778,transparent 65%);opacity:.6;animation:flbdr1 28s ease-in-out infinite}
.cloud .x2{width:46vw;height:46vw;right:-12vw;top:8vh;background:radial-gradient(circle,var(--amber-2),transparent 62%);opacity:.30;animation:flbdr2 32s ease-in-out infinite}
.cloud .x3{width:44vw;height:44vw;left:30vw;bottom:-16vw;background:radial-gradient(circle,var(--cyan),transparent 62%);opacity:.26;animation:flbdr3 36s ease-in-out infinite}
@keyframes flbdr1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vh) scale(1.12)}}
@keyframes flbdr2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,7vh) scale(.92)}}
@keyframes flbdr3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-6vh) scale(1.1)}}
#bokeh{position:fixed;inset:0;z-index:1;pointer-events:none}
.grid-ov{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:66px 66px;mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 75%)}

/* (4) Buttons: Gradient Blau → Orange --------------------------- */
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--amber-2))!important;box-shadow:0 14px 34px -12px rgba(251,146,60,.55)!important}
.btn-primary:hover{filter:brightness(1.05)}
.btn-nav{background:linear-gradient(90deg,var(--accent),var(--amber-2))!important;box-shadow:0 10px 26px -10px rgba(251,146,60,.5)!important}
.btn-nav:hover{filter:brightness(1.06)}
/* Buttons nie umbrechen (Pfeil bleibt in der Zeile) */
.btn{white-space:nowrap}
.btn-nav{white-space:nowrap!important}
/* Nav: einheitlich flex + gap (nicht gequetscht), kompakt für 9 Punkte + CTA */
@media(min-width:921px){
  nav.top .nav-links{display:flex!important;align-items:center;gap:18px!important;flex-wrap:nowrap!important}
  nav.top .nav-links a{margin-left:0!important;font-size:13.5px!important}
  nav.top .nav-links a.btn-nav{padding:10px 16px!important;font-size:13.5px!important}
}
/* Menüpunkte abwechselnd Blau/Orange, damit sie sich klar abheben */
nav.top .nav-links a:not(.btn-nav){font-weight:600}
nav.top .nav-links a:not(.btn-nav):nth-child(odd){color:var(--cyan)!important}
nav.top .nav-links a:not(.btn-nav):nth-child(even){color:var(--amber)!important}
nav.top .nav-links a:not(.btn-nav):hover{color:#fff!important}

/* (2)(3) Hero-Visual — nur Startseite (greift nur wo Markup existiert) */
.visual{position:relative;height:min(580px,72vh);display:flex;align-items:center;justify-content:center}
.visual #neuralNet{position:absolute;inset:-10%;z-index:1;pointer-events:none}
.holo-aura{position:absolute;left:50%;top:50%;width:86%;height:86%;transform:translate(-50%,-50%);z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(56,189,248,.30),rgba(59,130,246,.12) 46%,transparent 70%);filter:blur(22px)}
.holo{position:relative;height:80%;z-index:2;display:flex;align-items:center;transform-origin:center;animation:flzoom 16s ease-in-out infinite alternate}
@keyframes flzoom{from{transform:scale(1)}to{transform:scale(1.1)}}
.holo img{height:100%;width:auto;filter:drop-shadow(0 14px 40px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(56,189,248,.4))}
.holo::before{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:screen;opacity:.7;
  background:repeating-linear-gradient(0deg,rgba(56,189,248,.16) 0,rgba(56,189,248,.16) 1px,transparent 2px,transparent 5px);
  -webkit-mask:url(/assets/fotos/portrait-industrie-frei.png) bottom center/contain no-repeat;mask:url(/assets/fotos/portrait-industrie-frei.png) bottom center/contain no-repeat;
  animation:flscan 4s linear infinite}
.holo::after{content:"";position:absolute;inset:0;z-index:3;background-size:300% 100%;
  background:linear-gradient(110deg,transparent 30%,rgba(147,197,253,.42) 50%,transparent 70%);
  -webkit-mask:url(/assets/fotos/portrait-industrie-frei.png) bottom center/contain no-repeat;mask:url(/assets/fotos/portrait-industrie-frei.png) bottom center/contain no-repeat;
  animation:flsheen 5s ease-in-out infinite}
@keyframes flscan{from{background-position:0 0}to{background-position:0 60px}}
@keyframes flsheen{0%,100%{background-position:200% 0}50%{background-position:-100% 0}}
.glass{position:absolute;z-index:5;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));backdrop-filter:blur(8px);box-shadow:0 18px 44px -18px rgba(0,0,0,.6);padding:12px 15px;will-change:transform}
.glass .gh{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,250,252,.62)}
.glass .gv{font-size:19px;font-weight:800;margin-top:3px}
.glass .gv.a{color:var(--amber-3)} .glass .gv.c{color:var(--cyan)}
.glass .psub{font-size:11px;color:rgba(248,250,252,.62);margin-top:2px}
/* 3 Kacheln links untereinander gestapelt (Blickrichtung), schwebend */
.g1{left:6px;top:3%;animation:flfloat 6s ease-in-out infinite}
.proc{left:6px;top:39%;animation:flfloat 6.6s ease-in-out infinite}
.live{left:6px;top:73%;animation:flfloat 7.4s ease-in-out infinite;min-width:158px}
@keyframes flfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.glass .bars{display:flex;gap:4px;align-items:flex-end;height:26px;margin-top:9px}
.glass .bars i{width:6px;border-radius:2px;background:linear-gradient(180deg,var(--cyan),rgba(56,189,248,.2));animation:fleq 1.5s ease-in-out infinite}
.glass .bars i:nth-child(2){animation-delay:.18s;background:linear-gradient(180deg,var(--amber),rgba(251,146,60,.2))}
.glass .bars i:nth-child(3){animation-delay:.36s}
.glass .bars i:nth-child(4){animation-delay:.54s;background:linear-gradient(180deg,var(--amber),rgba(251,146,60,.2))}
.glass .bars i:nth-child(5){animation-delay:.72s}
@keyframes fleq{0%,100%{height:28%}50%{height:100%}}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 8px #34D399;margin-right:5px;animation:flblink 1.4s ease-in-out infinite}
@keyframes flblink{0%,100%{opacity:1}50%{opacity:.25}}

@media(max-width:1000px){
  .visual{height:auto;aspect-ratio:3/4;min-height:360px;margin-top:8px}
}
@media(max-width:600px){
  .g1,.proc,.live{display:none}
  .visual{aspect-ratio:3/4;min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  .cloud b,.holo,.holo::before,.holo::after,.glass,.glass .bars i,.live-dot{animation:none!important}
}

/* === Mobil: eigenes Layout — kleines Foto + die 3 animierten Kacheln === */
html,body{overflow-x:hidden;max-width:100%}
@media(max-width:1000px){ .hero-grid>*{min-width:0} }
/* Tablet (769–1000px): Visual eingepasst, kein Überlauf */
@media(min-width:769px) and (max-width:1000px){
  .visual{overflow:hidden;width:100%;aspect-ratio:1/1;min-height:300px;max-height:60vh;margin-top:6px}
  .visual #neuralNet{inset:0}
  .holo{height:86%;max-width:100%}
  .holo img{max-height:100%;max-width:90%;height:auto;width:auto}
}
/* Handy (≤768px): Foto klein, 3 Kacheln als gestapelte animierte Karten */
@keyframes flfloatm{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:768px){
  .visual{display:flex;flex-direction:column;align-items:center;gap:12px;height:auto;min-height:0;max-height:none;aspect-ratio:auto;overflow:visible;width:100%;margin-top:4px}
  .visual #neuralNet,.holo-aura,.holo::before,.holo::after{display:none}
  .holo{position:relative;height:auto;max-width:172px;animation:none}
  .holo img{height:auto;width:auto;max-width:100%;max-height:210px}
  .g1,.proc,.live{position:static!important;display:block!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%;min-width:0;margin:0}
  .g1{animation:flfloatm 6s ease-in-out infinite}
  .proc{animation:flfloatm 6.6s ease-in-out infinite}
  .live{animation:flfloatm 7.4s ease-in-out infinite}
}