/* public/css/phase-generic.css - Basis für alle Phasen */

:root { /* Farbpalette */
	--phase-0-bg: #100d1a;
   --phase-0-text: #ede9fe;
   --phase-0-text-light: #b8a9d6;
   --phase-0-text-secondary: #a7a0cc;
   --phase-0-primary: #a07fff;
   --phase-0-primary-glow: rgba(160, 127, 255, 0.15); /* Dezenter Glow */
   --phase-0-border: #302847;
   --phase-0-card-bg: rgba(26, 22, 41, 0.6); /* Leicht transparent */
   --phase-0-transition: 0.3s ease-out;
   --phase-1-bg: linear-gradient(135deg, #0f0b1a 0%, #1e172e 100%);
   --phase-1-card-bg: rgba(31, 26, 45, 0.8);
   --phase-1-card-border: rgba(48, 40, 71, 0.5);
   --phase-1-primary: #a07fff;
   --phase-1-primary-hover: #b594ff;
   --phase-1-primary-light: #c4b5fd;
   --phase-1-text: #f5f3ff;
   --phase-1-text-light: #d1c7f0;
   --phase-1-text-secondary: #a7a0cc;
   --phase-1-input-bg: rgba(43, 36, 64, 0.6);
   --phase-1-input-border: rgba(74, 65, 92, 0.4);
   --phase-1-input-focus: var(--phase-1-primary);
   --phase-1-success: #34d399;
   --phase-1-error: #ff6b6b;
   --phase-1-glass: rgba(255, 255, 255, 0.05);
   --phase-1-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
   --phase-1-transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    --phase-bg: #100d1a; --phase-card-bg: #1a1629; --phase-border: #302847;
    --phase-accent-gold: #facc15; --phase-accent-gold-light: #fde047;
    --phase-text: #ede9fe; --phase-text-secondary: #aea6d4; --phase-text-tertiary: #7a719b;
    --phase-success: #34d399; --phase-error: #f87171;
    --phase-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    --phase-transition: 0.3s ease-out;
}

.phase-section {
    background: var(--phase-0-bg);
   color: var(--phase-0-text);
   padding: 0px 0px 00px 0px; /* Angepasstes Padding */
   text-align: center;
   min-width: 120%;
   border-top: 1px solid var(--phase-0-border);
   position: relative;
   overflow: hidden; /* Verhindert überlaufende Effekte */
   min-height: 200px; /* Mindesthöhe für bessere Darstellung */
   
   display: flex; /* Zentrierung des Containers */
   align-items: center;
   justify-content: center;
   transform: scale(0.8) translate(-10%, 0%);
   -webkit-mask-image: linear-gradient(
   to right,
   transparent 0%,
   black 10%,
   black 90%,
   transparent 100%
 );
 mask-image: linear-gradient(
   to right,
   transparent 0%,
   black 10%,
   black 90%,
   transparent 100%
 );
}

.phase-section:before {
  content: ''; position: absolute; top: -30%; left: 50%; width: 180%; height: 120%;
   background: radial-gradient(circle, var(--phase-0-primary-glow) 0%, transparent 55%);
   transform: translateX(-50%) rotate(15deg); pointer-events: none; opacity: 0.5;
}

.phase-container {
   max-width: 800px;
   width: 100%;
   margin: 0 auto;
   background: var(--phase-1-card-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   padding: 40px;
   border-radius: 16px;
   border: 1px solid var(--phase-1-card-border);
   box-shadow: var(--phase-1-shadow);
   position: relative;
   z-index: 1;
   overflow: hidden;
   transition: var(--phase-1-transition);
    max-width: 1000px; /* Etwas breiter */
   margin: 0 auto;
   position: relative;
   z-index: 1;
   background: var(--phase-0-card-bg);
   padding: 40px 45px; /* Mehr Innenabstand */
   border-radius: 16px; /* Abgerundet */
   border: 1px solid var(--phase-0-border);
   box-shadow: 0 10px 30px rgba(0,0,0,0.3);
   backdrop-filter: blur(5px); /* Hintergrund leicht verschwimmen lassen */
   -webkit-backdrop-filter: blur(5px);
   transform: scale(0.9);
}
.phase-container.compact-container { max-width: 700px; } /* Für kompaktere Blöcke */

.phase-header { margin-bottom: 30px; text-align: center; }
.phase-number-badge { /* ... Badge Style ... */ }
.phase-header h2 { font-size: 1.8rem; font-weight: 600; color: #fff; margin: 10px 0 8px 0; }
.phase-header p { font-size: 1rem; color: var(--phase-text-light); line-height: 1.6; max-width: 550px; margin: 0 auto; }
.subtle-info { font-size: 0.8rem; color: var(--phase-text-tertiary); margin-top: 15px; }

.phase-countdown { margin-bottom: 30px; /* Standardabstand */ }
.phase-countdown.large .countdown-timer-digits { font-size: 3.5rem; /* Größerer Timer */ }
.phase-countdown.large .countdown-timer-digits .unit { font-size: 0.9rem; }

.phase-actions { margin-top: 30px; text-align: center; }
.cta-button { /* Basis CTA Styles */
     display: inline-flex; align-items: center; gap: 10px; padding: 12px 30px;
     background: var(--phase-primary); color: white; border: none; border-radius: 8px;
     font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: var(--phase-transition);
     box-shadow: 0 4px 12px rgba(160, 127, 255, 0.2);
}
.cta-button:hover { background: var(--phase-primary-light); transform: translateY(-2px); box-shadow: 0 7px 20px rgba(160, 127, 255, 0.3); }
.cta-button.large { padding: 15px 40px; font-size: 1rem; }
.cta-button.jury-cta { background: linear-gradient(135deg, var(--phase-accent-gold), var(--phase-accent-gold-light)); color: var(--phase-bg); box-shadow: 0 5px 15px rgba(250, 204, 21, 0.3); }
.cta-button.jury-cta:hover { box-shadow: 0 8px 25px rgba(250, 204, 21, 0.4); }
.cta-button i { margin-left: 8px; }

.phase-error-message { /* ... Fehlerstyles ... */ }


/* public/css/phase-2.css - Styling für Phase 2 (Übergang zum Voting) */

/* --- Header --- */
.phase-header.centered {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  padding-bottom: 20px;
}

.phase-header.centered::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--phase-1-primary) 50%, transparent 100%);
}

