/*
 * custom.css – Imagepixel ProcessWire Template
 * Ergänzt Tailwind CDN um custom Utilities, die @layer nicht unterstützt.
 */

/* ─── DM Sans – lokal gehostet (DSGVO-konform, kein Google-Request) ─────── */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* ─── CSS-Variablen ──────────────────────────────────────────────────────── */
:root {
  --glass-bg:    rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --blur-amount: 12px;

  --color-health:     #10B981;
  --color-finance:    #3B82F6;
  --color-education:  #8B5CF6;
  --color-lifestyle:  #EC4899;
  --color-management: #2563EB;
  --color-analytics:  #4F46E5;
  --color-security:   #64748B;
  --color-growth:     #059669;

  --neon-green: #39FF14;
  --neon-cyan:  #00FFFF;
}

/* ─── Basis ──────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: "DM Sans", sans-serif;
  overflow-x: clip;
}

/* ─── Glassmorphism ──────────────────────────────────────────────────────── */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--glass-border);
}

/* ─── 3D Flip-Card Utilities ─────────────────────────────────────────────── */
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

/* Flip-Card innere Höhe stabilisieren */
.flip-card { position: relative; }
.flip-card-inner { transform-style: preserve-3d; }
.flip-card-inner.is-flipped { transform: rotateY(180deg); }

/* ─── Scrollbar verstecken ───────────────────────────────────────────────── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ─── Partikel-Elemente (Header & Canvas) ───────────────────────────────── */
.particle-element {
  position: fixed;
  z-index: 9999;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
  filter: brightness(1.2);
}

/* ─── Icon-Animationen ───────────────────────────────────────────────────── */
@keyframes icon-rotate  { 0% { transform: rotate(0deg); }   100% { transform: rotate(360deg); } }
@keyframes icon-scale   { 0%, 100% { transform: scale(1); } 50%  { transform: scale(1.2); } }
@keyframes icon-bounce  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes icon-pulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.95); } }
@keyframes icon-shimmer { 0% { filter: brightness(1); } 50% { filter: brightness(1.5) drop-shadow(0 0 8px currentColor); } 100% { filter: brightness(1); } }

.group:hover .anim-rotate  { animation: icon-rotate  1.5s linear infinite; }
.group:hover .anim-scale   { animation: icon-scale   0.6s ease-in-out infinite; }
.group:hover .anim-bounce  { animation: icon-bounce  0.6s ease-in-out infinite; }
.group:hover .anim-pulse   { animation: icon-pulse   1s ease-in-out infinite; }
.group:hover .anim-shimmer { animation: icon-shimmer 1.5s ease-in-out infinite; }

/* Karten-spezifische Animationen → auf Basis-Animationen mappen */
.group:hover .anim-dumbbell-bounce { animation: icon-bounce  0.6s ease-in-out infinite; }
.group:hover .anim-scissors-snip  { animation: icon-scale   0.6s ease-in-out infinite; }
.group:hover .anim-brush-rotate   { animation: icon-rotate  1.5s linear infinite; }
.group:hover .anim-hammer-strike  { animation: icon-bounce  0.5s ease-in-out infinite; }
.group:hover .anim-utensils-cross { animation: icon-rotate  2s linear infinite; }
.group:hover .anim-briefcase-bounce { animation: icon-bounce 0.7s ease-in-out infinite; }

/* ─── Mobile Menü Animationen ────────────────────────────────────────────── */
@keyframes menu-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes menu-slide-in {
  0%   { opacity: 0; transform: translateY(-15px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-menu-fade-in { animation: menu-fade-in 0.3s ease-out forwards; }

.menu-stagger-1 { animation: menu-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1)  50ms both; }
.menu-stagger-2 { animation: menu-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) 100ms both; }
.menu-stagger-3 { animation: menu-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) 150ms both; }
.menu-stagger-4 { animation: menu-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) 200ms both; }
.menu-stagger-5 { animation: menu-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) 250ms both; }

/* ─── Scroll-Animationen (Intersection Observer) ────────────────────────── */
.scroll-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero-Elemente sofort sichtbar (kein Scroll nötig) */
section:first-of-type .scroll-animate {
  opacity: 1;
  transform: none;
}

/* ─── Fokus-Styles für Accessibility ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #00FFFF;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Utility: Text-Balance ─────────────────────────────────────────────── */
.text-balance { text-wrap: balance; }

/* ─── Legal-Seiten (Datenschutz, AGB) – CKEditor-Inhalt im Dark-Theme ───── */
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4     { color: #f9fafb; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
.legal-content h2     { font-size: 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.4rem; }
.legal-content h3     { font-size: 1.15rem; color: #e5e7eb; }
.legal-content p      { margin-bottom: 1rem; line-height: 1.8; }
.legal-content ul,
.legal-content ol     { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-content ul     { list-style: disc; }
.legal-content ol     { list-style: decimal; }
.legal-content li     { margin-bottom: 0.4rem; }
.legal-content strong { color: #f3f4f6; }
.legal-content a      { color: #f87171; }
.legal-content a:hover { text-decoration: underline; }

/* ─── Transition-Delays (für scroll-animate) ────────────────────────────── */
[style*="transition-delay"] { transition-delay: var(--delay, 0ms); }


/* ─── Impressum CKEditor-Inhalt (heller Hintergrund) ────────────────────── */
.impressum-content h3     { font-size: 1rem; font-weight: 600; color: #1f2937; margin-top: 1.25rem; margin-bottom: 0.4rem; }
.impressum-content p      { margin-bottom: 0.75rem; }
.impressum-content ul     { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.impressum-content li     { margin-bottom: 0.25rem; }
.impressum-content a      { color: #dc2626; }
.impressum-content a:hover { text-decoration: underline; }

/* ─── Header Auto-Hide beim Scrollen ────────────────────────────────────── */
#site-header {
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#site-header.header-hidden {
  transform: translateY(-100%);
}

/* ─── Flip-Card Pixel-Design: Icon-Glow bei Hover intensivieren ─────────── */
.group:hover .flip-card-icon {
  box-shadow: 0 0 22px rgba(0, 255, 255, 0.5) !important;
  border-color: rgba(0, 255, 255, 0.55) !important;
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7)) !important;
}

/* ─── Header Dropdown – Glassmorphism ───────────────────────────────────── */
.nav-dropdown-item:hover {
  background: rgba(0, 255, 255, 0.06);
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.1);
}
.nav-dropdown-item.active {
  background: rgba(0, 255, 255, 0.08);
  box-shadow: inset 0 0 14px rgba(0, 255, 255, 0.12);
}
.nav-dropdown-item:hover .nav-dropdown-icon {
  background: rgba(0, 255, 255, 0.18) !important;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}
.nav-dropdown-item.active .nav-dropdown-icon {
  background: rgba(0, 255, 255, 0.2) !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}