/* Day One IT – Live-Demo (demo.html)
   Seite und Bedienfeld im Leitstand-Stil der Website (Variablen aus styles.css).
   Das Dashboard nutzt bewusst die dunklen Grafana-Farben, damit es aussieht wie
   das echte Dashboard aus dem Demo-Aufbau. Das Handy ist immer dunkel. */

/* --- Grafana-Farben (Dashboard) ------------------------------------------------ */
.dash {
  --g-bg:        #111217;
  --g-panel:     #181B1F;
  --g-border:    #262A30;
  --g-grid:      rgba(204, 204, 220, .08);
  --g-text:      #CCCCDC;
  --g-muted:     #8E8E9A;
  --g-green:     #73BF69;
  --g-yellow:    #FADE2A;
  --g-red:       #F2495C;
  --g-gray:      #6E7079;
}

/* --- Einstieg ---------------------------------------------------------------------- */
.demo-intro { padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.demo-intro h1 { max-width: 52rem; }
.demo-intro h1 span { display: block; }
.demo-notice {
  display: inline-block; margin: 1.25rem 0 0; padding: .6rem .9rem;
  font-size: .95rem; color: var(--notice-text);
  background: var(--notice-bg); border-left: 4px solid var(--notice-border); border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- Bühne: Bedienfeld oben links, Dashboard darunter, Handy rechts ------------------ */
.demo-stage { padding: 0 0 clamp(3.5rem, 8vw, 6rem); border-bottom: 1px solid var(--line); }
.demo-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 17rem;
  grid-template-areas:
    "machine phone"
    "dash    phone";
  align-items: start;
}
.machine-panel { grid-area: machine; }
.dash          { grid-area: dash; }
.phone-wrap    { grid-area: phone; }

@media (max-width: 960px) {
  /* Mobil: Schalter, dann Handy (damit man den Alarm sieht), dann Dashboard */
  .demo-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "machine" "phone" "dash"; }
}

/* --- Bedienfeld der Maschine ---------------------------------------------------------- */
.machine-panel {
  display: grid; align-items: center; gap: .75rem 1.5rem;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "head   head  head"
    "switch lamps hint";
  background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--line-strong);
  border-radius: var(--radius); padding: 1rem 1.25rem 1.1rem;
}
.machine-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.machine-head h3 { margin: 0; font-size: 1.25rem; }
.machine-meta { color: var(--text-subtle); font-size: .95rem; }
.machine-hint { grid-area: hint; margin: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.45; min-height: 2.9em; }

@media (max-width: 720px) {
  /* Schmal: alles untereinander, damit nichts aus dem Feld läuft */
  .machine-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "switch" "lamps" "hint"; }
  .power-switch { justify-self: start; }
  .machine-hint { min-height: 0; }
}

