/* ===== Akzent: Weiß und Silber, Blau nur beim kleinen "Neu" ===== */
:root{ --ac:#3d8bff; --ac2:#7cc4ff; --acg:61,139,255; }

/* Kleine blaue Punkte als Akzent */
.hb-new{ background:var(--ac) !important; color:#fff !important; }
.vc-fab .dot{ background:var(--ac); }
.vc-fab .dot::after{ border-color:var(--ac); }

/* Ruhiger: Pillen und Markierungen leuchten, pulsieren aber nicht */
main .eyebrow, .page .eyebrow:not(.card .eyebrow){ animation:none; box-shadow:0 0 0 1px rgba(255,255,255,0.5), 0 0 18px rgba(255,255,255,0.2); }
.in mark, .page mark{ animation:none; box-shadow:0 0 18px rgba(255,255,255,0.35); }

/* Problem-Bereich: vier gleich große Kästchen */
.problem-grid{ grid-template-columns:1fr; }
@media (min-width:700px){ .problem-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:1fr; } }
.problem-grid .card, .problem-grid .big{ grid-row:auto; }
.problem-grid .big h3, .problem-grid h3{ font-size:clamp(1.25rem,1.1rem + 0.5vw,1.5rem); }

/* ===== "Mit KI sprechen": lebendige KI-Kugel statt Mikrofon ===== */
.vc-fab .dot{
  width:42px; height:42px; overflow:visible;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,0.85) 0%,rgba(255,255,255,0) 42%),
             conic-gradient(from var(--ang),#3d8bff,#7cc4ff,#ffffff,#1e40af,#3d8bff);
  animation:spin 3.2s linear infinite, orbBreath 2.4s ease-in-out infinite;
  box-shadow:0 0 14px rgba(var(--acg),0.75), inset 0 0 10px rgba(255,255,255,0.35);
}
.vc-fab .dot svg{ display:none; }
.vc-fab .dot::before{
  content:""; position:absolute; left:50%; top:50%; width:20px; height:16px; transform:translate(-50%,-50%);
  background:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-repeat:no-repeat; background-position:0 50%,6px 50%,12px 50%,18px 50%;
  background-size:2.5px 40%,2.5px 90%,2.5px 60%,2.5px 30%;
  filter:drop-shadow(0 0 3px rgba(9,9,11,0.45)); animation:eq 1.1s ease-in-out infinite;
}
@keyframes eq{
  0%,100%{ background-size:2.5px 40%,2.5px 90%,2.5px 60%,2.5px 30%; }
  25%{ background-size:2.5px 85%,2.5px 45%,2.5px 95%,2.5px 55%; }
  50%{ background-size:2.5px 55%,2.5px 100%,2.5px 35%,2.5px 80%; }
  75%{ background-size:2.5px 95%,2.5px 60%,2.5px 70%,2.5px 40%; }
}
@keyframes orbBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.vc-fab .dot::after{ inset:-5px; border:2px solid rgba(var(--acg),0.7); }
.vc-fab:hover .dot{ animation-duration:1.6s, 1.2s; }
@media (prefers-reduced-motion:reduce){ .vc-fab .dot, .vc-fab .dot::before{ animation:none; } }

/* ===== KI-Kugel, elegant: schwarzes Glas, silberner Lichtrand, KI-Funkelstern ===== */
.vc-fab .dot{
  width:42px; height:42px; border:1.5px solid transparent;
  background:radial-gradient(circle at 32% 28%,#52525b 0%,#18181b 55%,#09090b 100%) padding-box,
             conic-gradient(from var(--ang),rgba(255,255,255,0.15),#ffffff 25%,rgba(255,255,255,0.15) 50%,#d4d4d8 75%,rgba(255,255,255,0.15)) border-box;
  animation:spin 4s linear infinite;
  box-shadow:0 0 16px rgba(255,255,255,0.35), inset 0 0 8px rgba(255,255,255,0.15);
}
.vc-fab .dot::before{
  width:22px; height:22px; background:linear-gradient(135deg,#ffffff 0%,#f4f4f5 55%,#a1a1aa 100%);
  background-size:auto; background-position:0 0;
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
  filter:none; animation:aiSpark 2.6s ease-in-out infinite;
}
@keyframes aiSpark{
  0%,100%{ transform:translate(-50%,-50%) scale(0.85) rotate(0deg); opacity:0.9; }
  50%{ transform:translate(-50%,-50%) scale(1.12) rotate(45deg); opacity:1; }
}
.vc-fab .dot::after{ inset:-6px; border:1.5px solid rgba(255,255,255,0.55); animation:ring 2.4s ease-out infinite; }
.vc-fab:hover .dot{ animation-duration:2s; }
.vc-fab:hover .dot::before{ animation-duration:1.3s; }
@media (prefers-reduced-motion:reduce){ .vc-fab .dot, .vc-fab .dot::before, .vc-fab .dot::after{ animation:none; } }

/* ===== Handy: Menüzeile wischbar, Logo und Termin bleiben stehen ===== */
@media (max-width:900px){
  .navlinks{
    flex:1 1 auto; min-width:0; margin-left:0.3rem; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 22px),transparent 100%);
    scroll-snap-type:x proximity;
  }
  .navlinks::-webkit-scrollbar{ display:none; }
  .navlinks label{ flex:none; scroll-snap-align:start; }
  .nav-cta{ flex:none; }
}
@media (max-width:520px){
  .brand{ font-size:0; gap:0; }
  .brand svg{ width:30px; height:30px; }
  .nav{ gap:0.4rem; padding:0 6px 0 10px; }
  .nav-cta{ padding:0.5rem 0.85rem; }
}

/* Kein seitliches Verrutschen am Handy */
html, body{ overflow-x:hidden; overflow-x:clip; max-width:100%; }