/* --- HEIDENHAIN SPECIFIC (S02) --- */
#sec-heidenhain {
    background-color: #000;
}

#heid-glitch { position: absolute; inset: 0; z-index: 800; pointer-events: none; opacity: 0; background: #00e000; mix-blend-mode: screen; }

#heid-prog { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 950; background: rgba(0,200,0,0.08); }
#heid-prog-fill { height: 100%; width: 0; background: linear-gradient(90deg, #003a00, #00c800); transition: width 0.5s; }

/* BRIDGE */
#bridge {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 10vw; overflow: hidden;
}
#bridge-lines { display: flex; flex-direction: column; width: 100%; }
.bl { display: block; white-space: pre; font-size: clamp(14px, 1.6vw, 17px); line-height: 2.2; opacity: 0; transition: opacity 0.25s; }
.bl.show { opacity: 1; }
.bl-g { color: #00ff41; text-shadow: 0 0 7px rgba(0,255,60,0.55); }
.bl-d { color: #004a0e; }
.bl-x { color: #e8c547; text-shadow: 0 0 7px rgba(232,197,71,0.55); }

/* HEIDENHAIN UI */
#heid {
    position: absolute; inset: 0; z-index: 10;
    display: none; flex-direction: column;
    background: #080808; font-family: 'Courier New', monospace;
}

#h-status {
    background: #0e0e0e; border-bottom: 2px solid #00b800;
    padding: 6px 16px; display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0; min-height: 36px;
}
.h-mode { background: #00b800; color: #000; padding: 3px 12px; font-weight: bold; font-size: clamp(12px, 1.3vw, 16px); letter-spacing: 0.08em; }
.h-sr { display: flex; gap: 24px; font-size: clamp(10px, 1.1vw, 14px); }
.h-sr span { color: #004400; }
.h-sr .v { color: #ffff00; }
.h-sr .vg { color: #00ff41; }
.h-sr .vw { color: #fff; }

#h-main { display: flex; flex: 1; overflow: hidden; min-height: 0; }
#h-prog-panel { flex: 1.4; border-right: 1px solid #162016; padding: 10px 16px; overflow: hidden; display: flex; flex-direction: column; }

.h-ptitle { background: #0a1e0a; color: #fff; padding: 4px 8px; font-size: clamp(10px, 1.1vw, 14px); letter-spacing: 0.16em; margin-bottom: 8px; flex-shrink: 0; display: flex; justify-content: space-between; }
.h-ptitle .pr { color: #004400; }

.nc { display: block; white-space: pre; font-size: clamp(12px, 1.5vw, 22px); line-height: 1.7; opacity: 0; transition: all 0.3s; }
.nc.visible { opacity: 0.25; color: #005500; }
.nc.focus { opacity: 1 !important; color: #00ff41 !important; text-shadow: 0 0 12px rgba(0,255,60,0.7) !important; background: #001a00; padding-left: 6px; border-left: 3px solid #00ff41; }
.nc.done { opacity: 0.7; color: #009900; }
.nc.done.cmt { opacity: 0.35; color: #006600; }
.nc.done.hl { opacity: 0.75; color: #bbaa30; }

#h-axes { flex: 0 0 240px; border-right: 1px solid #162016; padding: 10px 16px; display: flex; flex-direction: column; }
.ax { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #0a1a0a; opacity: 0; transition: all 0.4s; }
.ax.focus { opacity: 1; }
.ax.done { opacity: 0.5; }
.ax-n { color: #fff; font-size: clamp(16px, 1.8vw, 24px); font-weight: bold; width: 24px; }
.ax-v { color: #00ff41; font-size: clamp(20px, 2.5vw, 36px); text-shadow: 0 0 8px rgba(0,255,60,0.5); }
.ax.done .ax-v { color: #007700; text-shadow: none; }
.ax-u { color: #003a00; font-size: clamp(10px, 1vw, 14px); align-self: flex-end; }

.h-fb { margin-top: 16px; padding: 8px 12px; border: 1px solid #0a1a0a; opacity: 0; transition: opacity 0.6s; }
.h-fb.show { opacity: 1; }
.fb-l { color: #004400; font-size: clamp(10px, 1vw, 14px); letter-spacing: 0.14em; margin-bottom: 4px; }
.fb-v { color: #ffff00; font-size: clamp(16px, 2vw, 28px); text-shadow: 0 0 5px rgba(255,255,0,0.4); }
.fb-v.g { color: #00ff41; text-shadow: 0 0 5px rgba(0,255,60,0.4); }

#h-info { flex: 0 0 200px; padding: 10px 16px; display: flex; flex-direction: column; }
.h-il { display: block; white-space: pre; font-size: clamp(10px, 1.2vw, 16px); line-height: 1.85; opacity: 0; transition: all 0.3s; }
.h-il.focus { opacity: 1; color: #00ff41; text-shadow: 0 0 10px rgba(0,255,60,0.6); }
.h-il.done { opacity: 0.4; color: #006600; }
.h-il.done.hl2 { opacity: 0.7; color: #aa8800; }

/* NACHRICHTENLEISTE */
#h-msg {
    background: #050505;
    border-top: 1px solid #162016;
    border-bottom: 1px solid #162016;
    padding: 14px 20px;
    font-size: clamp(14px, 1.6vw, 22px);
    color: #00cc00;
    flex-shrink: 0;
    min-height: 50px;
    letter-spacing: 0.04em;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
    text-shadow: 0 0 6px rgba(0,200,0,0.3);
}

#h-msg.spotlight {
    font-size: clamp(18px, 2.5vw, 32px);
    padding: 18px 24px;
    color: #00ff41;
    text-shadow: 0 0 14px rgba(0,255,60,0.55);
    background: #020802;
    justify-content: center;
    text-align: center;
}

/* ERROR EXPANSION */
#h-msg.error-expand {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100%;
    background: #080808;
    border-top: 2px solid #cc0000;
    border-bottom: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    gap: 0;
    transition: height 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.3s,
                background 0.3s;
    overflow: hidden;
    z-index: 200;
    text-align: center;
}

.error-line {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: clamp(14px, 1.8vw, 22px);
    line-height: 2.2;
    opacity: 0;
    transition: opacity 0.3s;
}
.error-line.show  { opacity: 1; }
.error-line.red   { color: #ff3333; text-shadow: 0 0 10px rgba(255,50,50,0.4); }
.error-line.gold  { color: #e8c547; text-shadow: 0 0 8px rgba(232,197,71,0.4); font-size: clamp(13px, 1.6vw, 20px); }
.error-line.next  { color: #004a0e; font-size: clamp(11px, 1.2vw, 15px); letter-spacing: 0.2em; margin-top: 24px; }

.error-warning-icon {
    font-size: clamp(52px, 7vw, 88px);
    margin-bottom: 28px;
    opacity: 0;
    transition: opacity 0.5s;
    color: #ff3333;
    text-shadow: 0 0 24px rgba(255, 50, 50, 0.7), 0 0 48px rgba(255, 50, 50, 0.3);
    filter: none;
}
.error-warning-icon.show { opacity: 1; }

#h-sk { background: #080808; border-top: 2px solid #00b800; display: flex; flex-shrink: 0; position: relative; z-index: 100; }
.sk { flex: 1; text-align: center; padding: 6px 4px; border-right: 1px solid #162016; font-size: clamp(9px, 1vw, 14px); line-height: 1.3; color: #005500; }
.sk b { display: block; color: #003300; font-size: clamp(8px, 0.9vw, 12px); margin-top: 2px; font-weight: normal; }
.sk.on { background: #002800; color: #00ff41; }

/* OVERLAYS (Award & Erkenntnis) — bleiben im HTML, werden aber nicht mehr genutzt */
#award-ov, #realiz-ov { position: absolute; inset: 0; z-index: 500; pointer-events: none; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background 1s ease; }
#award-ov.dim, #realiz-ov.dim { background: rgba(0,0,0,0.92); }
#award-box, #realiz-box { opacity: 0; transition: opacity 0.8s 0.3s; text-align: center; }
#award-ov.dim #award-box, #realiz-ov.dim #realiz-box { opacity: 1; }

.aw-star { color: #e8c547; font-size: clamp(26px,4vw,56px); letter-spacing: 0.3em; display: block; margin-bottom: 24px; text-shadow: 0 0 28px rgba(232,197,71,0.7); }
.aw-title { color: #e8c547; font-size: clamp(28px,4.5vw,64px); letter-spacing: 0.1em; display: block; margin-bottom: 16px; text-shadow: 0 0 32px rgba(232,197,71,0.65); }
.aw-rule { width: 220px; height: 1px; background: rgba(232,197,71,0.3); margin: 20px auto; }
.aw-sub { color: rgba(240,237,232,0.7); font-size: clamp(14px,1.8vw,22px); letter-spacing: 0.12em; display: block; margin-bottom: 6px; }
.aw-det { color: rgba(240,237,232,0.38); font-size: clamp(12px,1.3vw,16px); letter-spacing: 0.1em; display: block; margin-top: 10px; }

.rz-pre { color: #004a0e; font-size: clamp(10px,1.2vw,14px); letter-spacing: 0.3em; text-transform: uppercase; display: block; margin-bottom: 24px; }
.rz-text { color: #00ff41; font-size: clamp(24px,3.8vw,48px); text-shadow: 0 0 24px rgba(0,255,60,0.4); display: block; line-height: 1.5; }
.rz-text em { color: #e8c547; font-style: normal; text-shadow: 0 0 24px rgba(232,197,71,0.5); }
.rz-next { color: #004a0e; font-size: clamp(10px,1.2vw,14px); letter-spacing: 0.22em; display: block; margin-top: 40px; }