/* =====================================================================
   Hero-Redesign — Bild-Signature „headerpetersenneu" + Kino-Drama.
   Bild liegt im rechten .hero-visual-Slot (mobil oben), über dem
   geschützten #fx-net. Effekte: Glow-Atmen, Light-Sweep, 3D-Tilt
   (fx.js data-tilt), Scroll-Parallax (fx.js data-parallax), Reveals.
   Nur transform/opacity/filter. No-JS- & Reduced-Motion-sicher.
   ===================================================================== */

/* ---- Aussage-Block unter der Headline (3 Punch-Zeilen) ---- */
.hero-claim {
  display: grid;
  gap: 7px;
  margin: 4px 0 34px;
}
.hero-claim p { margin: 0; line-height: 1.34; max-width: 30ch; }
.hc-1 { color: var(--muted); font-size: 1.08rem; }
.hc-2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ice);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  letter-spacing: -.015em;
}
.hc-2 .accent2 {
  position: relative;
  color: var(--blue-2);
  text-shadow: 0 0 24px rgba(91, 192, 255, .5);
  white-space: nowrap;
}
.hc-2 .accent2::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-2), rgba(91, 192, 255, 0));
  transform: scaleX(0);
  transform-origin: left;
}
.hero-claim.in .hc-2 .accent2::after { animation: hcUnderline .85s var(--ease-out) .55s forwards; }
@keyframes hcUnderline { to { transform: scaleX(1); } }
.hc-3 { color: var(--muted); font-size: 1rem; max-width: 38ch; }

/* ---- Hero-Layout-Balance (Homepage): kompaktere, elegantere Copy ----
   Fix (Kevin 2026-07-13): Das min-content der unbrechbaren H1-Zeile
   "ZUSAMMENARBEITEN." (~1059px bei 5.6rem Montserrat 800) sprengte die
   1.04fr-Spalte und quetschte die komplette rechte Visual-Spalte (Bild +
   Emblem + Partikel-Claims) auf ~127px. container-type nimmt die Copy-
   Spalte aus dem min-content-Sizing (Tracks = echte fr-Anteile) und die
   H1 passt sich per cqi exakt der Spaltenbreite an — so groß wie die
   Spalte physisch hergibt, ohne Silbentrennung. Mobile (≤960px, eine
   Spalte) bleibt unangetastet. */
@media (min-width: 961px) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(28px, 3.4vw, 58px); }
  .hero-copy { container-type: inline-size; min-width: 0; }
  /* 8.2cqi = "ZUSAMMENARBEITEN." (breiteste Zeile, Faktor ~11.8 × fs) füllt
     ~97% der Spalte; Deckel 5.6rem = bisheriger clamp-Max. */
  .hero-h1 { font-size: min(5.6rem, 8.2cqi); }
}
.hero-eyebrow { margin-bottom: 16px; }
/* Kino-Blau: Typo-Ownership der H1 liegt jetzt in sections.css (Fraunces-Serif) */
.hero-h1 { margin-bottom: 18px; }
.hero-copy .lead { margin-bottom: 30px; }

