/* Tischgrafik und Statusmarken aus dem 5W-Stand (site.css), unverändert herausgelöst. */
.status-pill{display:inline-block;border:1px solid #bccbad;padding:4px 9px;border-radius:4px;font-size:.58rem;font-weight:600;line-height:1.5}
.status-prototype{background:#eef3e7;color:#3c5729}
.demo-app{background:#fff;border:1px solid #c5d0bf;border-radius:12px;overflow:hidden;box-shadow:0 25px 50px -40px #173c3290}
.demo-app-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid var(--line)}
.demo-app-name{font-size:1.25rem;font-weight:800;letter-spacing:-.06em}
.demo-app-name>span{font-size:.8rem;font-weight:600;letter-spacing:-.01em;margin-left:10px}
.demo-app-header p{font-size:.58rem;color:var(--muted);margin-top:4px}
.demo-badge{font-size:.55rem;letter-spacing:.1em;background:#edf1e7;border:1px solid var(--line);border-radius:4px;padding:4px 7px}
.demo-controls{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:13px;align-items:end;padding:18px 24px}
.demo-controls label{font-size:.56rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.demo-controls select{display:block;width:100%;border:1px solid #c1cdb9;border-radius:5px;background:#fff;color:var(--ink);padding:9px 11px;margin-top:6px;font-size:.78rem;font-weight:500;letter-spacing:0}
.demo-availability{display:flex;gap:9px;align-items:center;align-self:center;padding-top:17px}
.demo-availability strong{font-size:1.75rem;letter-spacing:-.08em;font-weight:500;line-height:1.2}
.demo-availability>span{font-size:.56rem;line-height:1.4;color:var(--muted)}
.floorplan{aspect-ratio:1.38;position:relative;margin:4px 24px 18px;background-color:#f4f4ed;background-image:radial-gradient(#d5ddce .8px,transparent .8px);background-size:12px 12px;border:2px solid #9cab8e;border-radius:3px}
.floorplan-title{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;color:#5d7052;font-size:.49rem;letter-spacing:.16em;font-weight:700}
.window-wall{position:absolute;top:21%;bottom:19%;left:-4px;width:6px;background:#edf6fa;border:1px solid #9eaea0}
.floorplan-bar{position:absolute;top:23%;right:-2px;width:11%;height:48%;border:1px solid #a5b49a;background:#e4e9dc;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;font-size:.49rem;letter-spacing:.13em;color:#5d7052}
.floorplan-entry{position:absolute;bottom:-2px;left:42%;width:27%;background:#fff;padding:6px 0 0;text-align:center;font-size:.46rem;letter-spacing:.12em}
.table{position:absolute;width:18%;height:19%;padding:3px 2px;background:#e9f0dd;border:1.5px solid #788f57;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#28451b;isolation:isolate;box-shadow:0 -8px 0 -5px #c4d6b1,0 8px 0 -5px #c4d6b1}
.table:before,.table:after{content:'';position:absolute;left:-6px;top:25%;width:3px;height:47%;background:#c4d6b1;border-radius:2px}
.table:after{left:auto;right:-6px}
.table>span{font-size:.73rem;font-weight:700;line-height:1.1}
.table small{font-size:.49rem;line-height:1.3}
.table-01{left:12%;top:22%;width:16%}
.table-02{left:39%;top:22%}
.table-03{left:66%;top:22%}
.table-04{left:12%;top:61%;width:20%}
.table-05{left:41%;top:61%;width:16%}
.table-06{left:66%;top:61%;width:20%}
.table[data-status="reserved"]{background:#f6ecd0;border-color:#a78330;color:#6a5114;box-shadow:0 -8px 0 -5px #e4d4a8,0 8px 0 -5px #e4d4a8}
.table[data-status="reserved"]:before,.table[data-status="reserved"]:after{background:#e4d4a8}
.table[data-status="occupied"]{background:#e2e8e6;border-color:#61756a;color:#344b41;box-shadow:0 -8px 0 -5px #b9c6bf,0 8px 0 -5px #b9c6bf}
.table[data-status="occupied"]:before,.table[data-status="occupied"]:after{background:#b9c6bf}
.table[data-status="blocked"]{background:repeating-linear-gradient(45deg,#e9e9e4,#e9e9e4 4px,#f6f6f1 4px,#f6f6f1 8px);color:#555e52;border-color:#9ca296;box-shadow:0 -8px 0 -5px #ced0c7,0 8px 0 -5px #ced0c7}
.table[data-status="blocked"]:before,.table[data-status="blocked"]:after{background:#ced0c7}
.table[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:5px}
.table:hover{transform:translateY(-2px)}
.map-legend{display:flex;flex-wrap:wrap;gap:15px;padding:0 24px 17px;font-size:.54rem;color:#58644f}
.map-legend span{display:flex;gap:6px;align-items:center}
.map-legend i{width:7px;height:7px;border-radius:2px;display:inline-block}
.legend-free{background:#9db576}
.legend-reserved{background:#d2b764}
.legend-occupied{background:#7f9789}
.legend-blocked{background:#b3b7ab}
.table-detail{display:flex;gap:12px;background:#f1f4eb;border-top:1px solid var(--line);padding:18px 24px;min-height:100px}
.detail-icon{display:flex;align-items:center;justify-content:center;width:29px;height:29px;background:var(--lime);border-radius:50%;font-size:1rem;flex-shrink:0}
.table-detail strong{font-size:.72rem;display:block}
.table-detail p{font-size:.65rem;margin-top:4px;line-height:1.6}
@media(max-width:960px){
.demo-controls{padding-inline:17px;gap:8px}
.floorplan{margin-inline:17px}
.demo-availability>span{font-size:.49rem}
.demo-app-header{padding-inline:17px}
.map-legend{padding-inline:17px;gap:10px;font-size:.49rem}
.table-detail{padding-inline:17px}
}
@media(max-width:760px){
.demo-app{width:100%;max-width:560px;justify-self:center}
.demo-app-header{padding:18px 19px}
.demo-controls{padding:16px 19px;gap:12px}
.demo-controls label{font-size:.58rem}
.demo-controls select{font-size:.8rem;min-height:42px;padding-inline:9px}
.demo-availability{gap:8px}
.demo-availability strong{font-size:1.7rem}
.demo-availability>span{font-size:.5rem}
.floorplan{margin:2px 19px 18px;aspect-ratio:1.3}
.table>span{font-size:.8rem}
.table small{font-size:.53rem}
.map-legend{padding-inline:19px;gap:15px;font-size:.56rem}
.table-detail{padding-inline:19px}
.table-detail strong{font-size:.77rem}
.table-detail p{font-size:.69rem}
.floorplan-title{font-size:.52rem}
.floorplan-bar,.floorplan-entry{font-size:.5rem}
.status-pill{font-size:.57rem}
}
@media(max-width:380px){
.demo-controls{padding-inline:14px;gap:7px}
.demo-controls select{padding-inline:7px;font-size:.75rem}
.demo-availability>span{font-size:.46rem}
.demo-availability strong{font-size:1.5rem}
.floorplan{margin-inline:14px}
.map-legend{padding-inline:14px;gap:9px;font-size:.5rem}
.table small{font-size:.47rem}
.table>span{font-size:.7rem}
.table-detail{padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){
.table:hover{transform:none}
}
/* Demo controls retain usable hit areas at the narrowest layout. */
.table{min-width:44px;min-height:44px}
.floorplan-bar{color:#43553b}
.table[data-status="reserved"]{border-style:dashed}
.table[data-status="occupied"]{border-style:double;border-width:3px}
.legend-free{border-radius:50%}
.legend-reserved{border:1px dashed #795b1b}
.legend-occupied{border:2px double #374e40}
.legend-blocked{background:repeating-linear-gradient(45deg,#b3b7ab,#b3b7ab 2px,#edece6 2px,#edece6 4px)}