/* =========================================================
   TUGECH – the innovation company
   Website-Neuaufbau nach Brand Kit v2.1 (Dark-First).
   Blau #0681FD bleibt. Kein Gelb. Schrift: Inter.
   ========================================================= */

:root {
  /* Blau */
  --blue:        #0681fd;
  --blue-hover:  #0570e0;
  --blue-active: #045cc0;
  --blue-30:     rgba(6,129,253,.30);
  --blue-12:     rgba(6,129,253,.12);

  /* Dunkel-Abstufungen */
  --deep-dark:   #060614;  /* Hero */
  --base-dark:   #0d0d1a;  /* Standard-Hintergrund */
  --marken-dark: #1a1a2e;  /* Karten, Navbar */
  --surface:     #22223a;  /* Inputs, Hover */

  /* Text auf Dunkel */
  --t-primary:   rgba(255,255,255,.95);
  --t-secondary: rgba(255,255,255,.60);
  --t-tertiary:  rgba(255,255,255,.40);
  --t-muted:     rgba(255,255,255,.20);
  --t-ghost:     rgba(255,255,255,.12);
  --hairline:    rgba(255,255,255,.06);

  /* Status (Brand Kit) – Amber für Mockup-Hinweise */
  --warn:        #f59e0b;

  --maxw: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--base-dark);
  color: var(--t-secondary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--t-primary); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); }
h3 { font-size: 1.5rem; font-weight: 600; }
p { margin-bottom: 1rem; }
a { color: var(--blue); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--blue-hover); }
img { max-width: 100%; display: block; }
strong { color: var(--t-primary); font-weight: 600; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ===================== NAVBAR ===================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13,13,26,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.navbar.scrolled { background: rgba(13,13,26,.95); }
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo img { height: 26px; width: auto; }
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  color: var(--t-secondary);
  font-size: .95rem;
  font-weight: 500;
}
.nav-links a:hover,
.nav-links a.active { color: var(--blue); }
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.burger span { width: 24px; height: 2px; background: var(--t-primary); border-radius: 2px; display: block; transition: .3s var(--ease); }

/* Rechte Nav-Gruppe: Links + Sprachumschalter + Burger */
.nav-right { display: flex; align-items: center; gap: 1.6rem; }
.lang-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
}
.lang-switch a { color: var(--t-tertiary); padding: 4px 0; }
.lang-switch a:hover { color: var(--t-primary); }
.lang-switch a.active { color: var(--blue); pointer-events: none; }
.lang-switch .lang-sep { width: 1px; height: 12px; background: var(--t-ghost); }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, #11112a 0%, var(--deep-dark) 60%);
  padding: clamp(56px, 10vh, 100px) 24px;
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 120%;
  background: radial-gradient(ellipse, var(--blue-12), transparent 60%);
  filter: blur(60px);
  animation: breathe 5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes breathe { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

.hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.hero-logo {
  margin: 0 auto 20px;
  max-width: 300px;
  animation: logoIn 1.6s var(--ease) both;
}
.hero-logo img { width: 100%; height: auto; }
@keyframes logoIn {
  from { opacity: 0; transform: scale(.85); filter: blur(10px); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}
.hero .tagline {
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--t-tertiary);
  margin: 0;
  animation: fadeUp 1s var(--ease) .5s both;
}
.hero .page-title {
  margin-top: 18px;
  color: var(--blue);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem);
  animation: fadeUp 1s var(--ease) .7s both;
}
.hero-cta { margin-top: 32px; animation: fadeUp 1s var(--ease) .9s both; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 20px rgba(6,129,253,.3);
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background: var(--blue-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 0 28px rgba(6,129,253,.45); }
.btn:active { background: var(--blue-active); transform: translateY(0); }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--blue-30);
  box-shadow: none;
  color: var(--blue);
}
.btn-secondary:hover { background: var(--blue-12); box-shadow: none; }