.phase-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
  letter-spacing: -0.4px;
  background: linear-gradient(90deg, #fff 0%, var(--phase-1-text-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.phase-header p {
  font-size: 0.95rem;
  color: var(--phase-1-text-light);
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
  opacity: 0.9;
}

.subtle-info {
  font-size: 0.85rem;
  color: var(--phase-1-text-secondary);
  margin-top: 8px;
  opacity: 0.8;
}

/* --- Countdown --- */
.phase-countdown.large {
  margin: 0 auto 32px;
  padding: 20px;
  background: var(--phase-1-glass);
  border-radius: 12px;
  border: 1px solid var(--phase-1-card-border);
  width: fit-content;
  position: relative;
  overflow: hidden;
}

.phase-countdown.large::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(160, 127, 255, 0.08) 0%, transparent 100%);
  z-index: -1;
}

.countdown-label {
  font-size: 0.9rem;
  color: var(--phase-1-primary-light);
  margin-bottom: 8px;
  font-weight: 500;
  text-align: center;
}

.countdown-timer-digits.phase2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

.countdown-timer-digits.phase2 .sep {
  color: var(--phase-1-text-secondary);
  margin: 0 4px;
  position: relative;
  top: -1px;
}

.countdown-timer-digits.phase2 .unit {
  color: var(--phase-1-text-secondary);
  font-size: 0.8rem;
  font-weight: 400;
  margin-left: 2px;
  position: relative;
  top: -3px;
}

.countdown-status-text {
  font-size: 0.9rem;
  color: var(--phase-1-text-secondary);
  padding: 10px;
}

/* --- Jury Button --- */
.phase-actions.centered {
  text-align: center;
  margin-top: 24px;
}

.cta-button.large.jury-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  background: linear-gradient(135deg, var(--phase-1-primary) 0%, #7d5fff 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--phase-1-transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cta-button.large.jury-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--phase-1-primary-hover) 0%, #8a6eff 100%);
  opacity: 0;
  transition: var(--phase-1-transition);
  z-index: -1;
}