/* ---- Bild-Signature ---- */
.hero-media {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.hero-media-glow {
  position: absolute;
  inset: -16% -3%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 58% at 54% 44%,
              rgba(30, 155, 240, .5), rgba(30, 155, 240, .12) 46%, transparent 72%);
  filter: blur(16px);
  opacity: .8;
}
.hero-media-reveal { position: relative; z-index: 1; }
.hero-media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-d-strong);
  box-shadow: var(--shadow-card), 0 0 64px rgba(30, 155, 240, .2);
  transition: transform .35s var(--ease-out), box-shadow .4s var(--ease);
  will-change: transform;
  --mx: 50%; --my: 40%;
}
.hero-media-frame::before {            /* Gradient-Rahmen */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(91, 192, 255, .65), transparent 46%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.hero-media-frame::after {             /* Cursor-Glare (—mx/—my via fx.js data-tilt) */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(160, 215, 255, .18), transparent 42%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.hero-media-frame:hover::after { opacity: 1; }
.hero-media-frame img { display: block; width: 100%; height: auto; }

/* Light-Sweep über das Bild */
.hero-media-sheen {
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.hero-media-sheen::after {
  content: "";
  position: absolute;
  top: -60%; left: 0;
  width: 42%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(180, 220, 255, .14) 46%, rgba(120, 195, 255, .22) 52%, transparent 64%);
  transform: rotate(8deg) translateX(-160%);
  opacity: 0;
}

/* ---- Motion (gated) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-media-glow { animation: heroGlow 6.5s var(--ease) infinite; }
  .hero-media-sheen::after { animation: heroSheen 7.5s var(--ease) 1.4s infinite; }
}
@keyframes heroGlow {
  0%, 100% { opacity: .7;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@keyframes heroSheen {
  0%   { transform: rotate(8deg) translateX(-160%); opacity: 0; }
  8%   { opacity: 1; }
  26%  { transform: rotate(8deg) translateX(520%); opacity: 0; }
  100% { transform: rotate(8deg) translateX(520%); opacity: 0; }
}

/* ---- Mobile: Bild zuerst (oben), dann Headline/Text ---- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-media { max-width: 480px; margin: 0 auto 8px; }
  .hero-claim { margin: 2px 0 26px; }
  .hero-claim p { max-width: none; }
}

/* ---- Reduced-Motion / No-anim Sicherheitsnetz ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-media-glow, .hero-media-sheen::after { animation: none; }
  .hero-claim.in .hc-2 .accent2::after { animation: none; transform: scaleX(1); }
}
.no-anim .hero-media-glow, .no-anim .hero-media-sheen::after { animation: none; }
.no-anim .hc-2 .accent2::after { transform: scaleX(1); }

/* ---- Kino-Blau: rundes Emblem-Siegel an der Bild-Ecke (Prototyp-Badge, Foto bleibt) ---- */
.hero-emblem-seal {
  position: absolute;
  z-index: 3;
  left: -18px;
  bottom: -24px;
  width: clamp(92px, 10.5vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 18px 40px rgba(10, 60, 140, .55));
}
.hero-emblem-seal img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(30, 155, 240, .28);
}
.hero-emblem-seal::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 155, 240, .30), transparent 62%);
  filter: blur(14px);
  z-index: -1;
}
.hero-emblem-seal::after {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  border: 1px dashed rgba(30, 155, 240, .34);
  animation: sealSpin 44s linear infinite;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
@media (max-width: 960px) {
  .hero-emblem-seal { left: -8px; bottom: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-emblem-seal::after { animation: none; }
}
.no-anim .hero-emblem-seal::after { animation: none; }

/* =====================================================================
   Hero-Hub (2026-07-18, v2): animiertes Netzwerk mit Geraete-Mockups.
   Karten + Laptop/Phone/Tablet echt in HTML, Datenlinien als SVG
   (Dash-Flow per CSS, Lichtpunkte per SMIL). Nur transform/opacity/filter.
   Reduced-Motion & .no-anim: alles statisch, Punkte ausgeblendet.
   ===================================================================== */
.hero-hub {
  aspect-ratio: 3 / 2;
  container-type: inline-size;
  background:
    radial-gradient(120% 90% at 52% 42%, rgba(20,36,70,.55), transparent 62%),
    linear-gradient(160deg, #0a1226 0%, #060c1a 58%, #04070f 100%);
}
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-line { fill: none; stroke: rgba(91,163,255,.16); stroke-width: 2.5; }
.hub-line-flow {
  fill: none; stroke: url(#hubGrad); stroke-width: 2.5;
  stroke-dasharray: 16 30; opacity: .75;
  filter: drop-shadow(0 0 6px rgba(91,192,255,.65));
  animation: hubFlow 2.6s linear infinite;
}
.hf1 { animation-duration: 2.4s; } .hf2 { animation-duration: 3s; }
.hf3 { animation-duration: 2.1s; } .hf4 { animation-duration: 3.4s; }
.hf5 { animation-duration: 2.8s; animation-delay: .6s; }
.hf6 { animation-duration: 2.3s; animation-delay: .3s; }
.hf7 { animation-duration: 3.1s; animation-delay: 1s; }
@keyframes hubFlow { to { stroke-dashoffset: -46; } }
.hub-dots circle { filter: drop-shadow(0 0 7px #5bc0ff); }

/* ---- Zentrum ---- */
.hub-center {
  position: absolute; z-index: 3;
  left: 46%; top: 39%;
  width: 20%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4cqi;
  background: radial-gradient(80% 80% at 50% 38%, #0e1c3a 0%, #081226 70%);
  border: 1px solid rgba(91,163,255,.55);
  box-shadow: 0 0 34px rgba(30,155,240,.4), inset 0 0 26px rgba(30,155,240,.18);
}
.hub-center img { width: 40%; height: auto; }
.hub-center b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(8px, 2.05cqi, 14px);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ice); line-height: 1;
}
.hub-center span {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(6px, 1.35cqi, 9.5px);
  letter-spacing: .34em; text-transform: uppercase; color: var(--blue-2); line-height: 1;
}
.hub-center-ring { position: absolute; inset: -7%; border-radius: 50%; border: 1px solid rgba(91,192,255,.5); animation: hubPulse 3.2s ease-out infinite; }
@keyframes hubPulse { 0% { transform: scale(.92); opacity: .85; } 100% { transform: scale(1.38); opacity: 0; } }

/* ---- Karten ---- */
.hub-card {
  position: absolute; z-index: 2;
  background: linear-gradient(165deg, rgba(14,24,48,.94), rgba(9,15,30,.9));
  border: 1px solid rgba(120,165,235,.24);
  border-radius: clamp(8px, 1.6cqi, 14px);
  padding: 2.2cqi 2.5cqi;
  box-shadow: 0 10px 30px rgba(2,6,16,.45);
  animation: hubFloat 8s ease-in-out infinite;
}
.hub-a { left: 7%;  top: 4.5%; width: 25%; }
.hub-b { right: 5%; top: 3.5%; width: 30%; animation-delay: 1.3s; }
.hub-c { right: 3%; top: 28.5%;  width: 31%; animation-delay: 2.6s; }
.hub-d { right: 3.5%; top: 56.5%; width: 32%; animation-delay: .7s; }
@keyframes hubFloat { 50% { transform: translateY(-.9cqi); } }
.hub-card h3 {
  display: flex; align-items: center; gap: 1cqi; margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(8.5px, 2cqi, 13.5px);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ice); line-height: 1.25;
}
.hub-card h3 svg { flex: 0 0 auto; width: clamp(12px, 2.8cqi, 19px); height: auto; color: var(--blue-2); }
.hub-skel {
  display: block; height: max(5px, 1.05cqi); border-radius: 99px;
  margin-top: 1.7cqi;
  background: linear-gradient(90deg, rgba(91,163,255,.42), rgba(91,163,255,.1));
}
.hub-skel.s1 { width: 82%; } .hub-skel.s2 { width: 56%; } .hub-skel.s3 { width: 70%; }

/* ---- Karteninhalte: Browser, Flow, Kacheln, Dashboard ---- */
.hub-browser { display: block; margin-top: 1.7cqi; border: 1px solid rgba(120,165,235,.28); border-radius: 1cqi; overflow: hidden; }
.hb-bar { display: flex; align-items: center; gap: .55cqi; height: 2cqi; min-height: 9px; padding-left: .9cqi; background: rgba(91,163,255,.14); }
.hb-bar i { width: .8cqi; min-width: 3px; aspect-ratio: 1; border-radius: 50%; background: rgba(145,185,255,.55); }
.hb-body {
  display: block; aspect-ratio: 16 / 6.5;
  background:
    linear-gradient(112deg, transparent 46%, rgba(66,96,150,.9) 46.5%, rgba(29,47,82,.9) 66%, transparent 66.5%),
    linear-gradient(248deg, transparent 52%, rgba(52,76,120,.85) 52.5%, rgba(20,32,56,.9) 78%),
    linear-gradient(180deg, #1b2a4a, #0a1428);
}
.hub-flow { display: flex; align-items: center; gap: .9cqi; margin-top: 2cqi; }
.hub-flow i {
  flex: 0 0 auto; width: 4.6cqi; min-width: 20px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(120,165,235,.35); border-radius: .9cqi;
  background: rgba(10,18,36,.85); color: var(--blue-2);
}
.hub-flow i svg { width: 62%; height: auto; }
.hub-flow b { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(91,163,255,.5), rgba(91,163,255,.15)); }
.hub-flow i:last-child { color: #7ee2a8; border-color: rgba(126,226,168,.4); }
.hub-tiles { display: flex; gap: 1cqi; margin-top: 2cqi; }
.hub-tiles i {
  flex: 1; aspect-ratio: 1.25;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(120,165,235,.3); border-radius: .9cqi;
  background: rgba(10,18,36,.85); color: var(--blue-2);
}
.hub-tiles i svg { width: 38%; height: auto; }
.hub-dash { display: flex; align-items: center; gap: 1.6cqi; margin-top: 2cqi; }
.hub-donut {
  flex: 0 0 auto; width: 6cqi; min-width: 26px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(#2E7BFF 0 130deg, #5bc0ff 130deg 205deg, rgba(91,163,255,.18) 205deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
  mask: radial-gradient(circle, transparent 54%, #000 56%);
}
.hub-rows { flex: 1; min-width: 0; }
.hub-rows .hub-skel { margin-top: 1.2cqi; }
.hub-rows .hub-skel:first-child { margin-top: 0; }

/* ---- Laptop ---- */
.hub-laptop { position: absolute; z-index: 2; left: 1.5%; top: 25%; width: 30%; animation: hubFloat 9s ease-in-out infinite 3.2s; }
.hub-laptop-screen {
  border: 1px solid rgba(120,165,235,.35);
  border-radius: 1.4cqi 1.4cqi 0 0;
  padding: 2.4cqi 2.4cqi 2.6cqi;
  background:
    radial-gradient(90% 70% at 20% 90%, rgba(30,90,190,.28), transparent 60%),
    linear-gradient(160deg, #101d3a, #081124);
  box-shadow: 0 12px 34px rgba(2,6,16,.5);
}
.hl-t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(9px, 2.2cqi, 15px); line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--ice); display: grid; }
.hl-t em { font-style: normal; color: var(--blue-2); }
.hl-s { margin: 1.2cqi 0 0; font-size: clamp(6.5px, 1.45cqi, 10px); line-height: 1.45; color: var(--muted); max-width: 24ch; }
.hub-laptop .hub-btn { margin-top: 1.8cqi; }
.hub-laptop-base {
  display: block; height: 1.7cqi; min-height: 7px;
  width: 116%; margin-left: -8%;
  border-radius: 0 0 1.6cqi 1.6cqi;
  background: linear-gradient(180deg, #2c3a58, #131d33 70%);
  box-shadow: 0 8px 22px rgba(2,6,16,.55);
}
.hub-btn {
  display: inline-block;
  padding: 1cqi 1.9cqi; border-radius: 99px;
  font-family: var(--font-mono); font-size: clamp(6px, 1.35cqi, 9.5px);
  letter-spacing: .08em; text-transform: uppercase; color: #eaf2fc;
  background: linear-gradient(180deg, #5AA2FF, #1D6FE8 60%, #0E3E9C);
  box-shadow: 0 4px 14px rgba(29,111,232,.5);
}

/* ---- Phone ---- */
.hub-phone {
  position: absolute; z-index: 4;
  left: 33.5%; top: 52%; width: 14%;
  padding: 3cqi 1.6cqi 2.4cqi;
  border: 1px solid rgba(120,165,235,.4);
  border-radius: 2.2cqi;
  background: linear-gradient(170deg, #0f1b36, #070f20);
  box-shadow: 0 14px 36px rgba(2,6,16,.6);
  text-align: center;
  animation: hubFloat 7.5s ease-in-out infinite 1.6s;
}
.hp-notch { position: absolute; top: 1cqi; left: 50%; transform: translateX(-50%); width: 34%; height: .8cqi; min-height: 3px; border-radius: 99px; background: rgba(145,185,255,.35); }
.hp-t { margin: 1cqi 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(7px, 1.7cqi, 11.5px); letter-spacing: .08em; text-transform: uppercase; color: var(--ice); }
.hp-s { margin: .8cqi 0 0; font-size: clamp(5.5px, 1.2cqi, 8.5px); line-height: 1.4; color: var(--muted); }
.hub-ring {
  display: flex; align-items: center; justify-content: center;
  width: 46%; aspect-ratio: 1; margin: 1.6cqi auto 0; border-radius: 50%;
  background: conic-gradient(#2E7BFF 0 274deg, rgba(91,163,255,.16) 274deg);
  position: relative;
}
.hub-ring::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: #0a1326; }
.hub-ring b { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(7px, 1.9cqi, 13px); color: var(--ice); }
.hp-c { margin: 1cqi 0 0; font-family: var(--font-mono); font-size: clamp(5px, 1.05cqi, 7.5px); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hub-phone .hub-btn.hp-btn { margin-top: 1.4cqi; padding: .9cqi 1.4cqi; font-size: clamp(5.5px, 1.15cqi, 8px); }

/* ---- Tablet ---- */
.hub-tablet {
  left: 48%; bottom: 3%; width: 42%;
  border-radius: 1.8cqi;
  border-color: rgba(120,165,235,.38);
  transform: rotate(-2deg);
  animation-delay: 1.9s;
}
.hub-steps { list-style: none; display: flex; margin: 2cqi 0 0; padding: 0; position: relative; }
.hub-steps::before {
  content: ""; position: absolute; left: 9%; right: 9%; top: .85cqi; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,163,255,.45), transparent);
}
.hub-steps li {
  flex: 1; text-align: center; position: relative;
  font-family: var(--font-mono); font-size: clamp(5.5px, 1.2cqi, 8.5px);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  min-width: 0; padding: 2.6cqi .55cqi 0; hyphens: manual; line-height: 1.2;
}
.hub-steps li::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: max(6px, 1.7cqi); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7DB4FF, #1e9bf0);
  box-shadow: 0 0 8px rgba(91,192,255,.8);
}
/* hubFloat + rotate duerfen sich nicht ueberschreiben: Tablet floatet ohne transform-Keyframe */
.hub-tablet { animation-name: hubFloatTablet; }
@keyframes hubFloatTablet { 50% { transform: rotate(-2deg) translateY(-.9cqi); } }

/* ---- Siegel: echtes Rundlogo + Orbit-Punkte ---- */
.seal-orbit { position: absolute; inset: -15%; animation: orbitSpin 15s linear infinite; }
.seal-orbit i {
  position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%;
  background: #5bc0ff; box-shadow: 0 0 10px #5bc0ff, 0 0 22px rgba(91,192,255,.55);
}
.seal-orbit i:nth-child(1) { left: 50%; top: 0; transform: translate(-50%, -50%); }
.seal-orbit i:nth-child(2) { right: 2%; top: 70%; }
.seal-orbit i:nth-child(3) { left: 8%; top: 82%; width: 5%; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* ---- Mobil: Phone ausblenden (zu klein), Tablet zentrieren, Labels zu Punkten ---- */
@media (max-width: 560px) {
  .hub-phone { display: none; }
  .hub-tablet { left: 34%; width: 60%; }
  .hub-steps li { font-size: 0; padding-top: 2.2cqi; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-line-flow, .hub-card, .hub-center-ring, .seal-orbit, .hub-laptop, .hub-phone { animation: none; }
  .hub-dots { display: none; }
}
.no-anim .hub-line-flow, .no-anim .hub-card, .no-anim .hub-center-ring, .no-anim .seal-orbit, .no-anim .hub-laptop, .no-anim .hub-phone { animation: none; }
.no-anim .hub-dots { display: none; }