/* ==========================================================================
   NIS-2 Lieferanten Landing Page Styles
   Reuses design tokens & utilities from style.css
   ========================================================================== */

/* ---------- Hero ---------- */
#nis2-hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8rem;
}

.nis2-hero-content {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.nis2-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #fff;
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

#nis2-hero h1 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.nis2-hero-sub {
  font-size: 1.15rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.nis2-hero-sub strong {
  color: var(--color-accent);
  font-weight: 700;
}

.nis2-hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Generic content blocks ----------
   All section content fills the .container width so every section
   shares the same left and right edges (no per-block max-width caps). */
.nis2-prose {
  max-width: none;
}

.nis2-prose p {
  color: var(--text-body);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.nis2-prose p:last-child {
  margin-bottom: 0;
}

.nis2-prose strong {
  color: var(--text-primary);
}

.nis2-lede {
  font-size: 1.15rem !important;
  color: var(--text-primary) !important;
}

/* ---------- Check-coverage / outcome lists ---------- */
.nis2-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nis2-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
}

.nis2-list-item .nis2-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #000;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 2px;
}

.nis2-list-item p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-body);
  line-height: 1.6;
}

.nis2-list-item strong {
  color: var(--text-primary);
}

/* For-whom cards */
.nis2-fuerwen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.nis2-fuerwen-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.75rem;
}

.nis2-fuerwen-card p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-body);
  line-height: 1.65;
}

.nis2-fuerwen-card strong {
  color: var(--text-primary);
}

/* ==========================================================================
   Self-Check Widget
   ========================================================================== */
.selfcheck-intro {
  margin: 0 0 2.5rem;
  color: var(--text-body);
  font-size: 1.05rem;
  line-height: 1.7;
}

.selfcheck-intro strong {
  color: var(--text-primary);
}

.selfcheck {
  max-width: none;
}

/* Sticky live counter */
.sc-counter {
  position: sticky;
  top: 4.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--color-accent);
  border-radius: 12px;
  padding: 0.85rem 1.25rem;
  margin-bottom: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.sc-counter-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sc-counter-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Question sections */
.sc-section + .sc-section {
  margin-top: 2rem;
}

.sc-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.sc-question {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
}

.sc-question-text {
  display: block;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.sc-question-text .sc-num {
  color: var(--color-accent);
  font-weight: 700;
  margin-right: 0.4rem;
}

.sc-options {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sc-option {
  flex: 1 1 0;
  min-width: 90px;
  cursor: pointer;
}

.sc-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sc-option-label {
  display: block;
  text-align: center;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-body);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
  user-select: none;
}

.sc-option:hover .sc-option-label {
  border-color: var(--color-accent-light);
  color: var(--text-primary);
}

.sc-option input:focus-visible + .sc-option-label {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 2px;
}

/* Selected states per answer */
.sc-option input:checked + .sc-option-label {
  color: #fff;
  border-color: transparent;
}

.sc-option input[value="ja"]:checked + .sc-option-label {
  background: #2f9e44;
}

.sc-option input[value="teilweise"]:checked + .sc-option-label {
  background: #e8a32a;
  color: #1c1c26;
}

.sc-option input[value="nein"]:checked + .sc-option-label {
  background: #5c5c6b;
}

/* Evaluate button */
.sc-actions {
  margin-top: 2rem;
  text-align: center;
}

.sc-evaluate {
  font-size: 1rem;
  padding: 0.9rem 2.2rem;
}

.sc-evaluate:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--color-accent);
}

.sc-actions-hint {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ---------- Result block ---------- */
.sc-result {
  margin: 2.5rem 0 0;
  scroll-margin-top: 6rem;
}

.sc-result[hidden] {
  display: none;
}

.sc-result-note {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.sc-tier {
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid var(--border-default);
  background: var(--bg-card);
}

.sc-tier[hidden] {
  display: none;
}

.sc-tier-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.sc-tier-emoji {
  font-size: 1.8rem;
  line-height: 1;
}

.sc-tier-score {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.sc-tier h3 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.sc-tier p {
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.sc-tier .btn {
  font-size: 0.95rem;
}

/* tier accent edges */
.sc-tier-gruen { border-left: 4px solid #2f9e44; }
.sc-tier-gelb  { border-left: 4px solid #e8a32a; }
.sc-tier-rot   { border-left: 4px solid #e03131; }

/* ==========================================================================
   Case stories (hidden until available, per spec)
   ========================================================================== */
.nis2-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.nis2-case-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.75rem;
}

.nis2-case-card p {
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.nis2-case-card a {
  color: var(--color-accent);
  font-weight: 600;
}

/* ==========================================================================
   FAQ accordion (native details/summary)
   ========================================================================== */
.nis2-faq {
  max-width: none;
}

.nis2-faq-item {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-elevated);
  margin-bottom: 1rem;
  overflow: hidden;
}

.nis2-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nis2-faq-item summary::-webkit-details-marker {
  display: none;
}

.nis2-faq-item summary::after {
  content: "+";
  color: var(--color-accent);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

.nis2-faq-item[open] summary::after {
  content: "\2212"; /* minus */
}

.nis2-faq-item .nis2-faq-body {
  padding: 0 1.4rem 1.3rem;
  color: var(--text-body);
  line-height: 1.7;
  font-size: 0.96rem;
}

/* ==========================================================================
   Second CTA
   ========================================================================== */
.nis2-cta-content {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.nis2-cta-content h2 {
  margin-bottom: 1rem;
}

.nis2-cta-text {
  color: var(--text-body);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2.25rem;
}

.nis2-cta-text strong {
  color: var(--text-primary);
}

.nis2-footer-meta {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 1.5rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  #nis2-hero h1 {
    font-size: 2rem;
  }

  .nis2-fuerwen-grid {
    grid-template-columns: 1fr;
  }

  .nis2-cases {
    grid-template-columns: 1fr;
  }

  /* Counter docks to the bottom on mobile (spec) */
  .sc-counter {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  #nis2-hero h1 {
    font-size: 1.6rem;
  }

  .nis2-hero-sub {
    font-size: 1rem;
  }

  .nis2-hero-cta {
    flex-direction: column;
    gap: 0;
  }

  .sc-options {
    flex-direction: column;
  }
}