/* Fernüberwachung & Analyse – ergänzt style.css, nutzt dieselben Tokens */
:root {
  --fu-panel: #2a2f36;
  --fu-panel-2: #333941;
  --fu-grid: rgba(255,255,255,0.08);
  --fu-axis: #8f959c;
  --fu-line: #ff8c00;
  --fu-ok: #3fb37f;
  --fu-alert: #ff5a4f;
  --fu-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}


/* Hero-Dashboard */
.fu-hero h1 { max-width: 20ch; }
.fu-screen {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--fu-panel);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  overflow: hidden;
}
.fu-screen-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--fu-panel-2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: var(--fs-xs);
  color: #c5c9ce;
}
.fu-screen-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fu-ok); box-shadow: 0 0 0 3px rgba(63,179,127,0.2); }
.fu-screen-bar .live { margin-left: auto; font-family: var(--fu-mono); color: var(--fu-ok); }
.fu-screen svg { display: block; width: 100%; height: auto; }
.fu-svg-text { font-family: var(--font); font-size: 12px; fill: var(--fu-axis); }
.fu-svg-mono { font-family: var(--fu-mono); font-size: 11px; fill: var(--fu-axis); }
.fu-toast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 28px);
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--dark);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  font-size: var(--fs-sm);
  line-height: 1.3;
  animation: fu-pop 0.5s ease 0.8s both;
}
.fu-toast b { display: block; color: var(--dark); }
.fu-toast span { color: var(--text-muted); font-size: var(--fs-xs); }
.fu-toast .bell {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: rgba(63,179,127,0.15); color: #1f8a5a;
}
@keyframes fu-pop { from { transform: translateY(8px) scale(0.97); } to { transform: none; } }
.fu-pulse { animation: fu-pulse 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes fu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Problem → Lösung */
.fu-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.fu-pain {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.fu-pain-graphic { background: var(--fu-panel); padding: 14px 16px 10px; }
.fu-pain-graphic svg { display: block; width: 100%; height: auto; }
.fu-pain-body { display: flex; flex-direction: column; gap: var(--s3); flex: 1; padding: var(--s5); }
.fu-pain-body h3 { margin: 0; font-size: 1.05rem; }
.fu-answer {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.fu-answer svg { flex-shrink: 0; margin-top: 2px; color: var(--accent-dark); }

/* Analyse-Showcase */
.fu-showcase {
  border-radius: var(--radius-lg);
  background: var(--fu-panel);
  padding: var(--s5);
  overflow-x: auto;
}
.fu-showcase svg { display: block; width: 100%; min-width: 640px; height: auto; }
.fu-result-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.fu-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--on-dark);
  font-size: var(--fs-sm);
}
.fu-result strong { color: #fff; }
.fu-result .n { font-family: var(--fu-mono); color: var(--accent); font-weight: 700; }

/* Funktionsweise */
.fu-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); position: relative; }
.fu-node { position: relative; text-align: center; }
.fu-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto var(--s4);
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--dark);
  box-shadow: var(--shadow-sm);
}
.fu-node.is-box .fu-node-icon { background: var(--dark); color: var(--accent); border-color: var(--dark); }
.fu-node h3 { margin-bottom: 0.25em; }
.fu-node p { font-size: var(--fs-sm); max-width: 24ch; margin: 0 auto; }
.fu-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  left: calc(50% + 50px);
  width: calc(100% - 100px + var(--s6));
  border-top: 2px dashed #c4c9cf;
}
.fu-node:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 33px;
  right: calc(-1 * var(--s6) / 2 - 2px);
  border: 6px solid transparent;
  border-left: 9px solid #c4c9cf;
  transform: translateX(50%);
}
.fu-nochange {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: var(--s7) auto 0;
  padding: var(--s4) var(--s5);
  max-width: 760px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--dark);
  font-weight: 650;
  text-align: center;
}
.fu-nochange svg { color: var(--accent-dark); flex-shrink: 0; }

/* Produkt + Dienstleistung */
.fu-offer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--s4);
  max-width: 920px;
  margin: var(--s7) auto 0;
}
.fu-offer-card {
  padding: var(--s6);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 2px solid var(--accent);
}
.fu-offer-card.is-product { background: var(--dark); border-color: var(--dark); }
.fu-offer-card.is-product h3 { color: #fff; }
.fu-offer-card.is-product p { color: var(--on-dark-muted); }
.fu-offer-card.is-product .check-list li { color: var(--on-dark); border-color: rgba(255,255,255,0.12); }
.fu-offer-card.is-product .check-list svg { color: var(--accent); }
.fu-offer-card h3 { font-size: 1.25rem; margin-bottom: 0.25em; }
.fu-offer-card .check-list { margin-top: var(--s3); }
.fu-offer-card .check-list li { font-size: var(--fs-sm); padding: 8px 0; }
.fu-offer-tag {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #241000;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fu-offer-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
}

/* Leistungs-Kacheln */
.fu-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s7); }
.fu-feature {
  padding: var(--s5);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--border);
}
.fu-feature h3 { margin-bottom: 0.3em; }
.fu-feature p { font-size: var(--fs-sm); }
.fu-feature .icon-badge { width: 42px; height: 42px; }

/* Zielgruppen */
.fu-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.fu-aud {
  display: flex;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}
.fu-aud .icon-badge { width: 44px; height: 44px; margin: 0; }
.fu-aud h3 { margin-bottom: 0.35em; color: #fff; }
.fu-aud .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fu-aud .tags span {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: var(--on-dark);
  font-size: var(--fs-xs);
}
.fu-fit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}
.fu-fit div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #241000;
  font-weight: 700;
  font-size: var(--fs-sm);
}

@media (max-width: 980px) {
  .fu-pains { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .fu-flow { grid-template-columns: 1fr 1fr; row-gap: var(--s6); }
  .fu-node::after, .fu-node::before { display: none; }
  .fu-features { grid-template-columns: 1fr 1fr; }
  .fu-audience { grid-template-columns: 1fr 1fr; }
  .fu-fit { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fu-offer { grid-template-columns: 1fr; gap: var(--s2); }
  .fu-offer-card { padding: var(--s5); }
}
@media (max-width: 720px) {
  .fu-features, .fu-audience { grid-template-columns: 1fr; }
  .fu-nochange { border-radius: var(--radius-lg); }
  .fu-toast { position: static; margin: 0 12px 12px; max-width: none; }
  .fu-showcase { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .fu-toast, .fu-pulse { animation: none; }
}

.fu-offer-card .fu-offer-lead { font-size: var(--fs-md); font-weight: 650; color: var(--text); }
.fu-offer-card.is-product .fu-offer-lead { color: #fff; }

/* Cyber-Security */
.fu-sec-media { min-width: 0; }
.fu-sec-svg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.fu-sec-t { font-family: var(--font); font-size: 13px; font-weight: 700; }
.fu-sec-s { font-family: var(--font); font-size: 11px; fill: #5a5f66; }

/* Teaser auf Startseite / Leistungen */
.fu-band { grid-template-columns: 0.95fr 1.05fr; }
.fu-band-media { display: flex; align-items: center; padding: var(--s5); background: var(--dark-3); border-radius: 0; }
.fu-band-media .fu-screen { width: 100%; box-shadow: none; }
@media (max-width: 980px) { .fu-band { grid-template-columns: 1fr; } }