/* Schalter: groß und eindeutig wie ein Taster an der Anlage */
.power-switch {
  grid-area: switch;
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 56px; padding: .5rem 1.1rem .5rem .6rem;
  font: inherit; font-weight: 700; color: var(--text); white-space: nowrap;
  background: var(--bg); border: 2px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.power-switch:hover { background: var(--panel); }
.power-track {
  position: relative; flex: none; width: 64px; height: 36px; border-radius: 999px;
  background: var(--success); transition: background-color .2s ease;
}
.power-knob {
  position: absolute; top: 4px; left: 32px; width: 28px; height: 28px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: left .2s ease;
}
.power-switch[aria-checked="false"] .power-track { background: #5D676E; }
.power-switch[aria-checked="false"] .power-knob { left: 4px; }
.power-off { display: none; }
.power-switch[aria-checked="false"] .power-on { display: none; }
.power-switch[aria-checked="false"] .power-off { display: inline; }

/* Meldeleuchten */
.machine-lamps { grid-area: lamps; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; color: var(--text-subtle); }
.lamp { display: inline-flex; align-items: center; gap: .45rem; }
.lamp::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); transition: background-color .2s ease, box-shadow .2s ease;
}
.demo-grid[data-machine="running"] .lamp-green { color: var(--text); }
.demo-grid[data-machine="running"] .lamp-green::before { background: #3FA34D; border-color: #2F6B3A; box-shadow: 0 0 0 3px rgba(63, 163, 77, .2); }
.demo-grid[data-alarm="true"] .lamp-signal { color: var(--text); }
.demo-grid[data-alarm="true"] .lamp-signal::before { background: var(--signal); border-color: var(--signal-hover); box-shadow: 0 0 0 3px rgba(245, 168, 0, .25); }

@media (prefers-reduced-motion: no-preference) {
  .demo-grid[data-alarm="true"] .lamp-signal::before { animation: lamp-blink 1s steps(2, start) infinite; }
  @keyframes lamp-blink { to { background: var(--panel); box-shadow: none; } }
}

/* --- Dashboard im Grafana-Stil ------------------------------------------------------- */
.dash {
  margin: 0; padding: .75rem;
  background: var(--g-bg); color: var(--g-text);
  border-radius: var(--radius);
  font-size: .875rem; line-height: 1.4; font-stretch: 100%;
  border: 1px solid transparent;
}
/* Im dunklen Design hebt eine Linie das Dashboard vom fast gleich dunklen Hintergrund ab */
:root[data-theme="dark"] .dash { border-color: var(--line); }
.dash-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .1rem .15rem .7rem; }
.dash-crumb { display: inline-flex; align-items: center; gap: .45rem; color: var(--g-muted); }
.dash-crumb strong { color: var(--g-text); font-weight: 500; }
/* D1-Zeichen aus assets/favicon.svg, wie im Browser-Tab */
.dash-logo { width: 20px; height: 20px; flex: none; border-radius: 5px; }
.dash-tools { display: flex; flex-wrap: wrap; gap: .4rem; }
.dash-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .55rem; border: 1px solid var(--g-border); border-radius: 2px; color: var(--g-text); font-size: .8rem; }
.dash-sim { border-color: rgba(250, 222, 42, .45); color: var(--g-yellow); }
.dash-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-green); }
@media (prefers-reduced-motion: no-preference) {
  .dash-dot { animation: dash-pulse 2s ease-in-out infinite; }
  @keyframes dash-pulse { 50% { opacity: .3; } }
}

.dash-panel { background: var(--g-panel); border: 1px solid var(--g-border); border-radius: 2px; padding: .55rem .75rem .7rem; min-width: 0; }
.dash-title { margin: 0 0 .45rem; font-size: .875rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--g-text); }
.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
@media (max-width: 620px) { .dash-row { grid-template-columns: 1fr; } }

