/* Galerie und gemeinsame Demo-Hülle. Bilder sind ohne eingebrannte Beschriftung. */
.demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.demo-card { min-width:0; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.demo-image-link { display:block; aspect-ratio:1672/941; overflow:hidden; background:#082456; }
.demo-image-link img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.demo-image-link:hover img { transform:scale(1.035); }
.demo-card-copy { padding:23px; }
.demo-label { text-transform:uppercase; font-size:10px; color:#657693; letter-spacing:.12em; font-weight:700; margin-bottom:12px; }
.demo-card h3 { font-size:23px; line-height:1.2; min-height:2.4em; margin-bottom:13px; }
.demo-card-copy > p:not(.demo-label) { color:var(--muted); font-size:15px; min-height:4.5em; }
.filter-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:27px; }
.filter-chip { border:1px solid #c9d6e8; border-radius:100px; padding:9px 15px; background:#fff; font-size:13px; color:#29446e; }
.filter-chip.is-active { background:#08265c; border-color:#08265c; color:#fff; }
.back-link { margin-bottom:30px; }
.back-arrow { rotate:180deg; }
.demo-page-intro { display:grid; grid-template-columns:1fr .8fr; gap:50px; align-items:center; margin-bottom:34px; }
.demo-page-intro h1 { font-size:clamp(35px,4vw,56px); }
.demo-page-intro figure { margin:0; }
.demo-page-intro img { width:100%; border-radius:16px; }
.demo-page-intro figcaption { color:var(--muted); font-size:11px; margin-top:7px; }
.demo-disclosure { display:flex; align-items:flex-start; gap:11px; background:#fff5e9; border:1px solid #ffdcaf; border-radius:10px; padding:14px 17px; font-size:14px; color:#715125; }
.demo-disclosure .icon { width:20px; height:20px; }
.demo-app { background:#f3f6fb; border:1px solid #cddaea; border-radius:19px; overflow:hidden; margin-top:26px; box-shadow:0 16px 44px #16336a0b; }
.demo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 25px; background:#fff; border-bottom:1px solid var(--line); }
.demo-toolbar strong { font-size:20px; letter-spacing:-.5px; }
.demo-status { margin:0; padding:0 25px 20px; font-size:14px; color:#245f4d; }
.demo-status:empty { display:none; }
.demo-local-note { font-size:12px; margin-top:13px; color:var(--muted); }
.demo-outro { margin-top:46px; display:flex; justify-content:space-between; align-items:center; gap:35px; }
.demo-outro h2 { font-size:30px; }
.demo-outro .button { flex-shrink:0; }
.demo-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; margin-bottom:20px; }
.demo-filters label { display:flex; flex-direction:column; flex:1; min-width:140px; }
.demo-filters input,.demo-filters select { min-height:45px; }
.demo-app h2 { font-size:31px; line-height:1.15; }
.demo-app h3 { font-size:19px; }
.demo-app p { font-size:14px; }
.demo-dialog { position:fixed; width:min(620px,calc(100% - 36px)); max-height:calc(100dvh - 40px); overflow:auto; padding:35px; border:0; border-radius:16px; color:var(--navy); }
.demo-dialog::backdrop { background:#031633b5; backdrop-filter:blur(5px); }
.dialog-close { position:absolute; top:12px; inset-inline-end:12px; display:grid; place-items:center; background:#eef3fa; border:0; border-radius:50%; width:35px; height:35px; }
.demo-dialog h2 { padding-inline-end:30px; font-size:29px; }
.empty-state { padding:24px; background:#fff; border:1px dashed #bbcce3; border-radius:10px; color:var(--muted); }
@media(max-width:1050px) { .demo-grid { grid-template-columns:1fr 1fr; } .demo-page-intro { gap:30px; } }
@media(max-width:700px) { .demo-grid { grid-template-columns:1fr; } .demo-card h3,.demo-card-copy > p:not(.demo-label) { min-height:0; } .demo-page-intro { grid-template-columns:1fr; } .demo-page-intro figure { max-width:560px; } .demo-outro { display:block; } .demo-outro .button { margin-top:15px; } .demo-toolbar { padding:15px; } .demo-toolbar strong { font-size:17px; } .demo-toolbar .small-button { font-size:11px; } }