/* Bausteine aus Werkstatt/pult-design/beispiel/Main.dc.html (#157). */
html,body{margin:0;height:100%;background:#080B0A}
a{color:#C8A45A}a:hover{color:#E2C47E}
.pult{position:relative;min-height:100vh;display:flex;flex-direction:column;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;color:#E9E4D8;background:#090D0C;overflow:hidden}
.ink{position:absolute;inset:0;pointer-events:none;background:radial-gradient(1100px 600px at 85% -10%,rgba(46,120,96,.22),transparent 60%),radial-gradient(900px 700px at -10% 110%,rgba(32,84,68,.20),transparent 60%),radial-gradient(600px 400px at 50% 50%,rgba(200,164,90,.035),transparent 70%)}
.mist{position:absolute;left:0;right:0;bottom:0;width:100%;height:260px;pointer-events:none;opacity:.55}
.serif{font-family:'Cormorant Garamond',Georgia,serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8C968F}
.muted{color:#A8B0A8}
.faint{color:#8C968F}
.panel{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));border:1px solid rgba(200,164,90,.16);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.35)}
.glass{background:rgba(14,22,19,.78);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.09);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.6)}
.rule{height:1px;background:linear-gradient(90deg,rgba(200,164,90,.55),rgba(200,164,90,0))}
.btn{min-height:40px;padding:0 16px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#E9E4D8;font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;box-sizing:border-box}
.btn:hover{background:rgba(255,255,255,.09)}
.btn:focus-visible,.row:focus-visible,.nav:focus-visible,.node:focus-visible,.seg:focus-visible,.inp:focus-visible{outline:2px solid #5FD9B2;outline-offset:2px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-jade{background:linear-gradient(180deg,#56D8B0,#36A884);color:#03130D;border-color:transparent;font-weight:600;box-shadow:0 0 28px rgba(63,191,154,.28)}
.btn-jade:hover{background:linear-gradient(180deg,#6BE3BE,#3DB891)}
.btn-gold{border-color:rgba(200,164,90,.6);color:#E2C47E}
.btn-danger{border-color:rgba(232,110,104,.55);color:#F2A29D}
.btn-sm{min-height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.inp{width:100%;box-sizing:border-box;min-height:40px;padding:9px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.32);color:#E9E4D8;font:inherit}
.inp::placeholder{color:#7F8A84}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid;white-space:nowrap}
.w-light{color:#A9BDB4;border-color:rgba(169,189,180,.35)}
.w-heavy{color:#F2BC60;border-color:rgba(242,188,96,.55);background:rgba(242,188,96,.08)}
.w-read{color:#94C0E8;border-color:rgba(148,192,232,.4)}
.ok{color:#5FD9B2}.bad{color:#F2A29D}.warn{color:#F2BC60}.info{color:#94C0E8}
.nav{width:100%;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid transparent;background:transparent;color:#C9CEC6;font:inherit;font-size:14px;cursor:pointer;text-align:left;box-sizing:border-box}
.nav:hover{background:rgba(255,255,255,.04)}
.nav-on{border-color:rgba(200,164,90,.6);background:linear-gradient(90deg,rgba(200,164,90,.12),rgba(200,164,90,.02));color:#F3EEE2}
.row{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:9px;border:1px solid transparent;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left;box-sizing:border-box}
.row:hover{background:rgba(255,255,255,.04)}
.row-on{background:rgba(63,191,154,.10);border-color:rgba(63,191,154,.45);box-shadow:0 0 22px rgba(63,191,154,.12)}
.seg{min-height:30px;padding:0 10px;border-radius:7px;border:1px solid transparent;background:transparent;color:#C9CEC6;font:inherit;font-size:12px;cursor:pointer}
.seg-on{background:rgba(200,164,90,.16);border-color:rgba(200,164,90,.55);color:#F3E3BC}
.node{position:absolute;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.10),rgba(8,14,12,.92) 60%);padding:0}
.flow{stroke-dasharray:2 12;animation:flow 1.8s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.spin{animation:spin 1.3s linear infinite;transform-origin:10px 10px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.flow,.pulse,.spin{animation:none}}
.scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(200,164,90,.35) transparent}
.hit{background:rgba(242,188,96,.28);color:#FFE2A8;border-radius:3px}
table{border-collapse:collapse;width:100%}
th{font-weight:500;text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8C968F;padding:8px 10px;border-bottom:1px solid rgba(200,164,90,.25)}
td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}

/* --- Rahmen; in der Vorlage stehen diese Werte als style-Attribute --- */
.streifen{position:relative;z-index:2;display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:40px;padding:4px 16px;box-sizing:border-box;
  --schuppen:radial-gradient(circle at 50% 100%,transparent 7px,rgba(255,255,255,.10) 8px,transparent 9px) 0 0/18px 9px,radial-gradient(circle at 50% 100%,transparent 7px,rgba(255,255,255,.10) 8px,transparent 9px) 9px 4.5px/18px 9px}
.streifen.dev{background:var(--schuppen),linear-gradient(90deg,#173F6C,#235A92 50%,#173F6C)}
.streifen.prod{background:var(--schuppen),linear-gradient(90deg,#6E1E1E,#8E2B2A 50%,#6E1E1E)}
.umg{font-size:12px;font-weight:500;letter-spacing:.12em;padding:3px 10px;border-radius:6px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25)}
.inhalt{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-wrap:wrap;min-height:0}
.tor{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:48px 16px;box-sizing:border-box}
.torfeld{width:100%;max-width:440px;padding:36px 36px 28px;box-sizing:border-box;display:flex;flex-direction:column;gap:18px}
.spalte{display:flex;flex-direction:column;gap:14px}
.feld{display:flex;flex-direction:column;gap:6px}
.wappen{display:flex;flex-direction:column;align-items:center;gap:4px}
.drache{display:block;filter:drop-shadow(0 0 18px rgba(63,191,154,.25))}
.leiste{flex:1 1 232px;max-width:260px;min-width:220px;display:flex;flex-direction:column;gap:4px;padding:22px 14px;box-sizing:border-box;border-right:1px solid rgba(200,164,90,.28);background:linear-gradient(180deg,rgba(6,10,9,.65),rgba(6,10,9,.35))}
.haupt{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:18px;padding:22px 26px 40px;box-sizing:border-box}
.kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kopf h1{margin:2px 0 0;font-size:34px;font-weight:600;line-height:1.1}
.siegel{width:50px;height:50px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;letter-spacing:.04em;border:2px solid currentColor;outline:1px solid currentColor;outline-offset:3px;border-radius:4px;background:rgba(0,0,0,.3)}
.zeile{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.fehler{padding:10px 12px;border-radius:9px;background:rgba(232,110,104,.08);border:1px solid rgba(232,110,104,.35);color:#F2A29D;font-size:13px;white-space:pre-wrap}
.notiz{padding:10px 12px;border-radius:9px;background:rgba(242,188,96,.06);border:1px solid rgba(242,188,96,.45);font-size:13px}
.leer{padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.schleier{position:absolute;inset:0;z-index:10;background:rgba(3,6,5,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:110px 16px 16px;box-sizing:border-box}
.palkopf{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.palkopf input{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:none;color:#F3EEE2;font:inherit;font-size:22px}
.logbox{max-height:600px;min-height:420px;font-size:12.5px;line-height:1.75;background:rgba(0,0,0,.3);border-radius:10px;padding:10px 12px;white-space:pre-wrap;word-break:break-word}
.topo{position:relative;width:980px;height:640px;margin:0 auto;background-image:radial-gradient(rgba(200,164,90,.10) 1px,transparent 1px);background-size:28px 28px;border-radius:10px}
.topo svg.linien{position:absolute;inset:0}
.knotentext{position:absolute;pointer-events:none}
.fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.formular{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px 16px;align-items:center}
@media (max-width:767px){.formular{grid-template-columns:minmax(0,1fr)}.torfeld{padding:24px 20px}.haupt{padding:18px 16px 32px}.leiste{max-width:none}}