/* V9: KNX-Bereich – gleiche visuelle Sprache wie SAT, mit eigenständiger grüner Akzentfarbe */
.knx-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start;margin-top:18px}
.knx-stage{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:#e6ece9;box-shadow:var(--shadow);border:1px solid rgba(34,74,61,.12)}
.knx-stage>img{width:100%;height:100%;object-fit:cover;display:block}
.knx-summary{background:#fff;border:1px solid #d7e4de;border-radius:24px;padding:24px;box-shadow:var(--shadow-sm);position:sticky;top:92px}
.knx-summary h1{font-size:clamp(1.55rem,2.1vw,2.15rem);margin:.35rem 0 .75rem;color:var(--navy)}
.knx-summary>p{color:var(--muted);line-height:1.62;margin:0 0 18px}
.progress-ring--knx{background:conic-gradient(#2c8c72 0deg,#e7edf3 0)}
.quick-path--knx{border-color:#cfe5dc;background:#f1faf6}.quick-path--knx li.is-done span{background:#2c8c72}

.knx-hotspot{position:absolute;border:0;background:transparent;cursor:pointer;z-index:3;padding:0}
.knx-hotspot .scene-hotspot__label{border-color:#bcdccf;background:rgba(255,255,255,.94)}
.knx-hotspot .scene-hotspot__label:before{background:#2c8c72;box-shadow:0 0 0 5px rgba(44,140,114,.18)}
.knx-hotspot:hover .scene-hotspot__label,.knx-hotspot:focus-visible .scene-hotspot__label{box-shadow:0 12px 28px rgba(25,82,63,.18);border-color:#2c8c72}
.knx-hotspot--functions{left:15.2%;top:21.4%;width:13%;height:11%}
.knx-hotspot--light{left:56.4%;top:50.5%;width:14%;height:12%}
.knx-hotspot--shade{left:82.7%;top:17.5%;width:10%;height:13%}
.knx-hotspot--climate{left:15.4%;top:37.3%;width:12%;height:12%}
.knx-hotspot--visual{left:15.4%;top:54.8%;width:12%;height:12%}
.knx-hotspot--functions .scene-hotspot__label{left:158px;top:2px}
.knx-hotspot--light .scene-hotspot__label{left:145px;top:7px}
.knx-hotspot--shade .scene-hotspot__label{right:18px;top:2px}
.knx-hotspot--climate .scene-hotspot__label{left:150px;top:2px}
.knx-hotspot--visual .scene-hotspot__label{left:150px;top:4px}

.knx-storyline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0}
.knx-storyline__item{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;text-align:left;border:1px solid #d5e4dd;background:#fff;border-radius:17px;padding:13px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.18s ease}
.knx-storyline__item:hover{transform:translateY(-2px);border-color:#2c8c72}
.knx-storyline__item>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e9f7f1;color:#236f5b;font-weight:950}
.knx-storyline__item strong{display:block;color:var(--navy);font-size:.88rem}.knx-storyline__item small{display:block;color:var(--muted);font-size:.7rem;line-height:1.35;margin-top:2px}

.chapter-sidebar--knx{border-color:#cee2d9;background:linear-gradient(180deg,#f4fbf8,#fff)}
.chapter-sidebar--knx .chapter-nav__item.is-active{background:#e8f7f1;border-color:#2c8c72;color:#195f4d}
.chapter-shell--knx .chapter-hero{border-color:#cfe2da}
.chapter-shell--knx .eyebrow{color:#24745f}
.chapter-shell--knx .chapter-tabs button.is-active{color:#19644f;border-color:#2c8c72;background:#eaf8f2}
.chapter-shell--knx .primary-button{background:#236f5b}.chapter-shell--knx .primary-button:hover{background:#195c4a}
.chapter-shell--knx .completion-card.is-complete{border-color:#2c8c72;background:#ecf8f3}

.diagram-image{display:block;width:100%;max-height:430px;object-fit:contain;background:#f8fafb;border:1px solid #dce6e1;border-radius:18px;padding:10px}
.formula--text{font-size:clamp(1rem,1.9vw,1.25rem);font-weight:800;color:#fff;letter-spacing:.01em}

.knx-device-map{position:relative;border-radius:19px;overflow:hidden;background:#e9eeeb;border:1px solid #d6e2dc}
.knx-device-map>img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.knx-device-pin{position:absolute;width:32px;height:32px;border-radius:50%;border:3px solid #fff;background:#247b63;color:#fff;display:grid;place-items:center;font-size:.73rem;font-weight:950;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.25);transform:translate(-50%,-50%)}
.knx-device-pin:hover,.knx-device-pin:focus-visible{transform:translate(-50%,-50%) scale(1.12)}
.knx-device-pin[data-knx-device-pin="presence"]{left:15%;top:22%}
.knx-device-pin[data-knx-device-pin="panel"]{left:16%;top:38%}
.knx-device-pin[data-knx-device-pin="button"]{left:16%;top:55%}
.knx-device-pin[data-knx-device-pin="shade"]{left:84%;top:18%}
.knx-device-info{margin-top:10px;border-radius:14px;padding:13px 15px;background:#eaf7f2;color:#315b4f;min-height:54px}

.knx-assignment{display:grid;gap:9px;margin-top:12px}
.knx-assignment__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);gap:12px;align-items:center;border:1px solid #dbe6e1;border-radius:13px;padding:10px 12px;background:#fff}
.knx-assignment__row label{font-weight:750;color:#29495c}
.knx-assignment__row select,.group-builder select,.group-builder input{width:100%;border:1px solid #cfdce5;border-radius:10px;padding:9px;background:#fff}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
.check-grid label{display:flex;gap:8px;align-items:flex-start;border:1px solid #dbe6e1;border-radius:12px;padding:10px;background:#fff;color:#3a5365}

.group-builder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;margin:13px 0}
.group-address-output{border-radius:14px;background:#eaf7f2;border:1px solid #cce5da;padding:14px;font-weight:800;color:#205f4f;min-height:52px}
.knx-telegram{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:17px 0;padding:17px;border-radius:17px;background:#f3f8f6;border:1px solid #d7e5df}
.knx-telegram__node{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid #ccdcd5;font-weight:850;color:#274d5e}
.knx-telegram__line{position:relative;height:4px;background:#c6ddd4;border-radius:4px;overflow:hidden}
.knx-telegram__line:after{content:"";position:absolute;inset:-2px auto -2px -25%;width:24%;background:#2c8c72;border-radius:10px;animation:knxTelegram 2.2s linear infinite}
@keyframes knxTelegram{to{left:105%}}

.preview-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.preview-chips span{border-radius:999px;background:#e8f6f0;border:1px solid #c8e3d8;padding:6px 10px;color:#276a57;font-weight:750;font-size:.79rem}
.dashboard-builder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}.dashboard-builder label{display:flex;gap:8px;align-items:center;border:1px solid #dbe6e1;border-radius:12px;padding:10px;background:#fff}
.dashboard-mock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.dashboard-tile{border-radius:14px;background:linear-gradient(145deg,#eef8f4,#fff);border:1px solid #cde2d9;padding:14px}.dashboard-tile span{display:block;color:#577064;font-size:.76rem}.dashboard-tile strong{display:block;color:#1f5e4e;margin-top:4px}

.project-domain-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid #d6e1e8;border-radius:999px;background:#f2f6f8}.project-domain-switch button{border:0;border-radius:999px;padding:8px 14px;background:transparent;color:#506878;font-weight:850;cursor:pointer}.project-domain-switch button.is-active{background:#fff;color:var(--navy);box-shadow:0 3px 10px rgba(27,55,75,.12)}

@media(max-width:980px){
  .knx-layout{grid-template-columns:1fr}.knx-summary{position:static}.knx-storyline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .knx-layout{margin:0;padding:0;gap:14px}.knx-stage{width:100%;aspect-ratio:4/3;border-radius:18px}.knx-summary{width:100%;min-width:0;padding:18px;border-radius:18px}
  .knx-stage .scene-hotspot__label{min-width:0;width:auto;max-width:none;padding:5px 7px;border-radius:999px;white-space:nowrap}
  .knx-stage .scene-hotspot__label strong,.knx-stage .scene-hotspot__label small{display:none}
  .knx-stage .scene-hotspot__label:after{content:attr(data-short);display:block;font-size:.57rem;line-height:1;font-weight:900;color:#205f4f}
  .knx-hotspot--functions .scene-hotspot__label{left:46px;top:-12px}.knx-hotspot--light .scene-hotspot__label{left:48px;top:5px}.knx-hotspot--shade .scene-hotspot__label{right:-12px;top:-12px}.knx-hotspot--climate .scene-hotspot__label{left:48px;top:2px}.knx-hotspot--visual .scene-hotspot__label{left:48px;top:3px}
  .knx-storyline{grid-template-columns:1fr}.knx-assignment__row{grid-template-columns:1fr}.check-grid,.group-builder,.dashboard-builder,.dashboard-mock{grid-template-columns:1fr}.knx-telegram{grid-template-columns:1fr}.knx-telegram__line{height:32px;width:4px;justify-self:center}.knx-telegram__line:after{inset:-25% -2px auto -2px;width:auto;height:24%;animation:knxTelegramVertical 2.2s linear infinite}@keyframes knxTelegramVertical{to{top:105%}}
  .mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))}.mobile-nav button{padding:8px 3px;font-size:.58rem}
}

/* V9 Feinschliff der interaktiven KNX-Aufgaben */
.knx-assignment__row{grid-template-columns:minmax(170px,1.15fr) repeat(2,minmax(155px,.85fr))}
.knx-assignment__row>strong{color:#29495c}
.group-builder{grid-template-columns:repeat(4,minmax(0,1fr))}
.knx-telegram__device{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid #ccdcd5;font-weight:850;color:#274d5e;text-align:center}
.knx-telegram__bus{position:relative;height:5px;background:#c6ddd4;border-radius:4px;overflow:hidden}
.knx-telegram__packet{position:absolute;inset:-2px auto -2px -25%;width:24%;background:#2c8c72;border-radius:10px}
.knx-telegram.is-running .knx-telegram__packet{animation:knxPacket 1.2s ease-in-out}
@keyframes knxPacket{from{left:-25%}to{left:105%}}
@media(max-width:720px){
  .knx-assignment__row,.group-builder{grid-template-columns:1fr}
  .knx-telegram__bus{height:34px;width:5px;justify-self:center}
  .knx-telegram__packet{inset:-25% -2px auto -2px;width:auto;height:24%}
  .knx-telegram.is-running .knx-telegram__packet{animation:knxPacketVertical 1.2s ease-in-out}
  @keyframes knxPacketVertical{from{top:-25%}to{top:105%}}
}

/* KNX: concrete examples, laboratory workflow and system schematics */
.example-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.86rem}.example-table th,.example-table td{border:1px solid #d8e3e9;padding:10px 11px;vertical-align:top;text-align:left}.example-table th{background:#edf6f2;color:#244f43}.example-table td:first-child{font-weight:800;color:#29495c;width:19%}
.lab-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.lab-path article{border:1px solid #d7e5df;border-radius:15px;padding:14px;background:#f7fbf9}.lab-path span{display:grid;width:30px;height:30px;border-radius:50%;place-items:center;background:#2c8c72;color:#fff;font-weight:900;margin-bottom:9px}.lab-path strong{display:block;color:#17384a;margin-bottom:5px}.lab-path p{font-size:.78rem;line-height:1.5;margin:0}
.lab-levels{display:grid;gap:12px;margin:15px 0}.lab-level{border:1px solid #d7e5df;border-radius:16px;background:#fff;padding:15px}.lab-level__head{display:flex;gap:10px;align-items:center;margin-bottom:8px}.lab-level__head span{padding:5px 9px;border-radius:999px;background:#e8f7f1;color:#236f5b;font-size:.7rem;font-weight:900}.lab-level h3{margin:0;font-size:1rem}.lab-level ul{margin:6px 0 0}
.schematic-frame{border:1px solid #d5e2e9;border-radius:18px;padding:12px;background:#f7fafc;overflow:auto}.schematic-frame img{display:block;width:100%;height:auto;min-width:760px}.symbol-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.symbol-legend div{border:1px solid #dbe5ea;border-radius:13px;padding:12px;background:#fff}.symbol-legend strong{display:block;margin-bottom:4px}
.sequence-hint{margin-top:10px;border-left:4px solid #d8564b;background:#fff2f0;border-radius:0 12px 12px 0;padding:11px 13px;color:#8c342d;font-size:.83rem;line-height:1.5}.feedback.bad{white-space:normal;line-height:1.5}
@media(max-width:760px){.lab-path{grid-template-columns:1fr 1fr}.symbol-legend{grid-template-columns:1fr}.schematic-frame img{min-width:640px}}
@media(max-width:720px){
  .knx-device-pin[data-knx-device-pin="presence"]{left:9%;top:19%}
  .knx-device-pin[data-knx-device-pin="panel"]{left:10%;top:38%}
  .knx-device-pin[data-knx-device-pin="button"]{left:10%;top:57%}
  .knx-device-pin[data-knx-device-pin="shade"]{left:90%;top:14%}
}

@media(max-width:480px){.lab-path{grid-template-columns:1fr}}

/* KNX v11: preparation and laboratory work separated */
.knx-storyline{grid-template-columns:repeat(5,minmax(0,1fr))}
.module-card__lab{margin-top:10px;padding:8px 10px;border-radius:10px;background:#eef8f4;color:#246b59;font-size:.7rem;line-height:1.4;font-weight:750;border:1px solid #d2e9df}
.chapter-meta span:last-child{max-width:100%;white-space:normal}
@media(max-width:1040px){.knx-storyline{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.knx-storyline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.knx-storyline{grid-template-columns:1fr}}