@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/inter-latin-700-normal.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/inter-latin-800-normal.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:900;src:url(../fonts/inter-latin-900-normal.woff2) format("woff2")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#64748b}input::placeholder,textarea::placeholder{opacity:1;color:#64748b}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-x-0{left:0;right:0}.bottom-16{bottom:4rem}.right-4{right:1rem}.top-0{top:0}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.mx-auto{margin-left:auto;margin-right:auto}.mb-5{margin-bottom:1.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-2{height:.5rem}.h-28{height:7rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-72{height:18rem}.h-8{height:2rem}.w-auto{width:auto}.w-12{width:3rem}.w-2{width:.5rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-40{width:10rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-14{gap:3.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.scroll-smooth{scroll-behavior:smooth}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-cyan2\/30{border-color:rgba(0,180,255,.35)}.border-cyan2\/40{border-color:rgba(0,180,255,.45)}.border-emerald-400\/40{border-color:rgba(38,156,71,.4)}.border-signal{border-color:#005B96}.border-signal\/30{border-color:rgba(0,91,150,.3)}.border-white\/10{border-color:rgba(74,144,226,.22)}.bg-black\/30{background-color:rgba(240,247,255,.85)}.bg-white{background-color:#ffffff}.bg-cyan2{background-color:#00b4ff}.bg-cyan2\/10{background-color:rgba(0,180,255,.12)}.bg-emerald-400{background-color:#00e676}.bg-emerald-500{background-color:#269C47}.bg-emerald-500\/15{background-color:rgba(38,156,71,.12)}.bg-signal{background-color:#005B96}.bg-signal\/10{background-color:rgba(0,91,150,.1)}.object-cover{-o-object-fit:cover;object-fit:cover}.object-contain{-o-object-fit:contain;object-fit:contain}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-10{padding-bottom:2.5rem}.pb-5{padding-bottom:1.25rem}.pb-8{padding-bottom:2rem}.pt-14{padding-top:3.5rem}.pt-2{padding-top:.5rem}.pt-28{padding-top:7rem}.pt-32{padding-top:8rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.leading-\[1\.05\]{line-height:1.05}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-cyan2{color:#005B96}.text-emerald-300{color:#15803d}.text-emerald-400{color:#269C47}.text-emerald-500{color:#269C47}.text-emerald-600{color:#15803d}.text-ink{color:#0f172a}.text-red-400{color:#E11D48}.text-red-500{color:#E11D48}.text-signal{color:#005B96}.text-slate-100{color:#1e293b}.text-slate-200{color:#333333}.text-slate-300{color:#334155}.text-slate-400{color:#475569}.text-white{color:#0f172a}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-orange-500{accent-color:#005B96}.shadow-2xl{--tw-shadow:0 20px 44px -12px rgba(0,91,150,.18)}.shadow-2xl,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 16px 32px -6px rgba(0,91,150,.14)}

/* ==========================================================================
   DIGILERN3000 GMBH – AETHER-CLAY & LIQUID NEON UI FRAMEWORK (LIGHT EDITION)
   Exakt wie in preview-standalone.html
   ========================================================================== */

:root {
  --color-brand-primary: #005B96;
  --color-brand-accent: #4A90E2;
  --color-brand-secondary: #333333;
  --color-logo-royal: #1B3C87;
  --color-logo-green: #269C47;
  --color-neon-green: #00e676;
  --color-neon-cyan: #00b4ff;
  --color-neon-electric: #00e5ff;
  --color-alert-crimson: #E11D48;
  --color-slate-dark: #0f172a;
  --card-radius: 1.5rem;
}

html {
  background: #f4f8fc;
  scroll-behavior: smooth;
}

body {
  background-color: #f4f8fc;
  color: var(--color-brand-secondary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, strong {
  color: var(--color-slate-dark);
}

.img-fallback {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
}

/* Ambient Backdrop Glow (Heller Hintergrund mit farbigen Lichtnebeln) */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 10% -5%, rgba(0, 180, 255, 0.16) 0, transparent 62%),
    radial-gradient(950px 600px at 92% 28%, rgba(74, 144, 226, 0.18) 0, transparent 62%),
    radial-gradient(900px 550px at 35% 95%, rgba(0, 230, 118, 0.12) 0, transparent 62%),
    #f4f8fc;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  will-change: transform;
}

