/* ============================================================
   Marketing-Website
   Wird per @import am Ende von app.css eingebunden.
   ============================================================ */

.site-header__nav-divider {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.site-header__login {
  background: var(--neon, #9EFF00);
  color: var(--bg, #040404) !important;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill, 999px);
  font-weight: 700;
  border: 0;
}
.site-header__login:hover {
  background: #b6ff33;
  color: var(--bg, #040404) !important;
  text-decoration: none;
}

/* ----- Hero ----- */
.hero {
  padding: 5rem 1.4rem 3.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(158,255,0,0.08), transparent 60%),
    var(--bg, #040404);
}
.hero--small { padding: 3rem 1.4rem 1.5rem; }
.hero__inner {
  max-width: 880px;
  margin: 0 auto;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--neon, #9EFF00);
  margin: 0 0 0.8rem;
  font-weight: 700;
}
.hero__title {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero__accent { color: var(--neon, #9EFF00); }
.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-muted, #cfd2cf);
  margin: 0 0 2rem;
}
/* app.css setzt .hero__lead auf max-width:42rem + margin:0 auto; die margin-
   Kurzform oben würde die Auto-Zentrierung aufheben → im Hero wieder mittig. */
.hero .hero__lead { margin-inline: auto; }
.hero__cta {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 1.5rem;
}
.hero__trust {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1.5rem 0 0;
}
.button--large { padding: 1rem 1.8rem; font-size: 1.05rem; }
.button--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.button--ghost:hover {
  background: rgba(158,255,0,0.08);
  border-color: var(--neon, #9EFF00);
  color: var(--text);
}

/* ----- Sections ----- */
.section { padding: 4rem 1.4rem; }
.section--alt { background: rgba(255,255,255,0.02); }
.section--cta {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(158,255,0,0.07), transparent 70%);
  text-align: center;
  padding: 5rem 1.4rem;
}
.section--cta h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 1rem;
}
.section__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.section__inner--narrow { max-width: 720px; }
.section__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 0 0 2rem;
  font-weight: 700;
}
.section__cta { margin-top: 2rem; text-align: center; }

/* ----- Benefit Grid (Drei Vorteile) ----- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.benefit-card {
  padding: 1.8rem;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius, 24px);
  border: 1px solid var(--border);
}
.benefit-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0.8rem;
  color: #ffffff;
}
.benefit-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.benefit-card h3 {
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
  color: var(--neon, #9EFF00);
}
.benefit-card p { margin: 0; line-height: 1.55; }

/* ----- Wächter-Standorte (3 Länder, Screenshot-Stil) ----- */
.watchtower-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.watchtower-card {
  position: relative;
  padding: 1.9rem 1.7rem 1.7rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius, 24px);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.watchtower-card:hover {
  transform: translateY(-3px);
  border-color: rgba(158, 255, 0, 0.45);
}
/* Leuchtende Neon-Oberkante wie im Vorbild. */
.watchtower-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--neon, #9EFF00) 20%,
    var(--neon, #9EFF00) 80%,
    transparent
  );
  box-shadow: 0 0 14px rgba(158, 255, 0, 0.55);
}
.watchtower-card__code {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--text, #f4f4f4);
  margin: 0.3rem 0 1rem;
}
.watchtower-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: var(--text, #f4f4f4);
}
.watchtower-card__net {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--neon, #9EFF00);
  margin: 0 0 0.85rem;
}
.watchtower-card__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}
.watchtower-intro {
  text-align: left;
  max-width: 760px;
  margin: 0 0 2rem;
}
.watchtower-note {
  max-width: 760px;
  margin-top: 1.6rem;
}
@media (prefers-reduced-motion: reduce) {
  .watchtower-card { transition: none; }
  .watchtower-card:hover { transform: none; }
}

/* ----- Steps (Wie funktioniert es) ----- */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.steps li {
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius, 24px);
  padding: 1.8rem;
  border: 1px solid var(--border);
  position: relative;
}
.steps__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  background: var(--neon, #9EFF00);
  color: var(--bg, #040404);
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}
.steps h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}
.steps p { margin: 0; line-height: 1.55; }

/* ----- Audience Grid ----- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.audience-card {
  padding: 1.6rem;
  border-left: 4px solid var(--neon, #9EFF00);
  background: rgba(255,255,255,0.02);
  border-radius: 0 var(--radius, 24px) var(--radius, 24px) 0;
}
.audience-card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
}
.audience-card p { margin: 0; line-height: 1.55; }

/* ----- Check-Lists ----- */
.check-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem 1.5rem;
}
.check-list li {
  position: relative;
  padding-left: 1.8rem;
  line-height: 1.5;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--neon, #9EFF00);
  font-weight: 800;
  font-size: 1.2rem;
}
.check-list--small li { font-size: 0.92rem; }