/* ===================== SECTIONS / KARTEN ===================== */
.section { padding: clamp(60px, 10vh, 100px) 0; }
.section.deep { background: var(--deep-dark); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { position: relative; display: inline-block; padding-bottom: 18px; }
.section-head h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 54px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  box-shadow: 0 0 14px var(--blue-30);
}
.section-head p { color: var(--t-secondary); margin-top: 6px; }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.feature + .feature { margin-top: 80px; }
.feature.reverse .feature-media { order: 2; }

.feature-media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--blue-12);
  background: var(--marken-dark);
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 26px 60px -24px rgba(0,0,0,.65),
    0 0 55px -14px var(--blue-30);
  transition: box-shadow .55s var(--ease), transform .55s var(--ease), border-color .55s var(--ease);
}
.feature-media:hover {
  transform: translateY(-5px);
  border-color: var(--blue-30);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 34px 70px -22px rgba(0,0,0,.7),
    0 0 80px -10px var(--blue-30);
}
.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 90px rgba(6,129,253,.08);
  pointer-events: none;
}
.feature-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.feature-media:hover img { transform: scale(1.03); }

.feature-body h3 { margin-bottom: 12px; }
.feature-body h3 + p { margin-bottom: 24px; }
.feature-body p { color: var(--t-secondary); }
.feature-body ul { list-style: none; margin-top: 8px; }
.feature-body ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  color: var(--t-secondary);
}
.feature-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px rgba(6,129,253,.6);
}