.orb-1 {
  width: 560px;
  height: 560px;
  left: -120px;
  top: -80px;
  background: rgba(0, 180, 255, 0.25);
  animation: float1 22s ease-in-out infinite alternate;
}

.orb-2 {
  width: 540px;
  height: 540px;
  right: -100px;
  top: 26%;
  background: rgba(74, 144, 226, 0.26);
  animation: float2 26s ease-in-out infinite alternate;
}

.orb-3 {
  width: 480px;
  height: 480px;
  left: 30%;
  bottom: -140px;
  background: rgba(0, 230, 118, 0.18);
  animation: float3 30s ease-in-out infinite alternate;
}

@keyframes float1 { to { transform: translate(120px, 160px) scale(1.1); } }
@keyframes float2 { to { transform: translate(-140px, -130px) scale(1.08); } }
@keyframes float3 { to { transform: translate(140px, -110px) scale(1.12); } }

.hero-bg {
  background:
    radial-gradient(1100px 550px at 80% -10%, rgba(0, 180, 255, 0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 105%, rgba(0, 230, 118, 0.10), transparent 60%);
}

.grid-lines {
  background-image:
    linear-gradient(rgba(0, 91, 150, 0.045) 1px, transparent 0),
    linear-gradient(90deg, rgba(0, 91, 150, 0.045) 1px, transparent 0);
  background-size: 44px 44px;
}

/* ==========================================================================
   1. KACHELN MIT STARKER RUHEZUSTANDS-AURA & HOVER-GLOW (.glass / .glass-card)
   ========================================================================== */

.glass,
.glass-card {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.90) 0%,
    rgba(240, 247, 255, 0.80) 100%
  );
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
  border-radius: var(--card-radius);
  border: 1px solid rgba(74, 144, 226, 0.42);
  /* Sichtbarer mehrschichtiger Glow schon im Ruhezustand */
  box-shadow:
    0 14px 34px -6px rgba(0, 91, 150, 0.16),
    0 0 20px 0 var(--tile-glow-color, rgba(0, 180, 255, 0.24)),
    inset 0 2px 5px 0 rgba(255, 255, 255, 0.98),
    inset 0 -3px 10px 0 rgba(74, 144, 226, 0.12);
  transition:
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, box-shadow;
}

/* Prisma-Leuchtrand im Ruhezustand */
.glass::before,
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(0, 180, 255, 0.65) 0%,
    rgba(74, 144, 226, 0.18) 45%,
    rgba(0, 230, 118, 0.50) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.82;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

/* Cursor-Spotlight auf allen .glass Kacheln */
.glass::after,
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 30%),
    rgba(0, 180, 255, 0.28),
    rgba(0, 230, 118, 0.12) 45%,
    transparent 75%
  );
}

@media (hover: hover) {
  .glass:hover,
  .glass-card:hover,
  .glow-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 180, 255, 0.9);
    box-shadow:
      0 22px 50px -8px rgba(0, 91, 150, 0.28),
      0 0 30px 3px var(--tile-glow-color, rgba(0, 180, 255, 0.50)),
      0 0 58px -4px var(--tile-glow-secondary, rgba(0, 230, 118, 0.35)),
      inset 0 2px 8px 0 rgba(255, 255, 255, 1);
  }

  .glass:hover::before,
  .glass-card:hover::before {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.7));
  }

  .glass:hover::after,
  .glass-card:hover::after {
    opacity: 1;
  }
}

.glass-strong {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 247, 255, 0.88));
}

.glass-cyan {
  --tile-glow-color: rgba(0, 180, 255, 0.52);
}

.glass-emerald {
  --tile-glow-color: rgba(0, 230, 118, 0.48);
  border-color: rgba(38, 156, 71, 0.45);
}