/* Tabelle */
.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.dash-table th { text-align: left; font-weight: 500; color: var(--g-text); padding: .45rem .6rem; border-bottom: 1px solid var(--g-border); }
.dash-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--g-border); }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table .num { text-align: right; }
/* Zustand als farbige Zelle, wie "color-background" in Grafana */
.dash-state { font-weight: 500; transition: background-color .3s ease, color .3s ease; }
.dash-state[data-state="running"] { background: var(--g-green); color: #0B1A08; }
.dash-state[data-state="slow"]    { background: var(--g-yellow); color: #2A2400; }
.dash-state[data-state="stopped"],
.dash-state[data-state="fault"]   { background: var(--g-red); color: #FFFFFF; }

/* Diagramme: SVG wird von demo.js passend zur Breite gezeichnet */
.dash-chart { height: 12.5rem; }
.dash-chart svg { width: 100%; height: 100%; overflow: visible; }
.dash-chart .grid line { stroke: var(--g-grid); stroke-width: 1; }
.dash-chart .axis text { fill: var(--g-muted); font-size: 11px; font-family: var(--font); }
.dash-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-chart .line-a { stroke: var(--g-green); }
.dash-chart .line-b { stroke: var(--g-yellow); }
.dash-chart .area-a { fill: var(--g-green); opacity: .08; }

.dash-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; margin: .35rem 0 0; padding: 0; color: var(--g-text); font-size: .8rem; }
.dash-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.dash-legend li::before { content: ""; width: 14px; height: 4px; border-radius: 2px; }
.dash-legend .series-a::before { background: var(--g-green); }
.dash-legend .series-b::before { background: var(--g-yellow); }

/* --- Handy ------------------------------------------------------------------------- */
.phone-wrap { display: flex; flex-direction: column; align-items: center; }
.phone {
  width: 100%; max-width: 17rem; aspect-ratio: 9 / 18.5;
  padding: 10px; border-radius: 2.6rem;
  background: #0D0F11; border: 1px solid #343B41;
  box-shadow: 0 18px 40px -18px rgba(13, 15, 17, .55), inset 0 0 0 2px #22272C;
}
.phone-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 2.05rem;
  padding: .6rem .7rem; color: #FFFFFF;
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(245, 168, 0, .22), transparent 60%),
    linear-gradient(180deg, #2B3238 0%, #15181B 70%);
}
/* "Dynamic Island" */
.phone-screen::before {
  content: ""; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
  width: 34%; height: 1.35rem; border-radius: 999px; background: #000;
}
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: .1rem .55rem 0; font-size: .75rem; font-weight: 600; }
.phone-icons { display: inline-flex; gap: 3px; align-items: flex-end; }
.phone-icons i { width: 4px; background: #FFFFFF; border-radius: 1px; }
.phone-icons i:nth-child(1) { height: 5px; } .phone-icons i:nth-child(2) { height: 8px; } .phone-icons i:nth-child(3) { height: 11px; }
.phone-clock { display: flex; flex-direction: column; align-items: center; margin: 1.6rem 0 1.1rem; }
.phone-date { font-size: .8rem; font-weight: 550; opacity: .85; }
.phone-big-time { font-size: 3.3rem; font-weight: 300; font-stretch: 112%; line-height: 1; letter-spacing: -.02em; }

.phone-notifications { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.phone-empty { text-align: center; font-size: .8rem; opacity: .6; padding-top: .5rem; }
.notification {
  display: grid; grid-template-columns: 1.7rem 1fr; gap: .15rem .55rem;
  padding: .6rem .65rem; border-radius: .95rem;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: .78rem; line-height: 1.3;
}
.notification-icon {
  grid-row: span 3; width: 1.7rem; height: 1.7rem; border-radius: .45rem;
  display: grid; place-items: center; background: var(--signal); color: #1E2226;
}
.notification-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.notification.is-ok .notification-icon { background: #3FA34D; color: #FFFFFF; }
.notification-app { display: flex; justify-content: space-between; gap: .5rem; opacity: .7; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
.notification-app span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-app span:last-child { flex: none; }
.notification-title { font-weight: 700; }
.notification-body { opacity: .9; }

@media (prefers-reduced-motion: no-preference) {
  .notification.is-new { animation: notification-in .45s cubic-bezier(.2, .8, .2, 1) both; }
  .phone.is-buzzing { animation: phone-buzz .5s ease-in-out; }
  @keyframes notification-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
  @keyframes phone-buzz {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px) rotate(-.6deg); }
    40%, 80% { transform: translateX(3px) rotate(.6deg); }
  }
}

.phone-caption { margin: .7rem 0 0; font-size: .9rem; color: var(--text-subtle); }

@media (max-width: 960px) {
  /* Mobil kleiner und kürzer: es geht nur um die Mitteilungen */
  .phone { max-width: 14rem; aspect-ratio: 9 / 15; }
  .phone-clock { margin: 1.1rem 0 .8rem; }
  .phone-big-time { font-size: 2.6rem; }
}

/* --- Was dahinter steckt ------------------------------------------------------------- */
.demo-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; counter-reset: flow; }
.demo-flow li { counter-increment: flow; border-top: 2px solid var(--line-strong); padding-top: 1rem; }
.demo-flow li::before { content: counter(flow); display: block; font-size: 2.6rem; font-weight: 300; font-stretch: 125%; line-height: 1; margin-bottom: .75rem; color: var(--text-subtle); }
.demo-flow h3 { font-size: 1.15rem; }
.demo-flow p { margin: 0; color: var(--text-muted); }
@media (max-width: 760px) { .demo-flow { grid-template-columns: 1fr; } }

/* Kurzer Absatz zum GitOps-Prinzip, abgesetzt mit einer Signallinie wie die Hinweise im Hero */
.demo-remote { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding-left: 1.25rem; border-left: 3px solid var(--signal); max-width: 46rem; }
.demo-remote h3 { font-size: 1.15rem; }
.demo-remote p { color: var(--text-muted); }
.demo-remote p:last-child { margin-bottom: 0; }

.demo-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
@media (max-width: 480px) { .demo-cta .btn { width: 100%; } }