/* ============================================================
   AiMi-Highlight — nur auf aimi.html, NACH styles.css geladen.
   Überschreibt die PlanReal-Leitfarbe (Blau) zurück auf reines Grün
   und verstärkt die Blueprint-Ästhetik → AiMi hebt sich als
   eigenständiges Produkt ab.
   ============================================================ */

:root{
  /* Leitfarbe = Aktionsgrün → monochrom-grüner Produktauftritt */
  --brand:#8ACE2A;
  --brand-soft:#A6E24E;
  --brand-deep:#1A6B2E;
  --accent:#8ACE2A;
  --accent-soft:#A6E24E;
  /* Blueprint kräftiger als auf den PlanReal-Seiten */
  --grid:rgba(138,206,42,0.08);
  --grid-bg:rgba(138,206,42,0.03);
}

/* Blueprint-Raster präsenter im Hero (weitere Öffnung der Maske) */
.hero::before{
  background-size:44px 44px; /* ENTWURF 2: angeglichen ans globale Raster (war 40px → wirkte doppelt/enger) */
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 30% 42%,#000 42%,transparent 82%);
  mask-image:radial-gradient(ellipse 85% 75% at 30% 42%,#000 42%,transparent 82%);
}

/* Grün-getönte Häkchen-Badges und Tags konsistent zum Produktgrün */
.src .b{background:rgba(138,206,42,.14);}
.news-article-tag{background:rgba(138,206,42,.14);color:var(--accent);}
.roadmap-badge.available{background:rgba(138,206,42,.16);}
.contrast .col.good{background:linear-gradient(145deg,rgba(138,206,42,.08),rgba(138,206,42,.02));border-color:rgba(138,206,42,.3);}

/* ============================================================
   Schema-Icons — eigene Symbolsprache im Anlagenschema-Stil.
   Duenne Linien, keine Flaechen; Farbe kommt ueber currentColor
   aus dieser Klasse (nie hart im SVG), damit die Icons der
   AiMi-Leitfarbe folgen.
   ============================================================ */
.schema-icon{
  display:block; width:40px; height:40px; margin:14px 0 2px;
  color:var(--accent); stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:color .2s ease;
}
.card:hover .schema-icon{color:var(--accent-soft);}
/* gestrichelte Signatur (statisch, z. B. Wasserstand im Speicher) */
.schema-icon .dashed{stroke-dasharray:6 7;}
/* gestrichelte Durchfluss-Signatur — laeuft nur beim Hover */
.schema-icon .flow{stroke-dasharray:6 7;}
.schema-icon .flow{animation:si-flow 3.4s linear infinite;}
.card:hover .schema-icon .flow{animation-duration:1.2s;}
/* Pumpenrotor dreht beim Hover an */
.schema-icon .rotor{transform-origin:32px 32px;}
.schema-icon .rotor{animation:si-spin 11s linear infinite;}
.card:hover .schema-icon .rotor{animation-duration:1.4s;}
/* Manometer-Zeiger schlaegt beim Hover aus */
.schema-icon .needle{transform-origin:32px 40px;animation:si-sway 4.2s ease-in-out infinite;}
.card:hover .schema-icon .needle{animation:si-swing .9s cubic-bezier(.34,1.56,.64,1) infinite alternate;}
@keyframes si-spin{to{transform:rotate(360deg);}}
@keyframes si-flow{to{stroke-dashoffset:-13;}}
@keyframes si-sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(9deg);}}
@keyframes si-swing{from{transform:rotate(-4deg);}to{transform:rotate(40deg);}}
/* Heizkoerper: Lamellen "waermen sich auf" (Welle) */
.schema-icon .fin{animation:si-warm 3.6s ease-in-out infinite;}
.schema-icon .fin:nth-of-type(2){animation-delay:.45s;}
.schema-icon .fin:nth-of-type(3){animation-delay:.9s;}
.schema-icon .fin:nth-of-type(4){animation-delay:1.35s;}
@keyframes si-warm{0%,100%{opacity:.45;}30%{opacity:1;}}
/* Speicher: Wellen stroemen dauerhaft langsam */
.schema-icon .dashed{animation:si-flow 4.5s linear infinite;}
.card:hover .schema-icon .dashed{animation-duration:1.6s;}
/* Waermetauscher: Pfeile im Gegentakt */
.schema-icon .exch-a{animation:si-exa 2.8s ease-in-out infinite;}
.schema-icon .exch-b{animation:si-exb 2.8s ease-in-out infinite;}
@keyframes si-exa{0%,100%{transform:translateX(0);opacity:.5;}50%{transform:translateX(5px);opacity:1;}}
@keyframes si-exb{0%,100%{transform:translateX(0);opacity:.5;}50%{transform:translateX(5px);opacity:1;}}
/* Karten leicht versetzt, damit nichts im Gleichtakt tickt */
.card:nth-child(2) .schema-icon *{animation-delay:.6s;}
.card:nth-child(4) .schema-icon *{animation-delay:1.1s;}
.card:nth-child(6) .schema-icon *{animation-delay:1.7s;}
@media(prefers-reduced-motion:reduce){
  .card:hover .schema-icon .flow,
  .card:hover .schema-icon .rotor{animation:none;}
  .schema-icon .rotor,.schema-icon .flow,.schema-icon .needle,.schema-icon .fin,
  .schema-icon .dashed,.schema-icon .exch-a,.schema-icon .exch-b{animation:none;}
  .schema-icon .needle{transition:none;}
  .card:hover .schema-icon .needle{transform:none;}
}