/* ----- Pricing-Teaser (Startseite) ----- */
.pricing-teaser__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
}
.pricing-teaser__card {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 24px);
  text-align: center;
}
.pricing-teaser__card--best {
  border-color: var(--neon, #9EFF00);
  background: rgba(158,255,0,0.05);
}
.pricing-teaser__count {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.pricing-teaser__price { font-size: 1.3rem; margin: 0; }
.pricing-teaser__price strong { font-size: 2rem; color: var(--neon, #9EFF00); }
.pricing-teaser__hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

/* ----- Pricing-Cards (Kosten-Seite) ----- */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.pricing-cards--two {
  /* Zwei Karten nebeneinander, mittig, breiter */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .pricing-cards--two { grid-template-columns: 1fr; }
}
.pricing-card {
  position: relative;
  padding: 2rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 24px);
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column;
}
.pricing-card--best {
  border-color: var(--neon, #9EFF00);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(158,255,0,0.1), transparent 70%),
    rgba(255,255,255,0.02);
}
.pricing-card__badge {
  position: absolute;
  top: -0.7rem; right: 1.2rem;
  background: var(--neon, #9EFF00);
  color: var(--bg, #040404);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pricing-card__head { margin-bottom: 1.2rem; }
.pricing-card__count {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.pricing-card__price { margin: 0; line-height: 1.1; }
.pricing-card__price strong {
  font-size: 2.6rem;
  color: var(--neon, #9EFF00);
  font-weight: 800;
}
.pricing-card__price span {
  font-size: 0.95rem;
  color: var(--muted);
  margin-left: 0.4rem;
}
.pricing-card__sub { font-size: 0.82rem; color: var(--muted); margin: 0.4rem 0 0; }
.pricing-card__list {
  list-style: none;
  padding: 0; margin: 0 0 1.5rem;
  flex: 1;
}
.pricing-card__list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.6rem;
  line-height: 1.45;
  font-size: 0.95rem;
  border-bottom: 1px dashed var(--border);
}
.pricing-card__list li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--neon, #9EFF00);
  font-weight: 800;
}
.pricing-card__list li:last-child { border-bottom: 0; }

/* ----- Q&A (FAQ + Pricing) ----- */
.qa {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border);
}
.qa:last-child { border-bottom: 0; }
.qa h3 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
  color: var(--text);
}
.qa p { margin: 0 0 0.6rem; line-height: 1.6; }
.qa p:last-child { margin-bottom: 0; }

/* ----- Feature-Block (Funktionen-Seite) ----- */
.feature-block {
  padding: 1.8rem;
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius, 24px);
  margin-bottom: 1.4rem;
  border-left: 4px solid var(--neon, #9EFF00);
}
.feature-block h3 {
  font-size: 1.2rem;
  margin: 0 0 0.7rem;
  color: var(--neon, #9EFF00);
}
.feature-block p { margin: 0 0 0.6rem; line-height: 1.6; }

/* ----- Kontakt-Seite ----- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-form .form-row { margin-bottom: 1rem; }
.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 12px);
  padding: 1rem 1.2rem;
  margin: 0 0 1rem;
}
.form-fieldset legend {
  padding: 0 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.form-fieldset ul { list-style: none; padding: 0; margin: 0; }
.form-fieldset li { padding: 0.25rem 0; }
.form-fieldset li label { font-weight: normal; }
.hp-field {
  position: absolute;
  left: -10000px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form-note { font-size: 0.85rem; margin-top: 1rem; }
.contact-sidebar h2 {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neon, #9EFF00);
}
.contact-sidebar dl { margin: 0 0 1.5rem; }
.contact-sidebar dt {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.7rem;
}
.contact-sidebar dd { margin: 0.2rem 0 0; }

/* ----- Footer ----- */
.site-footer {
  background: rgba(0,0,0,0.3);
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding: 3rem 1.4rem 1.5rem;
  text-align: left;
}
.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

/* Hohe Spezifität: überschreibt alle alten flex/inline-Regeln. */
.site-footer .site-footer__col {
  display: block;
}
.site-footer .site-footer__col h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neon, #9EFF00);
  margin: 0 0 0.9rem;
  font-weight: 700;
}
.site-footer .site-footer__col a {
  display: block;
  padding: 0.3rem 0;
  color: var(--text-muted, #cfd2cf);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
}
.site-footer .site-footer__col a:hover {
  color: var(--neon, #9EFF00);
  text-decoration: none;
}
.site-footer .site-footer__col p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-muted, #cfd2cf);
  font-size: 0.95rem;
}
.site-footer .site-footer__col p a {
  display: inline;
  padding: 0;
}
.site-footer__copy {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* EU-Kennzeichnungs-Icons für KI-Inhalte (Art. 50 AI Act, optional) */
.eu-ai-labels {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.7rem;
}
.eu-ai-labels img {
  display: block;
  width: 150px;
  height: 150px;
  opacity: 0.9;
}

/* ----- Öffentlicher Systemstatus (Vertrauensseite) ----- */
.status-board {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
}
.status-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--border, #1e1e1e);
  border-radius: var(--radius, 14px);
  background: rgba(255, 255, 255, 0.02);
}
.status-item__body { flex: 1 1 auto; }
.status-item__label {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.status-item__text {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
}
.status-item__time strong {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  letter-spacing: 0.02em;
  color: var(--fg, #f4f4f4);
}
.status-dot {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
}
.status-dot--ok { background: var(--neon, #9EFF00); }
.status-dot--down { background: #ff5c5c; }
.status-item__state {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-item__state--ok { color: var(--neon, #9EFF00); }
.status-item__state--down { color: #ff5c5c; }
.status-meta {
  text-align: center;
  margin: 1.6rem 0 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.status-note {
  text-align: center;
  max-width: 620px;
  margin: 0.4rem auto 0;
  font-size: 0.82rem;
}
.trust-strip__live {
  text-align: center;
  margin: 1.1rem 0 0;
  font-size: 0.92rem;
}
@media (max-width: 540px) {
  .status-item { flex-wrap: wrap; }
  .status-item__state { width: 100%; }
}

/* =====================================================================
   Scan-Visualisierung (Hero-Band) — eigene Hausschrift „NOLTE",
   selbst gehostet, CSP font-src 'self'. Feste 1600x500-Bühne, per
   Container-Query fluid auf die Bandbreite skaliert (kein JS).
   ===================================================================== */
@font-face {
  font-family: 'NOLTE Headline';
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/nolte/NOLTE-Headline-Regular.7dc405a74f8b.woff2") format('woff2');
}
@font-face {
  font-family: 'NOLTE';
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/nolte/NOLTE-Body-Regular.c3bafa3cdcf9.woff2") format('woff2');
}
@font-face {
  font-family: 'NOLTE';
  font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/nolte/NOLTE-Body-Medium.bc95867b7b8a.woff2") format('woff2');
}
@font-face {
  font-family: 'NOLTE';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/nolte/NOLTE-Body-Bold.213227dc66c8.woff2") format('woff2');
}

/* Full-Bleed ohne vw (scrollbar-sicher): Auf der Landing wird .site-main randlos
   (max-width weg, Seiten-Padding 0), damit Bänder über die ganze Bildschirmbreite
   reichen. Die Abschnitts-INHALTE bleiben über .section__inner / .hero__inner
   zentriert; nur die Hintergrund-Bänder gehen bis an den Rand. Kein 100vw → kein
   Scrollbar-Überhang, kein horizontaler Scroll, Sticky-Header bleibt heil. */
body.marketing-landing .site-main {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.scanviz-band {
  width: 100%;
  padding: 2.4rem 0 0.4rem;
  background: var(--bg, #040404);
}
.scanviz {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1600 / 500;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.scanviz__stage {
  position: relative;
  width: 1600px;
  height: 500px;
  overflow: hidden;
  transform-origin: top left;
  /* Bühne exakt auf die Bandbreite herunterskalieren (fluid, ohne JS). */
  transform: scale(calc(100cqw / 1600px));
  background: #0b0e13;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  font-family: 'NOLTE', system-ui, sans-serif;
  color: #e8ecf2;
}
.scanviz__stage * { box-sizing: border-box; }

@keyframes sv-ping {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}
@keyframes sv-scan {
  0%     { transform: translateY(-8px);  opacity: 0; }
  4%     { opacity: .95; }
  10%    { opacity: .95; }
  58%    { transform: translateY(316px); opacity: .95; }
  64%    { transform: translateY(316px); opacity: 0; }
  64.01% { transform: translateY(-8px);  opacity: 0; }
  100%   { transform: translateY(-8px);  opacity: 0; }
}
@keyframes sv-row1 {
  0%,16%   { opacity: 0; transform: translateX(12px); }
  23%,86%  { opacity: 1; transform: translateX(0); }
  94%,100% { opacity: 0; transform: translateX(0); }
}
@keyframes sv-row2 {
  0%,27%   { opacity: 0; transform: translateX(12px); }
  34%,86%  { opacity: 1; transform: translateX(0); }
  94%,100% { opacity: 0; transform: translateX(0); }
}
@keyframes sv-row3 {
  0%,38%   { opacity: 0; transform: translateX(12px); }
  45%,86%  { opacity: 1; transform: translateX(0); }
  94%,100% { opacity: 0; transform: translateX(0); }
}
@keyframes sv-row4 {
  0%,49%   { opacity: 0; transform: translateX(12px); }
  56%,86%  { opacity: 1; transform: translateX(0); }
  94%,100% { opacity: 0; transform: translateX(0); }
}
@keyframes sv-footer {
  0%,60%   { opacity: 0; transform: translateY(10px); }
  68%,86%  { opacity: 1; transform: translateY(0); }
  95%,100% { opacity: 0; transform: translateY(0); }
}
@keyframes sv-mailfill {
  0%,68%   { transform: scaleX(0); }
  84%,100% { transform: scaleX(1); }
}
@keyframes sv-blink {
  0%,45%,100% { opacity: .5; }
  60%,80%     { opacity: 1; }
}

/* Standbild für Nutzer, die reduzierte Bewegung bevorzugt haben:
   Animationen aus, aufgelöste Alarm-Situation eingefroren sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .scanviz__stage * { animation: none !important; }
  .scanviz .sv-row__result { opacity: 1 !important; }
  .scanviz .sv-foot { opacity: 1 !important; transform: none !important; }
  .scanviz .sv-mailfill { transform: scaleX(1) !important; }
}
@media (max-width: 600px) {
  .scanviz-band { padding: 1.6rem 0 0.2rem; }
}

/* ---- Innere Bausteine des Scan-Bandes -----------------------------------
   Prod-CSP ist style-src 'self' (kein 'unsafe-inline') → KEINE Inline-Styles.
   Alle Elemente des Bandes werden ausschließlich über diese Klassen gestylt. */
.sv-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 28% -10%, rgba(53,224,161,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%);
}

/* Header-Streifen */
.sv-header {
  position: relative; height: 64px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 30px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sv-header__group { display: flex; align-items: center; gap: 16px; }
.sv-header__group--right { gap: 20px; }
.sv-logo { height: 26px; width: auto; display: block; }
.sv-divider { width: 1px; height: 22px; background: rgba(255,255,255,.12); }
.sv-tagline { font-size: 13.5px; color: #9aa3b2; }
.sv-live {
  display: flex; align-items: center; gap: 9px; padding: 7px 14px;
  border: 1px solid rgba(53,224,161,.35); background: rgba(53,224,161,.10);
  border-radius: 999px;
}
.sv-live__dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.sv-live__ping {
  position: absolute; inset: 0; border-radius: 999px; background: #35e0a1;
  animation: sv-ping 2s ease-out infinite;
}
.sv-live__core { position: relative; width: 8px; height: 8px; border-radius: 999px; background: #35e0a1; }
.sv-live__label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; color: #35e0a1;
}
.sv-schedule {
  font-family: var(--font-mono); font-size: 12.5px; color: #6b7482; letter-spacing: .03em;
}

/* Hauptbereich */
.sv-main { position: relative; display: flex; gap: 30px; padding: 28px 30px; height: 436px; }

/* Links: Browser-Fenster */
.sv-browser {
  flex: 0 0 592px; width: 592px; height: 100%; border-radius: 14px;
  background: #12161d; border: 1px solid rgba(255,255,255,.08);
  overflow: hidden; display: flex; flex-direction: column;
}
.sv-browser__bar {
  display: flex; align-items: center; gap: 12px; padding: 0 15px; height: 44px;
  flex: 0 0 44px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.sv-dots { display: flex; gap: 7px; }
.sv-dot { width: 11px; height: 11px; border-radius: 999px; }
.sv-dot--red { background: #ff5f57; }
.sv-dot--yellow { background: #f5bf4f; }
.sv-dot--green { background: #35e0a1; }
.sv-urlbar {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px;
  border-radius: 7px; background: #0b0e13; border: 1px solid rgba(255,255,255,.07);
  font-family: var(--font-mono); font-size: 12px; color: #7b8494;
}
.sv-urlbar__lock { width: 9px; height: 8px; border: 1.5px solid #5f6875; border-radius: 2px; display: inline-block; }
.sv-snap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: #5f6875; }
.sv-browser__body { position: relative; flex: 1; overflow: hidden; padding: 20px 22px; }

.sv-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sv-nav__logo { width: 88px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.18); }
.sv-nav__links { display: flex; gap: 10px; }
.sv-nav__link { width: 42px; height: 8px; border-radius: 3px; background: rgba(255,255,255,.10); }

.sv-heroblock {
  position: relative; height: 118px; border-radius: 9px; border: 1px solid rgba(255,255,255,.07);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 10px, rgba(255,255,255,.02) 10px 20px);
  display: flex; align-items: flex-end; padding: 14px; margin-bottom: 16px;
}
.sv-heroblock__label {
  position: absolute; top: 11px; left: 14px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em; color: #5f6875;
}
.sv-heroblock__lines { width: 62%; }
.sv-heroblock__title { height: 13px; width: 72%; border-radius: 3px; background: rgba(255,255,255,.24); margin-bottom: 9px; }
.sv-heroblock__sub { height: 9px; width: 48%; border-radius: 3px; background: rgba(255,255,255,.13); }

.sv-textlines { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.sv-textline { height: 9px; border-radius: 3px; background: rgba(255,255,255,.10); }
.sv-textline--1 { width: 100%; }
.sv-textline--2 { width: 92%; }
.sv-textline--3 { width: 96%; }
.sv-textline--4 { width: 64%; }

.sv-blocks { display: flex; gap: 14px; }
.sv-block {
  flex: 1; height: 56px; border-radius: 8px; border: 1px solid rgba(255,255,255,.07);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 8px, rgba(255,255,255,.015) 8px 16px);
}

.sv-sweep { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; animation: sv-scan 8s linear infinite; }
.sv-sweep__glow { height: 70px; background: linear-gradient(180deg, transparent, rgba(53,224,161,.18)); }
.sv-sweep__laser { height: 2px; background: #35e0a1; box-shadow: 0 0 20px 2px rgba(53,224,161,.75); }

/* Rechts: 4 Prüfebenen */
.sv-checks { flex: 1; height: 100%; display: flex; flex-direction: column; }
.sv-checks__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sv-checks__title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: #6b7482; }
.sv-checks__tags { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: #4e5763; }
.sv-rows { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sv-row { position: relative; flex: 1; }
.sv-row__layer {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 16px;
  padding: 0 18px; border-radius: 13px;
}
.sv-row__base { background: #151a22; border: 1px solid rgba(255,255,255,.06); }
.sv-row__result { opacity: 0; }
.sv-row__result--ok { background: #151a22; border: 1px solid rgba(53,224,161,.35); box-shadow: 0 8px 26px rgba(53,224,161,.07); }
.sv-row__result--alarm { background: #181319; border: 1px solid rgba(255,95,87,.42); box-shadow: 0 8px 26px rgba(255,95,87,.09); }
.sv-row--1 .sv-row__result { animation: sv-row1 8s linear infinite; }
.sv-row--2 .sv-row__result { animation: sv-row2 8s linear infinite; }
.sv-row--3 .sv-row__result { animation: sv-row3 8s linear infinite; }
.sv-row--4 .sv-row__result { animation: sv-row4 8s linear infinite; }

.sv-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.sv-ico--base { background: #1b212b; border: 1px solid rgba(255,255,255,.08); }
.sv-ico--ok { background: rgba(53,224,161,.14); border: 1px solid rgba(53,224,161,.4); }
.sv-ico--alarm { background: rgba(255,95,87,.14); border: 1px solid rgba(255,95,87,.42); }
.sv-ico--stack { flex-direction: column; gap: 4px; }

.sv-mark { height: 2.5px; border-radius: 2px; }
.sv-mark--a { width: 18px; }
.sv-mark--b { width: 14px; }
.sv-mark--c { width: 16px; }
.sv-fill--muted { background: rgba(255,255,255,.38); }
.sv-fill--ok { background: #35e0a1; }
.sv-fill--alarm { background: #ff5f57; }
.sv-grid { display: grid; grid-template-columns: 7px 7px; grid-template-rows: 7px 7px; gap: 3px; }
.sv-grid > span { border-radius: 1.5px; }
.sv-ring { width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.sv-ring--muted { border: 2.5px solid rgba(255,255,255,.38); }
.sv-ring--ok { border: 2.5px solid #35e0a1; }
.sv-ring--alarm { border: 2.5px solid #ff5f57; }
.sv-ring__dot { width: 5px; height: 5px; border-radius: 999px; }
.sv-clock { width: 18px; height: 18px; border-radius: 999px; position: relative; display: inline-block; }
.sv-clock--muted { border: 2.5px solid rgba(255,255,255,.38); }
.sv-clock--ok { border: 2.5px solid #35e0a1; }
.sv-clock__hand { position: absolute; top: 2.5px; left: 50%; transform: translateX(-50%); width: 2.5px; height: 6px; border-radius: 2px; }

.sv-row__info { flex: 1; min-width: 0; }
.sv-row__title { font-size: 16px; font-weight: 600; }
.sv-row__title--dim { color: rgba(255,255,255,.5); }
.sv-row__title--on { color: #e8ecf2; }
.sv-row__title--alarm { color: #ffe3e0; }
.sv-row__sub { font-family: var(--font-mono); font-size: 11.5px; margin-top: 2px; }
.sv-row__sub--dim { color: #5f6875; }
.sv-row__sub--on { color: #9aa3b2; }
.sv-row__sub--alarm { color: #c79490; }
.sv-probe { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: #5f6875; animation: sv-blink 8s linear infinite; }
.sv-row__badge { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.sv-badge { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; }
.sv-badge--ok { background: rgba(53,224,161,.14); border: 1px solid rgba(53,224,161,.35); }
.sv-badge--alarm { background: rgba(255,95,87,.16); border: 1px solid rgba(255,95,87,.42); }
.sv-badge__sign { font-size: 12px; font-weight: 700; }
.sv-badge__sign--ok { color: #35e0a1; }
.sv-badge__sign--alarm { color: #ff5f57; }
.sv-badge__txt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; }
.sv-badge__txt--ok { color: #35e0a1; }
.sv-badge__txt--alarm { letter-spacing: .08em; color: #ff8b85; }
.sv-metric { font-family: var(--font-mono); font-size: 11px; }
.sv-metric--ok { color: #6f7f79; }
.sv-metric--alarm { color: #c98a86; }

/* Fußzeile: Alarm-Mail */
.sv-foot-wrap { height: 54px; margin-top: 12px; position: relative; }
.sv-foot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 18px; border-radius: 13px; background: rgba(255,95,87,.10);
  border: 1px solid rgba(255,95,87,.4); opacity: 0; animation: sv-footer 8s linear infinite;
}
.sv-foot__side { display: flex; align-items: center; gap: 13px; }
.sv-foot__diamond {
  width: 13px; height: 13px; background: #ff5f57; transform: rotate(45deg);
  border-radius: 2px; box-shadow: 0 0 14px rgba(255,95,87,.7);
}
.sv-foot__text { font-size: 15px; font-weight: 600; color: #ffe3e0; }
.sv-foot__text-sub { color: #ff8b85; font-weight: 500; }
.sv-mailicon {
  position: relative; width: 26px; height: 18px; border-radius: 3px; border: 1.5px solid #ff5f57;
  background: rgba(255,95,87,.12); overflow: hidden;
}
.sv-mailicon__flap {
  position: absolute; top: -1px; left: -1px; width: 0; height: 0;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 9px solid rgba(255,95,87,.45);
}
.sv-mailinfo { display: flex; flex-direction: column; gap: 5px; }
.sv-mailinfo__label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: #ff8b85; }
.sv-mailbar { width: 158px; height: 4px; border-radius: 999px; background: rgba(255,95,87,.2); overflow: hidden; }
.sv-mailfill { height: 100%; width: 100%; background: #ff5f57; transform-origin: left; transform: scaleX(0); animation: sv-mailfill 8s linear infinite; }

/* --- Server-Auslastung auf der Status-Seite (öffentliche Prozentbalken) ---
   Balkenbreite kommt CSP-sicher aus dem SVG-Attribut width (kein inline style). */
.load-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.load-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.load-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.load-card__label { font-weight: 600; font-size: 15px; }
.load-card__pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--neon);
}
.load-bar {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.load-bar__track { fill: rgba(255, 255, 255, 0.10); }
.load-bar__fill { fill: var(--neon); }
.load-card__detail { font-size: 13px; color: rgba(255, 255, 255, 0.55); }

.load-card--warn .load-card__pct { color: #f5b301; }
.load-card--warn .load-bar__fill { fill: #f5b301; }
.load-card--high .load-card__pct { color: #ff5f57; }
.load-card--high .load-bar__fill { fill: #ff5f57; }