/* ===================== KARTEN-GRID ===================== */
.card {
  position: relative;
  background: linear-gradient(160deg, var(--marken-dark), #15152a);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.6);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--blue-30), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: var(--blue-30); box-shadow: 0 22px 50px -20px rgba(0,0,0,.6), 0 0 40px -16px var(--blue-30); }
.card:hover::before { opacity: 1; }
.card h3 { color: var(--blue); margin-bottom: 12px; }

/* ===================== KUNDENSTIMMEN ===================== */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
}
.testi {
  background: linear-gradient(160deg, var(--marken-dark), #15152a);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.6);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.testi:hover { transform: translateY(-5px); border-color: var(--blue-30); box-shadow: 0 20px 46px -20px rgba(0,0,0,.6), 0 0 36px -16px var(--blue-30); }
.testi .stars { color: var(--blue); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 12px; }
.testi .quote-title { color: var(--t-primary); font-weight: 600; margin-bottom: 8px; }
.testi p { color: var(--t-secondary); font-size: .92rem; }
.testi .author { margin-top: 16px; font-size: .82rem; color: var(--t-tertiary); }

/* ===================== NEWS ===================== */
.news-item {
  background: linear-gradient(160deg, var(--marken-dark), #15152a);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 36px;
  max-width: 860px;
  margin: 0 auto 28px;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.6);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.news-item:hover { transform: translateY(-4px); border-color: var(--blue-30); box-shadow: 0 22px 50px -20px rgba(0,0,0,.6), 0 0 40px -16px var(--blue-30); }
.news-item .date {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--t-tertiary);
  border: 1px solid var(--blue-30);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 18px;
}
.news-item h3 { color: var(--blue); margin-bottom: 16px; }
.news-item p { color: var(--t-secondary); }

/* ===================== FORMULAR / KONTAKT ===================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.panel {
  background: linear-gradient(160deg, var(--marken-dark), #15152a);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 14px 40px -22px rgba(0,0,0,.65);
}
.panel h2 { margin-bottom: 24px; }
.panel h2.blue { color: var(--blue); }
form { display: flex; flex-direction: column; gap: 1rem; }
label { font-weight: 500; color: var(--t-secondary); font-size: .92rem; }
input, textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: var(--t-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .25s var(--ease);
}
input:focus, textarea:focus { outline: none; border-color: var(--blue); }
textarea { resize: vertical; min-height: 150px; }
.contact-list { list-style: none; }
.contact-list li { margin-bottom: 18px; color: var(--t-secondary); }
.contact-list .lbl { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t-tertiary); margin-bottom: 4px; }
.contact-list a { color: var(--blue); }

/* ===================== RECHTSTEXTE ===================== */
.legal { max-width: 820px; margin: 0 auto; }
.legal .panel { padding: 44px; }
.legal h1 { margin-bottom: 24px; }
.legal h3, .legal h4 { color: var(--blue); margin: 1.6em 0 .6em; }
.legal p { color: var(--t-secondary); }
.legal a { color: var(--blue); }
.legal ul { margin: 12px 0 12px 24px; color: var(--t-secondary); }

/* ===================== FOOTER ===================== */
.site-footer {
  position: relative;
  background: var(--deep-dark);
  border-top: 1px solid var(--hairline);
  padding: 64px 24px 28px;
  margin-top: 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: min(680px, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-30), transparent);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.footer-brand img { height: 24px; opacity: .95; margin-bottom: 16px; }
.footer-brand p { color: var(--t-tertiary); font-size: .88rem; max-width: 30ch; margin: 0; }
.footer-col h4 {
  color: var(--t-secondary);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--t-tertiary); font-size: .9rem; transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--blue); }
.footer-col address { font-style: normal; color: var(--t-tertiary); font-size: .9rem; line-height: 1.7; }
.footer-col address a { color: var(--t-secondary); }
.footer-col address a:hover { color: var(--blue); }
.footer-bottom {
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy { color: var(--t-muted); font-size: .82rem; margin: 0; }
.footer-bottom .footer-mini { display: flex; gap: 20px; }
.footer-bottom .footer-mini a { color: var(--t-muted); font-size: .82rem; }
.footer-bottom .footer-mini a:hover { color: var(--blue); }
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===================== SCROLL-ANIMATION ===================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 820px) {
  .feature, .grid-2 { grid-template-columns: 1fr; gap: 28px; }
  .feature.reverse .feature-media { order: 0; }
  .feature-media { max-height: 320px; }
}
@media (max-width: 768px) {
  .burger { display: flex; }
  .nav-links {
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(13,13,26,.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 16px; border-top: 1px solid var(--hairline); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   C-OPTIK UPGRADE (2026-07-04): Kino-Hero, Glow, Scramble
   ========================================================= */

/* --- Hero: Vollbild mit Foto, Parallax + Partikel --- */
.hero--cinema {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 90px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.hero-bg::before,
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-bg::before { background: linear-gradient(to top, var(--deep-dark) 8%, rgba(6,6,20,.55) 45%, transparent 100%); }
.hero-bg::after  { background: linear-gradient(to right, rgba(6,6,20,.85) 0%, rgba(6,6,20,.35) 55%, transparent 100%); }

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .4;
  mix-blend-mode: screen;
}

.hero--cinema .hero-inner { z-index: 2; }
.hero--cinema .hero-logo { max-width: 320px; }

.hero-headline {
  margin: 26px auto 0;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: var(--t-primary);
  animation: fadeUp 1s var(--ease) .6s both;
}
.hero-headline .blue-line { color: var(--blue); }

.hero-sub {
  max-width: 620px;
  margin: 20px auto 0;
  font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--t-secondary);
  animation: fadeUp 1s var(--ease) .8s both;
}

/* --- Glow-Sprache (C) --- */
.glow-text {
  text-shadow:
    0 0 40px rgba(6,129,253,.35),
    0 0 120px rgba(6,129,253,.15);
}
h2.glow-soft { text-shadow: 0 0 30px rgba(6,129,253,.25); }

/* Testimonials: Glow beim Hover */
.testi {
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.testi:hover {
  transform: translateY(-4px);
  border-color: var(--blue-30);
  box-shadow: 0 0 44px -8px var(--blue-30), 0 22px 44px -20px rgba(0,0,0,.6);
}

/* --- Formular-Status --- */
.form-status { margin-top: 14px; font-size: .95rem; display: none; }
.form-status.ok { display: block; color: #34d399; }
.form-status.err { display: block; color: #f87171; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { transform: none !important; }
  .hero-particles { display: none; }
}

/* =========================================================
   SMART-HOME-DEMO (Szenen, Raum-Visual mit Jalousie)
   ========================================================= */
.scene-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 0 32px;
}
.scene-btn {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-secondary);
  background: var(--marken-dark);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.scene-btn:hover { color: var(--t-primary); border-color: var(--blue-30); }
.scene-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 26px rgba(6,129,253,.4);
}
/* Autoplay-Fortschritt: füllender Balken unter dem aktiven Szenen-Button */
.scene-btn { position: relative; overflow: hidden; }
.scene-btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
}
.scene-bar.auto .scene-btn.active::after { animation: scnProg 7s linear forwards; }
@keyframes scnProg { from { width: 0; } to { width: 100%; } }
.scene-desc {
  text-align: center;
  color: var(--t-primary);
  font-size: 1.05rem;
  margin-bottom: 26px;
  min-height: 1.6em;
  transition: opacity .3s var(--ease);
}

.demo-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.room {
  position: relative;
  height: 330px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--blue-12);
  background:
    radial-gradient(ellipse at 30% -20%, #101024, transparent 60%),
    linear-gradient(180deg, #08081a 0%, var(--deep-dark) 70%);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.65), 0 0 55px -14px var(--blue-30);
  margin-bottom: 28px;
  /* Szenen-Variablen (werden von main.js gesetzt) */
  --lamp: #ffe9c4;
  --lamp-op: .55;
  --sun-x: 22%;
  --sun-y: 60%;
  --sun-c: #ffd9a0;
  --sun-s: 22px;
  --sun-o: 1;
}
/* Bodenkante: reagiert über --lamp auf die Lichtszene */
.room::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 70px;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--lamp) 14%, transparent),
    color-mix(in srgb, var(--lamp) 4%, transparent) 55%,
    transparent);
  transition: background 1.2s var(--ease);
  pointer-events: none;
}
.room-ambient { position: absolute; inset: 0; transition: background 1.2s var(--ease); pointer-events: none; }
.room-lamp {
  position: absolute;
  top: -70px; left: 5%;
  width: 38%; height: 190px;
  border-radius: 50%;
  filter: blur(60px);
  transition: background-color 1.2s var(--ease), opacity 1.2s var(--ease);
  pointer-events: none;
}
.room-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.room-window {
  position: absolute;
  right: 5%; top: 24px; bottom: 24px;
  width: 38%;
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
}
.room-sky { position: absolute; inset: 0; transition: background 1.2s var(--ease); }
/* Sonnenstand im Fenster – Position/Farbe je Szene über Variablen */
.room-sun {
  position: absolute;
  left: var(--sun-x); top: var(--sun-y);
  width: var(--sun-s); height: var(--sun-s);
  margin: calc(var(--sun-s) / -2) 0 0 calc(var(--sun-s) / -2);
  border-radius: 50%;
  background: var(--sun-c);
  box-shadow: 0 0 22px 8px var(--sun-c);
  opacity: var(--sun-o);
  filter: blur(1px);
  transition: left 1.4s var(--ease), top 1.4s var(--ease), background 1.2s var(--ease),
              box-shadow 1.2s var(--ease), opacity 1.2s var(--ease), width 1.2s var(--ease), height 1.2s var(--ease);
  z-index: 1;
}
.room-window::before,
.room-window::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.14);
  z-index: 2;
}
.room-window::before { left: 50%; top: 0; bottom: 0; width: 2px; }
.room-window::after { top: 50%; left: 0; right: 0; height: 2px; }
.room-blinds {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  overflow: hidden;
  transition: height 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}