/* Kritische Problem-/Alarm-Kachel (.glass-red & .clay-alert-surface) */
.glass-red,
.clay-alert-surface {
  position: relative;
  background: linear-gradient(145deg, #fff5f7 0%, #ffe0e6 100%);
  border-radius: var(--card-radius);
  border: 1px solid rgba(225, 29, 72, 0.55);
  --tile-glow-color: rgba(225, 29, 72, 0.48);
  --tile-glow-secondary: rgba(255, 77, 109, 0.35);
  box-shadow:
    0 18px 38px -8px rgba(225, 29, 72, 0.26),
    0 0 22px 0 rgba(225, 29, 72, 0.25),
    inset 0 4px 8px 0 rgba(255, 255, 255, 0.95),
    inset 0 -6px 14px 0 rgba(225, 29, 72, 0.15);
}

/* 3D-Clay-Oberfläche (.clay-surface & .glass-inner) */
.clay-surface,
.glass-inner {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #eaf4ff 100%);
  border-radius: var(--card-radius);
  border: 1px solid rgba(74, 144, 226, 0.45);
  box-shadow:
    0 14px 30px -6px rgba(0, 91, 150, 0.20),
    0 0 16px 0 rgba(0, 180, 255, 0.18),
    inset 0 4px 10px 0 rgba(255, 255, 255, 1),
    inset 0 -6px 14px 0 rgba(0, 91, 150, 0.12);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .clay-surface:hover {
    border-color: rgba(0, 180, 255, 0.9);
    box-shadow:
      0 20px 42px -6px rgba(0, 91, 150, 0.30),
      0 0 24px 2px rgba(0, 180, 255, 0.42),
      inset 0 4px 12px 0 rgba(255, 255, 255, 1),
      inset 0 -6px 16px 0 rgba(74, 144, 226, 0.22);
  }
}

.glass-bar {
  background: rgba(244, 248, 252, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 30px -6px rgba(0, 91, 150, 0.12);
}

/* ==========================================================================
   2. LIQUID FILL BUTTON (.btn-liquid-fill, .cta, .btn-glass)
   Mit ::before clip-path: circle(0% at 50% 100%) -> circle(150% at 50% 100%),
   äußerem Neon-Glow, dunkler Schrift (#0f172a) bei :hover & gleitendem .icon
   ========================================================================== */

.btn-liquid-fill,
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 14px 28px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0b2239 0%, #005B96 100%);
  border: 2px solid var(--color-neon-green);
  border-radius: 50px;
  font-weight: 700;
  text-shadow: none;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  z-index: 1;
  box-shadow:
    0 8px 22px -4px rgba(0, 91, 150, 0.45),
    0 0 16px rgba(0, 230, 118, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

.btn-liquid-fill::before,
.cta::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00e676 0%, #34f59b 50%, #00e5ff 100%);
  clip-path: circle(0% at 50% 100%);
  transition: clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.btn-liquid-fill .icon,
.cta .icon,
.btn-glass .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease;
}

/* Sekundärer Liquid-Fill-Button (.btn-glass) */
.btn-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 14px 28px;
  color: #005B96 !important;
  background: linear-gradient(145deg, #ffffff 0%, #eaf4ff 100%);
  border: 2px solid #00b4ff;
  border-radius: 50px;
  font-weight: 700;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
  box-shadow:
    0 10px 24px -6px rgba(0, 91, 150, 0.22),
    0 0 16px rgba(0, 180, 255, 0.28);
  transition:
    color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

.btn-glass::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00e5ff 0%, #34f59b 55%, #00e676 100%);
  clip-path: circle(0% at 50% 100%);
  transition: clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.btn-glass .icon {
  background: rgba(0, 91, 150, 0.12);
}

@media (hover: hover) {
  .btn-liquid-fill:hover,
  .cta:hover,
  .btn-glass:hover {
    color: var(--color-slate-dark) !important;
    box-shadow:
      0 0 24px rgba(0, 230, 118, 0.68),
      0 0 48px rgba(0, 229, 255, 0.48),
      0 12px 28px -6px rgba(0, 91, 150, 0.35);
    transform: translateY(-2px);
  }

  .btn-liquid-fill:hover::before,
  .cta:hover::before,
  .btn-glass:hover::before {
    clip-path: circle(150% at 50% 100%);
  }

  .btn-liquid-fill:hover .icon,
  .cta:hover .icon,
  .btn-glass:hover .icon {
    transform: translateX(4px);
    background: rgba(15, 23, 42, 0.14);
  }
}

/* ==========================================================================
   3. LIQUID MENU (Hauptmenü mit leuchtender Kapsel & ::after-Glow)
   ========================================================================== */

.liquid-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #0d1f38 0%, #003a66 100%);
  border: 1px solid rgba(0, 180, 255, 0.48);
  box-shadow:
    0 12px 30px -6px rgba(0, 45, 85, 0.42),
    0 0 20px rgba(0, 180, 255, 0.28),
    inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.liquid-menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 9px 18px;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  transition:
    color 0.3s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
  z-index: 1;
}

.liquid-menu-link.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #00b4ff 0%, #005B96 55%, #4A90E2 100%);
  box-shadow:
    0 0 22px rgba(0, 180, 255, 0.78),
    0 6px 16px rgba(0, 91, 150, 0.5),
    inset 0 2px 5px rgba(255, 255, 255, 0.65);
}

.liquid-menu-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #00e5ff, #00b4ff, #00e676);
  box-shadow:
    0 0 14px #00b4ff,
    0 0 24px #00e5ff;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.liquid-menu-link.active::after {
  width: 72%;
}

