@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
    
    * {
        font-family: 'Inter', sans-serif;
    }

    :root {
        --primary: #6366f1;
        --secondary: #ec4899;
        --accent: #14b8a6;
        --warning: #f59e0b;
        --danger: #ef4444;
        --dark: #0f172a;
        --light: #f8fafc;
        --glass: rgba(255, 255, 255, 0.1);
        --glass-border: rgba(255, 255, 255, 0.2);
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        background: linear-gradient(135deg, #071037 0%, #300c4e 100%);
        min-height: 100vh;
        color: white;
        overflow-x: hidden;
        position: relative;
    }

    /* Animated Background */
    .bg-animation {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
        opacity: 0.5;
    }

    .floating-bubble {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent);
        animation: float 20s infinite ease-in-out;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0) translateX(0) scale(1); }
        33% { transform: translateY(-100px) translateX(50px) scale(1.1); }
        66% { transform: translateY(50px) translateX(-50px) scale(0.9); }
    }

    /* Neural Network Animation */
    .neural-network {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0.1;
    }

    .neural-line {
        position: absolute;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
        animation: pulse-line 5s infinite;
    }

    @keyframes pulse-line {
        0%, 100% { opacity: 0; transform: scaleX(0); }
        50% { opacity: 1; transform: scaleX(1); }
    }

    

    /* Animated progress rings */
    .progress-ring {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }

    .progress-ring__circle {
        transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Improved slider design */
    .slider-container {
        position: relative;
        padding: 20px 0;
        user-select: none;
        -webkit-user-select: none;
    }

    .slider-track {
        position: relative;
        height: 8px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        cursor: pointer;
    }

    .slider-fill {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        border-radius: 4px;
        transition: width 0.2s ease;
        pointer-events: none;
    }

    .slider-handle {
        position: absolute;
        width: 32px;
        height: 32px;
        background: white;
        border-radius: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: grab;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(59, 130, 246, 0.2);
        transition: transform 0.2s, box-shadow 0.2s;
        z-index: 10;
    }

    .slider-handle:hover {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(59, 130, 246, 0.3);
    }

    .slider-handle:active {
        cursor: grabbing;
        transform: translate(-50%, -50%) scale(1.15);
    }

    .slider-handle::after {
        content: attr(data-value);
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
    }

    .slider-handle:hover::after,
    .slider-handle:active::after {
        opacity: 1;
    }

    /* Glass card effect */
    .glass-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Smooth animations */
    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Gradient text */
    .gradient-text {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Response cards */
    .response-card {
        transition: all 0.3s ease;
    }

    /* Share button styles */
    .share-button {
        transition: all 0.3s ease;
    }

    .share-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

    /* Loading spinner */
    .spinner {
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-left-color: #3b82f6;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }


     #globeViz {
        width: 95%;
        height: 500px;
        position: relative;
        cursor: grab;
    }

    #globeViz:active {
        cursor: grabbing;
    }

    .globe-tooltip {
        position: absolute;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 1000;
        max-width: 200px;
    }

    .globe-tooltip.show {
        opacity: 1;
    }

    /* Heatmap styles */
    .heatmap-cell {
        transition: all 0.3s ease;
    }

    .heatmap-cell:hover {
        transform: scale(1.05);
        filter: brightness(1.2);
    }

    /* Timeline styles */
    .timeline-point {
        transition: all 0.3s ease;
    }

    .timeline-point:hover {
        transform: scale(1.5);
    }
   /* Glitch effect */
   .glitch {
    position: relative;
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
                 0.025em 0.04em 0 #fffc00;
    animation: glitch 725ms infinite;
}

@keyframes glitch {
    0%, 100% { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; }
    20% { text-shadow: 0.05em 0 0 #fc00ff, -0.03em -0.04em 0 #fffc00, 0.025em 0.04em 0 #00fffc; }
    40% { text-shadow: 0.05em 0 0 #fffc00, -0.03em -0.04em 0 #00fffc, 0.025em 0.04em 0 #fc00ff; }
}
     /* Neon glow effects */
     .neon-text {
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.5),
                     0 0 20px rgba(59, 130, 246, 0.3),
                     0 0 30px rgba(59, 130, 246, 0.2);
    }

    .neon-box {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5),
                    inset 0 0 20px rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.5);
        padding: 3px;
    }
     /* Typewriter effect */
     .typewriter {
        overflow: hidden;
        white-space: nowrap;
        border-right: 3px solid #3b82f6;
        animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
    }

    @keyframes typing {
        from { width: 0; }
        to { width: 100%; }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        h1 { font-size: 2rem; }
        .charts-grid { grid-template-columns: 1fr; }
        .stat-number { font-size: 2rem; }
        .cta-title { font-size: 1.5rem; }
        .export-controls { position: static; margin-bottom: 1rem; }
        #globeViz { height: 300px; }
        .prediction-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (prefers-reduced-motion: reduce), (max-width: 768px){
        .bg-animation, .neural-network, .cta-banner, .stat-card::after, .chart-container::before {
        animation: none !important;
        }
        .header, .cta-content { backdrop-filter: blur(8px); }
        }
/* Globe container */
.glass-card { overflow: hidden; }  /* neu: verhindert Überstand */
#globeViz {
width: 95%;
height: 500px;        /* bleibt als Fallback; wird gleich per JS überschrieben */
position: relative;
cursor: grab;
max-width: 1090px;
}