.cta-button.large.jury-cta:hover::before {
  opacity: 1;
}

.cta-button.large.jury-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(160, 127, 255, 0.25);
}

.cta-button.large.jury-cta:active {
  transform: translateY(0);
}

/* --- Fehlermeldung --- */
.phase-error-message {
  color: var(--phase-1-error);
  background-color: rgba(255, 107, 107, 0.1);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 107, 107, 0.2);
  margin-bottom: 20px;
}

/* --- Responsive Anpassungen --- */
@media (max-width: 768px) {
  .compact-container {
    padding: 30px;
  }
  
  .phase-header h2 {
    font-size: 1.6rem;
  }
  
  .countdown-timer-digits.phase2 {
    font-size: 1.8rem;
  }
  
  .cta-button.large.jury-cta {
    padding: 14px 24px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .phase-section.phase-submission-ended {
    padding: 30px 12px;
  }
  
  .compact-container {
    padding: 24px 16px;
  }
  
  .phase-countdown.large {
    padding: 16px;
  }
  
  .countdown-timer-digits.phase2 {
    font-size: 1.5rem;
    flex-wrap: wrap;
    gap: 2px;
  }
  
  .countdown-timer-digits.phase2 .sep {
    display: none;
  }
  
  .countdown-timer-digits.phase2 .unit {
    font-size: 0.7rem;
    display: block;
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: -4px;
  }
  
  .phase-header h2 {
    font-size: 1.4rem;
  }
  
  .cta-button.large.jury-cta {
    width: 100%;
  }
}

.phase-number-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--phase-1-primary) 0%, #6e56cf 100%);
  color: white;
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 16px;
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(160, 127, 255, 0.25);
}

/* Teaser für nächstes Event */
.next-event-teaser {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-subtle);
}
.next-event-teaser p {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    font-style: italic;
}
hr.content-divider.short-divider { /* Kurze Linie wiederverwenden */
    border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border-subtle), transparent);
    margin: 0 auto var(--space-md) auto; opacity: 0.7; max-width: 150px;
}

/* --- Login Prompt für Voting --- */
.login-prompt-voting {
   text-align: center;
   padding: 20px;
   background: var(--phase-1-glass);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border-radius: 12px;
   border: 1px solid var(--phase-1-card-border);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   margin-top: 24px;
   transition: var(--phase-1-transition);
}

.login-prompt-voting:hover {
   transform: translateY(-1px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.login-prompt-voting p {
   margin: 0;
   color: var(--phase-1-text-light);
   font-size: 0.95rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.login-prompt-voting a {
   color: var(--phase-1-primary-light);
   font-weight: 600;
   text-decoration: none;
   padding: 2px 4px;
   border-radius: 4px;
   transition: color 0.2s ease;
}

.login-prompt-voting a:hover {
   color: var(--phase-1-primary);
   text-decoration: underline;
}

.login-prompt-voting i {
   font-size: 1.1em;
   color: var(--phase-1-primary-light);
}

/* --- Voting Status Info Container --- */
.voting-status-info {
   text-align: center;
   padding: 16px 20px;
   margin-top: 32px;
   margin-bottom: 20px;
   border-radius: 12px;
   border: 1px solid;
   font-size: 0.9rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: var(--phase-1-transition);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.voting-status-info.pending {
   background: rgba(255, 193, 7, 0.1);
   border-color: rgba(255, 193, 7, 0.3);
   color: #ffc107;
}

.voting-status-info.pending i {
   color: #ffc107;
   animation: pulse 2s infinite;
}

.voting-status-info.completed {
   background: rgba(52, 211, 153, 0.1);
   border-color: rgba(52, 211, 153, 0.3);
   color: #34d399;
}

.voting-status-info.completed i {
   color: #34d399;
}

@keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.6; }
}

/* Responsive Anpassung für mobil */
@media (max-width: 480px) {
   .voting-status-info {
      padding: 14px 16px;
      font-size: 0.85rem;
      flex-direction: column;
      gap: 6px;
   }
   
   .voting-status-info i {
      margin-bottom: 4px;
   }
}