.room-blinds .slats { display: flex; flex-direction: column; gap: 3px; padding: 2px; }
.room-blinds .slats span {
  display: block;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2a2a3f, #191926);
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.room-panel {
  position: absolute;
  left: 6%; top: 50%;
  transform: translateY(-50%);
  width: 78px;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  border: 2px solid #1e1e1e;
  background: rgba(0,0,0,.9);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.8), 0 0 22px -6px var(--blue-30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  z-index: 4;
}
.room-panel::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(6,129,253,.14), transparent 62%);
  pointer-events: none;
}
.room-panel .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.room-panel .lbl { font-size: 8px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); text-align: center; line-height: 1.3; }
.room-panel .line { width: 26px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.15); }
.room-scene-label {
  position: absolute;
  bottom: 14px; left: 6%;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  z-index: 4;
}

/* Status-Chip (Uhrzeit + Ist-Temperatur) oben links */
.room-status {
  position: absolute;
  top: 14px; left: 6%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 6px 14px;
  font-variant-numeric: tabular-nums;
}
.room-status .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }

/* Möbel-Silhouetten – reagieren über --lamp auf die Lichtszene */
.room-furniture { position: absolute; left: 15%; right: 48%; bottom: 0; height: 120px; z-index: 2; pointer-events: none; }
.rf-sofa {
  position: absolute;
  left: 48px; bottom: 24px;
  width: 150px; height: 44px;
  background: linear-gradient(180deg, #14142c, #0e0e20);
  border-radius: 10px 10px 6px 6px;
  border-top: 1px solid color-mix(in srgb, var(--lamp) 45%, transparent);
  transition: border-color 1.2s var(--ease);
}
.rf-sofa::before {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: -26px;
  height: 30px;
  background: linear-gradient(180deg, #121228, #0d0d1e);
  border-radius: 10px 10px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--lamp) 32%, transparent);
  transition: border-color 1.2s var(--ease);
}
.rf-sofa::after {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 1px; bottom: 8px;
  background: rgba(255,255,255,.07);
}
.rf-plant {
  position: absolute;
  right: 6px; bottom: 24px;
  width: 22px; height: 18px;
  background: #12122a;
  border-radius: 3px 3px 6px 6px;
}
.rf-plant::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 14px;
  width: 34px; height: 34px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 10px 18px at 30% 70%, #16163a 60%, transparent 61%),
    radial-gradient(ellipse 10px 20px at 70% 70%, #131330 60%, transparent 61%),
    radial-gradient(ellipse 9px 22px at 50% 60%, #18183e 60%, transparent 61%);
}
.rf-lamp {
  position: absolute;
  left: 4px; bottom: 24px;
  width: 3px; height: 74px;
  background: #1c1c3a;
  border-radius: 2px;
}
.rf-lamp::before {
  content: "";
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 20px;
  background: var(--lamp);
  opacity: var(--lamp-op);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  border-radius: 3px;
  filter: blur(.4px);
  box-shadow: 0 6px 24px 4px color-mix(in srgb, var(--lamp) 45%, transparent);
  transition: background-color 1.2s var(--ease), opacity 1.2s var(--ease);
}
.rf-lamp::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 4px;
  border-radius: 999px;
  background: #14142a;
}

