/* @section: design-system
   Placeholder tokens: replace colors and font stack for the user's project before publishing. */
:root {
  color-scheme: light;
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-muted: #eef2f7;
  --text: #172033;
  --muted: #5d6b82;
  --border: #d9e0ea;
  --primary: #1769e0;
  --primary-strong: #0f4fb2;
  --accent: #13a38b;
  --danger: #c43b4d;
  --shadow: 0 18px 50px rgba(23, 32, 51, 0.12);
  --radius: 8px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: var(--primary);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.section {
  padding: var(--space-7) var(--space-4);
}

.container {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.stack {
  display: grid;
  gap: var(--space-5);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel,
.card,
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.card,
.stat {
  padding: var(--space-5);
}

.hero h1 {
  max-width: 760px;
  margin-bottom: var(--space-3);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0;
}

.lead {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.15rem;
}

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--primary-strong);
}

.button.secondary {
  background: transparent;
  color: var(--primary);
}

/* PergolaLand glass configurator visual system */
:root{--ink:#101318;--muted:#6e737a;--line:#dfe2e5;--surface:#fff;--soft:#f5f3ef;--gold:#c7a56a;--gold-deep:#9b7846;--dark:#15191d;--error:#a84436;--ok:#38705f;--radius:18px;color-scheme:light;font-family:"DM Sans",system-ui,sans-serif}
body{background:#eeece7;color:var(--ink)}button{cursor:pointer}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:74px;padding:0 clamp(20px,4vw,64px);background:var(--dark);color:#fff}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-size:12px;letter-spacing:.08em}.brand-mark{display:block;width:34px;height:34px;border:0;border-radius:50%;object-fit:cover}.brand strong{display:block;font-size:13px;font-weight:600;letter-spacing:.16em}.brand small{display:block;margin-top:2px;color:#9da1a5;font-size:9px;letter-spacing:.34em}.topbar-meta{color:#aeb2b5;font-size:11px;letter-spacing:.06em}.status-dot{display:inline-block;width:7px;height:7px;margin-right:8px;background:#7fb29c;border-radius:50%}.page-shell{width:min(1360px,calc(100% - 40px));margin:0 auto}.hero{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:clamp(48px,8vw,104px) 0 54px}.eyebrow{margin:0 0 13px;color:var(--gold-deep);font-size:10px;font-weight:700;letter-spacing:.2em}.hero h1{max-width:780px;margin:0;font-family:"Playfair Display",Georgia,serif;font-size:clamp(40px,6vw,78px);line-height:1.03;font-weight:500;letter-spacing:-.04em}.hero h1 em{color:var(--gold-deep);font-style:normal}.hero-copy{max-width:560px;margin:24px 0 0;color:var(--muted);font-size:15px;line-height:1.7}.hero-note{display:flex;align-items:center;gap:14px;min-width:220px;color:var(--muted);font-size:11px;line-height:1.5;text-transform:uppercase;letter-spacing:.1em}.note-line{width:38px;height:1px;background:var(--gold)}.config-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,.72fr);gap:24px;align-items:start}.config-card,.summary-card{background:var(--surface);border:1px solid rgba(16,19,24,.08);border-radius:var(--radius);box-shadow:0 18px 45px rgba(21,25,29,.06)}.config-card{padding:clamp(24px,4vw,44px)}.summary-card{position:sticky;top:20px;padding:28px;background:var(--dark);color:#fff}.card-heading,.summary-top{display:flex;align-items:start;justify-content:space-between;gap:20px}.card-heading h2{margin:0;font-size:22px;letter-spacing:-.02em}.card-heading.compact{align-items:center}.step-badge,.material-pill,.live-chip{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:10px;white-space:nowrap}.material-pill{color:var(--gold-deep);border-color:#e5dac6}.live-chip{color:#b5d4c7;border-color:rgba(181,212,199,.25)}.live-chip i{display:inline-block;width:6px;height:6px;margin-right:6px;background:#85c0a9;border-radius:50%}.field-grid{display:grid;gap:18px;margin-top:28px}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.field{display:flex;flex-direction:column;gap:8px}.field>span{display:flex;justify-content:space-between;font-size:12px;font-weight:600}.field b{color:var(--muted);font-size:10px;font-weight:500}.field input,.field select{width:100%;min-height:48px;padding:0 14px;color:var(--ink);background:#fbfbfa;border:1px solid var(--line);border-radius:9px;outline:none}.field input:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(199,165,106,.15)}.field small,.toggle-row small{color:var(--muted);font-size:10px;line-height:1.4}.section-divider{height:1px;margin:34px 0;background:var(--line)}.glass-options{display:grid;gap:10px;margin-top:20px}.glass-option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;width:100%;padding:16px 17px;color:var(--ink);text-align:left;background:#fff;border:1px solid var(--line);border-radius:11px;transition:.2s ease}.glass-option:hover{border-color:#c4ae88;transform:translateY(-1px)}.glass-option.is-selected{border-color:var(--gold);background:#fbf8f2;box-shadow:0 0 0 2px rgba(199,165,106,.14)}.glass-radio{width:16px;height:16px;border:1px solid #b4b9bf;border-radius:50%}.is-selected .glass-radio{border:5px solid var(--gold)}.glass-copy{display:flex;flex-direction:column;gap:3px}.glass-copy strong{font-size:13px}.glass-copy small{color:var(--muted);font-size:11px}.glass-option>b{font-size:12px;white-space:nowrap}.validation{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:12px 14px;border-radius:9px;font-size:11px;line-height:1.45}.validation.is-ok{color:var(--ok);background:#edf5f1}.validation.is-error{color:var(--error);background:#fbefed}.validation span{opacity:.86}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding:16px;background:var(--soft);border-radius:10px}.toggle-row div{display:flex;flex-direction:column;gap:4px}.toggle-row strong{font-size:12px}.switch input{position:absolute;opacity:0}.switch span{display:block;width:42px;height:24px;padding:3px;background:#b9bec2;border-radius:99px;transition:.2s}.switch span:after{display:block;width:18px;height:18px;content:"";background:#fff;border-radius:50%;transition:.2s}.switch input:checked+span{background:var(--gold)}.switch input:checked+span:after{transform:translateX(18px)}.visual-wrap{margin:23px 0 24px;padding:17px;background:#20262b;border:1px solid rgba(255,255,255,.09);border-radius:13px}.visual-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.visual-mode-toggle{padding:7px 10px;color:#d8c092;background:rgba(199,165,106,.08);border:1px solid rgba(199,165,106,.55);border-radius:999px;font-size:10px;letter-spacing:.04em}.visual-mode-toggle:hover,.visual-mode-toggle[aria-pressed="true"]{color:#15191d;background:var(--gold)}.visual-label{color:#8f969a;font-size:9px;letter-spacing:.16em}.visual-label-bottom{display:flex;justify-content:space-between;gap:8px;margin-top:14px;font-size:9px}.visual{display:grid;place-items:center;min-height:230px;padding:28px 13px 16px;overflow:hidden}.visual.is-3d{min-height:255px}.visual-track{position:relative;display:flex;width:min(100%,430px);height:clamp(130px,21vw,205px);border:1px solid rgba(199,165,106,.75);border-top:5px solid #9f9e9a;border-bottom:5px solid #9f9e9a;background:linear-gradient(105deg,rgba(255,255,255,.14),rgba(120,169,185,.04))}.visual.is-3d .visual-track{perspective:900px;transform:rotateX(2deg) rotateY(-4deg);transform-style:preserve-3d;box-shadow:0 16px 25px rgba(0,0,0,.28)}.visual-pane{position:relative;height:100%;border-right:1px solid rgba(255,255,255,.32);background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(160,207,219,.04));transition:transform .65s cubic-bezier(.22,.61,.36,1),box-shadow .65s ease}.visual-pane:first-child{border-left:1px solid rgba(255,255,255,.28)}.visual.is-3d .visual-pane{transform:translateZ(var(--pane-depth)) rotateY(var(--pane-tilt));transform-style:preserve-3d;box-shadow:inset -8px 0 12px rgba(0,0,0,.16),inset 5px 0 10px rgba(255,255,255,.08);animation:glassPaneBreath 4.8s ease-in-out infinite;animation-delay:calc(var(--pane-index) * -0.18s)}.visual.is-3d .visual-pane:nth-child(even){background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(130,190,207,.08))}.pane-line{position:absolute;left:50%;top:8%;bottom:8%;width:1px;background:rgba(255,255,255,.18)}.pane-handle{position:absolute;right:10px;top:50%;width:5px;height:22px;border:1px solid rgba(199,165,106,.8);transform:translateY(-50%)}.fold-pack{position:absolute;top:calc(50% - 15px);display:grid;place-items:center;width:28px;height:28px;color:var(--gold);font-size:20px;background:#1b2024;border:1px solid rgba(199,165,106,.7);border-radius:50%}.fold-pack.left{left:-14px}.fold-pack.right{right:-14px}.summary-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:17px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.summary-specs div{display:flex;flex-direction:column;gap:7px}.summary-specs span,.price-block>span{color:#969da1;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.summary-specs strong{font-size:12px}.price-block{display:flex;flex-direction:column;gap:7px;padding:24px 0 20px}.price-block strong{color:#e3c18a;font-size:36px;letter-spacing:-.04em}.price-block small{color:#969da1;font-size:10px;line-height:1.4}.primary-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 17px;color:var(--dark);background:var(--gold);border:0;border-radius:8px;font-weight:700}.primary-button:hover{background:#d8b978}.primary-button:disabled{color:#899095;background:#3b4145;cursor:not-allowed}.primary-button span{font-size:18px}.reset-button{width:100%;margin-top:12px;padding:9px;color:#adb3b6;background:transparent;border:0;font-size:11px}.reset-button:hover{color:#fff}.disclaimer{margin:18px 0 0;color:#7c858a;font-size:10px;line-height:1.55}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:24px 0 70px;padding:25px 0;border-top:1px solid rgba(16,19,24,.12);border-bottom:1px solid rgba(16,19,24,.12)}.trust-strip>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px}.trust-icon{grid-row:span 2;color:var(--gold-deep);font-size:21px}.trust-strip strong{font-size:12px}.trust-strip small{color:var(--muted);font-size:10px}.footer{display:flex;justify-content:space-between;gap:20px;padding:24px clamp(20px,4vw,64px);color:#8c9297;background:var(--dark);font-size:10px}.footer a{color:#d9ba83;text-decoration:none}@media(max-width:900px){.config-layout{grid-template-columns:1fr}.summary-card{position:static}.hero{align-items:start;flex-direction:column}.hero-note{margin-top:4px}.trust-strip{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.page-shell{width:min(100% - 26px,1360px)}.topbar{min-height:64px;padding:0 16px}.topbar-meta{display:none}.hero{padding:45px 0 36px}.hero h1{font-size:42px}.config-card,.summary-card{padding:20px;border-radius:14px}.two-col{grid-template-columns:1fr}.glass-option{grid-template-columns:auto 1fr}.glass-option>b{grid-column:2;margin-top:-7px}.summary-specs{gap:6px}.price-block strong{font-size:31px}.trust-strip{gap:18px 12px;margin-bottom:45px}.footer{flex-direction:column;gap:8px}.visual-mode-toggle{font-size:9px;padding:6px 8px}}
@keyframes glassPaneBreath{0%,100%{transform:translateZ(var(--pane-depth)) rotateY(var(--pane-tilt))}50%{transform:translateZ(calc(var(--pane-depth) + 5px)) rotateY(var(--pane-tilt-alt))}}
.topbar-link{margin-right:16px;color:#d7b475;text-decoration:none}.topbar-link:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.visual.is-3d .visual-pane{animation:none;transition:none}}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.input,
input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 0.9rem;
}

.muted {
  color: var(--muted);
}

@media (max-width: 720px) {
  .section {
    padding: var(--space-5) var(--space-3);
  }

  .grid.two {
    grid-template-columns: 1fr;
  }

  .panel,
  .card,
  .stat {
    box-shadow: none;
  }
}
/* Flügelbreite summary layout */
.summary-specs{grid-template-columns:repeat(4,1fr)}
@media(max-width:560px){.summary-specs{grid-template-columns:repeat(2,1fr);gap:10px}}

/* Runde silberne Drehgriffe: nur die erste Scheibe erhält dieses Element. */
.pane-handle{
  width:14px;
  height:14px;
  right:9px;
  border:1px solid #8f969b;
  border-radius:50%;
  background:linear-gradient(145deg,#f7f8f8 0%,#c8cdd0 48%,#8e969b 100%);
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.8),0 1px 3px rgba(0,0,0,.38);
}
.pane-handle.edge-left{
  left:2px;
  right:auto;
  z-index:3;
}
.pane-handle.edge-right{
  right:2px;
  left:auto;
  z-index:3;
}

.contact-block{
  margin:0 0 16px;
  padding:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}

.contact-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.contact-heading>span{
  color:#f2f3f3;
  font-size:12px;
  font-weight:700;
}

.contact-heading small{
  color:#969da1;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-fields{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.contact-fields label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contact-fields label>span{
  color:#b7bdc0;
  font-size:10px;
}

.contact-fields input{
  width:100%;
  min-height:42px;
  padding:0 12px;
  color:#f4f5f5;
  background:#22282d;
  border:1px solid rgba(255,255,255,.16);
  border-radius:7px;
  outline:none;
}

.contact-fields input::placeholder{
  color:#777f84;
}

.contact-fields input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(199,165,106,.13);
}

.contact-validation{
  margin:9px 0 0;
  color:#d9a99f;
  font-size:9px;
  line-height:1.4;
}

.contact-validation.is-complete{
  color:#9bc6b4;
}

.field-note{
  margin:12px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}

.rail-note{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  color:#aeb5b8;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:10px;
  letter-spacing:.04em;
}

.rail-note strong{
  color:#e3c18a;
}

.rail-profile-value{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.rail-choice{
  display:flex;
  align-items:center;
  gap:7px;
  color:#aeb5b8;
  font-size:10px;
}

.rail-choice span{
  white-space:nowrap;
}

.rail-choice select{
  min-height:30px;
  padding:0 8px;
  color:#f4f5f5;
  background:#2a3136;
  border:1px solid rgba(199,165,106,.45);
  border-radius:6px;
  font:inherit;
}

@media(max-width:560px){
  .rail-note{
    align-items:flex-start;
    flex-direction:column;
  }
}