/* ==========================================================================
   Innuvis — Oberflaechen-Nachbauten (in-mockup.css)
   --------------------------------------------------------------------------
   Was das ist: ein in HTML und CSS nachgebautes Fenster der Innuvis-
   Oberflaeche. KEIN Screenshot und kein Bild — null Kilobyte, gestochen
   scharf auf jedem Display, und die Werte lassen sich bewegen (Zahl zaehlt
   hoch, Ampel springt), was ein PNG nicht kann.

   Warum das Fenster HELL ist, obwohl die Website dunkel ist: das echte
   Portal ist hell. Ein dunkler Nachbau saehe huebscher aus und waere
   gelogen. Die helle Flaeche auf dunklem Grund liest sich als Fenster in
   das System — dieselbe Entscheidung wie beim echten Screenshot auf der
   Startseite (siehe ANNAHMEN B3).

   Ehrlichkeit: jeder Nachbau traegt sichtbar die Zeile
   "Beispieldarstellung" — er gibt sich nicht als Screenshot aus.

   Schriftgroessen: nirgends unter 12 px (--in-t-xs). Ein Nachbau verfuehrt
   dazu, Oberflaechentext winzig zu setzen; der Messlauf faengt das sonst
   als Befund. Farben sind auf dem hellen Grund gegen 4,5:1 gerechnet.
   ========================================================================== */

.in-mockup-rahmen{margin:0}

.in-mockup{
  /* Eigene Tokens: innerhalb des Fensters gilt die helle Palette des
     Portals, nicht die dunkle der Website. */
  /* Die Werte stammen aus den echten Aufnahmen des Portals (img/), damit
     Nachbau und Bildschirmfoto auf derselben Seite nicht auseinanderfallen. */
  --mk-bg:#F5F7F9;
  --mk-flaeche:#FFFFFF;
  --mk-linie:#E4EAF0;
  --mk-text:#16233A;
  --mk-text-dim:#4E5C72;
  --mk-akzent:#0E7C6B;
  --mk-akzent-hell:#E6F4F1;
  --mk-leiste:#E9F7F0;
  --mk-oberkante:#2FBF9B;
  --mk-gruen:#1B7A4B;
  --mk-gelb:#8A5A00;
  --mk-rot:#B3261E;
  --mk-gruen-flaeche:#EAF7EF;
  --mk-gelb-flaeche:#FEF9E7;
  --mk-rot-flaeche:#FDEEEE;
  --mk-blau-flaeche:#EFF5FE;
  --mk-gruen-linie:#CDEBD9;
  --mk-gelb-linie:#F6E6B8;
  --mk-rot-linie:#F5CFCF;
  --mk-blau-linie:#D8E7FB;

  display:grid;grid-template-columns:196px 1fr;
  background:var(--mk-bg);color:var(--mk-text);
  border:1px solid var(--in-border);border-radius:12px;overflow:hidden;
  font-size:var(--in-t-s);line-height:1.45;
}

