/*
 * Cessna 172S NAV III – realistisches Analogpanel für das Instrumententraining.
 * Die Datei ist vollständig auf .c172-* gekapselt und verändert die 3D-Ansicht nicht.
 */

.instrument-training-shell {
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(930px, 1fr) !important;
    align-items: start;
    gap: 16px;
}

.instrument-training-mount {
    min-width: 0;
    overflow: auto;
    border-radius: 12px;
    scrollbar-color: #56615f #111718;
}

.c172-panel {
    min-width: 1060px;
    padding: 13px 14px 15px;
    border: 1px solid #565b59;
    border-radius: 10px;
    color: #e6e6de;
    background:
        radial-gradient(circle at 16% 2%, rgba(255, 255, 255, .11), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .045), transparent 29%),
        linear-gradient(155deg, #2e3131 0, #1a1c1c 48%, #111313 100%);
    box-shadow:
        inset 0 0 0 5px #090a0a,
        inset 0 0 0 7px #424745,
        inset 0 -26px 70px rgba(0, 0, 0, .45),
        0 18px 42px rgba(0, 0, 0, .58);
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    user-select: none;
}

.c172-panel button,
.c172-panel input,
.c172-panel select,
.c172-modal-object button,
.c172-modal-object input,
.c172-modal-object select,
.c172-modal-console button,
.c172-modal-console input {
    font: inherit;
}

.c172-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 41px;
    padding: 5px 13px 9px;
    border-bottom: 1px solid #080909;
    box-shadow: 0 1px rgba(255, 255, 255, .08);
    color: #b7bbb5;
    font-size: .62rem;
    letter-spacing: .14em;
}

.c172-brand {
    color: #f5f2e8;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .2em;
}