.mod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mod {
  background: var(--marken-dark);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 20px;
  transition: opacity .6s var(--ease), border-color .6s var(--ease);
}
.mod .mod-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mod .mod-icon { line-height: 1; color: var(--t-secondary); }
.mod .mod-icon svg { width: 22px; height: 22px; display: block; }
.mod.on .mod-icon { color: var(--t-primary); }
.mod .mod-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-muted); transition: all .6s var(--ease); }
.mod .mod-name { color: var(--t-primary); font-weight: 600; margin-bottom: 4px; }
.mod .mod-state { font-size: .82rem; color: var(--t-secondary); font-variant-numeric: tabular-nums; transition: opacity .3s var(--ease); }
.mod.on { border-color: var(--blue-30); }
.mod.on .mod-dot { background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: breathe 2.4s var(--ease) infinite; }
.mod.off { opacity: .55; }

/* Dev-Badge (Home Assistant "In Entwicklung") */
.dev-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-12);
  border: 1px solid var(--blue-30);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.small-print { font-size: .78rem; color: var(--t-tertiary); line-height: 1.6; margin-top: 20px; }

/* =========================================================
   WÄRMEBILD – gemeinsame Bausteine (Scan, Skala, HUD)
   ========================================================= */
@keyframes hotPulse { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.thermal-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: scanMove 5s linear infinite;
}
@keyframes scanMove { from { top: -2%; } to { top: 102%; } }