@media (hover: hover) {
  .liquid-menu-link:hover {
    color: #ffffff !important;
  }

  .liquid-menu-link:hover::after {
    width: 80%;
  }
}

/* ==========================================================================
   4. LIQUID FILL TEXT HOVER EFFECT (.liquid-fill-text, .liquid-text, .neon)
   ========================================================================== */

@keyframes wave-flow {
  0% { background-position: 0% 100%; }
  50% { background-position: 100% 0%; }
  100% { background-position: 200% 100%; }
}

.liquid-fill-text,
.liquid-text,
.neon {
  position: relative;
  display: inline;
  background-image: linear-gradient(
    120deg,
    #1B3C87 0%,
    #005B96 22%,
    #00b4ff 48%,
    #00e676 68%,
    #4A90E2 85%,
    #005B96 100%
  );
  background-size: 240% 240%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wave-flow 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(0, 180, 255, 0.28));
  transition: filter 0.35s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.neon-orange {
  position: relative;
  display: inline;
  background-image: linear-gradient(
    120deg,
    #005B96 0%,
    #00b4ff 35%,
    #269C47 68%,
    #00e676 100%
  );
  background-size: 240% 240%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wave-flow 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(0, 230, 118, 0.28));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (hover: hover) {
  .liquid-fill-text:hover,
  .liquid-text:hover,
  .neon:hover,
  .neon-orange:hover {
    animation-duration: 2.2s;
    filter:
      drop-shadow(0 0 16px rgba(0, 230, 118, 0.55))
      drop-shadow(0 0 26px rgba(0, 180, 255, 0.55));
  }
}

.liquid-heading-hover {
  background-image: linear-gradient(
    90deg,
    #0f172a 0%,
    #0f172a 42%,
    #005B96 62%,
    #00b4ff 82%,
    #269C47 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:
    background-position 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

@media (hover: hover) {
  .glass:hover .liquid-heading-hover,
  .glass-card:hover .liquid-heading-hover,
  .liquid-heading-hover:hover {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.28));
  }
}

/* ==========================================================================
   5. PULSE RING LOADER („Live-Netzwerk“-Indikator statt Ladebalken)
   ========================================================================== */

@keyframes pulse-ring {
  0% {
    box-shadow:
      0 0 0 0 rgba(0, 180, 255, 0.75),
      0 0 0 0 rgba(0, 230, 118, 0.45);
  }
  70% {
    box-shadow:
      0 0 0 12px rgba(0, 180, 255, 0),
      0 0 0 22px rgba(0, 230, 118, 0);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(0, 180, 255, 0),
      0 0 0 0 rgba(0, 230, 118, 0);
  }
}

@keyframes pulse-ring-alert {
  0% {
    box-shadow:
      0 0 0 0 rgba(225, 29, 72, 0.8),
      0 0 0 0 rgba(255, 77, 109, 0.5);
  }
  70% {
    box-shadow:
      0 0 0 14px rgba(225, 29, 72, 0),
      0 0 0 24px rgba(255, 77, 109, 0);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(225, 29, 72, 0),
      0 0 0 0 rgba(255, 77, 109, 0);
  }
}

.pulse-ring-loader {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, #00e5ff 0%, #005B96 75%);
  border: 2px solid #ffffff;
  animation: pulse-ring 1.6s infinite;
  flex-shrink: 0;
}

.pulse-ring-loader::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #00e676;
  box-shadow: 0 0 10px #00e676;
}

