.cfg__card{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
    border-radius:var(--r); box-shadow:0 40px 90px -46px rgba(14,18,32,.5); }
  .cfg__tag{ position:absolute; top:-13px; right:20px; z-index:3; background:var(--ac); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.36rem .8rem; border-radius:999px; box-shadow:0 10px 22px -12px rgba(43,75,238,.9); }
  .cfg__panel{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .6rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); border-radius:var(--r) var(--r) 0 0; }
  .cfg__panel .btn{ margin-left:auto; }
  .inp--name{ flex:1 1 9rem; } .inp--ort{ width:6rem; } .inp--jahr{ width:4.6rem; }
  .chips{ display:flex; flex-wrap:wrap; gap:.3rem; }
  .chip{ font:inherit; font-size:.76rem; font-weight:600; padding:.36rem .66rem; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
  .chip:hover{ border-color:var(--ink); }
  .chip[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .swatches{ display:flex; gap:.5rem; align-items:center; }
  .swatch{ width:26px; height:26px; border-radius:50%; border:0; cursor:pointer; padding:0; transition:transform .15s, box-shadow .15s; }
  .swatch:hover{ transform:scale(1.12); }
  .swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
  .inp{ font:inherit; font-size:.9rem; padding:.52rem .68rem; border:1px solid var(--line-2); border-radius:11px; background:var(--bg); color:var(--ink); min-width:0; }
  .inp::placeholder{ color:#9AA0B4; }
  .inp:focus{ outline:none; border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-soft); }
  .cfg__browser{ display:flex; flex-direction:column; background:#EDF0F8; min-width:0; border-radius:0 0 var(--r) var(--r); overflow:hidden; }
  .cfg__chrome{ height:38px; flex-shrink:0; display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid var(--line); }
  .cfg__chrome i{ width:10px; height:10px; border-radius:50%; background:#D5DAE8; }
  .cfg__url{ margin-left:10px; flex:1; max-width:360px; background:#fff; border-radius:8px; font-size:.78rem; color:var(--mute); padding:.3rem .7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cfg__stage{ position:relative; height:clamp(300px,42vh,420px); container-type:size; overflow:hidden; }

  .lz{ position:absolute; inset:0; background:#fff; color:#101418; font-family:var(--body); overflow:hidden; display:flex; flex-direction:column; }
  .lz__bar{ display:flex; align-items:center; justify-content:space-between; gap:2cqw; padding:2.8cqh 3.4cqw; border-bottom:1px solid rgba(16,20,24,.08); }
  .lz__brand{ display:flex; align-items:center; gap:1.1cqw; min-width:0; }
  .lz__bars{ display:flex; gap:.4cqw; align-items:flex-end; height:4cqh; flex-shrink:0; }
  .lz__bars i{ width:.55cqw; background:var(--lzac); border-radius:1px; }
  .lz__bars i:nth-child(1){ height:40%; } .lz__bars i:nth-child(2){ height:60%; } .lz__bars i:nth-child(3){ height:80%; } .lz__bars i:nth-child(4){ height:100%; }
  .lz__name{ font-family:var(--disp); font-weight:800; font-size:3.2cqh; letter-spacing:-.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:32cqw; }
  .lz__nav{ display:flex; gap:2.3cqw; }
  .lz__nav span{ font-size:2.2cqh; color:#5b6068; }
  .lz__actions{ display:flex; gap:1.1cqw; align-items:center; flex-shrink:0; }
  .lz__ghost{ font-size:2.2cqh; font-weight:600; border:1px solid rgba(16,20,24,.16); border-radius:1.3cqh; padding:1.5cqh 1.9cqw; white-space:nowrap; }
  .lz__tel{ background:var(--lzac); color:#fff; font-size:2.2cqh; font-weight:700; border-radius:1.3cqh; padding:1.5cqh 1.9cqw; white-space:nowrap; }
  .lz__body{ flex:1; display:flex; min-height:0; }
  .lz__copy{ flex:1.05; display:flex; flex-direction:column; justify-content:center; padding:0 3.4cqw; min-width:0; }
  .lz__eb{ display:flex; align-items:center; gap:1.2cqw; font-size:1.6cqh; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--lzac); }
  .lz__eb i{ width:2.4cqw; height:.5cqh; background:var(--lzac); border-radius:2px; flex-shrink:0; }
  .lz__h{ font-family:var(--disp); font-weight:800; font-size:7.6cqh; line-height:1; letter-spacing:-.045em; margin-top:2.4cqh; }
  .lz__h em{ font-style:normal; color:var(--lzac); display:block; }
  .lz__p{ font-size:2.4cqh; line-height:1.5; color:#565b63; margin-top:2.4cqh; max-width:44ch; }
  .lz__btns{ display:flex; gap:1.5cqw; margin-top:3.2cqh; flex-wrap:wrap; }
  .lz__b1{ background:var(--lzac); color:#fff; font-size:2.3cqh; font-weight:700; padding:2cqh 2.5cqw; border-radius:1.3cqh; white-space:nowrap; }
  .lz__b2{ font-size:2.3cqh; font-weight:600; border:1px solid rgba(16,20,24,.16); padding:2cqh 2.5cqw; border-radius:1.3cqh; white-space:nowrap; }
  .lz__visual{ flex:.85; position:relative; margin:3cqh 3cqw 3.4cqh 1cqw; }
  .lz__img{ position:absolute; inset:0; border-radius:2.2cqh;
    background:
      linear-gradient(color-mix(in srgb, var(--lzac) 9%, transparent), color-mix(in srgb, var(--lzac) 3%, transparent)),
      repeating-linear-gradient(0deg, #e5e3df 0 .5cqh, transparent .5cqh 10cqh),
      repeating-linear-gradient(90deg, #e5e3df 0 .3cqw, transparent .3cqw 11cqw),
      linear-gradient(#f3f1ee, #e9e7e3); }
  .lz__badge{ position:absolute; left:-2.6cqw; bottom:2.4cqh; background:#10181d; color:#fff; border-radius:1.8cqh; padding:2.2cqh 2.2cqw; box-shadow:0 1.8cqh 4cqh rgba(10,15,20,.32); min-width:10cqw; }
  .lz__badge b{ display:block; font-family:var(--disp); font-weight:800; font-size:5.2cqh; line-height:1; letter-spacing:-.03em; }
  .lz__badge span{ display:block; margin-top:.7cqh; font-size:1.6cqh; color:#9aa4ac; }
  @container (max-width:700px){ .lz__nav{ display:none; } }
  @container (max-width:560px){ .lz__ghost{ display:none; } }
  @container (max-width:520px){
    .lz__visual{ display:none; }
    .lz__name{ max-width:60cqw; font-size:3.8cqh; }
    .lz__tel{ font-size:2.6cqh; } .lz__eb{ font-size:1.9cqh; }
    .lz__h{ font-size:8.8cqh; } .lz__p{ font-size:2.9cqh; } .lz__b1, .lz__b2{ font-size:2.7cqh; }
  }


.cfg__card{box-shadow:none;border-radius:4px}.cfg__tag{border-radius:2px;font-size:9px}.cfg__panel{padding:18px;gap:12px}.cfg__panel .button{padding:10px 14px;font-size:12px}.inp{border-radius:3px;min-height:42px}.chip{border-radius:3px;padding:9px 11px;font-size:12px}.swatch{width:32px;height:32px}.cfg__stage{height:390px}.cfg__browser{border-radius:0 0 4px 4px}.cfg__panel .chips{width:100%}.swatches{margin-right:12px}.cfg__url{max-width:70%;}.inp--ort{width:110px}.inp--jahr{width:80px}.inp--name{min-width:150px}.cfg__tag{top:-11px}.lz{line-height:1.4}@media(max-width:480px){.cfg__panel{padding:15px 12px;gap:10px}.cfg__panel .chips{gap:6px}.chip{font-size:11px;padding:9px 8px}.inp--name{flex-basis:100%}.inp--ort{flex:1}.cfg__panel .button{margin:0;flex-basis:100%;justify-content:center}.cfg__stage{height:320px}.lz__copy{padding-inline:5cqw}.lz__h{font-size:8cqh}.lz__p{font-size:3cqh}}

.cfg__card{border-radius:10px;overflow:hidden;box-shadow:none}.cfg__tag{position:static;align-self:flex-start;background:#edf1f7;color:#33486a;margin:20px 20px 0;box-shadow:none;border-radius:4px;font-size:10px}.cfg__panel{padding:22px;gap:12px;background:#fff}.chip{border-radius:5px}.cfg__browser{border-radius:0;background:#f0f2f5}.inp{border-radius:5px;background:#fafbfc}.cfg__stage{height:410px}.lz__badge{box-shadow:none}.cfg__panel .button{border-radius:5px}.cfg__chrome{background:#f7f8fa}.demo-content{padding-top:10px}@media(max-width:480px){.cfg__tag{margin:15px 15px 0}.cfg__panel{padding:15px}.cfg__stage{height:330px}}