.c172-panel-header strong { color: #c3bfae; }
.c172-panel-header .panel-registration { margin-left: auto; color: #858b87; }
.c172-panel-header output { margin-left: 0; }

.c172-annunciator {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 8px 0 7px;
}

.c172-annunciator i {
    min-width: 57px;
    padding: 4px 7px 3px;
    border: 1px solid #191919;
    border-radius: 2px;
    color: #4f2c2a;
    background: linear-gradient(#170b0a, #090505);
    box-shadow: inset 0 0 0 1px #3f1a17, 0 1px 2px #000;
    font: 700 .45rem/1 Arial, sans-serif;
    text-align: center;
}

.c172-annunciator .annunciator-red.active {
    color: #ff7a66;
    text-shadow: 0 0 7px #d42d1c;
    box-shadow: inset 0 0 9px #7b1e15, 0 0 4px rgba(255, 45, 22, .35);
}

.c172-annunciator .annunciator-amber {
    color: #735225;
    background: linear-gradient(#171008, #090704);
    box-shadow: inset 0 0 0 1px #4b3516, 0 1px 2px #000;
}

.c172-main-panel {
    display: grid;
    grid-template-columns: minmax(650px, 1.72fr) minmax(350px, .92fr);
    gap: 10px;
}

.c172-flight-deck,
.c172-avionics-stack {
    position: relative;
    border: 1px solid #090a0a;
    border-radius: 5px;
    background:
        radial-gradient(circle at 26% 11%, rgba(255, 255, 255, .075), transparent 25%),
        linear-gradient(160deg, #292c2b 0, #191b1b 55%, #121414 100%);
    box-shadow: inset 0 0 0 2px #3b3f3d, inset 0 0 26px rgba(0, 0, 0, .5);
}

.c172-flight-deck { padding: 11px 11px 10px; }
.c172-avionics-stack { display: flex; flex-direction: column; gap: 6px; padding: 9px; }

.panel-screw {
    position: absolute;
    z-index: 15;
    width: 8px;
    height: 8px;
    border: 1px solid #0a0b0b;
    border-radius: 50%;
    background:
        linear-gradient(42deg, transparent 44%, #171918 45% 55%, transparent 56%),
        radial-gradient(circle at 38% 31%, #babcb7, #666a67 36%, #202221 70%);
    box-shadow: 0 1px 2px #000;
}

.screw-nw { top: 5px; left: 5px; }
.screw-ne { top: 5px; right: 5px; }
.screw-sw { bottom: 5px; left: 5px; }
.screw-se { right: 5px; bottom: 5px; }

.c172-whiskey-compass {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 190px;
    height: 40px;
    margin: 0 auto 9px;
    border: 5px solid #070808;
    border-radius: 5px 5px 9px 9px;
    color: #ece8d8;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .95), rgba(29, 31, 29, .88) 50%, rgba(0, 0, 0, .95)),
        #030404;
    box-shadow: inset 0 0 14px #000, inset 0 1px rgba(255, 255, 255, .18), 0 3px 6px #000;
    font-family: "Courier New", monospace;
}

.c172-whiskey-compass span { color: #8e938e; font-size: .8rem; }
.c172-whiskey-compass b { color: #f0c77d; font-size: 1.05rem; letter-spacing: .08em; }
.c172-whiskey-compass i { position: absolute; top: -4px; left: calc(50% - 6px); color: #f0a529; font-style: normal; }
.c172-whiskey-compass small { position: absolute; bottom: -16px; left: 50%; width: 150px; transform: translateX(-50%); color: #777d79; font: 600 .36rem Arial, sans-serif; text-align: center; letter-spacing: .08em; }

.c172-sixpack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 212px));
    justify-content: center;
    gap: 9px 11px;
    margin-top: 15px;
}

.c172-gauge {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
    padding: 4.5%;
    border: 1px solid rgba(0, 0, 0, .88);
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 46%, transparent 0 57%, rgba(0, 0, 0, .6) 58% 68%, transparent 69%),
        linear-gradient(145deg, rgba(83, 87, 84, .6), rgba(15, 16, 16, .86));
    box-shadow: inset 0 0 0 1px rgba(130, 134, 130, .25), 0 4px 8px rgba(0, 0, 0, .65);
    cursor: zoom-in;
    outline: none;
}

.c172-gauge:hover,
.c172-gauge:focus-visible,
.c172-rack-unit[data-detail]:hover,
.c172-rack-unit[data-detail]:focus-visible,
.c172-engine-cluster:hover {
    border-color: #b4853f;
    box-shadow: inset 0 0 0 1px rgba(245, 186, 86, .3), 0 0 0 2px rgba(229, 157, 50, .3), 0 5px 12px #000;
}

.c172-bezel {
    position: absolute;
    inset: 5%;
    padding: 5%;
    border: 1px solid #5f625f;
    border-radius: 50%;
    background:
        conic-gradient(from 220deg, #090a0a, #4e504d 8%, #111 18%, #050606 49%, #3e403e 75%, #080909 91%),
        #0a0b0b;
    box-shadow:
        inset 0 0 0 2px #050606,
        inset 0 0 0 4px #303230,
        inset 0 0 9px #000,
        0 4px 7px #000;
}

.c172-instrument-window {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid #0c0d0d;
    border-radius: 50%;
    background: #050606;
    box-shadow: inset 0 0 23px #000;
}

.c172-instrument-window::after {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 1px;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 28%, transparent 68%, rgba(255, 255, 255, .035));
    box-shadow: inset 0 0 12px rgba(255, 255, 255, .035);
}

.c172-gauge-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c172-gauge-svg text { fill: #eeeadd; font-family: "Arial Narrow", Arial, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.c172-gauge-svg .dial-face { fill: #050606; stroke: #1f2221; stroke-width: 2; }
.c172-gauge-svg .major-tick { stroke: #e6e4da; stroke-width: 2.4; }
.c172-gauge-svg .minor-tick { stroke: #c3c3bb; stroke-width: 1.15; opacity: .9; }
.c172-gauge-svg .gauge-number { font-size: 14px; font-weight: 700; }
.c172-gauge-svg .cardinal-label { font-size: 18px; font-weight: 800; }
.c172-gauge-svg .gauge-title { font-size: 9.7px; font-weight: 700; letter-spacing: .7px; }
.c172-gauge-svg .gauge-subtitle { fill: #aeb0aa; font-size: 7.4px; font-weight: 600; letter-spacing: .7px; }
.c172-gauge-svg .gauge-marking { fill: #777d79; font-size: 4.6px; font-weight: 700; letter-spacing: .45px; }

.gauge-needle { filter: drop-shadow(2px 2px 1px #000); transition: transform .16s cubic-bezier(.2, .75, .35, 1); }
.gauge-needle path { fill: #ecebe3; stroke: #2d2e2d; stroke-width: .7; }
.gauge-needle circle { fill: #272827; stroke: #b7b8b3; stroke-width: 1.4; }
.gauge-needle .needle-cap { fill: #080909; stroke: #535653; }

.speed-arc { fill: none; stroke-width: 6; stroke-linecap: butt; }
.speed-white { stroke: #f3f3ed; }
.speed-green { stroke: #4cc76b; }
.speed-yellow { stroke: #f2da49; }
.speed-redline { fill: none; stroke: #ec3c37; stroke-width: 10; }

.attitude-back { fill: #050606; }
.attitude-sphere { transition: transform .16s cubic-bezier(.2, .75, .35, 1); }
.attitude-sky { fill: #438bc2; }
.attitude-ground { fill: #81532f; }
.attitude-horizon-line { stroke: #f7f4e8; stroke-width: 3; }
.pitch-ladder line { stroke: rgba(255, 255, 255, .94); stroke-width: 1.6; }
.pitch-ladder text { fill: #fff; font: 700 8px Arial, sans-serif; }
.attitude-mask { fill: #090a0a; }
.bank-scale line { stroke: #eceae0; stroke-width: 2; }
.bank-scale path { fill: #edeadf; }
.attitude-bank-pointer { fill: #fff; stroke: #121313; stroke-width: 1; transition: transform .16s ease-out; }
.aircraft-reference { filter: drop-shadow(1px 1px #281700); }
.aircraft-reference path,
.aircraft-reference circle { fill: #f3b23c; stroke: #382000; stroke-width: 1.5; }
.attitude-label { fill: #d4d1c8 !important; }

.kollsman-window,
.heading-readout { fill: #020303; stroke: #9b9b92; stroke-width: 1.3; }
.kollsman-value,
.heading-value { fill: #f3f0e5 !important; font: 700 10px "Courier New", monospace; }
.altimeter-flag { fill: #d9d6cc; stroke: #222; }
.altimeter-hand { filter: drop-shadow(2px 2px 1px #000); transition: transform .18s ease-out; }
.altimeter-hand path { fill: #efeee7; stroke: #242525; stroke-width: .9; }
.ten-thousand-hand path { fill: #c5c6c0; }
.altimeter-cap { fill: #171818; stroke: #bbbcb5; stroke-width: 1.4; }
.instrument-knob circle { fill: #1b1c1c; stroke: #747774; stroke-width: 2; }
.instrument-knob path { fill: none; stroke: #9c9e99; stroke-width: 1; }
.qnh-instrument-knob { cursor: ns-resize; outline: none; touch-action: none; }
.qnh-instrument-knob circle { transition: fill .12s ease, stroke .12s ease; }
.qnh-instrument-knob:hover circle,
.qnh-instrument-knob:focus circle { fill: #292c2b; stroke: #e0a74b; stroke-width: 2.8; }
.qnh-instrument-knob.adjusting circle { fill: #3a3020; stroke: #ffc35e; }

.turn-letter { font-size: 16px; font-weight: 700; }
.turn-index { fill: none; stroke: #eceae2; stroke-width: 2; }
.turn-aircraft { transition: transform .16s ease-out; }
.turn-aircraft path { fill: #e9e8e0; stroke: #242525; stroke-width: 1; }
.slip-tube { fill: none; stroke: #858985; stroke-width: 18; stroke-linecap: round; }
.slip-tube-inner { fill: none; stroke: #080909; stroke-width: 12; stroke-linecap: round; }
.slip-index { stroke: #e7e5dc; stroke-width: 2; }
.slip-ball { fill: #f3f1e8; stroke: #1e1f1f; stroke-width: 1.3; filter: drop-shadow(1px 1px #000); transition: transform .16s ease-out; }

.heading-card { transition: transform .17s ease-out; }
.heading-lubber { fill: #eeeae0; stroke: #161717; }
.heading-bug { fill: none; stroke: #f09d27; stroke-width: 4; }
.heading-aircraft { fill: none; stroke: #d7d6cf; stroke-width: 2.1; }
.heading-title { fill: #c8c8c0 !important; font-size: 7px !important; }
.knob-label { fill: #8c918e !important; font-size: 5px; font-weight: 700; }
.vsi-direction { fill: #9ea19d !important; font-size: 7px; font-weight: 700; }

.c172-expand-icon {
    position: absolute;
    z-index: 25;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid #5f6561;
    border-radius: 4px;
    color: #e4dfd0;
    background: rgba(4, 5, 5, .88);
    box-shadow: 0 2px 4px #000;
    font: 700 11px/1 Arial, sans-serif;
    opacity: .7;
    pointer-events: none;
}

[data-detail]:hover > .c172-expand-icon,
[data-detail]:focus-visible > .c172-expand-icon { color: #ffc15e; border-color: #c6882b; opacity: 1; }

.c172-setting-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 9px 1px 8px;
}

.c172-setting-row label {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    gap: 3px;
    padding: 4px;
    border: 1px solid #080909;
    border-radius: 3px;
    background: linear-gradient(#202222, #0f1010);
    box-shadow: inset 0 0 0 1px #393c3a;
}

.c172-setting-row label > span {
    grid-column: 1 / -1;
    color: #929792;
    font-size: .39rem;
    letter-spacing: .08em;
    text-align: center;
}

.c172-setting-row input {
    min-width: 0;
    height: 25px;
    border: 1px solid #1f392b;
    border-radius: 1px;
    color: #efb450;
    background: #020504;
    box-shadow: inset 0 0 8px #000;
    font: 700 .72rem "Courier New", monospace;
    text-align: center;
}

.c172-setting-row button,
.c172-panel button,
.c172-modal-object button,
.c172-modal-console button {
    border: 1px solid #090a0a;
    color: #deddd5;
    background: linear-gradient(#464947, #202222 42%, #111212);
    box-shadow: inset 0 0 0 1px #5a5d5a, 0 2px 2px #000;
}

.c172-setting-row button { width: 24px; height: 24px; padding: 0; border-radius: 50%; }
.c172-setting-row button:active,
.c172-panel button:active,
.c172-modal-object button:active,
.c172-modal-console button:active { transform: translateY(1px); background: #171919; box-shadow: inset 0 2px 4px #000; }

.c172-engine-cluster {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 9px 11px 8px;
    border: 2px solid #070808;
    border-radius: 4px;
    background: linear-gradient(165deg, #1b1d1d, #090a0a);
    box-shadow: inset 0 0 0 1px #3d413f, 0 3px 6px #000;
    cursor: zoom-in;
}

.engine-gauge { min-width: 0; text-align: center; }
.engine-gauge span { display: block; overflow: hidden; color: #8e948f; font-size: .36rem; letter-spacing: .03em; white-space: nowrap; }
.engine-gauge strong { display: block; color: #f2ede0; font: 700 .6rem "Courier New", monospace; }
.engine-gauge small { color: #656b67; font-size: .3rem; }
.engine-scale { position: relative; height: 5px; margin: 4px 3px 3px; overflow: hidden; border: 1px solid #050606; background: linear-gradient(90deg, #b43b35 0 15%, #59a65c 16% 78%, #d3b342 79% 92%, #b43b35 93%); }
.engine-scale::after { content: ""; position: absolute; top: -1px; left: var(--engine-level, 60%); width: 2px; height: 7px; background: #fff; box-shadow: 0 0 2px #000; }

.c172-rack-unit {
    position: relative;
    border: 3px solid #070808;
    border-radius: 3px;
    background: linear-gradient(180deg, #2b2d2c, #0a0b0b 12%, #151717 88%, #292b2a);
    box-shadow: inset 0 0 0 1px #515553, 0 3px 6px #000;
    outline: none;
}

.c172-rack-unit > header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px 3px;
    color: #c9cbc5;
    font: 600 .4rem Arial, sans-serif;
    letter-spacing: .06em;
}

.c172-rack-unit > header em { margin-right: auto; color: #e6e7e1; font-weight: 800; letter-spacing: -.03em; }
.c172-rack-unit > header strong { color: #aeb2ae; }
.c172-rack-unit > header span { color: #656a66; font-size: .32rem; }

.c172-audio { min-height: 63px; cursor: zoom-in; }
.audio-controls { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 0 8px 3px; }
.audio-controls button { min-width: 0; height: 19px; padding: 0; font-size: .3rem; }
.audio-controls button i { display: block; width: 4px; height: 3px; margin: 0 auto 2px; border-radius: 50%; background: #211; }
.audio-controls button.active { color: #b8ffc0; background: linear-gradient(#35533a, #122416); }
.audio-controls button.active i { background: #6df585; box-shadow: 0 0 4px #48d963; }
.audio-bottom { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 1px 9px 4px; }
.audio-bottom button { height: 14px; padding: 0 8px; font-size: .28rem; }
.audio-bottom b { color: #6e746f; font-size: .27rem; }
.rack-knob { display: inline-block; border: 1px solid #656a66; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #555, #171818 48%, #050606 70%); box-shadow: 0 2px 3px #000; }
.small-knob { width: 18px; height: 18px; }

.c172-gns { min-height: 174px; cursor: zoom-in; }
.c172-gns-430 { min-height: 157px; }
.gns-layout { display: grid; grid-template-columns: 39px minmax(0, 1fr) 40px; gap: 4px; padding: 1px 7px 4px; }
.gns-left-controls,
.gns-right-controls { display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 3px; }
.gns-left-controls button,
.gns-right-controls button { width: 34px; min-height: 17px; padding: 1px; font-size: .28rem; }
.gns-power-knob { position: relative; width: 30px !important; height: 30px; border-radius: 50% !important; }
.gns-power-knob i { position: absolute; inset: 6px; border: 1px solid #777; border-radius: 50%; background: #222; }
.gns-power-knob span { position: absolute; top: 31px; left: -3px; width: 36px; color: #6d726e; font-size: .25rem; line-height: 1.05; }
.gns-swap { margin-top: 9px; color: #d8b36f !important; font-size: .65rem !important; }
.gns-volume-label { color: #666c68; font-size: .25rem; text-align: center; }
.gns-screen { display: grid; grid-template-columns: 78px minmax(0, 1fr); height: 108px; overflow: hidden; border: 4px solid #050606; border-radius: 2px; background: #0a1318; box-shadow: inset 0 0 13px #000, 0 0 0 1px #414543; }
.c172-gns-430 .gns-screen { height: 91px; }

.gns-frequency-column {
    display: grid;
    align-content: start;
    gap: 1px;
    padding: 4px;
    border-right: 1px solid #6c817f;
    color: #b9e6e8;
    background: linear-gradient(#10282f, #0a171d);
    font: 600 .35rem/1.1 "Courier New", monospace;
}

.gns-frequency-column > span,
.gns-frequency-column > small { color: #79a6a8; font-size: .29rem; }
.gns-frequency-column strong,
.gns-frequency-column input { min-width: 0; width: 100%; padding: 1px 0; border: 0; color: #baf9ff; background: transparent; font: 700 .55rem "Courier New", monospace; text-align: left; }
.gns-frequency-column input { color: #f2ce7f; border-bottom: 1px solid #425453; outline: none; }
.gns-frequency-column input:focus { background: #142b2a; box-shadow: inset 0 0 0 1px #d9a348; }

.gns-map-screen { position: relative; overflow: hidden; background: linear-gradient(156deg, #425f42 0 44%, #617d94 45% 100%); }
.gns-status { position: relative; z-index: 5; display: flex; justify-content: space-between; padding: 2px 4px; color: #dffbff; background: rgba(7, 17, 22, .88); font: 700 .3rem "Courier New", monospace; }
.gns-status b { color: #83f1ff; }
.gns-map-grid { position: absolute; inset: 15px 0 15px; opacity: .28; background-image: linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px); background-size: 22px 22px; }
.gns-route { position: absolute; z-index: 2; top: 53%; left: 8%; width: 88%; height: 3px; background: #ef39e5; box-shadow: 0 0 2px #43133e; transform: rotate(-16deg); }
.gns-aircraft-symbol { position: absolute; z-index: 4; top: 52%; left: 48%; color: #fff; font-size: .75rem; text-shadow: 0 1px 2px #000; transform: translate(-50%, -50%); }
.gns-waypoint { position: absolute; z-index: 4; color: #e8fbff; font: 700 .32rem "Courier New", monospace; text-shadow: 1px 1px #000; }
.wp-a { top: 28%; right: 9%; }
.wp-b { bottom: 23%; left: 10%; }
.gns-map-footer { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-around; padding: 2px; color: #c8f3f4; background: rgba(4, 14, 17, .9); font: 700 .28rem "Courier New", monospace; }
.gns-dual-knob { position: relative; width: 31px; height: 31px; border: 1px solid #707470; border-radius: 50%; background: radial-gradient(circle, #222 0 35%, #4f5250 36% 50%, #121313 52% 100%); box-shadow: 0 2px 3px #000; cursor: ns-resize; }
.gns-dual-knob::after { content: ""; position: absolute; top: 2px; left: calc(50% - 1px); width: 2px; height: 8px; background: #aaa; }
.gns-dual-knob span { position: absolute; inset: 8px; border: 1px solid #777; border-radius: 50%; background: #1b1c1c; }
.c172-gns footer { display: flex; justify-content: space-around; gap: 3px; padding: 2px 8px 5px; }
.c172-gns footer button { flex: 1; height: 17px; padding: 0 2px; font-size: .28rem; }
.c172-gns button.active { color: #e9ca85; background: #4e3c1b; }
.c172-gns.powered-off .gns-screen { background: #020303; }
.c172-gns.powered-off .gns-screen > * { visibility: hidden; }

.c172-xpdr { min-height: 123px; cursor: zoom-in; }
.xpdr-display { display: grid; grid-template-columns: 1fr 38px 30px; align-items: center; gap: 4px; margin: 0 8px 4px; padding: 4px 7px; border: 3px solid #040505; background: #050805; box-shadow: inset 0 0 10px #000, 0 0 0 1px #323631; }
.xpdr-display > div { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.xpdr-display span { color: #725c31; font-size: .28rem; }
.xpdr-display input { grid-column: 1 / -1; width: 96px; border: 0; outline: none; color: #eeba56; background: transparent; font: 700 1.15rem "Courier New", monospace; letter-spacing: .17em; }
.xpdr-display small { grid-column: 1 / -1; color: #8c702f; font: .34rem "Courier New", monospace; }
.xpdr-display > strong { color: #f1b64d; font: 700 .65rem "Courier New", monospace; text-align: center; }
.xpdr-display > i { color: #695125; font: 700 .4rem "Courier New", monospace; font-style: normal; text-align: center; }
.xpdr-keyboard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 0 8px 6px; }
.xpdr-keyboard button { min-width: 0; height: 19px; padding: 0; font-size: .3rem; }
.xpdr-keyboard button.active { color: #ffd883; background: linear-gradient(#684e21, #241b0d); }

.c172-lower-panel {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 8px;
    padding: 9px 13px;
    border: 2px solid #070808;
    border-radius: 4px;
    background: linear-gradient(165deg, #1d1f1f, #0d0e0e);
    box-shadow: inset 0 0 0 1px #3a3d3b;
}

.master-switches { display: flex; gap: 4px; }
.master-switches button { display: grid; grid-template-columns: 12px auto; align-items: center; gap: 4px; height: 31px; padding: 0 7px; font-size: .35rem; }
.master-switches button i { width: 7px; height: 13px; border: 1px solid #151616; background: #4a1817; box-shadow: inset 0 0 3px #000; }
.master-switches button.active { color: #c6edb9; background: linear-gradient(#365037, #142216); }
.master-switches button.active i { background: #73b55d; box-shadow: 0 0 5px #5aaa4e; }
.c172-lower-panel > label { display: grid; grid-template-columns: auto 85px 18px; align-items: center; gap: 5px; margin-left: auto; color: #969b97; font-size: .36rem; }
.c172-lower-panel input { width: 85px; accent-color: #7598bc; }
.c172-lower-panel select { color: #e2e0d8; background: #101111; }
.control-knob { width: 17px; height: 17px; border: 1px solid #060707; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 0 2px 3px #000; }
.mixture-knob { background: #a93631; }
.throttle-knob { background: #171818; }

.c172-panel [data-instrument].required { outline: 2px solid #d58c2a; outline-offset: 2px; }
.c172-panel [data-instrument].correct { outline: 2px solid #2bb56d; outline-offset: 2px; }

/* Große Instrumentenansichten */
.instrument-detail-modal .modal-dialog { width: min(1120px, calc(100vw - 24px)); max-width: 1120px; margin: 12px auto; }
.instrument-detail-modal .modal-content { overflow: hidden; border: 1px solid #4b504e; border-radius: 10px; color: #e8e6dc; background: #111414; box-shadow: 0 28px 80px rgba(0, 0, 0, .78); }
.instrument-detail-modal .modal-header { min-height: 68px; padding: 13px 18px; border-bottom: 1px solid #343a37; background: linear-gradient(#1e2221, #131515); }
.instrument-detail-modal .modal-body { padding: 22px; background: radial-gradient(circle at 50% 18%, #303433, #1c201f 54%, #121514); }
.instrument-detail-stage { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; min-height: 0 !important; overflow: visible !important; }

.c172-modal-object { box-sizing: border-box; flex: none; margin: 0 auto; }
.c172-modal-object > .c172-expand-icon { display: none; }
.c172-modal-object.c172-gauge { width: min(580px, 72vh, calc(100vw - 70px)); aspect-ratio: 1; padding: 4%; }
.c172-modal-object.c172-gauge .panel-screw { width: 12px; height: 12px; }
.c172-modal-object.c172-gauge .c172-expand-icon { display: none; }
.c172-modal-object.c172-gauge .c172-bezel { box-shadow: inset 0 0 0 3px #050606, inset 0 0 0 7px #303230, inset 0 0 18px #000, 0 8px 18px #000; }

.c172-modal-object.c172-rack-unit { width: min(880px, calc(100vw - 70px)); cursor: default; }
.c172-modal-object.c172-gns { min-height: 375px; padding: 7px 12px 11px; border-width: 7px; }
.c172-modal-object.c172-gns > header { padding: 7px 16px; font-size: .75rem; }
.c172-modal-object.c172-gns > header span { font-size: .55rem; }
.c172-modal-object .gns-layout { grid-template-columns: 82px minmax(0, 1fr) 85px; gap: 12px; padding: 4px 13px 8px; }
.c172-modal-object .gns-screen { grid-template-columns: 155px minmax(0, 1fr); height: 250px; border-width: 7px; }
.c172-modal-object .gns-frequency-column { gap: 4px; padding: 10px; font-size: .8rem; }
.c172-modal-object .gns-frequency-column > span,
.c172-modal-object .gns-frequency-column > small { font-size: .55rem; }
.c172-modal-object .gns-frequency-column strong,
.c172-modal-object .gns-frequency-column input { font-size: 1.2rem; }
.c172-modal-object .gns-status { padding: 5px 8px; font-size: .7rem; }
.c172-modal-object .gns-map-grid { inset: 28px 0 28px; background-size: 45px 45px; }
.c172-modal-object .gns-waypoint,
.c172-modal-object .gns-map-footer { font-size: .7rem; }
.c172-modal-object .gns-aircraft-symbol { font-size: 1.4rem; }
.c172-modal-object .gns-left-controls button,
.c172-modal-object .gns-right-controls button { width: 72px; min-height: 34px; font-size: .58rem; }
.c172-modal-object .gns-power-knob { width: 58px !important; height: 58px; }
.c172-modal-object .gns-power-knob span { top: 61px; left: 9px; width: 40px; font-size: .45rem; }
.c172-modal-object .gns-dual-knob { width: 62px; height: 62px; }
.c172-modal-object .gns-dual-knob span { inset: 15px; }
.c172-modal-object.c172-gns footer button { height: 34px; font-size: .55rem; }

.c172-modal-object.c172-xpdr { width: min(820px, calc(100vw - 70px)); min-height: 280px; padding: 10px 18px 15px; border-width: 7px; }
.c172-modal-object.c172-xpdr > header { font-size: .8rem; }
.c172-modal-object .xpdr-display { grid-template-columns: 1fr 90px 70px; margin: 5px 14px 10px; padding: 9px 16px; border-width: 5px; }
.c172-modal-object .xpdr-display input { width: 260px; font-size: 3.2rem; }
.c172-modal-object .xpdr-display span,
.c172-modal-object .xpdr-display small { font-size: .7rem; }
.c172-modal-object .xpdr-display > strong { font-size: 1.3rem; }
.c172-modal-object .xpdr-keyboard { gap: 7px; padding: 5px 15px 10px; }
.c172-modal-object .xpdr-keyboard button { height: 38px; font-size: .7rem; }

.c172-modal-object.c172-audio { width: min(820px, calc(100vw - 70px)); min-height: 180px; padding: 12px 18px; cursor: default; }
.c172-modal-object .audio-controls { gap: 6px; padding: 8px 15px; }
.c172-modal-object .audio-controls button { height: 42px; font-size: .62rem; }
.c172-modal-object .audio-bottom { gap: 12px; padding-top: 9px; }
.c172-modal-object .audio-bottom button { height: 30px; font-size: .55rem; }
.c172-modal-object .small-knob { width: 38px; height: 38px; }

.c172-modal-object.c172-engine-cluster { width: min(900px, calc(100vw - 70px)); min-height: 170px; gap: 10px; padding: 27px 22px 20px; cursor: default; }
.c172-modal-object .engine-gauge span { font-size: .65rem; }
.c172-modal-object .engine-gauge strong { font-size: 1.25rem; }
.c172-modal-object .engine-gauge small { font-size: .55rem; }
.c172-modal-object .engine-scale { height: 10px; margin: 12px 4px 8px; }

.c172-modal-console {
    display: grid;
    gap: 11px;
    width: min(880px, calc(100vw - 70px));
    padding: 15px 18px;
    border: 1px solid #4a504d;
    border-radius: 8px;
    background: linear-gradient(155deg, #202423, #101212);
    box-shadow: inset 0 0 0 1px #090a0a, 0 7px 18px rgba(0, 0, 0, .4);
}

.c172-modal-console > label {
    display: grid;
    grid-template-columns: 150px minmax(220px, 1fr) 82px 60px;
    align-items: center;
    gap: 12px;
    color: #d8d7cf;
}

.c172-modal-console label > span { font-size: .82rem; }
.c172-modal-console input[type="range"] { width: 100%; accent-color: #e4a13d; }
.c172-modal-console input[type="number"] { min-height: 40px; border: 1px solid #405149; color: #f2bc5f; background: #030605; font: 700 1.15rem "Courier New", monospace; text-align: center; }
.c172-modal-console output { padding: 7px 9px; border: 1px solid #30453b; color: #f3bd5f; background: #020504; font: 700 1.1rem "Courier New", monospace; text-align: center; }
.c172-modal-console small { color: #929793; font-size: .7rem; }
.modal-step-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.modal-step-buttons button,
.modal-reset { min-height: 40px; border-radius: 4px; }
.modal-reset { justify-self: end; min-width: 190px; }
.modal-help { margin: 0; color: #b6bbb6; text-align: center; }

.altimeter-operating-help {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border: 1px solid #6b542d;
    border-radius: 6px;
    color: #d8d6cd;
    background: linear-gradient(120deg, rgba(110, 76, 25, .34), rgba(30, 32, 31, .7));
}
.altimeter-operating-help strong { color: #ffc15a; font-size: .9rem; }
.altimeter-operating-help span { font-size: .8rem; line-height: 1.4; }
.qnh-modal-control {
    display: grid;
    grid-template-columns: 58px minmax(260px, 1fr) 58px;
    align-items: stretch;
    gap: 8px;
}
.qnh-modal-control > button { min-height: 48px; border-radius: 5px; color: #ffc05a; font-size: 1.45rem; }
.qnh-modal-control > label {
    display: grid;
    grid-template-columns: 160px minmax(120px, 1fr) 50px;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.qnh-modal-control input { width: 100%; }
.altimeter-readout {
    display: grid;
    grid-template-columns: 1fr 110px 44px;
    align-items: center;
    gap: 9px;
    color: #d8d7cf;
}
.altimeter-readout output { font-size: 1.2rem; }
.altimeter-simulation-help { padding: 8px 10px; border-radius: 5px; background: rgba(0, 0, 0, .22); }
.altimeter-step-buttons button { color: #d9d8d1; }

.modal-frequency-control { display: grid; grid-template-columns: 180px 150px 1fr; align-items: center; gap: 13px; }
.modal-frequency-control > strong { color: #c3c7c2; font-size: .8rem; letter-spacing: .07em; }
.modal-frequency-control > output { color: #f3c369; font-size: 1.35rem; }
.modal-frequency-control > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.modal-frequency-control button { min-height: 40px; padding: 4px 7px; border-radius: 4px; font-size: .7rem; }
.modal-frequency-control .frequency-swap { color: #f2c777; }
.modal-frequency-control > small { grid-column: 1 / -1; text-align: center; }

@media (max-width: 1380px) {
    .instrument-training-shell { display: block !important; }
    .instrument-briefing-card { margin-bottom: 14px; }
}

@media (max-width: 760px) {
    .instrument-detail-modal .modal-dialog { width: calc(100vw - 12px); margin: 6px auto; }
    .instrument-detail-modal .modal-header { min-height: 58px; padding: 9px 12px; }
    .instrument-detail-modal .modal-body { padding: 12px; }
    .c172-modal-object.c172-gauge { width: min(88vw, 70vh); }
    .c172-modal-object.c172-rack-unit,
    .c172-modal-object.c172-engine-cluster,
    .c172-modal-console { width: calc(100vw - 38px); }
    .c172-modal-object .gns-layout { grid-template-columns: 54px minmax(0, 1fr) 55px; gap: 5px; padding: 2px 4px; }
    .c172-modal-object .gns-screen { grid-template-columns: 105px minmax(0, 1fr); height: 190px; }
    .c172-modal-object .gns-left-controls button,
    .c172-modal-object .gns-right-controls button { width: 48px; min-height: 28px; }
    .c172-modal-object .gns-power-knob { width: 44px !important; height: 44px; }
    .c172-modal-object .gns-dual-knob { width: 45px; height: 45px; }
    .c172-modal-console > label { grid-template-columns: 1fr 65px 45px; }
    .c172-modal-console label > span { grid-column: 1 / -1; }
    .modal-step-buttons { grid-template-columns: repeat(2, 1fr); }
    .modal-frequency-control { grid-template-columns: 1fr 1fr; }
    .modal-frequency-control > div { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
    .modal-frequency-control .frequency-swap { grid-column: 1 / -1; }
    .c172-modal-object .xpdr-display input { width: 170px; font-size: 2rem; }
    .altimeter-operating-help { grid-template-columns: 1fr; gap: 5px; }
    .qnh-modal-control { grid-template-columns: 50px minmax(0, 1fr) 50px; }
    .qnh-modal-control > label { grid-template-columns: 1fr 46px; }
    .qnh-modal-control > label > span { grid-column: 1 / -1; }
    .altimeter-readout { grid-template-columns: 1fr 82px 34px; }
}