/* ===================================================
   detailbericht.css  –  Helles Farbschema
   Ergänzt website-security-report.css (gemeinsame
   Klassen wie .btn-full, .btn-outline, .demo-banner
   sind dort bereits definiert).
   =================================================== */

:root{
--color-border-tertiary: #e2e8f0;
--border-radius-lg:12px;
--color-text-primary:#1a1a18;
--color-text:#1a1a18;
--color-text-secondary:#5f5e5a;
--color-text-tertiary:#666;
--color-text-danger:#a32d2d;
  --color-text-ok:     #3b6d11;
  --color-text-success:     #3b6d11;
  --color-text-warn:   #854f0b;
  --color-text-warning:   #854f0b;
  --color-text-info:   #185fa5;

 --color-border:      rgba(0,0,0,.12);
 --color-border-primary:      rgba(0,0,0,.12);
  --color-border-secondary:  rgba(0,0,0,.2);
  --color-border-ok:   #c0dd97;
  --color-border-success:   #c0dd97;
  --color-border-warn: #fac775;
  --color-border-warning: #fac775;
  --color-border-danger:#f7c1c1;
  --color-border-info: #b5d4f4;
--border-radius-md:8px;
--r-md:8px;
--r-lg:12px;
  --color-background:          #ffffff;
  --color-background-primary:#ffffff;
  --color-background-secondary:      #f7f6f3;
  --color-background-tertiary:     #f0efe9;
  --color-background-success:  #eaf3de;
  --color-background-warning:  #faeeda;
  --color-background-danger:   #fcebeb;
  --color-background-info:     #e6f1fb;
}
body {
  background1: #f8fafc;
  background: var(--color-background-tertiary);
  color: var(--color-text);
  color: #1e293b;
  padding: 2rem 1rem;
}

.v3wrap {
  max-width: 820px;
  margin: 0 auto;
}

/* Logo-Zeile */
.v3topbar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.v3report-label {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.v3logo {
  max-height: 28px;
  opacity: 0.65;
}

/* Topbar */
.v3topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom1: 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  background: var(--color-background);

  border: 0.5px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: .875rem 1.1rem;
  margin-bottom: 10px;  
}
.v3icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.v3meta { flex: 1; }
.v3meta h1 {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}
.v3meta p {
  font-size: 12px;
  color: #64748b;
  margin-top: 1px;
}
.v3date {
  text-align: right;
  font-size: 12px;
  color: #94a3b8;
  flex-shrink: 0;
}
.v3date strong {
  display: block;
  color: #475569;
  font-weight: 500;
}

/* Score-Strip */
.v3strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 0.5px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 10px;
}
.v3sc {
  background: #ffffff;
  border1: 1px solid #e2e8f0;
  border-radius1: 8px;
  padding: 0.875rem 1rem;
}
.v3sc .sv {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #0f172a;
}
.v3sc .sl {
  font-size: 11px;
  color: #64748b;
  margin-top: 3px;
}
.v3sc .ss {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.v3sc .sv.cve-danger { color: #dc2626; }

.v3seclabel {
  font-size: 10px;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.v3divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.25rem 0;
}

/* Navigations-Buttons */
.v3navlinks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* Buttons (analog website-security-report.css) */
.btn-full {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 9px;
  background: #1d4ed8;
  border: 1px solid #1d4ed8;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-full:hover { background: #1e40af; border-color: #1e40af; }

.btn-outline {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-outline:hover { background: #f1f5f9; }

/* Demo-Banner */
.demo-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  color: #1d4ed8;
  margin-bottom: 1.25rem;
  text-align: center;
}

/* Footer */
.v3footer {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin-top: 1.5rem;
}



    .area-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 1rem 1.1rem;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .area-ok   { border-color: #0f6e5644; background: #04342c22; }
    .area-warn { border-color: #ba751744; background: #41240222; }
    .area-crit { border-color: #a32d2d55; background: #50131322; }
    .area-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
    .area-body h3 { font-size: 13px; font-weight: 600; color: #f1f5f9; margin-bottom: 3px; }
    .area-body p  { font-size: 12px; color: #94a3b8; line-height: 1.5; }
    .area-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 9px;
      border-radius: 20px;
      margin-top: 7px;
    }
    .badge-ok   { background: #0f6e5622; color: #5dcaa5; border: 1px solid #0f6e5644; }
    .badge-warn { background: #ba751722; color: #ef9f27; border: 1px solid #ba751744; }
    .badge-crit { background: #a32d2d22; color: #f09595; border: 1px solid #a32d2d44; }


    .action-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 9px 0;
      border-bottom: 0.5px solid var(--color-border);
    }
    .action-item:last-child { border-bottom: none; padding-bottom: 0; }
    .prio-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 6px;
    }


.action-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
}
.action-item:last-child { border-bottom: none; padding-bottom: 0; }
.prio-high { background: #ef4444; }
.prio-mid  { background: #f59e0b; }
.prio-low  { background: #10b981; }
.prio-ok   { background: #10b981; }
.action-text p    { font-size: 13px; color: #1e293b; line-height: 1.5; }
.action-text span { font-size: 11px; color: #94a3b8; }



.area-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.area-ok   { border-color: #bbf7d0; background: #f0fdf4; }
.area-warn { border-color: #fde68a; background: #fffbeb; }
.area-crit { border-color: #fecaca; background: #fff1f2; }

.area-body p  { font-size: 12px; color: #64748b; line-height: 1.5; }

.area-body h3 { font-size: 13px; font-weight: 600; color: #0f172a; margin-bottom: 3px; }
.area-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  margin-top: 7px;
}
.badge-ok   { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.badge-warn { background: #fef9c3; color: #a16207; border: 1px solid #fde68a; }
.badge-crit { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

.footer-note {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom1: 1rem;
  line-height: 1.6;
  font-size1: 11px; color: var(--c-text-sec); line-height: 1.55;
  padding: .55rem .875rem;
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border);
  border-radius: var(--r-md);
  margin-bottom: 1.25rem;

}
.ch-container-header {
border-bottom: 0.5px solid var(--color-border);
  background: var(--color-background-secondary);
}
.ch-block.ch-neutral {
  background: var(--color-background-secondary);
  border-color: var(--color-border);
}
.ch-block.ch-ok {
  background: var(--color-background-success);
  border-color: var(--color-border-ok);
}
.ch-block.ch-warn {
  background: var(--color-background-warning);
  border-color: var(--color-border-warning);
}
.ch-block.ch-crit {
  background: var(--color-background-danger);
  border-color: var(--color-border-danger);
}
.ch-summary,.ch-summary:hover {
background:unset;
background:initial;
}
.are-inner {
  flex: 1;
}

.nav-btn {
  flex: 1; text-align: center; padding: 9px 14px;
  border-radius: var(--r-md); font-size: 12px; font-weight: 500;
  text-decoration: none; border: 0.5px solid var(--color-border-secondary);
  color: var(--c-text); background: var(--color-background-secondary);
}
.nav-btn.primary { background: var(--color-background-info); border-color: var(--color-border-secondary) }