#globeViz canvas { display: block; width:95%;max-width: 1090px; }

/* --- Subtle enter / micro animations --- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes pulseSoft {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.035); }
  }
  
  .animate-in { opacity: 0; animation: fadeUp .45s ease forwards; }
  .pulse-soft { animation: pulseSoft 4.5s ease-in-out infinite; }
  
  .glass-card, .response-card, .slider-container, .progress-ring, canvas, h1, h2, h3 {
    will-change: transform, opacity;
  }

/* Glass look */
.glass-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    display: flex; flex-direction: column;
  }
  
  /* Parent-Grid sorgt für gleiche Zeilenhöhen */
  .equal-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-rows: 1fr; /* <— magic */
  }
  .glass-card > .card-body { padding: 16px; display: flex; flex: 1; flex-direction: column; }
  .glass-card .card-footer { margin-top: auto; padding: 12px 16px; }

  /* ==== ZENTRIERTER HERO (max 900px) ==== */
.hero-wrap{ display:flex; justify-content:center; padding:clamp(16px, 4vw, 32px) 0; }
.hero-fixed{
  position: relative;
  width: min(900px, 94vw);
 
  /* Höhe automatisch über Bild; Aspekt vom Bild bestimmt */
}
.hero-img{
  display:block; width:100%; height:auto; object-fit:cover; object-position:center;
  border-radius: 8px; /* optional */
}

#langSelect {z-index: 999;}

:root {
    --m-x1: 22%;
    --m-y1: 15%;
    --m-x2: 80%;
    --m-y2: 15%;
    --m-x3: 81%;
    --m-y3: 78%;
    --m-x4: 21%;
    --m-y4: 77%;
    }
@media (max-width: 640px){
  :root{ --m-x1: 10%; --m-x2: 90%; --m-y1: 26%; --m-y2: 26%; --m-y3: 70%; --m-y4: 70%; }
  .intro-title{ font-weight:800; letter-spacing:.06em;
    font-size: clamp(2.7rem, 4.8vw, 5.1rem) !important; margin: 0 0 .35rem; }
  .intro-tagline{ font-size: clamp(1rem, 2.1vw, 1.25rem); margin: 0 0 1rem; opacity:.96; }
}

.mirror-slot{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:auto;
  clip-path: polygon(var(--m-x1) var(--m-y1), var(--m-x2) var(--m-y2),
                     var(--m-x3) var(--m-y3), var(--m-x4) var(--m-y4));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  perspective: 1200px;
}
/* Glare-Animation (dezent) */
.mirror-slot::before{
  content:""; position:absolute; inset:-12%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%,
                               rgba(255,255,255,0.35) 50%,
                               rgba(255,255,255,0) 65%);
  transform: translateX(-120%) rotate(8deg);
  mix-blend-mode: screen; pointer-events:none;
  animation: mirrorSweep 5.5s ease-in-out 1.2s infinite;
}
@keyframes mirrorSweep{
  0%, 10%{ transform: translateX(-120%) rotate(8deg); opacity:0; }
  25%{ opacity:.8; }
  50%{ transform: translateX(40%) rotate(8deg); opacity:.2; }
  70%,100%{ transform: translateX(120%) rotate(8deg); opacity:0; }
}