.pulse-ring-loader.pulse-alert {
  background: radial-gradient(circle, #ff4d6d 0%, #E11D48 80%);
  animation: pulse-ring-alert 1.3s infinite;
}

.pulse-ring-loader.pulse-alert::after {
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}

.pulse-ring-sm {
  width: 22px;
  height: 22px;
}

.pulse-ring-sm::after {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
}

/* ==========================================================================
   6. INTERAKTIVE TABS, CHIPS, FORMULARFELDER & FAQ (LIGHT GLASS / 3D-CLAY)
   ========================================================================== */

.tab-btn {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(145deg, #ffffff 0%, #eaf4ff 100%);
  border: 1px solid rgba(74, 144, 226, 0.42);
  color: #0f172a;
  box-shadow:
    0 12px 28px -6px rgba(0, 91, 150, 0.15),
    0 0 14px rgba(0, 180, 255, 0.16),
    inset 0 3px 8px rgba(255, 255, 255, 1);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-btn:hover {
  transform: translateY(-4px);
  border-color: #00b4ff;
  box-shadow:
    0 18px 36px -6px rgba(0, 91, 150, 0.25),
    0 0 24px rgba(0, 180, 255, 0.42),
    inset 0 3px 8px rgba(255, 255, 255, 1);
}

.tab-btn.active {
  transform: translateY(-4px);
  border-color: #00b4ff;
  background: linear-gradient(135deg, rgba(0, 180, 255, 0.16) 0%, rgba(0, 230, 118, 0.12) 100%), #ffffff;
  box-shadow:
    0 0 0 2px #00b4ff,
    0 18px 38px -6px rgba(0, 91, 150, 0.28),
    0 0 28px rgba(0, 180, 255, 0.48),
    inset 0 2px 6px rgba(255, 255, 255, 1);
}

.chip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  color: #0f172a;
  background: linear-gradient(145deg, #ffffff 0%, #edf6ff 100%);
  border: 1px solid rgba(74, 144, 226, 0.45);
  box-shadow: 0 4px 12px rgba(0, 91, 150, 0.10);
  transition: all 0.28s ease;
}

.chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #005B96 0%, #00b4ff 60%, #269C47 100%);
  clip-path: circle(0 at 50% 100%);
  transition: clip-path 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chip:hover {
  border-color: #00b4ff;
  box-shadow: 0 0 18px rgba(0, 180, 255, 0.38);
}

.chip.active {
  border-color: #00b4ff;
  color: #ffffff;
  box-shadow:
    0 0 0 1px #00b4ff,
    0 0 22px rgba(0, 180, 255, 0.5);
}

.chip.active::before {
  clip-path: circle(150% at 50% 100%);
}

.field {
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(74, 144, 226, 0.4);
  color: #0f172a;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.04);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.field:focus {
  border-color: #00b4ff;
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(0, 180, 255, 0.22),
    0 0 22px rgba(0, 180, 255, 0.30);
}

.faq-item button {
  color: #0f172a;
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-item.open .faq-body {
  max-height: 400px;
}

.faq-item.open .faq-chev {
  transform: rotate(180deg);
}

.faq-chev {
  transition: transform 0.3s;
  color: #005B96;
}

.flow-line {
  background: repeating-linear-gradient(180deg, #00b4ff 0 8px, transparent 8px 16px);
  width: 2px;
  min-height: 2.3rem;
  filter: drop-shadow(0 0 6px rgba(0, 180, 255, 0.7));
}

.step-glow-o {
  background: linear-gradient(135deg, #005B96, #00b4ff);
  color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(0, 180, 255, 0.22), 0 0 24px rgba(0, 180, 255, 0.55);
}

.step-glow-c {
  background: linear-gradient(135deg, #00b4ff, #4A90E2);
  color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.22), 0 0 24px rgba(0, 180, 255, 0.55);
}

.step-glow-g {
  background: linear-gradient(135deg, #269C47, #00e676);
  color: #0f172a !important;
  box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.25), 0 0 24px rgba(0, 230, 118, 0.6);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.45);
  transform: scale(0);
  animation: rippleAnim 0.65s linear;
  pointer-events: none;
}

@keyframes rippleAnim {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.node {
  transition: all 0.5s ease;
}

.cut .node-b {
  opacity: 0.2;
}

.cut .path-main {
  stroke: #E11D48;
  stroke-dasharray: 6 6;
}

.cut .path-back {
  opacity: 1;
}

.path-back {
  opacity: 0.25;
  transition: opacity 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 768px) {
  .glass, .glass-card {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .orb {
    filter: blur(55px);
  }
  .orb-1, .orb-2 {
    width: 340px;
    height: 340px;
  }
}

.hover\:text-white:hover {
  color: #005B96 !important;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:inline { display: inline; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
}

@media (min-width: 768px) {
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:inline-flex { display: inline-flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:flex { display: flex; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .xl\:text-6xl { font-size: 3.75rem; line-height: 1; }
}