/* 06 — Demos: Vorschau-Fenster und Kunden-Abfrage */
.demo{border-top:1px solid var(--line);padding:125px 0 150px;display:grid;grid-template-columns:.86fr 1.14fr;gap:80px;align-items:center}
.demo h2{margin:35px 0 25px;font-size:clamp(39px,5vw,70px);letter-spacing:-.075em;line-height:.97}
.demo h2 em{font-style:normal;color:#aab0af}
.demo-lead{max-width:310px;margin:0 0 34px;color:#abb1b0;font-size:14px;line-height:1.65}
.demo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ghost{display:inline-flex;align-items:center;gap:10px;appearance:none;background:transparent;border:1px solid #464b4b;border-radius:30px;padding:11px 17px;color:#fff;font:600 12px Manrope,Arial,sans-serif;cursor:pointer;transition:border-color .3s var(--ease,cubic-bezier(.16,1,.3,1)),transform .3s var(--ease,cubic-bezier(.16,1,.3,1))}
.ghost:hover,.ghost:focus-visible{border-color:var(--mint);transform:translateY(-2px);outline:0}
.ghost svg{color:var(--mint);flex:none}

/* Browser-Fenster */
.demo .window-wrap{position:relative;isolation:isolate;min-width:0}
.demo .window-wrap::before{content:"";position:absolute;inset:-14% 0 -18%;z-index:-1;background:radial-gradient(60% 55% at 62% 48%,#36e2a426,transparent 72%);filter:blur(24px);pointer-events:none}
.demo .window{position:relative;border:1px solid #2b3232;border-radius:12px;background:#0d1111;box-shadow:0 70px 110px -55px #000,0 20px 40px -24px #000;overflow:hidden}
.demo .window-bar{display:flex;align-items:flex-end;gap:14px;padding:11px 14px 0;background:#131919;border-bottom:1px solid #232a2a}
.demo .dots{display:flex;gap:7px;padding-bottom:13px;flex:none}
.demo .dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57;opacity:.6}
.demo .dots i:nth-child(2){background:#febc2e}
.demo .dots i:nth-child(3){background:#28c840}
.demo .tabs{display:flex;gap:3px;flex:1;min-width:0;overflow:hidden}
.demo .tab{appearance:none;border:0;background:transparent;color:#7f8888;font:600 11px Manrope,Arial,sans-serif;padding:9px 16px 10px;margin-bottom:-1px;border-radius:9px 9px 0 0;cursor:default;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;transition:color .2s,background-color .3s}
.demo .window.is-demo .tab{cursor:pointer}
.demo .tab:hover{color:#d3d8d7}
.demo .tab[aria-selected="true"]{background:var(--tab-bg,#f4f5f4);color:var(--tab-ink,#101313);padding-bottom:11px}
.demo .tab:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.demo .protect{display:none;align-items:center;gap:7px;margin-left:auto;padding:0 0 12px;font:10px 'DM Mono',monospace;letter-spacing:.8px;text-transform:uppercase;color:var(--mint);white-space:nowrap}
.demo .win-close{display:none;appearance:none;border:0;background:transparent;color:#8d9594;font-size:19px;line-height:1;padding:0 2px 11px 4px;cursor:pointer}
.demo .win-close:hover,.demo .win-close:focus-visible{color:#fff;outline:0}
.demo .window.is-customer .protect,.demo .window.is-customer .win-close{display:flex}
.demo .stage{position:relative;aspect-ratio:16/10;container-type:inline-size;overflow:hidden;background:#f4f5f4;-webkit-user-select:none;user-select:none}
.demo .window.has-site.is-narrow .stage{aspect-ratio:3/4}
.demo .stage-frame{position:absolute;left:0;top:0;display:block;border:0;background:#fff;transform-origin:0 0}
.demo .stage-frame[hidden]{display:none}
.demo .stage.is-loading::after{content:"Wird geladen …";position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#f4f5f4;color:#7b8483;font:11px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase}
.demo .wm{position:absolute;inset:0;z-index:3;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='190'%3E%3Ctext x='150' y='100' text-anchor='middle' transform='rotate(-24 150 95)' font-family='monospace' font-size='12' letter-spacing='3' fill='%23606a69' fill-opacity='.17'%3EVORSCHAU %C2%B7 NUR ANSICHT%3C/text%3E%3C/svg%3E")}
.demo .wm[hidden]{display:none}
.demo .caption{margin:16px 2px 0;min-height:15px;font:10px 'DM Mono',monospace;letter-spacing:.8px;text-transform:uppercase;color:#7b8483}

/* Die Platzhalter-Website im Fenster (skaliert mit der Fensterbreite) */
.demo .site{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--s-bg);color:var(--s-ink);overflow:hidden}
.demo .site[hidden]{display:none}
.demo .site-nav{display:flex;align-items:center;gap:3cqw;padding:2cqw 4cqw;border-bottom:1px solid var(--s-line)}
.demo .site-logo{display:flex;align-items:center;gap:1cqw;font-weight:800;font-size:1.8cqw;letter-spacing:-.04em;white-space:nowrap}
.demo .site-logo i{display:block;width:2.4cqw;height:2.4cqw;border-radius:.7cqw;background:var(--s-accent)}
.demo .site-links{display:flex;gap:2.4cqw;margin-left:auto;font-size:1.25cqw;font-weight:600;opacity:.55}
.demo .pill{display:inline-block;padding:1cqw 1.9cqw;border-radius:5cqw;background:var(--s-ink);color:var(--s-bg);font-weight:700;font-size:1.25cqw;white-space:nowrap}
.demo .pill.o{background:transparent;color:var(--s-ink);border:1px solid var(--s-line)}
.demo .pill.sm{padding:.8cqw 1.5cqw}
.demo .site-hero{flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:3cqw;padding:3cqw 4cqw 2cqw;align-items:center;min-height:0}
.demo .site-tag{margin-bottom:1.4cqw;font:500 1.05cqw 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.demo .site-hero h3{margin:0 0 1.5cqw;font-size:5.2cqw;line-height:.96;letter-spacing:-.06em;font-weight:800}
.demo .site-hero p{margin:0 0 2.2cqw;max-width:34cqw;font-size:1.4cqw;line-height:1.6;opacity:.62}
.demo .site-actions{display:flex;gap:1cqw}
.demo .site-art{position:relative;align-self:stretch;max-height:25cqw;border-radius:2cqw;overflow:hidden;background:radial-gradient(circle at 70% 25%,var(--s-accent) 0,transparent 46%),linear-gradient(145deg,var(--s-accent2),var(--s-ink))}
.demo .site-art::after{content:"";position:absolute;left:12%;right:12%;bottom:14%;height:34%;border-radius:1.2cqw;background:#ffffff1c;box-shadow:inset 0 0 0 1px #ffffff26}
.demo .site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:0 4cqw 3cqw}
.demo .site-card{border:1px solid var(--s-line);border-radius:1.4cqw;padding:1.5cqw}
.demo .site-card b{display:block;margin-bottom:1cqw;font-size:1.3cqw;letter-spacing:-.02em}
.demo .site-card i{display:block;height:.55cqw;margin-top:.7cqw;border-radius:1cqw;background:var(--s-ink);opacity:.12}
.demo .site-card i:last-child{width:62%}

/* Kunden-Abfrage */
.demo-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:#070909b8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow-y:auto}
.demo-modal[hidden]{display:none}
.demo-dialog{position:relative;width:min(440px,100%);padding:34px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(145deg,#111616,#090b0b);box-shadow:0 50px 100px -40px #000}
.demo-dialog .tag{font:11px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--mint)}
.demo-dialog h3{margin:16px 0 10px;font-size:30px;letter-spacing:-.06em;line-height:1}
.demo-dialog p{margin:0;color:#aab0af;font-size:13px;line-height:1.6}
.demo-field{display:flex;flex-direction:column;gap:8px;margin-top:22px;font-size:12px;font-weight:700;color:#e6e8e8}
.demo-field small{font-size:11px;font-weight:500;color:#8f9695}
.demo-field input{appearance:none;width:100%;border:1px solid #424a49;border-radius:3px;background:#0b0e0e;color:#fff;padding:12px;font:13px Manrope,Arial,sans-serif;transition:border-color .2s,box-shadow .2s}
.demo-field input:focus{outline:0;border-color:var(--mint);box-shadow:0 0 0 3px #36e2a422}
.demo-error{margin-top:18px;border-left:2px solid var(--danger);padding:10px 12px;background:#ff858511;color:#ffd1d1;font-size:12px;line-height:1.45}
.demo-error[hidden]{display:none}
.demo-dialog-actions{display:flex;align-items:center;justify-content:space-between;margin-top:26px}
.demo-dialog .button[disabled]{opacity:.6;cursor:progress}
.demo-x{position:absolute;top:12px;right:14px;appearance:none;border:0;background:transparent;color:#8d9594;font-size:22px;line-height:1;cursor:pointer}
.demo-x:hover,.demo-x:focus-visible{color:#fff;outline:0}
html.modal-open,html.modal-open body{overflow:hidden}

@media (prefers-reduced-motion:no-preference){
  .demo-modal:not([hidden]){animation:demoFade .3s var(--ease,cubic-bezier(.16,1,.3,1))}
  .demo-modal:not([hidden]) .demo-dialog{animation:demoRise .45s var(--ease,cubic-bezier(.16,1,.3,1))}
  @keyframes demoFade{from{opacity:0}}
  @keyframes demoRise{from{opacity:0;transform:translateY(14px)}}
}

@media (max-width:820px){
  .demo{grid-template-columns:1fr;gap:48px;padding:85px 0 90px}
  .demo-lead{max-width:none}
  .demo .tab{padding:9px 11px 10px;font-size:10.5px}
  .demo .dots{display:none}
}

@media print{
  .demo-modal,.demo .window.is-customer{display:none!important}
}

/* Großes Fenster: Demo oder Kundenvorschau öffnet sich fast bildschirmfüllend, die Seite bleibt dahinter. */
.demo .window-wrap.has-expanded{isolation:auto}
.demo .window.is-expanded{position:fixed;z-index:70;display:flex;flex-direction:column;margin:0;border-radius:14px;box-shadow:0 60px 140px -30px #000,0 0 0 1px #2b3232}
.demo .window.is-expanded .window-bar{flex:none}
.demo .window.is-expanded .stage{flex:1 1 auto;aspect-ratio:auto;min-height:0}
.demo .window.is-expanded .win-close{display:flex}
.demo .window.is-animating{transition:left .65s var(--ease,cubic-bezier(.16,1,.3,1)),top .65s var(--ease,cubic-bezier(.16,1,.3,1)),width .65s var(--ease,cubic-bezier(.16,1,.3,1)),height .65s var(--ease,cubic-bezier(.16,1,.3,1))}
.demo-backdrop{position:fixed;inset:0;z-index:69;background:#070909c2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.demo-backdrop[hidden]{display:none}
.demo .demo-pill{position:absolute;right:18px;bottom:18px;z-index:5;display:flex;align-items:center;gap:16px;max-width:calc(100% - 36px);padding:9px 9px 9px 18px;border:1px solid #2b3232;border-radius:30px;background:#0d1111ee;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#d5dcdb;font:600 12px/1.4 Manrope,Arial,sans-serif;box-shadow:0 18px 40px -18px #000}
.demo .demo-pill[hidden]{display:none}
.demo .demo-pill button{appearance:none;flex:none;border:0;border-radius:30px;background:var(--paper);color:#101313;padding:9px 15px;font:700 12px Manrope,Arial,sans-serif;white-space:nowrap;cursor:pointer;transition:background .2s,transform .2s}
.demo .demo-pill button:hover,.demo .demo-pill button:focus-visible{background:#fff;transform:translateY(-1px);outline:0}
@media (prefers-reduced-motion:no-preference){
  .demo-backdrop:not([hidden]){animation:demoFade .4s var(--ease,cubic-bezier(.16,1,.3,1))}
}
@media (max-width:700px){
  .demo .demo-pill{left:10px;right:10px;bottom:10px;max-width:none;flex-direction:column;align-items:stretch;gap:10px;padding:12px;border-radius:14px;text-align:center}
}