/*
  tidiam Grafik-Sprache v2 (2026-09-25): gemeinsamer Baukasten fuer alle Illustrationen und Architektur-Bilder.
  Jede Grafik ist eine eigene Datei unter /media/visuals/, eingebettet per iframe. Regeln in DESIGN-SYSTEM.md.
  Grundsaetze: ruhige Flaeche ohne Raster, Kacheln mit Haarlinie und weichem Schatten, Satzschreibung statt
  Versalien, Farbe nur als Bedeutung, Linien duenn und neutral, Bewegung als Licht, das durch Leitungen laeuft.
*/
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --v-bg:#ffffff;
  --v-zone:#f7f7fa;
  --v-tile:#ffffff;
  --v-ink:#0f1419;
  --v-ink-2:#4a5568;
  --v-ink-3:#6b7787;
  --v-ink-4:#a0a8b6;
  --v-hair:rgba(15,20,25,.09);
  --v-hair-2:rgba(15,20,25,.06);
  --v-wire:rgba(15,20,25,.15);
  --v-plate:linear-gradient(180deg,#f7f7fa,#eceef3);
  --v-plate-ink:#3f4757;
  --v-accent:#7c3aed;
  --v-accent-ink:#6d28d9;
  --v-accent-soft:rgba(124,58,237,.08);
  --v-accent-line:rgba(124,58,237,.5);
  --v-red:#dc2626;
  --v-red-soft:rgba(220,38,38,.08);
  --v-red-line:rgba(220,38,38,.45);
  --v-amber:#d97706;
  --v-amber-soft:rgba(217,119,6,.09);
  --v-amber-line:rgba(217,119,6,.5);
  --v-green:#059669;
  --v-green-soft:rgba(5,150,105,.09);
  --v-brand:linear-gradient(150deg,#9463fa 0%,#7c3aed 48%,#5b21b6 100%);
  --v-graphite:linear-gradient(150deg,#5d6676 0%,#2c323d 100%);
  --v-shadow:0 1px 2px rgba(15,20,25,.05),0 8px 22px -10px rgba(15,20,25,.14);
  --v-shadow-lift:0 2px 6px rgba(15,20,25,.05),0 26px 50px -22px rgba(15,20,25,.28);
  --v-glow:rgba(124,58,237,.09);
  --v-ease:cubic-bezier(.22,1,.36,1);
  --v-spring:cubic-bezier(.34,1.56,.64,1);
  --v-font:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --v-bg:#141720;
  --v-zone:#191d29;
  --v-tile:#1c2130;
  --v-ink:#eef0f6;
  --v-ink-2:#b4b9cc;
  --v-ink-3:#8d93aa;
  --v-ink-4:#5c6479;
  --v-hair:rgba(255,255,255,.09);
  --v-hair-2:rgba(255,255,255,.06);
  --v-wire:rgba(255,255,255,.16);
  --v-plate:linear-gradient(180deg,#272d3c,#1f2432);
  --v-plate-ink:#c9cedc;
  --v-accent:#a78bfa;
  --v-accent-ink:#c4b5fd;
  --v-accent-soft:rgba(167,139,250,.13);
  --v-accent-line:rgba(167,139,250,.55);
  --v-red:#f87171;
  --v-red-soft:rgba(248,113,113,.13);
  --v-red-line:rgba(248,113,113,.5);
  --v-amber:#fbbf24;
  --v-amber-soft:rgba(251,191,36,.12);
  --v-amber-line:rgba(251,191,36,.5);
  --v-green:#34d399;
  --v-green-soft:rgba(52,211,153,.12);
  --v-graphite:linear-gradient(150deg,#6b7385 0%,#3a414f 100%);
  --v-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 24px -10px rgba(0,0,0,.55);
  --v-shadow-lift:0 2px 6px rgba(0,0,0,.35),0 28px 54px -22px rgba(0,0,0,.7);
  --v-glow:rgba(124,58,237,.16);
}

/* Dunkle Baender (Farbton ink der Startseite): Flaechen im violetten Schwarz statt Blaugrau */
[data-theme="dark"][data-tone="ink"]{
  --v-bg:#161129;
  --v-zone:#1b1533;
  --v-tile:#1e1836;
  --v-plate:linear-gradient(180deg,#2b2449,#221c3c);
  --v-hair:rgba(255,255,255,.08);
  --v-hair-2:rgba(255,255,255,.055);
}

html,body{margin:0;height:100%;overflow:hidden;background:transparent}
body{font-family:var(--v-font);color:var(--v-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
*{box-sizing:border-box}

/* Buehne und Leinwand: die Leinwand hat feste Masse je Layout und wird auf die iframe-Groesse skaliert */
.v-stage{position:fixed;inset:0;background:var(--v-bg);overflow:hidden}
.v-cv{position:absolute;left:50%;top:50%;transform-origin:50% 50%}
.v-cv > *{position:absolute}
.v-glow{border-radius:50%;background:radial-gradient(closest-side,var(--v-glow),transparent);pointer-events:none}
.v-wires{left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* Einblenden: steigt 8 px, schaerft sich aus 4 px Unschaerfe */
.v-e{transition:opacity .7s var(--v-ease),transform .8s var(--v-ease),filter .7s var(--v-ease),border-color .5s var(--v-ease),background-color .5s var(--v-ease),box-shadow .5s var(--v-ease),color .4s var(--v-ease)}
.v-js .v-e:not(.is-in){opacity:0;transform:translateY(8px) scale(.985);filter:blur(4px)}
.v-js .v-e.from-r:not(.is-in){transform:translateX(14px) scale(.985)}
.v-js .v-e.pop:not(.is-in){transform:scale(.94)}

/* Kachel: ein Objekt (System, Konto, Rolle, Ergebnis) */
.t{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 8px;background:var(--v-tile);border:1px solid var(--v-hair);border-radius:12px;box-shadow:var(--v-shadow);font-size:13px;font-weight:600;letter-spacing:-.006em;color:var(--v-ink);white-space:nowrap}
.t .tx{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.2}
.t .tx small{font-size:11.5px;font-weight:450;letter-spacing:0;color:var(--v-ink-3)}
.t .end{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.t.col{flex-direction:column;justify-content:center;gap:8px;height:auto;padding:14px 8px;text-align:center}
.card{background:var(--v-tile);border:1px solid var(--v-hair);border-radius:16px;box-shadow:var(--v-shadow-lift)}
.lift{box-shadow:var(--v-shadow-lift)}

/* Symbolplatte: 28 px, gross 40, Marke tidiam, Graphit fuer technische Konten */
.ic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--v-plate);color:var(--v-plate-ink);box-shadow:inset 0 0 0 .5px var(--v-hair);transition:background .5s var(--v-ease),color .5s var(--v-ease)}
.ic svg{width:16px;height:16px;display:block}
.ic.md{width:32px;height:32px;border-radius:9px}
.ic.md svg{width:18px;height:18px}
.ic.lg{width:40px;height:40px;border-radius:11px}
.ic.lg svg{width:22px;height:22px}
.ic.xl{width:60px;height:60px;border-radius:16px}
.ic.xl svg{width:30px;height:30px}
.ic.brand{background:var(--v-brand);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -6px rgba(124,58,237,.55)}
.ic.graphite{background:var(--v-graphite);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.ic.soft{background:var(--v-accent-soft);color:var(--v-accent-ink);box-shadow:none}

/* Zustand: Farbe nur als Bedeutung. Rot Risiko, Amber unklar, Gruen bestaetigt */
.t.is-risk{border-color:var(--v-red-line);background:color-mix(in oklab,var(--v-red) 3%,var(--v-tile))}
.t.is-risk .ic{background:var(--v-red-soft);color:var(--v-red);box-shadow:none}
.t.is-warn{border-color:var(--v-amber-line);background:color-mix(in oklab,var(--v-amber) 3%,var(--v-tile))}
.t.is-warn .ic{background:var(--v-amber-soft);color:var(--v-amber);box-shadow:none}

/* Zustandsmarke rechts in der Kachel: gefuellter Kreis, springt herein */
.b{width:16px;height:16px;flex:none;display:block;opacity:0;transform:scale(.4);transition:transform .5s var(--v-spring),opacity .25s ease}
.is-risk > .b,.is-risk .end .b{color:var(--v-red)}
.is-warn > .b,.is-warn .end .b{color:var(--v-amber)}
.is-ok > .b,.is-ok .end .b{color:var(--v-green)}
.is-risk .b,.is-warn .b,.is-ok .b,.b.is-on{opacity:1;transform:none}
.t > .b{margin-left:auto}

/* Leitungen: neutral, duenn; Bedeutung ueber Farbe; Licht laeuft durch */
.w{fill:none;stroke:var(--v-wire);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s var(--v-ease),stroke-width .6s var(--v-ease),opacity .6s var(--v-ease)}
.w.is-accent{stroke:var(--v-accent-line);stroke-width:1.5}
.w.is-risk{stroke:var(--v-red-line);stroke-width:1.5}
.w.is-warn{stroke:var(--v-amber-line);stroke-width:1.5}
.w.is-ok{stroke:color-mix(in oklab,var(--v-green) 50%,transparent);stroke-width:1.5}
.w.is-dim{opacity:.35}
.fx{fill:none;stroke-linecap:round;opacity:0;stroke:var(--v-accent)}
.fx.core{stroke-width:2}
.fx.halo{stroke-width:7}
.fx.red{stroke:var(--v-red)}
.fx.amber{stroke:var(--v-amber)}
.fx.green{stroke:var(--v-green)}

/* Texte in der Grafik */
.lbl{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:-.004em;color:var(--v-ink);white-space:nowrap}
.lbl svg{width:15px;height:15px;flex:none;color:var(--v-accent-ink)}
.lbl.sub{font-weight:450;font-size:12px;color:var(--v-ink-3)}
.cap{font-size:12px;font-weight:450;color:var(--v-ink-3);line-height:1.4}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.num .sep{font-variant-numeric:normal;font-feature-settings:normal}

/* Zonen: Netze und Standorte als ruhige Flaechen */
.zone{border-radius:18px;background:var(--v-zone);border:1px solid var(--v-hair-2)}
.zone.brand{background:color-mix(in oklab,var(--v-accent) 5%,var(--v-bg));border-color:color-mix(in oklab,var(--v-accent) 18%,transparent)}
.zt{font-size:12.5px;font-weight:650;letter-spacing:-.004em;color:var(--v-ink);white-space:nowrap}
.zt small{font-size:12px;font-weight:450;color:var(--v-ink-3);margin-left:6px}
.zone.brand .zt b{color:var(--v-accent-ink);font-weight:700}

/* Schluessel-Wert-Zeilen in Karten */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:38px;border-top:1px solid var(--v-hair-2);font-size:13px}
.row .k{color:var(--v-ink-2);font-weight:450}
.row .v{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--v-ink);transition:color .5s var(--v-ease)}
.row.is-risk .v{color:var(--v-red)}
.row.is-warn .v{color:var(--v-amber)}
.row.is-ok .v{color:var(--v-green)}

/* Ring (Score): einzige Stelle mit dickem Strich */
.ring{display:block;overflow:visible}
.ring .track{fill:none;stroke:var(--v-hair-2);stroke-width:8}
.ring .val{fill:none;stroke:url(#v-accent-grad);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--v-ease),opacity .2s}

/* Fortschritt */
.bar{height:4px;border-radius:2px;background:var(--v-hair-2);overflow:hidden}
.bar > i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--v-accent);transform:scaleX(0);transform-origin:0 50%}

/* Aktivitaetsanzeige, wird zum Haken */
.spin{width:14px;height:14px;border-radius:50%;border:1.6px solid var(--v-hair);border-top-color:var(--v-ink-3);animation:v-spin .8s linear infinite}
@keyframes v-spin{to{transform:rotate(360deg)}}

/* Knopf in Produktbildern */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;background:var(--v-accent);color:#fff;font-size:13px;font-weight:600;transition:transform .25s var(--v-ease),background .4s var(--v-ease),color .4s var(--v-ease)}
[data-theme="dark"] .btn{background:#7c3aed}
.btn.is-press{transform:scale(.95)}
.btn.is-done{background:var(--v-green-soft);color:var(--v-green)}

/* Layout-Weichen: .only-land / .only-port blenden je Leinwand-Layout ein */
.v-cv[data-layout="land"] .only-port,.v-cv[data-layout="port"] .only-land{display:none!important}

/* Zuruecksetzen ohne Uebergang (Schleifen) und Standbild (reduced motion) */
.v-reset,.v-reset *{transition:none!important}
.v-still *,.v-still *::before,.v-still *::after{transition:none!important;animation:none!important}
.v-still .spin{display:none}