/* =========================================================
   WhyGermany – Unwritten Rules (Brand-Aligned Edition)
   Matches the premium look of future.html and site theme
   ========================================================= */

/* === HERO SECTION === */
.wg-hero-unwritten {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: 60px;
  overflow: hidden;
  background: linear-gradient(rgba(10, 31, 68, 0.92), rgba(10, 31, 68, 0.85)), 
              url('../img/unwritten/hero-street.jpg') center center / cover no-repeat;
}

.wg-hero-card {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 20px;
}

.wg-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: #ffcc00;
  background: rgba(255, 204, 0, 0.15);
  border: 1px solid rgba(255, 204, 0, 0.3);
  margin-bottom: 20px;
}

.wg-hero-title {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(36px, 5vw, 64px);
  margin: 16px 0 12px;
  text-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.wg-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  margin: 0 auto 24px;
  max-width: 760px;
}

/* === CTA BUTTONS (Match future.html style) === */
.wg-cta-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 8px;
  background: var(--wg-red);
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(221, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.wg-cta-gold:hover {
  background: var(--wg-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(221, 0, 0, 0.4);
  color: #ffffff;
  text-decoration: none;
}

.wg-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  color: #ffffff;
  transition: all 0.3s ease;
}

.wg-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff;
  text-decoration: none;
}

/* === MODULE NAVIGATION === */
.wg-module-nav-wrap {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.wg-module-nav-title {
  font-weight: 800;
  color: var(--wg-navy);
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.wg-module-nav {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.wg-module-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid rgba(10, 31, 68, 0.15);
  background: #ffffff;
  color: var(--wg-navy);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.wg-module-pill span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: var(--wg-navy);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.wg-module-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--wg-navy);
  text-decoration: none;
}

.wg-module-nav-hint {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--wg-grey);
}

/* === SECTION TITLES === */
.wg-module-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--wg-gold-dark);
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.wg-module-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.5vw, 48px);
  color: var(--wg-navy);
  line-height: 1.2;
  margin-bottom: 16px;
}

/* === GLASS CARDS (Match site theme) === */
.wg-sim-panel,
.wg-dark-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  padding: 24px;
  transition: all 0.3s ease;
}

.wg-sim-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* === TOGGLE BUTTONS === */
.wg-toggle {
  display: inline-flex;
  padding: 6px;
  border-radius: 12px;
  background: rgba(10, 31, 68, 0.08);
  gap: 6px;
}

.wg-toggle-btn {
  border: none;
  background: transparent;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--wg-grey);
  cursor: pointer;
  transition: all 0.3s ease;
}

.wg-toggle-btn.is-active {
  background: var(--wg-navy);
  color: #ffffff;
}

/* === SIMULATION LIST === */
.wg-sim-list {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.wg-sim-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.wg-sim-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 31, 68, 0.08);
  color: var(--wg-navy);
  flex-shrink: 0;
  font-size: 20px;
}

.wg-sim-item h4 {
  font-size: 1.1rem;
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--wg-navy);
}

.wg-sim-item p {
  margin: 0;
  color: var(--wg-grey);
  line-height: 1.5;
}

/* === IMAGE CARDS === */
.wg-image-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.wg-image-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.wg-image-card:hover img {
  transform: scale(1.05);
}

.wg-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 28px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 100%);
  color: #fff;
}

