/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Kleine Animationen für Antwort-Buttons */
.answer-btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
}

/* Stil für ausgewählten Button */
.answer-btn.selected {
    /* Die spezifische Hintergrundfarbe wird jetzt durch JS gesetzt (.bg-blue-700 etc.) */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.4); /* Beispiel: Blauer Rand bleibt */
    transform: scale(1.03);
}
.answer-btn.selected:active {
     transform: scale(0.98);
}

/* Werbe-Container Styling (Opacity basiert) */
#ad-container {
    transition: opacity 0.5s ease-out, margin-bottom 0.5s ease-out;
}

/* Style für die Werbekarte (jetzt ein Link) */
a.ad-card {
    display: block;
    border: 1px solid #e2e8f0; /* Tailwind gray-200 */
    background-color: #eff6ff; /* Tailwind blue-50 */
    animation: fadeIn 0.6s ease-out;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
a.ad-card:hover {
    background-color: #dbeafe; /* Tailwind blue-100 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
a.ad-card img {
    max-height: 100px;
    object-fit: cover;
    border-radius: 0.25rem; /* rounded-sm */
}

/* Fortschrittsbalken */
#progress-bar {
    transition: width 0.4s ease-in-out;
}

/* Animationsdefinitionen */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes shake {
   10%, 90% { transform: translate3d(-1px, 0, 0); }
   20%, 80% { transform: translate3d(2px, 0, 0); }
   30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
   40%, 60% { transform: translate3d(4px, 0, 0); }
 }


/*.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-in { animation: slideIn 0.5s ease-out forwards; opacity: 0; /* Start unsichtbar }*/

/* Unlock Button Animation */
@keyframes subtlePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.4); } /* brand-accent yellow */
  50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(241, 196, 15, 0); }
}

#unlock-external-btn {
  animation: subtlePulse 2.5s infinite ease-in-out;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

#unlock-external-btn:hover {
  animation-play-state: paused;
  transform: scale(1.08);
}

/* Ergebnis-Item Hover-Effekt (allgemein) */
.result-item {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}


/* Styles für ergebnis-extern.html */
.result-item-extern {
     page-break-inside: avoid; /* Verhindert Seitenumbruch innerhalb eines Items beim Druck */
}

/* Hilfsklasse für Druck */
.print-block { display: none; }

/* Druckstile für ergebnis-extern.html */
@media print {
    body {
        background-color: #fff;
        color: #000;
        font-size: 11pt;
    }
    header, footer, .print-hidden {
        display: none !important;
    }
    main.container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1cm !important; /* Rand für den Druck */
        box-sizing: border-box !important;
    }
    #downloadable-content { /* Der druckbare Container */
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        background-color: transparent !important;
    }
     .print-block { display: block !important; } /* Titel im Druck anzeigen */

    .result-item-extern {
        border-bottom: 1px solid #ccc !important;
        padding-bottom: 10px !important;
        margin-bottom: 15px !important; /* Etwas mehr Abstand im Druck */
        background-color: transparent !important;
    }
     .result-item-extern h4 {
         font-size: 13pt !important;
         color: #000 !important;
         font-weight: 600 !important; /* semibold */
     }
      .result-item-extern p {
          font-size: 10pt !important;
          color: #333 !important;
      }
     .result-item-extern .bg-gray-200 { /* Hintergrund der Leiste */
         background-color: #eee !important;
         border-radius: 9999px !important; /* rounded-full */
         height: 0.75rem !important; /* h-3 */
     }
      .result-item-extern .bg-brand-accent { /* Farbe der Leiste */
          background-color: #555 !important; /* Dunkelgrau im Druck statt Gelb */
          print-color-adjust: exact !important;
          -webkit-print-color-adjust: exact !important;
          border-radius: 9999px !important; /* rounded-full */
          height: 0.75rem !important; /* h-3 */
      }
       .result-item-extern .text-startup-dark { color: #000 !important; }
       .result-item-extern .text-gray-500 { color: #555 !important; }
       .result-item-extern .text-2xl { font-size: 1.5rem !important; } /* Ensure font sizes are consistent */
       .result-item-extern .font-bold { font-weight: 700 !important; }


    a { text-decoration: none !important; color: inherit !important; }
     .bg-white, .bg-startup-light, .bg-gray-50 { background-color: transparent !important; }
     .text-startup-dark { color: #000 !important; }
     .shadow-lg { box-shadow: none !important; }
     .rounded-lg { border-radius: 0 !important; }
}