/* Beschriftete Temperaturskala (Ironbow) */
.thermal-scale {
  position: absolute;
  top: 58px; left: 16px; bottom: 56px;
  width: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(to bottom, #ffffff, #ffd166 22%, #f3722c 45%, #d61c5c 68%, #46108a 86%, #12005e);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.thermal-scale span {
  position: absolute;
  left: 14px;
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.thermal-scale span:nth-child(1) { top: -4px; }
.thermal-scale span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.thermal-scale span:nth-child(3) { bottom: -4px; }

.hud-chip {
  position: absolute;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 12px;
  z-index: 5;
  white-space: nowrap;
}
.hud-chip.tl { top: 14px; left: 14px; }
.hud-chip.tr { top: 14px; right: 14px; }
.hud-chip.bl { bottom: 14px; left: 14px; }
.hud-chip.br { bottom: 14px; right: 14px; }
.hud-chip.alarm { color: #ffd166; border-color: rgba(243,114,44,.4); animation: breathe 2.4s var(--ease) infinite; }
.hud-chip.dim { color: rgba(255,255,255,.32); }
.hud-chip .dot-live {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  margin-right: 7px;
  vertical-align: 1px;
  animation: breathe 2.4s var(--ease) infinite;
}
.hud-chip svg { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; margin-right: 5px; }

/* Karten-Raster (Einsatzfelder / Prinzipien) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.info-card {
  background: var(--marken-dark);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 28px;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.info-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-30);
  box-shadow: 0 0 44px -8px var(--blue-30);
}
.info-card .icon { margin-bottom: 14px; display: block; color: var(--blue); }
.info-card .icon svg { width: 28px; height: 28px; display: block; }
.info-card h3 { margin-bottom: 10px; font-size: 1.15rem; }
.info-card p { color: var(--t-secondary); font-size: .95rem; margin: 0; }
.info-card.bad .icon { color: var(--t-tertiary); transition: color .45s var(--ease); }
.info-card.bad:hover .icon { color: rgba(248,113,113,.75); }
.info-card.bad:hover { border-color: rgba(248,113,113,.35); box-shadow: 0 0 44px -8px rgba(248,113,113,.25); }

@media (max-width: 900px) {
  .mod-grid { grid-template-columns: repeat(2, 1fr); }
  .room { height: 280px; }
  .room-panel { display: none; }
  .room-furniture { left: 6%; }
  .rf-sofa { left: 34px; width: 118px; }
}

/* =========================================================
   FLOW-DIAGRAMM (Sensorik -> Logik -> Aktorik), SVG + SMIL
   ========================================================= */
.flow-wrap { margin-top: 56px; }
.flow-wrap h3 { text-align: center; margin-bottom: 6px; }
.flow-wrap .flow-sub { text-align: center; color: var(--t-secondary); margin-bottom: 26px; }
.flow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flow-svg { display: block; width: 100%; min-width: 640px; height: auto; }
.flow-svg .node {
  fill: var(--marken-dark);
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
}
.flow-svg .node--core {
  stroke: var(--blue-30);
  animation: breathe 3.2s var(--ease) infinite;
}
.flow-svg .node--alarm { stroke: rgba(245,158,11,.45); animation: breathe 2.4s var(--ease) infinite; }
.flow-svg text {
  font-family: 'Inter', system-ui, sans-serif;
  fill: rgba(255,255,255,.82);
  font-size: 14px;
  font-weight: 600;
}
.flow-svg text.sub { fill: rgba(255,255,255,.42); font-size: 11px; font-weight: 400; }
.flow-svg .wire { stroke: rgba(6,129,253,.28); stroke-width: 1.5; fill: none; }
.flow-svg .signal { fill: var(--blue); }
@media (prefers-reduced-motion: reduce) {
  .flow-svg .signal { display: none; }
}

/* =========================================================
   THERMAL-VERGLEICH (Standard-Kamera <-> Wärmebild)
   Links Ironbow-Wärmebild, rechts Nachtaufnahme – Regler ziehen.
   ========================================================= */
.thermal-compare {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--blue-12);
  background: #05060a;
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.65), 0 0 55px -14px var(--blue-30);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  --split: 62%;
}
.thermal-compare:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.tc-layer { position: absolute; inset: 0; }

/* Sensor-Körnung – lebt leicht, wie echtes Kamerarauschen */
.tc-noise {
  position: absolute;
  inset: -24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .16;
  pointer-events: none;
  animation: grain 1.1s steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-9px,7px); }
  66%  { transform: translate(7px,-9px); }
  100% { transform: translate(0,0); }
}

