/*
WICHTIGER HINWEIS:

Alle eigenen CSS-Komponenten-Klassen, die hier mit @apply definiert werden,
MÜSSEN mit dem Präfix "duellio-" beginnen, damit sie beim Tailwind-Build nicht entfernt werden.

Hintergrund: In der tailwind.config.js ist eine Safelist mit dem Pattern /^duellio-/ gesetzt.
Nur so werden diese Klassen beim Purge/Tree-Shake von Tailwind in die finale CSS übernommen.

Beispiel:
  .duellio-mein-button { @apply ... }

Klassen ohne dieses Präfix werden ggf. NICHT in die tailwind.out.css übernommen!
*/

/* style.css: Tailwind Input-Datei für den Build-Prozess */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Alpine.js x-cloak Unterstützung */
[x-cloak] {
  display: none !important;
}

/* Safari-spezifischer Fix für Modal-Body-Scrolling */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Mobile Navigation Fixes */
.duellio-mobile-nav-overlay {
  @apply lg:hidden absolute top-full left-0 right-0 bg-duellio-bg-header border-t border-white/65 shadow-lg;
  z-index: 9999 !important;
}

/* Duellio UI-Komponenten mit Tailwind CSS */

@layer components {
  .duellio-card {
    @apply bg-white border border-gray-200 rounded-lg shadow-sm p-5 md:p-6;
  }
  /* Überschriften */
  .duellio-heading-1 {
    @apply text-2xl font-bold mb-4 text-gray-900 flex items-center;
  }
  .duellio-heading-2 {
    @apply text-xl font-bold mb-3 text-gray-800 flex items-center;
  }
  .duellio-heading-3 {
    @apply text-lg font-semibold mb-2 text-gray-800 flex items-center;
  }
  /* Icons innerhalb von Überschriften */
  .duellio-heading-icon {
    @apply h-6 w-6 mr-3 flex-shrink-0;
  }
  /* Buttons */
  .duellio-button-primary {
    @apply px-5 py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 
           focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors duration-200 
           disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 shadow-sm;
  }
  .duellio-button-secondary {
    @apply px-5 py-3 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 
           focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors duration-200
           disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 shadow-sm;
  }
  .duellio-button-success {
    @apply px-5 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 
           focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors duration-200
           disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 shadow-sm;
  }
  .duellio-button-info {
    @apply px-4 py-2.5 bg-cyan-600 text-white font-semibold rounded-lg hover:bg-cyan-700 
           focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 transition-colors duration-200
           disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 shadow-sm;
  }
  /* CI-Header */
  .duellio-header {
    @apply w-full flex items-center justify-between px-6 py-3 bg-duellio-bg-header border-b border-white/65 shadow-none min-h-[4.5rem];
    border-bottom: 2px solid rgba(255,255,255,0.8);
    box-shadow: none;
  }
  .duellio-header-logo {
    @apply h-14 w-auto block;
  }
  .duellio-header-nav {
    @apply flex gap-6 items-center;
  }
  .duellio-header-link {
    @apply text-duellio-text font-semibold text-base hover:text-duellio-primary transition-colors duration-150;
  }
  
  /* Elegante Header-Navigation für eingeloggte Benutzer */
  .duellio-header-user-nav {
    @apply flex items-center gap-2 bg-white/5 backdrop-blur-sm rounded-xl px-2 py-1 border border-white/10;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  }
  
  .duellio-nav-item {
    @apply flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200;
  }
  
  .duellio-nav-item:hover {
    @apply bg-white/10 shadow-sm transform scale-105;
  }
  
  .duellio-nav-separator {
    @apply w-px h-6 bg-gray-300/50;
  }
  
  /* Prominenter Dashboard-Button */
  .duellio-dashboard-button {
    @apply flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all duration-200;
    background: linear-gradient(135deg, #D147B8 0%, #B83CB0 35%, #D147B8 70%, #C044B4 100%);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 2px 8px rgba(209,71,184,0.15);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  
  .duellio-dashboard-button:hover {
    @apply shadow-lg transform scale-105;
    background: linear-gradient(135deg, #E052C7 0%, #C84BC0 35%, #E052C7 70%, #D048C3 100%);
    box-shadow: 0 4px 16px rgba(209,71,184,0.25);
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
  }
  /* CI-Footer */
  .duellio-footer {
    @apply w-full bg-duellio-bg-footer text-white text-center py-4 mt-auto text-base;
    letter-spacing: 0.01em;
    border-top: none;
  }
  /* CI-Button Primär */
  .duellio-button-primary-ci {
    @apply font-bold rounded-xl text-white transition-all duration-200 border-0 flex items-center justify-center text-lg shadow-md px-8 py-4;
    background: linear-gradient(90deg, #D147B8 0%, #FFA726 100%);
    box-shadow: 0 4px 16px rgba(209,71,184,0.12);
    min-width: 180px;
    min-height: 56px;
    font-size: 1.15rem;
    line-height: 1.5rem;
  }
  .duellio-button-primary-ci:disabled {
    @apply opacity-60 cursor-not-allowed;
  }
  /* CI-Button Sekundär */
  .duellio-button-secondary-ci {
    @apply font-bold rounded-xl border-2 transition-all duration-200 flex items-center justify-center text-lg px-8 py-4 shadow-sm;
    color: #D147B8;
    border-color: #D147B8;
    background: linear-gradient(90deg, #FCE8F4 0%, #FFEED9 100%);
    min-width: 220px;
    min-height: 56px;
  }
  .duellio-button-secondary-ci:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  /* CI-Button Primär (klein für Navigation) */
  .duellio-button-primary-ci-small {
    @apply font-bold rounded-lg text-white transition-all duration-200 border-0 flex items-center justify-center text-sm shadow-sm px-4 py-2;
    background: linear-gradient(90deg, #D147B8 0%, #FFA726 100%);
    box-shadow: 0 2px 8px rgba(209,71,184,0.12);
    min-width: 120px;
    min-height: 40px;
    font-size: 0.9rem;
  }
  .duellio-button-primary-ci-small:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  /* CI-Button Sekundär (klein für Navigation) */
  .duellio-button-secondary-ci-small {
    @apply font-bold rounded-lg border-2 transition-all duration-200 flex items-center justify-center text-sm px-4 py-2 shadow-sm;
    color: #D147B8;
    border-color: #D147B8;
    background: linear-gradient(90deg, #FCE8F4 0%, #FFEED9 100%);
    min-width: 130px;
    min-height: 40px;
    font-size: 0.9rem;
  }
  .duellio-button-secondary-ci-small:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  /* CI-Button Mobile (volle Breite) */
  .duellio-button-primary-ci-mobile {
    @apply font-bold rounded-lg text-white transition-all duration-200 border-0 flex items-center justify-center text-base shadow-sm px-6 py-3 w-full;
    background: linear-gradient(90deg, #D147B8 0%, #FFA726 100%);
    box-shadow: 0 2px 8px rgba(209,71,184,0.12);
    min-height: 48px;
  }
  .duellio-button-primary-ci-mobile:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  .duellio-button-secondary-ci-mobile {
    @apply font-bold rounded-lg border-2 transition-all duration-200 flex items-center justify-center text-base px-6 py-3 shadow-sm w-full;
    color: #D147B8;
    border-color: #D147B8;
    background: linear-gradient(90deg, #FCE8F4 0%, #FFEED9 100%);
    min-height: 48px;
  }
  .duellio-button-secondary-ci-mobile:disabled {
    @apply opacity-60 cursor-not-allowed;
  }
  /* CI-Widget/Card */
  .duellio-card-ci {
    @apply rounded-2xl shadow-lg border p-6;
    border-color: #E5BDF0;
    background: linear-gradient(135deg, #F9F8FC 0%, #EEF7FA 100%);
    color: #132544;
  }
  /* CI-Main-Background */
  .duellio-main-bg {
    background: linear-gradient(135deg, #FFF2E0 0%, #F5E3F4 50%, #E5F0FB 100%);
    min-height: 100vh;
    width: 100vw;
  }
  /* CI-Main-Background für pseudonymisierte Seiten (ohne Header/Footer) */
  .duellio-main-bg-pseudo {
    @apply pt-2 md:pt-4;
    background: linear-gradient(135deg, #FFF2E0 0%, #F5E3F4 50%, #E5F0FB 100%);
    min-height: 100vh;
    width: 100vw;
  }
  /* CI-Typografie */
  .duellio-font {
    font-family: Inter, Segoe UI, Roboto, Arial, system-ui, sans-serif;
    font-weight: 400;
    color: #132544;
  }
  .duellio-heading-ci {
    @apply font-bold mb-8;
    font-size: 2.25rem;
    line-height: 2.5rem;
    color: #D147B8;
    font-family: Inter, Segoe UI, Roboto, Arial, system-ui, sans-serif;
    text-align: center;
  }
  /* Chat-Komponenten - CI-konform */
  .duellio-chat-container {
    @apply flex flex-col gap-3 mb-4 p-4 rounded-2xl flex-grow 
           min-h-[15rem] max-h-[calc(100vh-16rem)] overflow-y-auto scroll-smooth;
    background: linear-gradient(135deg, #FEFCFF 0%, #F8F5FF 50%, #F3F0FF 100%);
    border: 1px solid #E5BDF0;
    box-shadow: inset 0 2px 8px rgba(209,71,184,0.08);
  }
  .duellio-chat-message-student {
    @apply flex items-end gap-2 max-w-[85%] ml-auto;
  }
  .duellio-chat-message-tutor {
    @apply flex items-end gap-2 max-w-[85%] mr-auto;
  }
  .duellio-chat-bubble-student {
    @apply relative text-white px-3 py-0.5 rounded-lg shadow-sm text-sm whitespace-pre-line break-words;
    background: linear-gradient(135deg, #D147B8 0%, #FFA726 100%);
    border: 1px solid rgba(255,255,255,0.2);
    line-height: 1.4;
  }
  .duellio-chat-bubble-tutor {
    @apply relative px-3 py-0.5 rounded-lg shadow-sm text-sm border;
    background: linear-gradient(135deg, #FFFFFF 0%, #FEFCFF 100%);
    border-color: #E5BDF0;
    color: #132544;
    line-height: 1.4;
  }

  .duellio-chat-input {
    @apply flex gap-2 mt-auto sticky bottom-0 pt-2 pb-0 backdrop-blur-sm rounded-b-2xl;
    background: linear-gradient(135deg, rgba(249,248,252,0.95) 0%, rgba(238,247,250,0.95) 100%);
    position: relative;
    z-index: 1;
    bottom: 0.5rem;
  }
  .duellio-textarea {
    @apply w-full flex-1 border rounded-xl p-4 resize-none focus:outline-none focus:ring-2 shadow-sm;
    border-color: #E5BDF0;
    background: linear-gradient(135deg, #FFFFFF 0%, #FEFCFF 100%);
    color: #132544;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .duellio-textarea:focus {
    --tw-ring-color: #D147B8;
    border-color: #D147B8;
  }
  /* Status-Meldungen */
  .duellio-alert-success {
    @apply flex items-center text-green-700 bg-green-100 px-5 py-3 rounded-lg shadow-sm;
  }
  .duellio-alert-error {
    @apply flex items-center text-red-700 bg-red-100 px-5 py-3 rounded-lg shadow-sm;
  }
  .duellio-alert-info {
    @apply flex items-center text-cyan-700 bg-cyan-100 px-5 py-3 rounded-lg shadow-sm;
  }
  .duellio-alert-warning {
    @apply flex items-center text-yellow-800 bg-yellow-50 border-l-4 border-yellow-400 px-5 py-3 rounded-lg shadow-sm;
  }
  /* Layout-Komponenten */
  .duellio-main-container {
    @apply w-full px-1 sm:px-2; /* Weniger horizontaler Rand */
    margin-top: 0.5rem; /* mt-2 */
    max-width: 100vw;
  }
  .duellio-two-column-layout {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 w-full; /* Weniger Spaltenabstand */
    max-width: 99vw; /* Fast volle Breite */
    margin-left: auto;
    margin-right: auto;
    min-height: 80vh;
  }
  .duellio-left-column {
    @apply bg-white rounded-2xl shadow-lg p-3 md:p-5 flex flex-col overflow-y-auto border border-gray-100 flex-1 min-w-0;
    max-height: calc(90vh - 32px); /* Reduziere Gesamthöhe auf 90% */
    min-height: 60vh;
    padding-bottom: 2.5rem;
    /* Safari-Kompatibilität: WebKit-spezifische Overflow-Eigenschaften */
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
  }
  .duellio-right-column {
    @apply rounded-2xl shadow-lg p-0 flex flex-col overflow-hidden border flex-1 min-w-0;
    background: linear-gradient(135deg, #F9F8FC 0%, #EEF7FA 100%);
    border-color: #E5BDF0;
    position: relative;
    max-height: calc(90vh - 32px);
    min-height: 60vh;
    padding-bottom: 0;
    /* Safari-Kompatibilität: WebKit-spezifische Overflow-Eigenschaften */
    -webkit-overflow-scrolling: touch;
  }
  @media (max-width: 1023px) {
    .duellio-two-column-layout {
      max-width: 100vw;
      gap: 1.5rem;
    }
    .duellio-left-column, .duellio-right-column {
      max-height: none;
      min-height: 40vh;
      padding-bottom: 0;
    }
  }
  .duellio-task-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1rem;
  }
  .duellio-task-image-container {
    max-width: 40%;
    min-width: 100px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .duellio-task-image {
    max-width: 100%;
    max-height: 9rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px 0 rgba(80, 80, 120, 0.07);
    background: #f8fafc;
  }
  
  /* CI-konforme Task-Komponenten */
  .duellio-task-container-ci {
    @apply rounded-2xl shadow-lg border mb-6 overflow-hidden;
    border-color: #E5BDF0;
    background: white;
    min-height: auto;
    /* Safari-Kompatibilität: Explizite Höhenangabe statt fit-content */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  .duellio-task-header-ci {
    @apply flex items-center gap-3 px-6 py-4 text-white font-bold text-lg;
    background: linear-gradient(90deg, #D147B8 0%, #FFA726 100%);
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .duellio-task-header-ci svg {
    @apply h-6 w-6 text-white flex-shrink-0;
  }
  .duellio-task-content-ci {
    @apply p-6;
    color: #132544;
    background: white;
    line-height: 1.7;
    /* Safari-Kompatibilität: Flexbox-Eigenschaften für bessere Höhenbehandlung */
    display: block;
    flex-grow: 1;
    flex-shrink: 0;
  }
  .duellio-task-content-ci h1, 
  .duellio-task-content-ci h2, 
  .duellio-task-content-ci h3 {
    color: #D147B8;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  .duellio-task-content-ci h1:first-child,
  .duellio-task-content-ci h2:first-child,
  .duellio-task-content-ci h3:first-child {
    margin-top: 0;
  }
  .duellio-task-content-ci p {
    margin-bottom: 1rem;
  }
  .duellio-task-content-ci ul, 
  .duellio-task-content-ci ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }
  .duellio-task-content-ci li {
    margin-bottom: 0.5rem;
  }
  .duellio-task-content-ci code {
    @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
    color: #D147B8;
  }
  .duellio-task-content-ci pre {
    @apply bg-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
  }
  .duellio-task-content-ci blockquote {
    @apply border-l-4 pl-4 my-4 italic;
    border-left-color: #E5BDF0;
    color: #6b7280;
  }
  
  /* Integrierte Tipps-Sektion am unteren Ende der Task-Card */
  .duellio-task-tips-footer-ci {
    @apply border-t;
    border-color: rgba(255,255,255,0.2);
  }
  .duellio-task-tips-header-ci {
    @apply flex items-center gap-3 px-6 py-4 font-medium text-base cursor-pointer transition-all duration-200 rounded-b-2xl;
    background: linear-gradient(135deg, #FCE8F4 0%, #FFEED9 100%);
    border: 1px solid #E5BDF0;
    border-top: none;
    color: #D147B8;
    user-select: none;
  }
  .duellio-task-tips-header-ci:hover {
    background: linear-gradient(135deg, #F9E8F4 0%, #FFE9D4 100%);
    color: #FFA726;
    transform: translateY(-1px);
  }
  .duellio-task-tips-header-ci svg {
    @apply h-5 w-5 flex-shrink-0;
    color: #D147B8;
  }
  .duellio-task-tips-content-expanded-ci {
    @apply p-6 cursor-pointer transition-colors duration-200 rounded-b-2xl border;
    background: linear-gradient(135deg, #FCE8F4 0%, #FFEED9 100%);
    border-color: #E5BDF0;
    border-top: none;
    color: #132544;
    line-height: 1.7;
  }
  .duellio-task-tips-content-expanded-ci:hover {
    background: linear-gradient(135deg, #F9E8F4 0%, #FFE9D4 100%);
  }
  .duellio-task-tips-content-expanded-ci h1,
  .duellio-task-tips-content-expanded-ci h2,
  .duellio-task-tips-content-expanded-ci h3 {
    color: #D147B8;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
  }
  .duellio-task-tips-content-expanded-ci h1:first-child,
  .duellio-task-tips-content-expanded-ci h2:first-child,
  .duellio-task-tips-content-expanded-ci h3:first-child {
    margin-top: 0;
  }
  .duellio-task-tips-content-expanded-ci p {
    margin-bottom: 1rem;
  }
  .duellio-task-tips-content-expanded-ci ul,
  .duellio-task-tips-content-expanded-ci ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }
  .duellio-task-tips-content-expanded-ci li {
    margin-bottom: 0.5rem;
  }
  .duellio-task-tips-content-expanded-ci code {
    @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
    color: #D147B8;
  }
  .duellio-task-tips-content-expanded-ci pre {
    @apply bg-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
    color: #132544;
  }
  .duellio-task-tips-content-expanded-ci blockquote {
    @apply border-l-4 pl-4 my-4 italic;
    border-left-color: #E5BDF0;
    color: #6b7280;
  }
  
  .duellio-hint-box-ci {
    @apply rounded-xl p-4 mb-4 text-sm border;
    background: linear-gradient(135deg, #F0F9FF 0%, #EFF6FF 100%);
    border-color: #BAE6FD;
    color: #0C4A6E;
    line-height: 1.6;
  }
  .duellio-tips-expander-ci {
    @apply mb-4;
  }
  .duellio-tips-expander-ci summary {
    @apply cursor-pointer text-sm font-medium select-none flex items-center gap-2 p-3 rounded-lg transition-colors duration-150;
    color: #D147B8;
    background: linear-gradient(135deg, #FCE8F4 0%, #FFEED9 100%);
    border: 1px solid #E5BDF0;
  }
  .duellio-tips-expander-ci summary:hover {
    color: #FFA726;
    background: linear-gradient(135deg, #F9E8F4 0%, #FFE9D4 100%);
  }
  .duellio-tips-expander-ci[open] summary {
    @apply rounded-b-none border-b-0;
  }
  .duellio-tips-expander-ci .duellio-tips-content-ci {
    @apply p-4 border border-t-0 rounded-lg rounded-t-none;
    border-color: #E5BDF0;
    background: white;
    color: #132544;
    line-height: 1.6;
  }
  .duellio-tips-content-ci h1, 
  .duellio-tips-content-ci h2, 
  .duellio-tips-content-ci h3 {
    color: #D147B8;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  .duellio-tips-content-ci h1:first-child,
  .duellio-tips-content-ci h2:first-child,
  .duellio-tips-content-ci h3:first-child {
    margin-top: 0;
  }
  .duellio-tips-content-ci p {
    margin-bottom: 0.75rem;
  }
  .duellio-tips-content-ci ul, 
  .duellio-tips-content-ci ol {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
  }
  .duellio-tips-content-ci li {
    margin-bottom: 0.25rem;
  }
  .duellio-tips-content-ci code {
    @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
    color: #D147B8;
  }
  
  /* CI-konforme Challenge-Beschreibung-Expander */
  .duellio-challenge-description-expander-ci {
    @apply mb-3;
  }
  .duellio-challenge-description-expander-ci summary {
    @apply cursor-pointer text-sm font-medium select-none transition-colors duration-150;
    color: #D147B8;
  }
  .duellio-challenge-description-expander-ci summary:hover {
    color: #FFA726;
  }
  .duellio-challenge-description-expander-ci .duellio-challenge-description-content-ci {
    @apply mt-2;
    color: #132544;
    line-height: 1.6;
  }
  
  /* CI-konforme Trennlinie */
  .duellio-divider-ci {
    @apply my-6 border-0 h-px bg-gradient-to-r from-transparent via-duellio-border-accent to-transparent;
  }
  
  /* CI-konforme Aufgaben-Header-Komponenten */
  .duellio-task-number-ci {
    @apply text-sm font-medium mb-1 block;
    color: #6b7280;
  }
  .duellio-task-title-ci {
    @apply text-2xl font-bold break-words leading-snug mb-3;
    color: #132544;
    font-family: Inter, Segoe UI, Roboto, Arial, system-ui, sans-serif;
  }
  
  /* CI-konforme Antwortformular-Komponenten */
  .duellio-answer-container-ci {
    @apply rounded-2xl shadow-lg border mb-6 overflow-hidden;
    border-color: #E5BDF0;
    background: white;
    min-height: auto;
    /* Safari-Kompatibilität: Explizite Flex-Eigenschaften */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  .duellio-answer-header-ci {
    @apply flex items-center gap-3 px-6 py-4 font-bold text-lg;
    background: linear-gradient(90deg, #16A34A 0%, #22C55E 100%);
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .duellio-answer-header-ci svg {
    @apply h-6 w-6 text-white flex-shrink-0;
  }
  .duellio-answer-content-ci {
    @apply p-6;
    color: #132544;
    background: white;
  }
  .duellio-answer-description-ci {
    @apply text-sm mb-5;
    color: #6b7280;
    line-height: 1.6;
  }
  .duellio-answer-textarea-ci {
    @apply w-full border rounded-xl p-4 resize-none focus:outline-none focus:ring-2 transition-all duration-200 text-base;
    border-color: #E5BDF0;
    color: #132544;
    background: white;
    font-family: Inter, Segoe UI, Roboto, Arial, system-ui, sans-serif;
    line-height: 1.5;
    min-height: 140px;
  }
  .duellio-answer-textarea-ci:focus {
    border-color: #D147B8;
    box-shadow: 0 0 0 3px rgba(209, 71, 184, 0.1);
  }
  .duellio-answer-textarea-ci:disabled {
    @apply opacity-60 cursor-not-allowed bg-gray-50;
  }
  .duellio-answer-char-counter-ci {
    @apply absolute bottom-3 right-3 text-xs;
    color: #9ca3af;
  }
  .duellio-answer-buttons-ci {
    @apply flex flex-col sm:flex-row items-start sm:items-center gap-3 mt-4;
  }
  
  /* Session-Progress spezifische Komponenten */
  .duellio-progress-card {
    @apply bg-white border border-gray-200 rounded-lg shadow-sm p-4 transition-all duration-200 hover:shadow-md;
  }
  
  .duellio-progress-card-finished {
    @apply border-green-200 bg-green-50;
  }
  
  .duellio-progress-avatar {
    @apply h-10 w-10 rounded-full flex items-center justify-center text-white font-bold text-sm;
  }
  
  .duellio-progress-score-positive {
    @apply text-green-600 font-bold;
  }
  
  .duellio-progress-score-negative {
    @apply text-orange-600 font-bold;
  }
  
  .duellio-progress-score-neutral {
    @apply text-gray-400 font-medium;
  }
  
  .duellio-progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
  }
  
  .duellio-progress-bar-fill {
    @apply h-2 rounded-full transition-all duration-300 ease-out;
    background: linear-gradient(90deg, #D147B8 0%, #FFA726 100%);
  }
  
  .duellio-status-badge-active {
    @apply px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800;
  }
  
  .duellio-status-badge-finished {
    @apply px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800;
  }
  
  .duellio-status-badge-waiting {
    @apply px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800;
  }

  /* Legacy-Klassen (weiterhin verfügbar) */
  .duellio-task-label {
    @apply font-medium text-indigo-700 text-base mb-1 flex items-center gap-2;
  }
  .duellio-task-box {
    @apply bg-white border border-indigo-200 text-indigo-900 p-5 rounded-lg shadow-sm relative mb-4;
    border-left: 6px solid #6366f1; /* indigo-500 */
    box-shadow: 0 2px 8px 0 rgba(80, 80, 120, 0.07);
  }
  .duellio-task-hint {
    @apply bg-cyan-50 border-l-4 border-cyan-200 text-cyan-800 p-3 rounded mb-4 text-sm;
  }
  /* Modale Komponenten */
  .duellio-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(30, 41, 59, 0.45); /* indigo-900/45 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 100vw;
    padding: 1.5rem;
    overflow: auto;
    /* Safari-spezifische Fixes für stabiles Modal-Overlay */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* Verhindert Safari-Rendering-Probleme bei Scroll */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Stabile Hintergrundfarbe ohne Transparenz-Schwankungen */
    background-color: rgba(30, 41, 59, 0.45);
    background-image: none;
    /* Bessere Scrolling-Performance in Safari */
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    /* Verhindert Safari-spezifische Farb-Rendering-Optimierungen */
    will-change: auto;
    /* Zusätzliche Safari-Stabilisierung */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Feste Position ohne Scroll-Abhängigkeit */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .duellio-modal-content {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px 0 rgba(80, 80, 120, 0.18);
    max-width: 54rem;
    width: 100%;
    max-height: 98vh;
    overflow-y: auto;
    padding: 2.5rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .duellio-modal-header {
    gap: 1.5rem;
  }
  .duellio-modal-meta-item:not(:last-child)::after {
    content: '·';
    margin: 0 0.5em;
    color: #cbd5e1;
  }
  .duellio-modal-challenge-hint {
    @apply bg-cyan-50 border-l-4 border-cyan-300 text-cyan-700 px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .duellio-modal-challenge-hint-noborder {
    background-color: #ecfeff; /* bg-cyan-50 */
    color: #0e7490; /* text-cyan-700 */
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .duellio-modal-taskgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .duellio-modal-taskgrid {
      grid-template-columns: 1fr 1fr;
    }
  }
  .duellio-modal-taskdesc {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .duellio-modal-taskimage {
    width: 100%;
    min-height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .duellio-modal-image {
    max-width: 100%;
    max-height: 20rem;
    border-radius: 1rem;
    box-shadow: 0 2px 8px 0 rgba(80, 80, 120, 0.10);
    background: #f8fafc;
  }
  .duellio-modal-footer {
    margin-top: 2.5rem;
  }
  .duellio-modal-start-btn {
    font-size: 1.15rem;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px 0 rgba(80, 80, 120, 0.10);
  }
  .duellio-input {
    @apply w-full rounded-xl border border-duellio-border-accent px-4 py-2 text-base text-duellio-text bg-white focus:outline-none focus:ring-2 focus:ring-duellio-primary focus:border-duellio-primary transition-shadow duration-150 shadow-sm;
    font-family: Inter, Segoe UI, Roboto, Arial, system-ui, sans-serif;
    min-width: 0;
    box-sizing: border-box;
  }
  
  /* CI-konforme Tab-Navigation */
  .duellio-tab-button {
    @apply whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150 flex items-center;
  }
  .duellio-tab-active {
    border-color: #D147B8;
    color: #D147B8;
    --tw-ring-color: #D147B8;
  }
  .duellio-tab-inactive {
    border-color: transparent;
    color: #6B7280;
  }
  .duellio-tab-inactive:hover {
    color: #374151;
    border-color: #D1D5DB;
  }
  
  /* CI-konforme Tabelle für Rechnungen */
  .duellio-table-ci {
    @apply w-full rounded-xl overflow-hidden shadow-lg border;
    border-color: #E5BDF0;
    background: white;
  }
  .duellio-table-header-ci {
    @apply text-left py-3 px-4 font-semibold text-sm uppercase tracking-wide;
    background: linear-gradient(90deg, #D147B8 0%, #FFA726 100%);
    color: white;
  }
  .duellio-table-row-ci {
    @apply border-t;
    border-color: #F3F4F6;
  }
  .duellio-table-row-ci:hover {
    background: linear-gradient(135deg, #FEFCFF 0%, #F8F5FF 100%);
  }
  .duellio-table-cell-ci {
    @apply py-3 px-4 text-sm;
    color: #132544;
  }

  /* CI-konforme Challenge-Header-Expander */
  .duellio-challenge-header-expander-ci {
    @apply rounded-2xl shadow-lg border mb-6 overflow-hidden;
    border-color: #E5BDF0;
    background: white;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  
  .duellio-challenge-header-expander-ci summary {
    @apply cursor-pointer select-none flex items-center justify-between px-6 py-4 font-bold text-lg transition-all duration-200 list-none;
    background: linear-gradient(135deg, #F3E8FF 0%, #E0E7FF 50%, #F0F9FF 100%);
    color: #7C3AED;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
    outline: none;
  }
  
  .duellio-challenge-header-expander-ci summary:hover {
    background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 50%, #E0F2FE 100%);
    color: #6D28D9;
  }
  
  .duellio-challenge-header-expander-ci summary::-webkit-details-marker {
    display: none;
  }
  
  .duellio-challenge-header-expander-ci .duellio-challenge-header-content-ci {
    @apply flex items-center gap-4 flex-1;
  }
  
  .duellio-challenge-header-expander-ci .duellio-task-number-badge-ci {
    @apply flex items-center justify-center w-10 h-10 rounded-full font-bold text-white text-sm flex-shrink-0;
    background: linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
  }
  
  .duellio-challenge-header-expander-ci .duellio-challenge-title-header-ci {
    @apply text-lg font-bold flex-1 min-w-0;
    color: #7C3AED;
    font-family: Inter, Segoe UI, Roboto, Arial, system-ui, sans-serif;
  }
  
  .duellio-challenge-header-expander-ci .duellio-expand-icon-ci {
    @apply w-6 h-6 text-current transition-transform duration-200 flex-shrink-0;
  }
  
  .duellio-challenge-header-expander-ci[open] .duellio-expand-icon-ci {
    transform: rotate(180deg);
  }
  
  .duellio-challenge-header-expander-ci .duellio-challenge-expanded-content-ci {
    @apply p-6;
    color: #132544;
    background: white;
    line-height: 1.7;
    display: block;
    flex-grow: 1;
    flex-shrink: 0;
  }
  
  .duellio-challenge-header-expander-ci .duellio-task-info-layout-ci {
    @apply flex flex-row gap-4 items-start;
  }
  
  .duellio-challenge-header-expander-ci .duellio-task-info-text-ci {
    @apply flex-1 min-w-0;
  }
  
  .duellio-challenge-header-expander-ci .duellio-task-image-container-expanded-ci {
    @apply flex-shrink-0 ml-4 max-w-[40%] min-w-[100px];
  }
  
  .duellio-challenge-header-expander-ci .duellio-task-image-expanded-ci {
    @apply max-w-full rounded-lg shadow-sm object-contain;
    max-height: 10rem;
    background: #f8fafc;
  }

}

/* Weitere Utility-Klassen können hier hinzugefügt werden */

/* Toast-Animations für School Admin */
.duellio-toast {
  @apply fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300;
}

.duellio-toast-success {
  @apply bg-green-500 text-white;
}

.duellio-toast-error {
  @apply bg-red-500 text-white;
}

/* CI-konforme Info-Box für wichtige Informationen */
  .duellio-info-box-ci {
    @apply rounded-2xl shadow-lg border mb-6 overflow-hidden;
    border-color: #E5BDF0;
    background: linear-gradient(135deg, #F9F8FC 0%, #EEF7FA 100%);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  
  .duellio-info-box-header-ci {
    @apply flex items-center gap-3 px-6 py-4 font-bold text-lg;
    background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  
  .duellio-info-box-header-ci svg {
    @apply h-6 w-6 text-white flex-shrink-0;
  }
  
  .duellio-info-box-content-ci {
    @apply p-6;
    color: #132544;
    background: white;
    line-height: 1.7;
  }
  
  .duellio-info-list-ci {
    @apply space-y-4 mb-0;
  }
  
  .duellio-info-list-item-ci {
    @apply flex items-start gap-3;
  }
  
  .duellio-info-list-bullet-ci {
    @apply inline-block w-2 h-2 rounded-full mt-2 flex-shrink-0;
    background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
  }
  
  .duellio-info-highlight-ci {
    @apply rounded-xl p-4 border-l-4 font-medium;
    background: linear-gradient(135deg, #FEF3C7 0%, #FEF9C3 100%);
    border-left-color: #F59E0B;
    color: #92400E;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
  }
  
  .duellio-info-highlight-ci strong {
    @apply font-bold;
    color: #78350F;
  }

  /* CI-konformer Live-Statistik-Button (Card-ähnlich mit Button-Funktionalität) */
  .duellio-live-stats-button-ci {
    @apply w-full rounded-2xl shadow-lg border p-6 cursor-pointer transition-all duration-200 text-center font-bold text-lg text-white;
    border-color: rgba(255,255,255,0.3);
    background: linear-gradient(90deg, #D147B8 0%, #FFA726 100%);
    box-shadow: 0 4px 16px rgba(209,71,184,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 4rem;
  }
  
  .duellio-live-stats-button-ci:hover {
    @apply transform scale-[1.02] shadow-xl;
    background: linear-gradient(90deg, #E052C7 0%, #FFB347 100%);
    box-shadow: 0 6px 20px rgba(209,71,184,0.25);
  }
  
  .duellio-live-stats-button-ci svg {
    @apply h-6 w-6 flex-shrink-0 text-white;
  }

  /* Trust Bar Komponenten für Index-Seite */
  .duellio-trust-bar-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center text-white font-bold;
    background: linear-gradient(135deg, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* 3-Schritte Card Styling */
  .duellio-step-card {
    @apply relative;
  }

  .duellio-step-number {
    @apply absolute -top-4 left-1/2 transform -translate-x-1/2 bg-duellio-primary text-white rounded-full w-8 h-8 flex items-center justify-center font-bold text-lg z-10;
    box-shadow: 0 2px 8px rgba(209, 71, 184, 0.2);
  }

  /* Responsive Image Container für Challenge Screenshots */
  .duellio-challenge-screenshot {
    @apply rounded-lg shadow-sm transition-all duration-200;
  }

  .duellio-challenge-screenshot:hover {
    @apply shadow-lg transform scale-[1.02];
  }