/* Intro-Card auf dem Spiegel */
.intro-on-mirror {
    max-width: min(92%, 820px);
    margin: 0 1.6rem;
    padding: clamp(1rem, 2.6vw, 2rem);
    text-align: center;
    color: #fff;
    /* background: rgba(51, 179, 186, 1); */
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 18px;
    backdrop-filter: blur(6px);
    transform-style: preserve-3d;
    transform: rotateX(0.6deg) rotateY(-1.2deg);
    /* box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); */
    }
.intro-title{ font-weight:800; letter-spacing:.06em;
  font-size: clamp(2.9rem, 5.6vw, 6.1rem); margin: 0 0 .35rem; }
.intro-tagline{ font-size: clamp(1rem, 2.1vw, 1.25rem); margin: 0 0 1rem; opacity:.96; }
.cta-hero{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius: 14px; font-weight:800;
  background: linear-gradient(90deg, #a7f6f9, #ffffff); color:#59dbdf; 
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  transform: translateZ(24px);
  transition: transform .2s ease, filter .2s ease;
  color: #009e8b;
}
.cta-hero:hover{ transform: translateZ(24px) translateY(-1px) scale(1.01); filter: brightness(1.05); }

/* Foto bleibt wie bei dir */
.mirror-photo-wrap{ position:relative; width:min(900px,94vw); margin:0 auto; }
.mirror-photo{ display:block; width:100%; height:auto; border-radius:10px; }
.mirror-photo-wrap{ position:relative; width:min(900px,94vw); margin:0 auto; }
.mirror-photo{ display:block; width:100%; height:auto; border-radius:10px; }

/* Position + Größe in % des Fotos → mobil perfekt */
.radar-on-mirror{
  --cx:50%; --cy:46%; --w:100%; --h:65%;
  position:absolute; left:var(--cx); top:var(--cy);
  width:var(--w); height:var(--h);
  transform: translate(-50%, -50%);
  pointer-events: auto;        /* <-- Interaktion erlauben */
}

.radar-clip{
  position: relative; width:100%; height:100%;
  overflow: hidden;             /* sicheres Clipping fürs Canvas */
  pointer-events: auto;

}

/* Canvas muss Events bekommen */
.radar-clip canvas{ width:100%; height:100%; display:block; pointer-events:auto; }

/* optional: dezente Spiegelkante/Glanz nur am Rechteck */
.radar-clip::after{
  content:""; position:absolute; inset:0; pointer-events:none;
 /* box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); */
}

.share-btn {
    background: linear-gradient(to right, #2563eb, #9333ea);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: bold;
    transition: transform 0.15s ease;
  }
  .share-btn:hover {
    transform: scale(1.05);
  }

  .mirror-photo, .mirror-photo-wrap {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .mirror-photo {
  display: block;
}

.share-btn{
    background: linear-gradient(to right,#2563eb,#9333ea);
    color:#fff; padding:.6rem 1rem; border-radius:999px;
    font-weight:700; transition:transform .15s ease;
  }
  .share-btn:hover{ transform:scale(1.05); }

  .no-border .radar-on-mirror::after,
  .no-border .radar-clip::after,
.no-border .intro-mirror::after{
  box-shadow:none !important; outline:none !important;
}

.radar-on-mirror, .mirror-photo{ display:block; border:none !important; box-shadow:none !important; }

  /* you probably have something like this */
.radar-clip::after{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  }
  /* Rahmen komplett deaktivieren */
.mirror-slot{ box-shadow: none !important; }
.intro-on-mirror{ border: none !important; }
.radar-on-mirror{ border: none !important; }
/* falls es irgendwo noch outlines/border gibt */
.radar-on-mirror, .mirror-photo, .mirror-photo-wrap { border: none !important; box-shadow: none !important; }
.mirror-photo { display:block; } /* vermeidet Anti-Aliasing-Linien am <img> */
.share-btn{
    background: linear-gradient(to right,#2563eb,#9333ea);
    color:#fff; padding:.6rem 1rem; border-radius:999px;
    font-weight:700; transition:transform .15s ease;
  }
  .share-btn:hover{ transform:scale(1.05); }
  

  .radar-clip canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: auto;
    }