/* ---------- Nachtansicht (Standard-Kamera) ---------- */
.tc-night {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(120,140,165,.10), transparent 55%),
    linear-gradient(180deg, #0a0d12 0%, #06080c 70%, #04050a 100%);
}
.tc-night .tc-noise { opacity: .24; }
.tc-night::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16%;
  background: linear-gradient(to top, rgba(140,160,185,.07), transparent);
}
.tc-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.78) 100%);
  pointer-events: none;
}

/* Regale: nachts nur zu erahnen, thermisch kühl gezeichnet */
.tc-rack { position: absolute; bottom: 12%; width: 17%; height: 52%; border-radius: 3px; }
.tc-rack.r1 { left: 8%; }
.tc-rack.r2 { left: 51%; height: 44%; }
.tc-rack.r3 { right: 6%; height: 60%; }
.tc-night .tc-rack {
  border: 1px solid rgba(160,180,205,.08);
  background:
    repeating-linear-gradient(180deg, transparent 0 24%, rgba(160,180,205,.05) 24% 26%),
    linear-gradient(180deg, rgba(160,180,205,.02), transparent);
}

/* Person: für die Standard-Kamera praktisch unsichtbar */
.tc-person { position: absolute; left: 31%; bottom: 13%; width: 12%; }
.tc-person svg { width: 100%; height: auto; display: block; }
.tc-night .tc-person svg { fill: #07090e; }

/* ---------- Wärmebild (Ironbow) ---------- */
.tc-thermal {
  background:
    radial-gradient(ellipse at 78% 92%, rgba(214,28,92,.30), transparent 46%),
    radial-gradient(ellipse at 18% 100%, rgba(120,40,160,.38), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(20,4,70,.9), transparent 70%),
    linear-gradient(160deg, #180545 0%, #2c0a63 45%, #13034e 100%);
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.tc-thermal .tc-noise { opacity: .18; mix-blend-mode: soft-light; }
.tc-thermal .tc-rack {
  border: 1px solid rgba(150,120,255,.38);
  background:
    repeating-linear-gradient(180deg, rgba(40,14,110,.6) 0 24%, rgba(130,90,230,.32) 24% 26%),
    linear-gradient(180deg, rgba(90,50,190,.18), rgba(30,8,90,.5));
  box-shadow: inset 0 0 26px rgba(18,0,70,.65);
}

/* Person thermisch: glühend, mit atmender Wärme-Aura */
.tc-thermal .tc-person::before {
  content: "";
  position: absolute;
  inset: -34% -62%;
  background: radial-gradient(ellipse at 50% 38%, rgba(255,140,40,.5), rgba(214,28,92,.22) 55%, transparent 76%);
  filter: blur(16px);
  animation: breathe 3.6s var(--ease) infinite;
  pointer-events: none;
}
.tc-thermal .tc-person svg {
  position: relative;
  fill: url(#tcHeat);
  filter: blur(1.2px) drop-shadow(0 0 16px rgba(255,120,40,.6));
}

/* Heißer Motor im mittleren Regal (nur thermisch sichtbar,
   liegt links vom Standard-Split und bleibt so im Bild) */
.tc-hot {
  position: absolute;
  left: 52.5%; bottom: 38%;
  width: 8%; aspect-ratio: 1.5;
  border-radius: 4px;
  background: radial-gradient(circle, #ffffff 0%, #ffe14d 30%, #ff5400 70%, transparent 100%);
  filter: blur(5px);
  animation: hotPulse 2.4s var(--ease) infinite;
}

/* Fadenkreuz + Live-Messwert am Hotspot */
.tc-cross {
  position: absolute;
  left: 56.5%; bottom: 42%;
  width: 0; height: 0;
  z-index: 3;
}
.tc-cross::before,
.tc-cross::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 6px rgba(0,0,0,.65);
}
.tc-cross::before { left: -16px; width: 32px; height: 1px; top: 0; }
.tc-cross::after  { top: -16px; height: 32px; width: 1px; left: 0; }
.tc-cross-label {
  position: absolute;
  right: 22px; top: -34px;
  font-size: 10px;
  letter-spacing: .1em;
  color: #ffd166;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(243,114,44,.45);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tc-thermal .thermal-scan { z-index: 2; }

/* Griff */
.tc-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 14px rgba(6,129,253,.5);
  z-index: 5;
  pointer-events: none;
}
.tc-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(13,13,26,.85);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgba(255,255,255,.85);
}
.tc-grip svg { width: 9px; height: 12px; display: block; }
.tc-layer .hud-chip { z-index: 4; }

/* =========================================================
   HOME-ASSISTANT-PANEL-DEMO (interaktives Dashboard-Mockup)
   Rahmen = Produkt-Schwarz, Screen = Tugech-HA-Theme.
   ========================================================= */
.ha-frame { position: relative; }
.ha-frame::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(ellipse at 50% 55%, var(--blue-12), transparent 65%);
  filter: blur(42px);
  pointer-events: none;
}
.ha-panel {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(170deg, #232323, #1a1a1a);
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 70px -28px rgba(0,0,0,.75),
    0 0 70px -18px var(--blue-30);
}
.ha-cam {
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.07);
}
.ha-screen {
  border-radius: 12px;
  background: var(--base-dark);
  overflow: hidden;
  padding: 18px;
}
.ha-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.ha-clock {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--t-primary);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.ha-room {
  font-size: .74rem;
  color: var(--t-tertiary);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ha-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-tertiary);
}
.ha-status .ha-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.ha-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ha-card {
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  background: var(--marken-dark);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  color: var(--t-secondary);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease);
}
.ha-card:hover { border-color: var(--blue-30); }
.ha-card:active { transform: scale(.98); }
.ha-card .ha-ic { color: var(--t-tertiary); margin-bottom: 7px; transition: color .35s var(--ease), filter .35s var(--ease); }
.ha-card .ha-ic svg { width: 20px; height: 20px; display: block; }
.ha-card .ha-name { font-size: .85rem; font-weight: 600; color: var(--t-primary); }
.ha-card .ha-sub { font-size: .75rem; color: var(--t-tertiary); font-variant-numeric: tabular-nums; transition: color .35s var(--ease); }
.ha-card.on {
  background: linear-gradient(150deg, rgba(6,129,253,.16), var(--marken-dark) 72%);
  border-color: var(--blue-30);
}
.ha-card.on .ha-ic { color: var(--blue); filter: drop-shadow(0 0 8px rgba(6,129,253,.5)); }
.ha-card.on .ha-sub { color: var(--t-secondary); }
.ha-slider {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  margin-top: 9px;
  overflow: hidden;
}
.ha-slider i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--blue);
  box-shadow: 0 0 8px rgba(6,129,253,.6);
  transition: width .5s var(--ease);
}
.ha-card.wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  cursor: default;
}
.ha-card.wide .ha-ic { margin-bottom: 0; }
.ha-card.wide .ha-meta { display: flex; flex-direction: column; gap: 3px; }
.ha-temp {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ha-temp b {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--t-primary);
  font-variant-numeric: tabular-nums;
  min-width: 4.2em;
  text-align: center;
}
.ha-step {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--blue-30);
  background: transparent;
  color: var(--blue);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s var(--ease);
  padding: 0;
}
.ha-step:hover { background: var(--blue-12); }
.ha-hint {
  text-align: center;
  font-size: .8rem;
  color: var(--t-tertiary);
  margin: 16px 0 0;
}
@media (max-width: 380px) {
  .ha-cards { grid-template-columns: 1fr; }
}