/* --- Seitenleiste ------------------------------------------------------ */
.in-mockup-leiste{
  background:var(--mk-leiste);border-right:1px solid var(--mk-linie);
  padding:18px 16px;display:flex;flex-direction:column;gap:14px;
}
.in-mockup-marke{
  display:flex;align-items:center;gap:9px;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--in-t-s);
  color:var(--mk-akzent);letter-spacing:.01em;
}
.in-mockup-marke::before{
  content:"";width:18px;height:18px;border-radius:50%;
  background:conic-gradient(from 220deg,#0E7C6B,#3FB6A0,#7FC4FF,#0E7C6B);
  flex:none;
}
.in-mockup-gruppe{display:flex;flex-direction:column;gap:3px}
.in-mockup-gruppe-titel{
  font-size:var(--in-t-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mk-text-dim);margin:0;
}
.in-mockup-punkt{
  font-size:var(--in-t-xs);color:var(--mk-text-dim);
  padding:8px 11px;border-radius:9px;line-height:1.35;
  background:var(--mk-flaeche);border:1px solid transparent;
}
.in-mockup-punkt-aktiv{
  background:var(--mk-akzent-hell);color:var(--mk-akzent);font-weight:600;
  border-color:var(--mk-oberkante);
}

/* --- Inhaltsflaeche ---------------------------------------------------- */
.in-mockup-inhalt{padding:22px 24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.in-mockup-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.in-mockup-titel{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:var(--in-t-m);
  margin:0;color:var(--mk-text);
}
.in-mockup-meta{font-size:var(--in-t-xs);color:var(--mk-text-dim);margin:0}

/* Kennzahlen-Kacheln */
.in-mockup-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.in-mockup-kachel{
  background:var(--mk-flaeche);border:1px solid var(--mk-linie);border-radius:12px;
  padding:16px 18px;
}
/* Im Portal traegt jede Kachel die Farbe ihres Zustands. Die Reihenfolge
   Bestand - in Ordnung - faellig - ueberfaellig ist dort gesetzt; die
   Kacheln uebernehmen sie ueber die Position. */
.in-mockup-kacheln-status .in-mockup-kachel:nth-child(1){background:var(--mk-blau-flaeche);border-color:var(--mk-blau-linie)}
.in-mockup-kacheln-status .in-mockup-kachel:nth-child(2){background:var(--mk-gruen-flaeche);border-color:var(--mk-gruen-linie)}
.in-mockup-kacheln-status .in-mockup-kachel:nth-child(3){background:var(--mk-gelb-flaeche);border-color:var(--mk-gelb-linie)}
.in-mockup-kacheln-status .in-mockup-kachel:nth-child(4){background:var(--mk-rot-flaeche);border-color:var(--mk-rot-linie)}
.in-mockup-kachel dt{font-size:var(--in-t-xs);color:var(--mk-text-dim);margin:0 0 8px}
.in-mockup-kachel dd{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--in-t-l);
  line-height:1.05;margin:0;color:var(--mk-text);
}
.in-mockup-kachel dd span{
  display:block;font-family:'Inter',sans-serif;font-weight:400;
  font-size:var(--in-t-xs);color:var(--mk-text-dim);margin-top:6px;
}

/* Tabelle: Liste mit Zeilen, wie eine Bestands- oder Fristenuebersicht */
.in-mockup-tabelle{
  background:var(--mk-flaeche);border:1px solid var(--mk-linie);border-radius:12px;
  border-top:3px solid var(--mk-oberkante);overflow:hidden;
}
.in-mockup-zeile{
  display:grid;gap:12px;align-items:center;
  padding:12px 15px;border-top:1px solid var(--mk-linie);
  font-size:var(--in-t-xs);
}
.in-mockup-zeile:first-child{border-top:none}
.in-mockup-kopfzeile{
  background:#EDF2F7;font-weight:600;color:var(--mk-text-dim);
  letter-spacing:.04em;text-transform:uppercase;
}
/* Spaltenbilder der Zeilen. Als benannte Klassen statt inline-style, damit
   die Breiten an einer Stelle stehen und im schmalen Fenster gemeinsam
   umgestellt werden koennen. */
.in-mk-sp-mess{grid-template-columns:1.7fr .9fr .9fr .8fr}
.in-mk-sp-liste{grid-template-columns:1.4fr 1fr 1fr auto}
.in-mk-sp-akte{grid-template-columns:1fr 1fr 1.2fr auto}
.in-mk-sp-frist{grid-template-columns:1.8fr 1fr .9fr auto}

.in-mockup-zelle-stark{font-size:var(--in-t-s);font-weight:600;color:var(--mk-text)}
.in-mockup-zelle-dim{color:var(--mk-text-dim)}
.in-mockup-zahl{font-variant-numeric:tabular-nums;text-align:right}

/* Ampel — der Kern des Erinnerungssystems */
.in-mockup-ampel{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:999px;font-weight:600;font-size:var(--in-t-xs);
  white-space:nowrap;
}
.in-mockup-ampel::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.in-mockup-ampel-gruen{background:var(--mk-gruen-flaeche);color:var(--mk-gruen)}
.in-mockup-ampel-gelb{background:var(--mk-gelb-flaeche);color:var(--mk-gelb)}
.in-mockup-ampel-rot{background:var(--mk-rot-flaeche);color:var(--mk-rot)}

/* Pruefplakette */
.in-mockup-plakette{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:104px;height:104px;border-radius:50%;flex:none;
  background:var(--mk-gruen-flaeche);border:2px solid var(--mk-gruen);color:var(--mk-gruen);
  text-align:center;line-height:1.2;
}
.in-mockup-plakette b{font-family:'Outfit',sans-serif;font-size:var(--in-t-m);font-weight:700}
.in-mockup-plakette span{font-size:var(--in-t-xs);font-weight:600}

/* Zweispaltiger Block: Akte links, Plakette oder Werte rechts */
.in-mockup-akte{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  background:var(--mk-flaeche);border:1px solid var(--mk-linie);border-radius:12px;
  border-top:3px solid var(--mk-oberkante);padding:20px 22px}
.in-mockup-feldliste{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin:0}
.in-mockup-feldliste > div{
  background:#FBFDFE;border:1px solid var(--mk-linie);border-radius:9px;padding:10px 12px;
}
.in-mockup-feldliste dt{
  font-size:var(--in-t-xs);color:var(--mk-text-dim);margin:0 0 4px;
  letter-spacing:.06em;text-transform:uppercase;
}
.in-mockup-feldliste dd{font-size:var(--in-t-xs);font-weight:600;margin:0;color:var(--mk-text)}

/* Balkenreihe — Lastprofil ueber 24 Stunden */
.in-mockup-balken{
  background:var(--mk-flaeche);border:1px solid var(--mk-linie);border-radius:12px;
  border-top:3px solid var(--mk-oberkante);padding:18px 20px;
}
.in-mockup-balken-flaeche{
  display:flex;align-items:flex-end;gap:4px;height:132px;margin-bottom:10px;
}
.in-mockup-balken-flaeche i{
  flex:1;background:linear-gradient(180deg,#3FB6A0,#0E7C6B);border-radius:3px 3px 0 0;
  min-height:4px;
}
.in-mockup-balken-achse{
  display:flex;justify-content:space-between;font-size:var(--in-t-xs);color:var(--mk-text-dim);
}

/* Messwerte im Pruefprotokoll: Sollwert, Istwert, Urteil */
.in-mockup-urteil{font-weight:600;color:var(--mk-gruen)}
.in-mockup-urteil-rot{font-weight:600;color:var(--mk-rot)}

/* Bildpaar Waermebild / Realbild */
.in-mockup-bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.in-mockup-bildpaar figure{margin:0}
.in-mockup-bildpaar-flaeche{
  height:130px;border-radius:8px;border:1px solid var(--mk-linie);
}
.in-mockup-waerme{
  background:
    radial-gradient(circle at 62% 42%,#FFF3B0 0%,#F7A83A 16%,#D6452C 32%,#6C2A7A 58%,#231A5C 100%);
}
.in-mockup-real{
  background:
    linear-gradient(115deg,#C9D3DE 0%,#AAB6C4 46%,#8E9BAC 47%,#B9C4D1 100%);
}
.in-mockup-bildpaar figcaption{font-size:var(--in-t-xs);color:var(--mk-text-dim);margin-top:7px}

/* Fusszeile: die Ehrlichkeitszeile unter dem Fenster */
.in-mockup-hinweis{
  font-size:var(--in-t-xs);color:var(--in-text-dim);margin:12px 0 0;line-height:1.5;
}

/* --- Schmale Fenster --------------------------------------------------- */
@media (max-width:900px){
  .in-mockup{grid-template-columns:1fr}
  /* Die Seitenleiste wird zur Kopfzeile: die Navigationspunkte tragen auf
     einem 390-px-Schirm nichts bei und wuerden nur Hoehe fressen. */
  .in-mockup-leiste{
    flex-direction:row;align-items:center;gap:12px;
    border-right:none;border-bottom:1px solid var(--mk-linie);padding:14px 16px;
  }
  .in-mockup-gruppe{display:none}
  .in-mockup-inhalt{padding:18px 16px;gap:14px}
  .in-mockup-kacheln{grid-template-columns:repeat(2,1fr)}
  /* Vier Spalten passen auf 390 px nicht. Die Tabelle scrollt deshalb in
     ihrem eigenen Kasten — dasselbe Muster wie die Tabellen in den
     Magazin-Beitraegen. Die Seite selbst laesst sich dadurch NICHT seitlich
     schieben; das ist der Unterschied, den der Messlauf prueft. */
  .in-mockup-tabelle{overflow-x:auto}
  .in-mockup-zeile{min-width:480px}
  .in-mockup-akte{grid-template-columns:1fr;justify-items:start}
  .in-mockup-feldliste{grid-template-columns:1fr}
  .in-mockup-bildpaar{grid-template-columns:1fr}
}

/* --- Bewegung ----------------------------------------------------------
   Zeilen erscheinen versetzt, sobald das Fenster ins Bild kommt. Ohne
   .in-js-motion (kein JS oder prefers-reduced-motion) steht alles sofort
   sichtbar da — die Regeln greifen nur unter der Klasse. ---------------- */
html.in-js-motion .in-mockup-anim .in-mockup-zeile:not(.in-mockup-kopfzeile),
html.in-js-motion .in-mockup-anim .in-mockup-kachel{
  opacity:0;transform:translateY(10px);
}
html.in-js-motion .in-mockup-anim.in-mockup-lauf .in-mockup-zeile:not(.in-mockup-kopfzeile),
html.in-js-motion .in-mockup-anim.in-mockup-lauf .in-mockup-kachel{
  opacity:1;transform:none;
  transition:opacity .45s ease-out,transform .45s ease-out;
}

/* Der Balken faehrt von unten hoch. */
html.in-js-motion .in-mockup-anim .in-mockup-balken-flaeche i{transform:scaleY(.04);transform-origin:bottom}
html.in-js-motion .in-mockup-anim.in-mockup-lauf .in-mockup-balken-flaeche i{
  transform:none;transition:transform .7s cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion:reduce){
  /* Sicherheitsnetz, falls die Klasse trotzdem am <html> haengt. */
  html.in-js-motion .in-mockup-anim .in-mockup-zeile,
  html.in-js-motion .in-mockup-anim .in-mockup-kachel,
  html.in-js-motion .in-mockup-anim .in-mockup-balken-flaeche i{
    opacity:1;transform:none;transition:none;
  }
}