/* ENTWURF 2: LED-Glimmen in AiMi-Gruen */
:root{
  --pulse-head: rgba(138,206,42,.60);
  --pulse-tail: rgba(138,206,42,.12);
  --node:  rgba(138,206,42,.34);
}


/* ENTWURF 3: Buehne frei fuers Netz — Raster nur noch ein Hauchen,
   Knoten-Glimmen im Raster entfernt (das Netz IST jetzt das Glimmen). */
:root{ --grid:rgba(138,206,42,0.04); }
body::before{
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/44px 44px,
    radial-gradient(ellipse 780px 560px at 82% 12%, var(--grid-bg), transparent 70%),
    radial-gradient(ellipse 900px 700px at 8% 88%, var(--grid-bg), transparent 70%);
}

/* ENTWURF 6: AiMi-Seite folgt Minimal Precision; Gruen bleibt der EINE Akzent */
:root{ --grid:rgba(138,206,42,0.025); }

/* ============================================================
   ENTWURF 6b — Ruhe im Detail:
   Die Schema-Icons animieren NICHT mehr im Leerlauf (keine
   Dauer-Animationen). Sie erwachen erst beim Hover auf der Karte.
   ============================================================ */
.schema-icon .flow,.schema-icon .rotor,.schema-icon .needle,.schema-icon .fin,
.schema-icon .dashed,.schema-icon .exch-a,.schema-icon .exch-b{animation:none;}
.schema-icon .needle{transform:rotate(-3deg);}
.card:hover .schema-icon .flow{animation:si-flow 1.2s linear infinite;}
.card:hover .schema-icon .dashed{animation:si-flow 1.6s linear infinite;}
.card:hover .schema-icon .rotor{animation:si-spin 1.4s linear infinite;}
.card:hover .schema-icon .needle{animation:si-swing .9s cubic-bezier(.34,1.56,.64,1) infinite alternate;}
.card:hover .schema-icon .fin{animation:si-warm 1.8s ease-in-out infinite;}
.card:hover .schema-icon .exch-a{animation:si-exa 1.4s ease-in-out infinite;}
.card:hover .schema-icon .exch-b{animation:si-exb 1.4s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){
  .card:hover .schema-icon *{animation:none;}
}

/* Icons duenner und ruhiger, mehr Luft zur Headline */
.schema-icon{width:34px;height:34px;stroke-width:1.5;margin:22px 0 4px;}

/* Demo-Fenster: weniger Kasten, mehr Praezision */
.win{border-radius:12px;border-color:rgba(233,237,241,.10);background:rgba(22,27,34,.55);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.8);}
.win-body{min-height:320px;padding:26px;}