/* 24.09.2026: kleine Ergänzungen zum bestehenden Aufbau */
.preis-fuss{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.preis-fuss b{display:block;font-family:var(--ff-body);font-weight:600;color:var(--ink);margin-bottom:6px}
.preis-fuss span{display:block;color:var(--ink-dim);font-size:.88rem;line-height:1.55}
.preis-hinweis{margin:26px 0 0;color:var(--ink-faint);font-size:.82rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.preis-hinweis a{color:var(--cyan);text-underline-offset:3px}
.form-hinweis{margin:12px 0 0;color:var(--ink-faint);font-size:.78rem;line-height:1.5}
.form-hinweis a{color:var(--ink-dim)}
.honig{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
#contactSuccess.fehler{border-color:#ff3b4e!important;color:#ff7b88!important}
.contact-info a{color:inherit;text-underline-offset:3px}
.contact-info a:hover{color:var(--cyan)}
#agentDemoVideo{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.preis-fuss{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.preis-fuss{grid-template-columns:1fr}}

/* Hero (24.09.2026): fester Hero mit dem VANILLA-Raum, Lauftext bleibt oben */
.hero-fest{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;z-index:2;background:#05070a}
.hf-bild{position:absolute;inset:0;z-index:-2;transform-origin:62% 42%;will-change:transform}
.hf-bild img{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.hero-fest::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,7,10,.94) 0%,rgba(5,7,10,.78) 34%,rgba(5,7,10,.15) 70%,rgba(5,7,10,.05) 100%),
             linear-gradient(0deg,#05070a 0%,rgba(5,7,10,0) 38%)}
.hero-fest .hf-inhalt{width:100%;padding-top:170px;padding-bottom:clamp(56px,10vh,112px)}
.hero-fest h1{font-family:var(--ff-display);font-size:clamp(2.6rem,1.4rem + 4.6vw,5.4rem);line-height:1.02;letter-spacing:-.02em;max-width:10ch;margin:0}
.hero-fest h1 em{font-style:normal;color:var(--cyan)}
.hf-lead{margin:24px 0 0;max-width:31em;color:#c3d3d6;font-size:clamp(1.02rem,1rem + .3vw,1.2rem);line-height:1.6}
.hf-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.hf-cta .hf-primaer{background:var(--cyan);color:#00171a}
.hf-cta .hf-primaer:hover{background:#8ff8ff;border-color:#8ff8ff}
.hf-fakten{display:flex;flex-wrap:wrap;gap:8px 24px;margin:44px 0 0;padding:0;list-style:none;font:400 .74rem/1.4 var(--ff-mono);letter-spacing:.06em;color:var(--ink-dim)}
.hf-fakten li{display:flex;align-items:center;gap:8px}
.hf-fakten li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
@media (max-width:700px){
  /* 24.09.2026 Handy: Bild oben als eigener Block (Würfel ganz sichtbar, kaum gezoomt),
     Text darunter auf Schwarz – statt stark gezoomtem, abgedunkeltem Ausschnitt. */
  .hero-fest{--hb:min(64svh,540px);align-items:flex-start}
  .hf-bild{inset:0 0 auto 0;height:var(--hb);transform-origin:60% 45%}
  .hf-bild img{object-position:60% 55%}
  .hero-fest::before{background:linear-gradient(180deg,rgba(5,7,10,.55) 0,rgba(5,7,10,0) 130px,rgba(5,7,10,0) calc(var(--hb) - 140px),#05070a var(--hb))}
  .hero-fest .hf-inhalt{padding-top:calc(var(--hb) - 28px)}
  .hf-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.hf-bild{transform:none!important}}

/* Referenzen (24.09.2026) */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.ref-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:30px 22px;border:1px solid var(--line);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(75,243,255,.10),transparent 60%),rgba(8,13,16,.72);
  color:var(--ink);text-decoration:none;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.ref-card:hover{border-color:rgba(75,243,255,.55);box-shadow:0 0 30px rgba(75,243,255,.18)}
.ref-logo{height:72px;display:flex;align-items:center;justify-content:center}
.ref-logo img{max-height:72px;max-width:170px;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.85;transition:filter .3s,opacity .3s}
.ref-card:hover .ref-logo img{filter:none;opacity:1}
.ref-initialen{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(75,243,255,.35);font-family:var(--ff-display);font-weight:800;font-size:1.25rem;color:var(--cyan)}
.ref-name{font-family:var(--ff-display);font-weight:600;font-size:.95rem}
.ref-branche{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.08em;color:var(--cyan)}
#footerSocials{margin-top:18px}

/* 24.09.2026: "Für wen"-Kacheln gleich hoch, Paketname immer unten auf einer Linie */
#produkte .product-card{display:flex;flex-direction:column;height:100%}
#produkte .product-body{display:flex;flex-direction:column;flex:1 1 auto}
#produkte .product-body p{flex:1 1 auto}
#produkte .product-foot{margin-top:auto;padding-top:4px}

/* 24.09.2026: Wortmarke überall gleich – VANILLA weiß, 404x in Cyan */
.brand-name .marke-x,.marke-x{color:var(--cyan)}
/* Lauftext: ruhige Trennpunkte statt Sterne */
.hero-ticker-text .lt{color:var(--ink-dim);letter-spacing:.18em}
.hero-ticker-text .lt b{font-weight:inherit;color:var(--cyan)}
.hero-ticker-text .sep{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--cyan);opacity:.55;
  margin:0 2.2em;vertical-align:middle;box-shadow:0 0 8px rgba(75,243,255,.6)}

/* 24.09.2026: Hintergrund tiefschwarz, nur feine Partikel (kein Netz) */
html,body{background:#000!important}
main{background:transparent!important}
#webglPreview canvas{position:absolute;inset:0}
footer{background:rgba(0,0,0,.6)!important}