:root {
      /* === TU Wien corporate design === */
      --tu-blue:        #006699;  /* TU Wien Blau (HKS 43) */
      --tu-blue-dark:   #003359;
      --tu-blue-mid:    #00557f;
      --tu-blue-soft:   #3d89b0;
      --tu-blue-light:  #cfe0ea;
      --tu-blue-pale:   #eef4f8;

      --primary: var(--tu-blue);
      --accent:  var(--tu-blue);
      --accent2: var(--tu-blue-dark);
      --bg:      #eef4f8;
      --card:    #ffffff;
      --border:  #c8d6df;
      --text:    #1a2b38;
      --muted:   #5a6e7a;
      --mat:     var(--tu-blue-dark);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    /* Spalte ueber die volle Fensterhoehe: der Footer mit dem Glossar sitzt
       damit immer unten, auch wenn (leerer Builder) kaum Inhalt da ist. Der
       leere Bereich dazwischen ist gewollt. */
    body {
      font-family: 'Segoe UI', Arial, Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--text);
      display: flex; flex-direction: column; min-height: 100vh;
    }

    header {
      background: #ffffff;
      color: var(--tu-blue);
      padding: 14px 32px;
      border-bottom: 3px solid var(--tu-blue);
      box-shadow: 0 1px 5px rgba(0,0,0,0.10);
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    }
    header .tu-logo { height: 52px; width: auto; flex-shrink: 0; display: block; }
    header .header-text { min-width: 0; }
    header h1 { font-size: 1.45em; font-weight: 700; color: var(--tu-blue); letter-spacing: .2px; }
    header p { font-size: 0.8em; color: var(--muted); margin-top: 2px; }

    /* ===== SPRACHUMSCHALTER =====
       Ganz rechts im Kopf: der Wechsel betrifft die ganze Seite, nicht einen
       Abschnitt, und steht darum neben Titel und Logo statt in der Toolbar. */
    header .lang-switch {
      margin-left: auto; flex-shrink: 0; display: flex;
      border: 1px solid var(--tu-blue-light); border-radius: 6px; overflow: hidden;
    }
    .lang-btn {
      background: #fff; border: 0; cursor: pointer;
      font-family: inherit; font-size: 0.78em; font-weight: 700; letter-spacing: .4px;
      color: var(--tu-blue); padding: 7px 13px; transition: background .15s, color .15s;
    }
    .lang-btn + .lang-btn { border-left: 1px solid var(--tu-blue-light); }
    .lang-btn:hover { background: var(--tu-blue-pale); }
    .lang-btn.active { background: var(--tu-blue); color: #fff; }

    .container { max-width: 1500px; margin: 0 auto; padding: 18px; width: 100%; flex: 1 0 auto; }

    /* ===== TOOLBAR ===== */
    .toolbar {
      display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
      background: var(--card); padding: 12px 16px; border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 16px;
    }
    .toolbar .spacer { flex: 1; }

    /* ===== ABLAGEFELD (CAD-Import) ===== */
    .section-header .badge.cad { background: var(--tu-blue-mid); font-size: 0.6em; letter-spacing: .3px; }
    /* Dreifache Hoehe: das Ablagefeld ist der Einstieg, wenn nichts geladen
       ist, und muss als Ziel fuer .asm/.json auch so gross wirken. */
    .dropzone {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
      border: 2px dashed var(--tu-blue-light); border-radius: 10px; background: var(--tu-blue-pale);
      min-height: 200px; padding: 30px; cursor: pointer; transition: background .15s, border-color .15s;
    }
    .dropzone:hover { border-color: var(--tu-blue-soft); background: #e6eff5; }
    .dropzone.over { border-color: var(--tu-blue); background: var(--tu-blue-light); }
    .dropzone .dz-icon { font-size: 2.8em; color: var(--tu-blue-soft); line-height: 1; }
    .dropzone .dz-main { font-size: 1.15em; font-weight: 600; color: var(--tu-blue); }
    .dropzone .dz-alt {
      background: #fff; border: 1px solid var(--tu-blue-light); color: var(--tu-blue);
      font-size: 0.88em; font-weight: 600; padding: 8px 20px; border-radius: 4px; cursor: pointer;
    }
    .dropzone .dz-alt:hover { background: var(--tu-blue-light); }

    /* ===== HINWEISLEISTE (CAD-Import) ===== */
    .notice {
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .notice-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
    .notice-head b { font-size: 0.95em; color: var(--tu-blue-dark); }
    /* Aufklappbar: sieben Dateizeilen und fuenf Hinweise machen die Leiste
       sonst hoeher als der Editor darunter. Der Kopf bleibt immer stehen.
       Eigener Pfeil statt des Standarddreiecks — das faellt weg, sobald die
       summary auf display:flex steht. */
    summary.notice-head { cursor: pointer; list-style: none; margin-bottom: 0; }
    summary.notice-head::-webkit-details-marker { display: none; }
    .notice[open] summary.notice-head { margin-bottom: 6px; }
    .notice-toggle { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .notice-count { font-size: 0.74em; color: var(--muted); }
    .notice[open] .notice-count { display: none; }
    .notice-chev { color: var(--tu-blue); font-size: 1.25em; line-height: 1; transition: transform .15s; }
    .notice[open] .notice-chev { transform: rotate(180deg); }
    .notice-tag {
      background: var(--tu-blue); color: #fff; font-size: 0.62em; font-weight: 700;
      padding: 3px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px;
    }
    .notice-sub { font-size: 0.76em; color: var(--muted); font-family: Consolas, monospace; }
    .notice-lead { font-size: 0.82em; color: var(--text); margin-bottom: 7px; }
    .notice ul { margin: 0 0 0 18px; display: grid; gap: 4px; }
    .notice li { font-size: 0.8em; line-height: 1.45; color: var(--text); }
    .notice li b { color: var(--tu-blue-dark); }
    .notice .f { font-family: Consolas, monospace; color: var(--tu-blue); }
    .notice-foot { font-size: 0.72em; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
    .notice li.warn { color: #8a4b00; }
    .notice li.warn b { color: #8a4b00; }
    .notice-files { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 9px; }
    .notice-files .nf { font-size: 0.7em; padding: 2px 8px; border-radius: 10px; font-family: Consolas, monospace; border: 1px solid transparent; }
    .notice-files .nf b { font-weight: 700; }
    .nf-ok   { background: #e4f3ea; color: #216e42; border-color: #bfe0cc; }
    .nf-warn { background: #fdf1dd; color: #8a4b00; border-color: #f0d5a8; }
    .nf-skip { background: #eef1f4; color: var(--muted); border-color: #dbe1e7; }
    .nf-err  { background: #fbe6e6; color: #9b2222; border-color: #eec4c4; }

    /* ===== BUTTONS ===== */
    .btn {
      padding: 9px 18px; border: none; border-radius: 4px; cursor: pointer;
      font-size: 0.85em; font-weight: 600; line-height: 1.25; transition: background 0.15s;
    }
    .btn-primary { background: var(--tu-blue); color: white; }
    .btn-primary:hover { background: var(--tu-blue-dark); }
    .btn-mat { background: var(--tu-blue-dark); color: white; }
    .btn-mat:hover { background: #00253f; }
    .btn-ghost { background: var(--tu-blue-pale); color: var(--tu-blue); border: 1px solid var(--tu-blue-light); }
    .btn-ghost:hover { background: var(--tu-blue-light); }
    .btn-sm { padding: 4px 10px; font-size: 0.76em; }
    /* Beispiel-Auswahl: ist ein <select>, soll aber aussehen wie die Knoepfe
       daneben. Drei Dinge sind dafuer noetig — Formularelemente erben die
       Schrift nicht, appearance:none nimmt die Systemdarstellung weg, und mit
       ihr faellt auch der Aufklapp-Pfeil weg, der darum als Hintergrundbild
       wieder dazukommt. Rechts entsprechend mehr Innenabstand, damit der Text
       nicht unter dem Pfeil steht. */
    .btn-select {
      --chev: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23006699' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      font-family: inherit; line-height: 1.25;
      -webkit-appearance: none; -moz-appearance: none; appearance: none;
      padding: 9px 32px 9px 18px;
      background-image: var(--chev); background-repeat: no-repeat;
      background-position: right 12px center; background-size: 10px 6px;
    }
    /* .btn-ghost:hover setzt die Kurzform `background` und wuerde den Pfeil
       mitnehmen — hier steht er wieder hin. */
    .btn-select:hover { background-image: var(--chev); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px; }
    .btn-select:disabled { opacity: .55; cursor: progress; }
    .btn-del { background: transparent; border: none; color: var(--tu-blue-dark); font-size: 1em; line-height: 1; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
    .btn-del:hover { background: var(--tu-blue-pale); }

    /* ===== SECTIONS ===== */
    .section {
      background: var(--card); border-radius: 12px; padding: 20px 22px;
      margin: 16px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .section h2 { font-size: 1.1em; margin-bottom: 4px; color: var(--primary); }
    .section .sub { font-size: 0.8em; color: var(--muted); margin-bottom: 14px; }
    .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
    .section-header .badge {
      background: var(--accent); color: white; width: 30px; height: 30px;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.9em; flex-shrink: 0;
    }
    .section-header .badge.mat { background: var(--tu-blue-dark); }
    .section-header .badge.tree { background: var(--tu-blue-mid); }
    .section-header .badge.res { background: var(--tu-blue-soft); }

    /* ===== EDITOR CARDS ===== */
    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
    .item-card {
      border: 1px solid var(--border); border-radius: 10px; padding: 0; overflow: hidden;
      background: #fff; transition: box-shadow 0.2s, transform 0.2s;
      animation: cardIn 0.35s ease;
    }
    @keyframes cardIn { from { opacity: 0; transform: translateY(10px);} to {opacity:1; transform:none;} }
    .item-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
    .item-card.flash { animation: flash 1s ease; }
    @keyframes flash { 0%,100%{ box-shadow:0 0 0 0 rgba(0,102,153,0);} 30%{ box-shadow:0 0 0 4px rgba(0,102,153,0.5);} }
    .item-card .card-head {
      display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: white;
    }
    .item-card.product .card-head { background: #54c08a; }
    .item-card.product.root .card-head { background: #f0a35c; }
    .item-card.material .card-head { background: #2980b9; }
    .card-head .kind-tag {
      background: rgba(255,255,255,0.22); font-size: 0.62em; font-weight: 700;
      padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
      flex-shrink: 0;
    }
    .card-head .name-input {
      flex: 1; min-width: 0; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
      color: white; font-weight: 600; font-size: 0.92em; padding: 4px 8px; border-radius: 6px;
    }
    .card-head .name-input::placeholder { color: rgba(255,255,255,0.6); }
    .card-head .btn-del { color: white; flex-shrink: 0; }
    .card-head .btn-del:hover { background: rgba(255,255,255,0.2); }
    .card-body { padding: 12px; }

    /* ===== CAD-VORSCHAU =====
       Das in der Creo-Datei gespeicherte Vorschaubild (components/creo-thumbs.js).
       Feste Hoehe, damit im Kartenraster die Eingabefelder aller Karten auf
       einer Linie beginnen — mit und ohne Bild. */
    /* Quadratisch und zentriert statt breiter Streifen: die Bilder bringen
       ihren eigenen Hintergrund mit (blauer Verlauf bei Teilen, Grau bei
       Baugruppen). In einem breiteren Kasten stuende dieser Hintergrund als
       sichtbares Rechteck im Rechteck. So schliesst der Rahmen buendig ab.
       Ohne Bild wird der Kasten gar nicht erst erzeugt (pages/editor.js). */
    .cad-preview {
      width: 124px; height: 124px; margin: 0 auto 10px; overflow: hidden;
      border: 1px solid var(--border); border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
    }
    .cad-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }

    .field-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
    .field { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 90px; }
    /* KEIN text-transform: uppercase. In den Beschriftungen stecken die
       Kurzzeichen des Modells, und deren Gross-/Kleinschreibung traegt die
       Bedeutung: pM ist der Materialpreis, powE die Leistung, cuEEL der
       Equipment-Satz. Grossgeschaltet stehen dort CUEEL, POWE und PM — im
       Glossar unten und im Produktbaum aber weiterhin cuEEL, powE und pM.
       Der Aufklapper darueber («Erweitert (pA, qE, cuEEL, emE)») war nie
       betroffen, darum fiel der Unterschied genau hier auf. */
    .field label { font-size: 0.7em; letter-spacing: .3px; color: var(--muted); font-weight: 600; }
    .field input, .field select {
      padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85em;
      font-family: Consolas, monospace; width: 100%;
    }
    .field input:focus, .field select:focus { outline: none; border-color: var(--accent); }

    .energy-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
    .energy-opt {
      flex: 1; text-align: center; padding: 6px 4px; border-radius: 7px; cursor: pointer;
      font-size: 0.76em; font-weight: 600; border: 2px solid var(--border); background: #fafbfc; transition: all 0.18s;
    }
    .energy-opt small { display: block; font-size: 0.82em; font-weight: 500; opacity: 0.8; }
    .energy-opt.sel-elec { border-color: var(--tu-blue); background: var(--tu-blue-pale); color: var(--tu-blue); }
    .energy-opt.sel-gas { border-color: var(--tu-blue-dark); background: var(--tu-blue-light); color: var(--tu-blue-dark); }

    details.advanced { margin: 6px 0 8px; }
    details.advanced summary { font-size: 0.74em; color: var(--muted); cursor: pointer; font-weight: 600; }
    details.advanced[open] summary { margin-bottom: 6px; }

    .children-box { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
    .children-box .ch-title { font-size: 0.7em; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
    .child-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 0.82em; }
    .child-row .ch-name { flex: 1; padding: 3px 7px; border-radius: 6px; background: #f0f4f8; }
    .child-row .ch-name.is-product { background: #d5f4e6; }
    .child-row .ch-name.is-material { background: #d6eaf8; }
    .child-row .ch-qty { width: 54px; }
    .child-row .ch-qty input { width: 100%; padding: 3px 5px; border: 1px solid var(--border); border-radius: 5px; font-family: Consolas, monospace; font-size: 0.85em; text-align: right; }
    .add-child { display: flex; gap: 6px; margin-top: 6px; }
    .add-child select { flex: 1; padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8em; }
    .usage { font-size: 0.72em; color: var(--muted); margin-top: 6px; }

    .card-result {
      display: flex; gap: 14px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
      font-family: Consolas, monospace;
    }
    .card-result .r { display: flex; flex-direction: column; }
    .card-result .r .rl { font-size: 0.62em; color: var(--muted); font-family: 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
    .card-result .r .rv { font-size: 1.05em; font-weight: 700; }
    .card-result .r.pc .rv { color: var(--tu-blue); }
    .card-result .r.pcf .rv { color: var(--tu-blue-dark); }

    .group-label { font-size: 0.82em; font-weight: 700; color: var(--muted); margin: 4px 0 8px; text-transform: uppercase; letter-spacing: .5px; }

    /* ===== TREE ===== */
    .tree-wrap { background: #fafbfc; border: 1px solid var(--border); border-radius: 10px; padding: 14px; overflow-x: auto; }
    .tree-wrap svg { display: block; margin: 0 auto; }
    .tnode { cursor: pointer; transition: filter 0.15s; }
    .tnode:hover { filter: drop-shadow(0 0 7px rgba(0,102,153,0.55)); }
    .flow-path { stroke-dasharray: 7 4; animation: dash 1.4s linear infinite; }
    @keyframes dash { to { stroke-dashoffset: 22; } }
    .tree-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
    .leg { display: flex; align-items: center; gap: 5px; font-size: 0.76em; color: var(--muted); }
    .leg .sw { width: 13px; height: 13px; border-radius: 3px; }

    /* ===== KPI ===== */
    .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
    .kpi-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    .kpi-card .kh { background: var(--tu-blue); color: #fff; padding: 8px 14px; display: flex; align-items: center; gap: 8px; }
    .kpi-card.is-root .kh { background: var(--tu-blue-dark); }
    .kh .tag { background: rgba(255,255,255,0.22); font-size: 0.62em; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; }
    .kh .nm { font-size: 0.9em; font-weight: 600; flex: 1; }
    .kpi-card .kb { padding: 13px 14px; }
    .kmetric + .kmetric { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e1e5ea; }
    .kmetric .kl { font-size: 0.66em; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
    .kmetric .kvrow { display: flex; align-items: baseline; gap: 6px; }
    .kmetric .kv { font-size: 1.45em; font-weight: 700; color: var(--tu-blue); font-family: Consolas, monospace; }
    .kmetric .kv.pcf { color: var(--tu-blue-dark); }
    .kmetric .ku { font-size: 0.7em; color: var(--muted); font-weight: 600; }
    .scope-bar { height: 9px; border-radius: 5px; overflow: hidden; display: flex; margin-top: 10px; background: #ecf0f1; }
    .scope-bar div { height: 100%; transition: width 0.6s cubic-bezier(.4,0,.2,1); }

    /* ===== CHARTS ===== */
    .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
    .chart-box { background: #fafbfc; border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
    .chart-box h3 { text-align: center; font-size: 0.9em; margin-bottom: 10px; }
    .legend { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
    .legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.72em; }
    .legend-color { width: 12px; height: 12px; border-radius: 3px; }
    .bar-animated { transition: height 0.7s cubic-bezier(.4,0,.2,1); }

    table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 0.8em; }
    table th { background: var(--primary); color: white; padding: 6px 9px; text-align: left; font-weight: 600; font-size: 0.9em; }
    table td { padding: 4px 9px; border-bottom: 1px solid var(--border); }
    table tr:nth-child(even) td { background: #fafbfc; }
    td.num { text-align: right; font-family: Consolas, monospace; }

    details.tables summary { font-size: 0.9em; font-weight: 600; cursor: pointer; color: var(--primary); }
    /* Aktionszeile im aufgeklappten Tabellenbereich. Der Knopf steht im
       <details> und ist damit erst nach dem Aufklappen zu sehen. */
    .tables-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .tables-hint { font-size: 0.74em; color: var(--muted); }
    .tables-hint .f { font-family: Consolas, monospace; color: var(--tu-blue); }
    .tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
    .table-card { background: #fafbfc; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
    .table-card h4 { font-size: 0.82em; margin-bottom: 4px; }

    .empty { text-align: center; color: var(--muted); padding: 30px; font-size: 0.9em; }
    .hidden { display: none !important; }

    /* ===== FOOTER / GLOSSAR ===== */
    .site-footer { background: var(--tu-blue-dark); color: #eef4f8; margin-top: 30px; padding: 28px 18px 38px; flex-shrink: 0; }
    .footer-inner { max-width: 1500px; margin: 0 auto; }
    .site-footer h2 { font-size: 1.05em; margin-bottom: 4px; color: #ffffff; }
    .foot-sub { font-size: 0.8em; opacity: 0.85; margin-bottom: 18px; max-width: 880px; }
    .glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
    .gloss-group h3 { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.6px; color: var(--tu-blue-light); margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 5px; }
    .gloss-group dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 0.8em; align-items: baseline; margin: 0; }
    .gloss-group dt { font-family: Consolas, monospace; font-weight: 700; color: #ffffff; white-space: nowrap; }
    .gloss-group dd { margin: 0; opacity: 0.92; line-height: 1.4; }
    .gloss-group dd .f { font-family: Consolas, monospace; color: var(--tu-blue-light); }
    .foot-credit { font-size: 0.72em; opacity: 0.55; margin-top: 22px; }