/* PIXELtoNEWS – Farbwelt „Nacht & Energie“
   Nachtblauer Grund, leuchtende Akzente aus dem Logo: Sonnen-Orange, Violett, Grün.
   Wird nach den Seiten-Styles geladen und überschreibt nur Farben. */

:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  --bg: #0B1120;
  --surface: #131C31;
  --surface-2: #0F1729;
  --ink: #EEF2FF;
  --muted: #A7B0C8;
  --line: rgba(148, 163, 184, .18);
  --brand: #1B2742;
  --on-brand: #EEF2FF;
  --violet: #B6A1FF;
  --violet-soft: rgba(164, 139, 255, .14);
  --green: #3FE0A0;
  --sun: #F2A93B;
  --sun-ink: #FFC861;
  --ok: #3FE0A0;
  --warn: #F5C842;
  --err: #FF6B6B;
  --off: #7C869E;
  --track: #24304A;
  --glow-sun: 0 10px 34px -10px rgba(242, 169, 59, .7);
  --glow-violet: 0 30px 80px -30px rgba(140, 108, 242, .55);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(140, 108, 242, .28), transparent 65%),
    radial-gradient(700px 460px at -10% 18%, rgba(63, 224, 160, .13), transparent 65%),
    radial-gradient(800px 500px at 50% 105%, rgba(242, 169, 59, .12), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
@media (max-width: 820px) { body { background-attachment: scroll; } }

a { color: var(--violet); }
.eyebrow { color: var(--green); }

/* Kopfzeile: halbtransparent mit Unschärfe */
header.top {
  background: rgba(11, 17, 32, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
header.top .btn-dark {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(182, 161, 255, .55);
}
header.top .btn-dark:hover { background: rgba(182, 161, 255, .12); }

/* Buttons */
.btn-sun {
  background: linear-gradient(135deg, #FFC861 0%, #F2A93B 45%, #FF7A45 100%);
  color: #1A1206;
  box-shadow: var(--glow-sun);
}
.btn-ghost { background: rgba(255, 255, 255, .04); border-color: rgba(238, 242, 255, .22); color: var(--ink); }
.btn-ghost:hover { border-color: var(--violet); }
.btn-dark { background: linear-gradient(135deg, #8C6CF2, #6A4CE0); color: #fff; }

/* Hero: Verlauf in der Überschrift */
.hero h1 span:not(.nb) {
  background: linear-gradient(90deg, #FFC861 0%, #FF8A4C 45%, #B6A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dashboard-Vorschau */
.panel {
  background: linear-gradient(160deg, #18233D 0%, #121A2E 100%);
  border: 1px solid rgba(182, 161, 255, .28);
  box-shadow: var(--glow-violet), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}
.panel-head, .panel-foot { color: var(--muted); }
.live i { background: var(--green); box-shadow: 0 0 10px var(--green); }
.s-ok { background: #1E9E6A; }
.s-warn { background: #F5C842; }
.s-sel { box-shadow: 0 0 0 2px #EEF2FF; }
.gauge { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.gauge small { color: var(--muted); }
.gauge svg path:first-child { stroke: var(--track); }
.gauge svg line { stroke: var(--ink); }

/* Abschnitte */
section.block { border-top-color: var(--line); }
.block-head .block-sub {
  background: linear-gradient(90deg, #B6A1FF, #3FE0A0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

/* Probleme: Karten mit warmem Akzent */
.pain > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: inset 0 3px 0 #FF7A45;
}
.pain > div:nth-child(2) { box-shadow: inset 0 3px 0 #F5C842; }
.pain > div:nth-child(3) { box-shadow: inset 0 3px 0 #FF6B6B; }

/* Funktionen: jede Karte eine Akzentfarbe */
.feature {
  --acc: #F2A93B;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 10%, var(--surface)) 0%, var(--surface) 55%);
  border-color: color-mix(in srgb, var(--acc) 30%, transparent);
}
.feature:nth-child(2) { --acc: #3FE0A0; }
.feature:nth-child(3) { --acc: #B6A1FF; }
.feature:nth-child(4) { --acc: #5CC8FF; }
.feature svg.ic {
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  border-radius: 12px;
  padding: 8px;
  width: 48px;
  height: 48px;
}
.formula { background: var(--violet-soft); }

/* Schritte: Verlaufslinie */
.steps li {
  border-top: 0;
  background:
    linear-gradient(90deg, #F2A93B, #B6A1FF) top / 100% 3px no-repeat;
}
.steps li::before { color: var(--green); }

/* Hersteller */
.brands li {
  background: var(--surface);
  border-color: var(--line);
  transition: border-color .15s ease, transform .15s ease;
}
.brands li:hover { border-color: var(--violet); transform: translateY(-2px); }

/* Kontakt */
.contact {
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(242, 169, 59, .18), transparent 70%),
    linear-gradient(135deg, #1A2442 0%, #241B4D 100%);
  border: 1px solid rgba(182, 161, 255, .25);
}
.contact p { color: #C7CDE0; }
.contact dt { color: var(--green); }
.lead-form { background: var(--surface-2); border: 1px solid var(--line); }
.f input, .f textarea { background: var(--surface); border-color: rgba(148, 163, 184, .28); }
.chips span { background: var(--surface); border-color: rgba(148, 163, 184, .28); }
.chips input:checked + span { background: var(--violet); color: #120D2A; border-color: var(--violet); }
.f-consent input { accent-color: var(--violet); }

/* Portal-Hinweis */
.portal {
  background: linear-gradient(135deg, rgba(63, 224, 160, .12), rgba(140, 108, 242, .12)), var(--surface);
  border-color: rgba(63, 224, 160, .3);
}

@media (prefers-reduced-motion: reduce) { .brands li { transition: none; } }

/* Logo = App-Symbol */
.logo-img { width: 36px; height: 36px; border-radius: 9px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
@media (max-width: 420px) { .logo-img { width: 32px; height: 32px; border-radius: 8px; } }

/* Zeile über der Hero-Überschrift: normale Schreibweise */
.hero-eyebrow { text-transform: none; letter-spacing: 0; font-family: var(--display); font-size: clamp(21px, 2.3vw, 30px); line-height: 1.25; font-weight: 700; margin-bottom: 14px; }

/* Vorteil: Push-Benachrichtigungen (volle Breite) */
.feature.feature-push { --acc: #FF7A59; grid-column: 1 / -1; }
.push-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.push-list li {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px 14px 40px; position: relative;
}
.push-list li::before {
  content: ""; position: absolute; left: 16px; top: 20px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 10px var(--acc);
}
.push-list li:nth-child(6)::before { background: #3FE0A0; box-shadow: 0 0 10px #3FE0A0; }
.push-list li:nth-child(7)::before { background: #B6A1FF; box-shadow: 0 0 10px #B6A1FF; }
.push-list b { color: var(--ink); font-size: 16px; }
.push-list span { color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) { .push-list { grid-template-columns: 1fr; } }

/* Funktionen & Lizenzen */
.lic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.lic { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lic h3 { font-size: 22px; margin: 0; }
.lic p { color: var(--muted); margin: 0; }
.lic-live { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--ok) 9%, var(--surface)) 0%, var(--surface) 60%); }
.lic-badge { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; color: #06281B; background: var(--ok); }
.lic-badge-soon { color: var(--ink); background: rgba(148, 163, 184, .18); }
.lic-hero { margin-top: 20px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; padding: 32px; border-radius: 24px;
  background: radial-gradient(520px 260px at 0% 0%, rgba(242, 169, 59, .22), transparent 70%), linear-gradient(135deg, #1A2442 0%, #241B4D 100%);
  border: 1px solid rgba(242, 169, 59, .35); }
.lic-hero h3 { font-size: clamp(28px, 3.2vw, 40px); margin: 10px 0 4px; color: var(--sun-ink); }
.lic-hero .lic-lead { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.lic-hero p { color: #C7CDE0; }
.lic-safety { margin-top: 20px; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .lic-grid, .lic-hero { grid-template-columns: 1fr; }
  .lic-hero { padding: 24px; }
}

/* Projekte */
.proj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.proj{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.proj-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--line)}
.proj-body{padding:22px;display:flex;flex-direction:column;gap:8px}
.proj-body h3{font-size:20px;margin:0}
.proj-tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(148,163,184,.18);color:var(--ink)}
.proj-meta{font-weight:600;margin:0}
.proj-tech,.proj-text{color:var(--muted);margin:0}
.proj-tech{font-size:14px}
@media (max-width:980px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.proj-grid{grid-template-columns:1fr}}