.wg-image-title {
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.wg-image-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* === TASK SYSTEM (Module 2) === */
.wg-task-list {
  display: grid;
  gap: 14px;
}

.wg-task {
  width: 100%;
  border: 2px solid rgba(10, 31, 68, 0.15);
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  text-align: left;
  cursor: grab;
  transition: all 0.3s ease;
}

.wg-task:hover {
  border-color: var(--wg-navy);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.wg-task:active {
  cursor: grabbing;
}

.wg-task.is-active {
  border-color: var(--wg-gold);
  background: rgba(255, 204, 0, 0.05);
}

.wg-task-ico {
  font-size: 22px;
  width: 40px;
  display: grid;
  place-items: center;
  color: var(--wg-navy);
}

.wg-task-txt strong {
  display: block;
  font-weight: 800;
  color: var(--wg-navy);
  margin-bottom: 4px;
}

.wg-task-txt small {
  display: block;
  color: var(--wg-grey);
  font-size: 0.9rem;
}

/* === DROP ZONES === */
.wg-dropzone {
  border-radius: 16px;
  min-height: 220px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  border: 3px dashed rgba(10, 31, 68, 0.2);
  transition: all 0.3s ease;
}

.wg-dropzone:hover {
  border-color: var(--wg-navy);
  background: rgba(255, 255, 255, 0.7);
}

.wg-dropzone-sat {
  background: rgba(10, 31, 68, 0.04);
  border-color: var(--wg-navy);
}

.wg-dropzone-sun {
  background: rgba(255, 204, 0, 0.08);
  border-color: var(--wg-gold);
}

.wg-dropzone-head {
  margin-bottom: 16px;
}

.wg-dropzone-head .fw-semibold {
  font-weight: 800;
  color: var(--wg-navy);
  font-size: 1.1rem;
}

.wg-dropzone-watermark {
  position: absolute;
  right: 20px;
  top: 20px;
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 72px;
  opacity: 0.05;
  user-select: none;
  color: var(--wg-navy);
}

.wg-dropzone-items {
  display: grid;
  gap: 12px;
}

.wg-dropchip {
  border-radius: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border: 2px solid rgba(10, 31, 68, 0.12);
  font-weight: 700;
  color: var(--wg-navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* === ALERTS === */
.wg-alert {
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wg-alert-danger {
  background: rgba(221, 0, 0, 0.1);
  border: 2px solid rgba(221, 0, 0, 0.3);
  color: var(--wg-red-dark);
}

.wg-alert-info {
  background: rgba(37, 99, 235, 0.1);
  border: 2px solid rgba(37, 99, 235, 0.3);
  color: #1e40af;
}

.wg-alert-success {
  background: rgba(16, 185, 129, 0.1);
  border: 2px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
}

/* === BARS (Humidity/Temperature) === */
.wg-bar {
  height: 20px;
  background: rgba(10, 31, 68, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.wg-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.8s ease;
}

.wg-bar-humidity {
  background: linear-gradient(90deg, #e11d48, #dc2626);
}

.wg-bar-wall {
  background: linear-gradient(90deg, #f97316, #fb923c);
}

/* === CONTROL BUTTONS === */
.wg-control-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.wg-control-btn {
  border: 2px solid rgba(10, 31, 68, 0.2);
  background: #ffffff;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 800;
  color: var(--wg-navy);
  cursor: pointer;
  transition: all 0.3s ease;
}

.wg-control-btn:hover {
  border-color: var(--wg-navy);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wg-control-btn.is-active {
  background: var(--wg-navy);
  color: #ffffff;
  border-color: var(--wg-navy);
}

/* === DARK SECTIONS === */
.wg-dark-section {
  background: linear-gradient(180deg, var(--wg-navy), rgba(6, 18, 42, 1));
  color: #ffffff;
}

.wg-dark-section .wg-module-kicker {
  color: var(--wg-gold);
}

.wg-dark-section .wg-module-title {
  color: #ffffff;
}

.wg-dark-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

/* === BINS (Module 4) === */
.wg-bins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.wg-bin {
  border-radius: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 3px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  min-height: 180px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.wg-bin:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.wg-bin[data-bin="yellow"] {
  border-color: rgba(255, 204, 0, 0.6);
}

.wg-bin[data-bin="blue"] {
  border-color: rgba(59, 130, 246, 0.6);
}

.wg-bin[data-bin="brown"] {
  border-color: rgba(249, 115, 22, 0.6);
}

.wg-bin[data-bin="black"] {
  border-color: rgba(148, 163, 184, 0.4);
}

.wg-bin-ico {
  font-size: 32px;
  margin-bottom: 12px;
}

.wg-bin-name {
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.wg-bin-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.wg-bin-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

.wg-pill-item {
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  background: #ffffff;
  color: var(--wg-navy);
  font-weight: 800;
  min-width: 200px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: grab;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wg-pill-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.wg-pill-item:active {
  cursor: grabbing;
}

.wg-result {
  font-weight: 800;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 24px;
}

.wg-result.ok {
  color: #34d399;
}

.wg-result.bad {
  color: #fb7185;
}

/* === MODULE 5: PUBLIC TRANSPORT === */
.wg-slider {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(to right, #dbeafe, #3b82f6);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.wg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  transition: all 0.2s ease;
}

.wg-slider::-webkit-slider-thumb:hover {
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
  transform: scale(1.15);
}

.wg-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  transition: all 0.2s ease;
}

.wg-slider::-moz-range-thumb:hover {
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
  transform: scale(1.15);
}

.wg-buffer-display {
  padding: 16px 20px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.wg-buffer-value {
  color: #3b82f6 !important;
}

.wg-commute-result {
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid;
  font-weight: 600;
  line-height: 1.6;
}

.wg-commute-result.success {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
  color: #166534;
}

.wg-commute-result.failure {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #7f1d1d;
}

.wg-lesson-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wg-lesson-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: rgba(10, 31, 68, 0.75);
}

.wg-lesson-list li:last-child {
  margin-bottom: 0;
}

/* === PAYMENT OPTIONS === */
.wg-pay-list {
  display: grid;
  gap: 14px;
}

.wg-pay-option {
  border: 2px solid rgba(10, 31, 68, 0.15);
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wg-pay-option:hover {
  border-color: var(--wg-navy);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.wg-pay-option.is-active {
  border-color: var(--wg-gold);
  background: rgba(255, 204, 0, 0.05);
}

.wg-pay-badge {
  width: 56px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
}

.wg-pay-message {
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 700;
  border: 2px solid rgba(10, 31, 68, 0.12);
  background: rgba(10, 31, 68, 0.05);
  color: var(--wg-navy);
  margin-top: 16px;
}

/* === CHOICES (Module 7) === */
.wg-choice-list {
  display: grid;
  gap: 12px;
}

.wg-choice {
  border-radius: 12px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
  text-align: left;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wg-choice:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.wg-tag {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
}

.wg-tag-urgent {
  background: rgba(251, 113, 133, 0.2);
  color: #fecdd3;
  border: 1px solid rgba(251, 113, 133, 0.4);
}

.wg-tag-standard {
  background: rgba(255, 204, 0, 0.2);
  color: #fde68a;
  border: 1px solid rgba(255, 204, 0, 0.4);
}

.wg-tag-planning {
  background: rgba(147, 122, 204, 0.2);
  color: #ddd6fe;
  border: 1px solid rgba(147, 122, 204, 0.4);
}

/* === EQUIPMENT CARDS (Module 8) === */
.wg-choice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.wg-equip-card {
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  border: 3px solid rgba(10, 31, 68, 0.15);
  background: #ffffff;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wg-equip-card:hover {
  border-color: var(--wg-navy);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.wg-equip-card.is-active {
  border-color: var(--wg-gold);
  background: rgba(255, 204, 0, 0.05);
}

.wg-equip-ico {
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--wg-navy);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .wg-hero-unwritten {
    min-height: 75vh;
    padding-top: 100px;
  }

  .wg-module-title {
    font-size: 2rem;
  }

  .wg-bins {
    grid-template-columns: repeat(2, 1fr);
  }

  .wg-choice-cards {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CRITICAL VISIBILITY FIXES - MUST BE AT THE END
   ========================================================= */

/* Force visibility for ALL sections on this page ONLY */
main.main,
.main,
section.section,
#hero, #modules, #module-1, #module-2, #module-3, #module-4, 
#module-6, #module-7, #module-8 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure sections have proper spacing and background */
.section {
  background: white !important;
  padding: 60px 0 !important;
}

/* Dark sections (Modules 4 & 7) - OVERRIDE any other styles */
#module-4, 
#module-7,
.wg-dark-section {
  background: linear-gradient(180deg, #0a1f44 0%, #081a38 100%) !important;
  color: white !important;
}

/* Make ALL text white in dark sections */
#module-4 *, 
#module-7 *,
.wg-dark-section * {
  color: white !important;
}

/* Fix specific text colors in dark sections */
#module-4 .text-white-50,
#module-7 .text-white-50,
.wg-dark-section .text-white-50 {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Ensure hero section is fully visible */
.wg-hero-unwritten {
  min-height: 85vh !important;
  padding-top: 120px !important;
  padding-bottom: 60px !important;
  position: relative !important;
}

/* Make sure interactive elements are clickable */
.wg-control-btn,
.wg-task,
.wg-pill-item,
.wg-pay-option,
.wg-choice,
.wg-equip-card {
  cursor: pointer !important;
}

/* Fix for Module 3 bars visibility */
.wg-bar {
  background: rgba(10, 31, 68, 0.12) !important;
}

.wg-bar-fill {
  transition: width 0.8s ease !important;
}

/* Make alerts properly visible/hidden */
.wg-alert.d-none {
  display: none !important;
}

.wg-alert:not(.d-none) {
  display: flex !important;
}

/* Fix dark cards text contrast */
.wg-dark-section .wg-dark-card {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wg-dark-section .wg-dark-card .fw-semibold {
  color: #ffffff !important;
}

.wg-dark-section .wg-dark-card p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* =========================================================
   END OF UNWRITTEN RULES CSS
   ========================================================= */

/* ==========================================================================
   UNWRITTEN RULES PAGE FIXES
   ========================================================================== */

/* Fix dark sections on Unwritten Rules page */
.wg-dark-section {
  background: linear-gradient(180deg, #0a1f44 0%, #081a38 100%) !important;
  color: #ffffff !important;
}

/* Ensure ALL text in dark sections is white */
.wg-dark-section,
.wg-dark-section *:not(button):not(.btn) {
  color: #ffffff !important;
}

/* Specific fixes for Unwritten Rules dark text */
.wg-dark-section .text-secondary,
.wg-dark-section .text-muted,
.wg-dark-section .text-white-50,
.wg-dark-section .small,
.wg-dark-section .lead,
.wg-dark-section p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Headings in dark sections */
.wg-dark-section h1,
.wg-dark-section h2,
.wg-dark-section h3,
.wg-dark-section h4,
.wg-dark-section h5,
.wg-dark-section h6,
.wg-dark-section .wg-module-title {
  color: #ffffff !important;
}

/* Kicker/Module labels */
.wg-dark-section .wg-module-kicker {
  color: var(--wg-gold) !important;
}

/* Glass cards in dark sections */
.wg-dark-section .glass-card {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Dark cards in dark sections */
.wg-dark-section .wg-dark-card {
  background: rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Feedback text */
.wg-dark-section .wg-dark-feedback,
.wg-dark-section .wg-result {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Tags in dark sections */
.wg-dark-section .wg-tag {
  color: #ffffff !important;
}

/* Choice buttons in dark sections */
.wg-dark-section .wg-choice {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wg-dark-section .wg-choice:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Equipment cards */
.wg-dark-section .wg-equip-card {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wg-dark-section .wg-equip-card.is-active {
  background: rgba(255, 204, 0, 0.15) !important;
  border-color: var(--wg-gold) !important;
}

/* Alerts in dark sections */
.wg-dark-section .wg-alert {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wg-dark-section .wg-alert-danger {
  background: rgba(220, 53, 69, 0.2) !important;
  border-color: rgba(220, 53, 69, 0.4) !important;
}

.wg-dark-section .wg-alert-success {
  background: rgba(25, 135, 84, 0.2) !important;
  border-color: rgba(25, 135, 84, 0.4) !important;
}

/* CTA buttons in dark sections */
.wg-dark-section .wg-cta-ghost-dark {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  font-weight: 700 !important;
}

.wg-dark-section .wg-cta-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffffff !important;
}

/* Bin items in dark sections */
.wg-dark-section .wg-bin {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wg-dark-section .wg-pill-item {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wg-dark-section .wg-pill-item:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Bin items text */
.wg-dark-section .wg-bin-name,
.wg-dark-section .wg-bin-sub {
  color: #ffffff !important;
}

/* Pay options in dark sections */
.wg-dark-section .wg-pay-option {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wg-dark-section .wg-pay-option:hover,
.wg-dark-section .wg-pay-option.is-active {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--wg-gold) !important;
}

/* Payment message */
.wg-dark-section .wg-pay-message {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Image overlay text in dark sections */
.wg-dark-section .wg-image-overlay .wg-image-title,
.wg-dark-section .wg-image-overlay .wg-image-text {
  color: #ffffff !important;
}

/* Remove the script-based fix from HTML and rely on CSS */

/* ==========================================================================
   PERMANENT FIX: UNWRITTEN RULES PAGE TEXT VISIBILITY
   ========================================================================== */

/* 1. Force ALL sections visible with proper styling */
section#module-1,
section#module-2,
section#module-3,
section#module-4,
section#module-6,
section#module-7,
section#module-8 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 2. Fix Module 7 specifically - it's being hidden somehow */
section#module-7.wg-dark-section {
  background: linear-gradient(180deg, #0a1f44 0%, #081a38 100%) !important;
  color: #ffffff !important;
  min-height: 400px !important;
  padding: 60px 0 !important;
}

/* 3. Force ALL text in Module 7 to be visible white */
section#module-7 * {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 4. Fix text color inheritance in dark sections */
.wg-dark-section,
.wg-dark-section *:not(.btn):not(button):not(a.btn) {
  color: #ffffff !important;
}

.wg-dark-section p,
.wg-dark-section .text-secondary,
.wg-dark-section .text-muted,
.wg-dark-section .text-white-50,
.wg-dark-section .small,
.wg-dark-section .lead {
  color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
}

/* 5. Headings in dark sections */
.wg-dark-section h1,
.wg-dark-section h2,
.wg-dark-section h3,
.wg-dark-section h4,
.wg-dark-section h5,
.wg-dark-section h6,
.wg-dark-section .wg-module-title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 6. Fix the hero section text */
.wg-hero-unwritten,
.wg-hero-unwritten .wg-hero-card,
.wg-hero-unwritten .wg-hero-card * {
  color: #ffffff !important;
}

.wg-hero-unwritten .wg-hero-title,
.wg-hero-unwritten .wg-hero-subtitle,
.wg-hero-unwritten .wg-hero-badge {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* 7. Fix button text contrast */
.wg-hero-unwritten .wg-cta-gold {
  background-color: var(--wg-gold) !important;
  color: var(--wg-navy) !important;
  font-weight: 700 !important;
}

.wg-hero-unwritten .wg-cta-ghost {
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  background: transparent !important;
}

/* 8. Make sure Bootstrap text utilities don't override */
.text-dark {
  color: var(--wg-black) !important;
}

/* But in dark sections, override to white */
.wg-dark-section .text-dark {
  color: #ffffff !important;
}

/* 9. Remove any potential hiding */
section {
  display: block !important;
  overflow: visible !important;
}

/* 10. Debug helper (remove after confirming fix works) */
section:not([style*="display: none"]) {
  outline: 1px solid rgba(255, 0, 0, 0.1) !important;
}

/* ==========================================================================
   FIX: MODULE OVERFLOW CLIPPING (ABRUPT CUTOFF)
   ========================================================================== */

/* Remove overflow clipping from ALL sections */
section,
.section {
  overflow: visible !important;
  min-height: auto !important;
}

/* Specifically target unwritten rules modules */
#module-1,
#module-2,
#module-3,
#module-4,
#module-6,
#module-7,
#module-8 {
  overflow: visible !important;
  padding-bottom: 80px !important; /* Add more space at bottom */
}

/* Ensure containers don't clip content */
.container,
.container-fluid,
.row,
.col-*,
[class*="col-"] {
  overflow: visible !important;
}

/* Fix image cards that might be cutting off content */
.wg-image-card {
  overflow: hidden !important;
  position: relative !important;
  border-radius: 8px;
  width: 100% !important;
  min-height: 400px !important;
}

/* Fix the image overlay text positioning */
.wg-image-card .wg-image-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1.5rem !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent) !important;
  z-index: 2 !important;
}

/* Ensure all images have proper aspect ratio and don't overflow */
.wg-image-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Glass card content should be fully visible */
.glass-card,
.wg-dark-card {
  overflow: visible !important;
  position: relative !important;
  padding-bottom: 2rem !important;
}

/* Task lists and interactive elements */
.wg-task-list,
.wg-dropzone,
.wg-sim-panel {
  overflow: visible !important;
}

/* Fix for dropzone content */
.wg-dropzone-items {
  min-height: 120px !important;
  padding-bottom: 1rem !important;
}

/* Alert boxes at bottom of modules */
.wg-alert {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Add breathing room between modules */
.section + .section {
  margin-top: 1px !important; /* Fix any gap issues */
}

/* Hero section specific fixes */
.wg-hero-unwritten {
  min-height: 85vh !important;
  overflow: visible !important;
}

.wg-hero-card {
  position: relative !important;
  z-index: 10 !important;
  margin-bottom: 3rem !important;
}

/* Fix for the compass grid if it exists */
.compass-grid {
  overflow: visible !important;
}

/* Ensure all text containers have proper line height and spacing */
p, .lead, .text-secondary {
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

/* Fix for lists */
.wg-sim-list,
.wg-task-list,
.wg-choice-list {
  padding-bottom: 1rem !important;
}

/* Specific fix for Module 1 season image */
#module-1 .wg-image-card {
  height: auto !important;
}

#module-1 img {
  min-height: 500px !important;
  max-height: 600px !important;
  object-position: center !important;
}

/* Debug border to see module boundaries (remove after fixing) */
/*
section[id^="module-"] {
  border: 2px dashed rgba(255, 204, 0, 0.3) !important;
  background: rgba(255, 204, 0, 0.05) !important;
}
*/
/* ==========================================================================
   UNWRITTEN RULES - SPECIFIC LAYOUT FIXES
   ========================================================================== */

/* Module content spacing */
.wg-module-title {
  margin-bottom: 1.5rem !important;
}

.wg-module-kicker {
  margin-bottom: 0.75rem !important;
}

/* Card content spacing */
.wg-sim-item,
.wg-task,
.wg-pill-item,
.wg-choice,
.wg-equip-card {
  margin-bottom: 0.75rem !important;
}

/* Last item in lists shouldn't have bottom margin */
.wg-sim-item:last-child,
.wg-task:last-child,
.wg-pill-item:last-child,
.wg-choice:last-child,
.wg-equip-card:last-child {
  margin-bottom: 0 !important;
}

/* Image card height fix */
.wg-image-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.wg-image-card img {
  flex: 1 !important;
  min-height: 300px !important;
}

/* Row height synchronization */
.row.align-items-stretch > .col-lg-6 {
  display: flex !important;
  flex-direction: column !important;
}

.row.align-items-stretch > .col-lg-6 > * {
  flex: 1 !important;
}

/* Fix for columns that should be equal height */
.row.g-4.align-items-stretch {
  align-items: stretch !important;
}

.row.g-4.align-items-stretch > div {
  display: flex !important;
  flex-direction: column !important;
}

.row.g-4.align-items-stretch > div > * {
  flex: 1 !important;
}

/* =========================================================
   TYPOGRAPHY SYNC (Starter Page alignment)
   - Keep font stacks consistent with starter-page.html
   ========================================================= */
:root{
  --wg-body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --wg-heading-font: "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body{
  font-family: var(--wg-body-font);
  font-size: 1rem; /* matches Bootstrap base */
  line-height: 1.6;
}

/* Bootstrap-like heading sizing */
.wg-hero-title{
  font-family: var(--wg-heading-font);
  font-size: calc(1.375rem + 1.5vw); /* h1 */
  line-height: 1.08;
}

.wg-module-title{
  font-family: var(--wg-heading-font);
  font-size: calc(1.325rem + .9vw); /* h2 */
  line-height: 1.15;
}

/* =========================================================
   ALERT TONES
   ========================================================= */
.wg-alert-warn{
  background: rgba(245, 158, 11, 0.12);
  border: 2px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
}

/* Optional: status text for Module 2 */
#ruhezeitStatus.ok{ color: #065f46; }
#ruhezeitStatus.bad{ color: var(--wg-red-dark); }


/* ================================
   Click-through overlays (fix)
   ================================ */
.wg-hero-overlay,
.wg-hero-fade,
.wg-image-overlay {
  pointer-events: none !important;
}


/* FORCE hero background to win over theme overrides */
section#hero.hero.section {
  background: linear-gradient(rgba(10,31,68,.9), rgba(10,31,68,.8)),
              url('../UR1.png') center center / cover no-repeat !important;
  min-height: 85vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

section#hero.hero.section .company-badge {
  margin-top: 40px !important;
}

@media (max-width: 768px) {
  section#hero.hero.section {
    min-height: auto !important;
    display: block !important;
    padding-top: 110px !important;
    padding-bottom: 28px !important;
  }

  section#hero.hero.section .company-badge {
    margin-top: 0 !important;
  }
}

/* =========================================================
   MODULE 2: Compact cards + reset button
   ========================================================= */
#module-2 .glass-card.p-4 {
  padding: 12px !important;
}

#module-2 .wg-task-list {
  gap: 6px;
}

#module-2 .wg-task {
  padding: 5px 8px;
}

#module-2 .wg-task-ico {
  width: 24px;
  font-size: 14px;
}

#module-2 .wg-task-txt strong {
  margin-bottom: 2px;
  font-size: 0.85rem;
}

#module-2 .wg-task-txt small {
  font-size: 0.72rem;
}

#module-2 .wg-mobile-hint {
  margin-top: 8px !important;
}

#module-2 .wg-dropzone {
  min-height: 110px !important;
  padding: 8px;
}

#module-2 .wg-dropzone-head {
  margin-bottom: 6px;
}

#module-2 .wg-dropzone-watermark {
  font-size: 38px;
}

#module-2 .wg-dropzone-items {
  min-height: 52px !important;
  gap: 5px;
  padding-bottom: 0.1rem !important;
}

#module-2 .wg-ruhezeit-reset {
  min-width: 110px;
  white-space: nowrap;
  border: none;
  border-radius: 12px;
  padding: 10px 22px;
  font-weight: 700;
  background: var(--wg-navy);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(10, 31, 68, 0.2);
  transition: all 0.2s ease;
}

#module-2 .wg-ruhezeit-reset:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 31, 68, 0.28);
}

#module-2 .wg-ruhezeit-reset:active {
  transform: translateY(0);
}

#module-2 #ruhezeitStatus {
  padding: 6px 8px !important;
  font-size: 0.88rem;
}

@media (max-width: 767px) {
  #module-2 .wg-ruhezeit-reset {
    width: 100%;
  }
}

@media (min-width: 992px) {
  #module-2.section {
    padding: 28px 0 !important;
  }
}

#module-2 .wg-module-title {
  margin-bottom: 10px !important;
  font-size: clamp(22px, 2vw, 32px);
}

#module-2 .text-secondary.mb-0 {
  margin-top: 6px !important;
  font-size: 0.95rem;
  line-height: 1.4;
}

#module-2 .row.g-4 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0.75rem;
}

/* Module 7 image sizing */
#module-7 .wg-termin-image {
  height: auto !important;
}

#module-7 .wg-termin-image img {
  width: 100%;
  height: auto !important;
  object-fit: contain;
  display: block;
}

#module-7 .wg-image-card {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

#module-7 .row.g-4 {
  align-items: stretch;
}

#module-7 .col-lg-7 {
  display: flex;
  flex-direction: column;
}

#module-7 .wg-termin-right {
  justify-content: space-between;
}

/* Module 7 compact view */
#module-7.section {
  padding: 28px 0 !important;
}

#module-7 .wg-module-title {
  font-size: clamp(24px, 2.2vw, 34px);
  margin-bottom: 10px;
}

#module-7 .text-white-50 {
  font-size: 0.9rem;
  line-height: 1.4;
}

#module-7 .wg-dark-card {
  padding: 12px;
}

#module-7 .wg-choice {
  padding: 10px 12px;
}

#module-7 .wg-choice-list {
  gap: 8px;
}

#module-7 .wg-termin-image img {
  max-height: 170px;
}

#module-7 .wg-dark-card.mt-4 {
  margin-top: 12px !important;
}

#module-7 .wg-dark-feedback {
  margin-top: 8px !important;
}

@media (max-width: 991px) {
  #module-7.section {
    padding: 28px 0 !important;
  }

  #module-7 .wg-termin-image img {
    max-height: 160px;
  }
}