/* Bare block – bessere Lesbarkeit, große Buttons */
.nis2c-bare { max-width: 880px; }
.nis2c-wrap { position: relative; }

.nis2c-card{
  background:#fff;
  border:1px solid #e6e8ee;
  border-radius:18px;
  padding:clamp(18px,2.2vw,28px);
  box-shadow:0 10px 28px rgba(16,24,40,.08);
  font-size:16.5px;
  line-height:1.7;
  color:#1f2937;
}

/* Titel + (Badge separat; Back nicht mehr hier) */
.title-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }

/* Badge in eigener Reihe */
.badge-row{ margin-bottom: 2px; }

.q-title{
  margin:0;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.01em;
}

/* Fließtext/Links */
.q-details{ margin-top:6px; font-size:17px; color:#374151; }
.q-details p{ margin:.5rem 0; }
.q-details a{ color:#155EEF; text-decoration: underline; text-underline-offset:2px; }
.q-details ul{ margin:.5rem 0 .5rem 1.1rem; list-style:disc; }
.q-details li{ margin:.25rem 0; }
.q-more{ margin:.45rem 0 .2rem; }
.more-link{
  border:0;
  background:transparent;
  color:#155EEF;
  padding:0;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.more-link:hover{ color:#0f4bc7; }

/* Antworten: Ja / Nein / Zurück (gleich groß) */
.answers{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.btn{
  appearance:none;
  border:0;
  background:#0f172a;
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s cubic-bezier(.22,.61,.36,1), background .2s;
  box-shadow:0 4px 14px rgba(2,6,23,.12);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,6,23,.16); }
.btn:active{ transform:translateY(0); }
.btn.ghost{ background:#fff; color:#0f172a; border:1px solid #d0d5dd; }
.btn.huge{ font-size:19px; padding:16px 22px; border-radius:14px; }
.back-answer{}
.back-answer {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  width: 56px;
  text-align: center;
  padding: 16px 0;
}
.back-answer svg { vertical-align: middle; }
.back-answer:hover {
  transform: translateX(-2px);
}

/* Ergebnis-Row (CTA links, Restart rechts) */
.row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.row.between{ justify-content:space-between; }
.btn.cta{
  background:#155EEF;
  border:1px solid #155EEF;
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  display:inline-block;
}
.btn.cta:hover{ filter:brightness(0.95); }

/* Badges */
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; margin-right:10px; font-size:14px; }
.badge.good{ background:#e7f9ee; color:#05603a; border:1px solid #abefc6; }
.badge.bad{ background:#fee4e2; color:#7a271a; border:1px solid #fecdc8; }
.badge.warn{ background:#fff1e6; color:#8a5300; border:1px solid #ffd19b; }

.notes{ margin:12px 0 0 18px; color:#374151; }
.legal{ margin-top:10px; font-size:12.5px; color:#6b7280; }
.err{ color:#b42318; }

.nis2c-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.nis2c-modal[hidden]{ display:none !important; }
body.nis2c-modal-open{ overflow:hidden; }
.nis2c-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2, 6, 23, .56);
}
.nis2c-modal-dialog{
  position:relative;
  max-width:760px;
  width:100%;
  max-height:min(85vh, 860px);
  overflow:auto;
  background:#fff;
  border-radius:16px;
  border:1px solid #d0d5dd;
  box-shadow:0 20px 40px rgba(2,6,23,.22);
  padding:18px 18px 20px;
}
.nis2c-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.nis2c-modal-title{
  margin:0;
  font-size:clamp(20px, 2.4vw, 28px);
  line-height:1.2;
  color:#111827;
}
.nis2c-modal-close{
  border:1px solid #d0d5dd;
  background:#fff;
  color:#111827;
  width:36px;
  height:36px;
  border-radius:10px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.nis2c-modal-body{
  margin-top:10px;
  color:#1f2937;
  line-height:1.65;
}
.nis2c-modal-body p{ margin:.5rem 0; }
.nis2c-modal-body ul{ margin:.5rem 0 .5rem 1.1rem; list-style:disc; }
.nis2c-modal-body a{ color:#155EEF; text-decoration:underline; text-underline-offset:2px; }

/* Responsiv */
@media (max-width: 560px){
  .answers{ flex-direction:column; }
  .answers .btn.huge{ width:100%; text-align:center; }
  .row.between{ flex-direction:column; gap:12px; }
  .row.between .btn, .row.between .btn.cta{ width:100%; text-align:center; }
  .nis2c-modal-dialog{ padding:14px 14px 16px; }
}