/* LTW Verbau-Konfigurator */
.ltwk {
  --ltwk-accent: #e8650a;
  --ltwk-blue: #1c3f94;
  --ltwk-ink: #1d2327;
  --ltwk-muted: #5f6b73;
  --ltwk-line: #d9dee2;
  --ltwk-bg: #f4f6f7;
  max-width: 1140px;
  margin: calc(2 * 16px) auto;
  padding: clamp(calc(1 * 16px), 3vw, calc(2 * 16px));
  background: #fff;
  border: 1px solid var(--ltwk-line);
  border-radius: 10px;
  color: var(--ltwk-ink);
  font-family: inherit; font-size: 16px; line-height: 1.5;
  box-sizing: border-box;
}
.ltwk *, .ltwk *::before, .ltwk *::after { box-sizing: border-box; }
.ltwk h3 { margin: calc(1.5 * 16px) 0 calc(1 * 16px); font-size: calc(1.5 * 16px); line-height: 1.3; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; color: var(--ltwk-accent); }
.ltwk h4.ltwk-sub { margin: calc(1.25 * 16px) 0 calc(.6 * 16px); padding-bottom: calc(.3 * 16px); border-bottom: 2px solid var(--ltwk-blue); color: var(--ltwk-blue); font-size: calc(.85 * 16px); text-transform: uppercase; letter-spacing: .06em; }
.ltwk h4.ltwk-sub:first-child { margin-top: 0; }
.ltwk h4 { margin: calc(1.75 * 16px) 0 calc(.5 * 16px); font-size: calc(1.05 * 16px); }
.ltwk p { margin: 0 0 calc(.75 * 16px); }
.ltwk a { color: var(--ltwk-accent); }

/* Schritte */
.ltwk-steps { display: flex; gap: calc(.5 * 16px); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.ltwk-steps li { flex: 1; display: flex; align-items: center; gap: calc(.5 * 16px); padding-bottom: calc(.6 * 16px); border-bottom: 3px solid var(--ltwk-line); color: var(--ltwk-muted); font-size: calc(.9 * 16px); margin: 0; }
.ltwk-steps b { display: grid; place-items: center; width: calc(1.7 * 16px); height: calc(1.7 * 16px); border-radius: 50%; background: var(--ltwk-bg); font-size: calc(.85 * 16px); flex: none; }
.ltwk-steps li.on { border-color: var(--ltwk-accent); color: var(--ltwk-ink); font-weight: 600; }
.ltwk-steps li.on b, .ltwk-steps li.done b { background: var(--ltwk-accent); color: #fff; }
.ltwk-steps li.done { border-color: var(--ltwk-blue); }
.ltwk-steps li.done b { background: var(--ltwk-blue); }
@media (max-width: 560px) { .ltwk-steps li span { display: none; } .ltwk-steps li { justify-content: center; } }

/* Kacheln */
.ltwk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: calc(1 * 16px); }
.ltwk-tile { display: flex; flex-direction: column; align-items: flex-start; gap: calc(.35 * 16px); padding: calc(1.25 * 16px); text-align: left; background: #fff; border: 2px solid var(--ltwk-line); border-radius: 8px; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.ltwk-tile:hover, .ltwk-tile.sel { border-color: var(--ltwk-accent); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.ltwk-tile-img { display: block; width: 100%; height: 150px; margin-bottom: calc(.5 * 16px); background: linear-gradient(#eaf1f8, #f7f9fb); border-radius: 6px; padding: 6px; box-sizing: border-box; }
.ltwk-tile-img svg { width: 100%; height: 100%; }
.ltwk-tile strong { font-size: calc(1.1 * 16px); }
.ltwk-tile span { color: var(--ltwk-muted); font-size: calc(.92 * 16px); }

/* Formular */
.ltwk-two { display: grid; grid-template-columns: 1fr 360px; gap: calc(1.5 * 16px); align-items: start; }
@media (max-width: 760px) { .ltwk-two { grid-template-columns: 1fr; } .ltwk-fig { position: static; } }
.ltwk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: calc(1 * 16px) calc(1.25 * 16px); }
.ltwk-field { display: flex; flex-direction: column; gap: calc(.3 * 16px); font-size: calc(.92 * 16px); margin: 0; }
.ltwk-field > span:first-child { font-weight: 600; }
.ltwk-wide { grid-column: 1 / -1; }
.ltwk-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: calc(.6 * 16px); margin: calc(.2 * 16px) 0 calc(1 * 16px); }
.ltwk-opt { display: flex; flex-direction: column; gap: calc(.2 * 16px); text-align: left; padding: calc(.7 * 16px) calc(.9 * 16px); border: 2px solid var(--ltwk-line); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.ltwk-opt:hover, .ltwk-opt.sel { border-color: var(--ltwk-accent); }
.ltwk-opt.sel { box-shadow: 0 3px 10px rgba(0,0,0,.07); }
.ltwk-opt span { font-size: calc(.85 * 16px); color: var(--ltwk-muted); }
.ltwk-inp { position: relative; display: block; }
.ltwk input[type=text], .ltwk input[type=email], .ltwk input[type=tel], .ltwk select, .ltwk textarea {
  width: 100%; padding: calc(.65 * 16px) calc(.75 * 16px); border: 1px solid #b9c1c7; border-radius: 6px; background: #fff; font: inherit; color: inherit; margin: 0;
}
.ltwk-inp em { position: absolute; right: calc(.75 * 16px); top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ltwk-muted); pointer-events: none; }
.ltwk-inp input { padding-right: calc(3 * 16px) !important; }
.ltwk input:focus, .ltwk select:focus, .ltwk textarea:focus { outline: 2px solid var(--ltwk-accent); outline-offset: 1px; border-color: transparent; }
.ltwk-field small { color: var(--ltwk-muted); font-size: calc(.8 * 16px); }
.ltwk-check { display: flex; gap: calc(.55 * 16px); align-items: flex-start; font-size: calc(.95 * 16px); cursor: pointer; margin: 0; }
.ltwk-check input { margin-top: calc(.25 * 16px); accent-color: var(--ltwk-accent); width: calc(1.05 * 16px); height: calc(1.05 * 16px); flex: none; }
.ltwk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Skizze */
.ltwk-fig { margin: 0; padding: calc(.75 * 16px); background: linear-gradient(#eaf1f8, #f7f9fb); border-radius: 8px; position: sticky; top: calc(1 * 16px); }
.ltwk-fig figcaption { text-align: center; color: var(--ltwk-muted); font-size: calc(.8 * 16px); margin-top: calc(.25 * 16px); }
.ltwk-fig figcaption strong { color: var(--ltwk-blue); font-size: calc(.9 * 16px); }
.ltwk-fig3 { position: static; max-width: 420px; margin: 0 auto calc(1.25 * 16px); }
.ltwk-sketch { width: 100%; height: auto; display: block; }
.ltwk-sketch polygon, .ltwk-sketch circle { stroke-linejoin: round; }
.ltwk-sketch .sk-top { fill: #8fae5c; stroke: #6f8d45; stroke-width: 1; }
.ltwk-sketch .sk-cut { fill: #c2a57b; stroke: #8f7350; stroke-width: 1; }
.ltwk-sketch .sk-end { fill: #8d7350; }
.ltwk-sketch .sk-floor { fill: #a48a63; }
.ltwk-sketch .sk-glass { opacity: .2; }
.ltwk-sketch .sk-plate { fill: var(--ltwk-accent); stroke: #b44e08; stroke-width: 1; }
.ltwk-sketch .sk-plate-back { fill: #d4590a; stroke: #b44e08; stroke-width: 1; }
.ltwk-sketch .sk-plate-leg { fill: #ef7a2a; stroke: #b44e08; stroke-width: 1; }
.ltwk-sketch .sk-plate-top { fill: #f39a52; stroke: #b44e08; stroke-width: 1; }
.ltwk-sketch .sk-plate-front { fill: #c4540a; }
.ltwk-sketch .sk-rib { stroke: rgba(120, 50, 0, .25); stroke-width: .8; }
.ltwk-sketch .sk-seam { stroke: #9c4407; stroke-width: 2; }
.ltwk-sketch .sk-post { fill: #f07b22; stroke: #9c4407; stroke-width: 1; }
.ltwk-sketch .sk-post-side { fill: #c4540a; stroke: #9c4407; stroke-width: .8; }
.ltwk-sketch .sk-st-tube { stroke: #8d969c; stroke-width: 5; stroke-linecap: butt; }
.ltwk-sketch .sk-st-spindle { stroke: var(--ltwk-blue); stroke-width: 8; stroke-linecap: butt; }
.ltwk-sketch .sk-st-mini { stroke: var(--ltwk-blue); stroke-width: 6; stroke-linecap: butt; }
.ltwk-sketch .sk-st-end { stroke: var(--ltwk-blue); stroke-width: 4; }
.ltwk-sketch .sk-st-plate { fill: var(--ltwk-blue); }
.ltwk-sketch .sk-fp { fill: var(--ltwk-blue); stroke: #12295f; stroke-width: .8; }
.ltwk-sketch .sk-strut-hi { stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.ltwk-sketch .sk-rail { fill: var(--ltwk-blue); stroke: #12295f; stroke-width: 1; }
.ltwk-sketch .sk-rail-side { fill: #142f70; }
.ltwk-sketch .sk-rail-web { stroke: #12295f; stroke-width: 1.5; }
.ltwk-sketch .sk-carriage { fill: #2c56b8; stroke: #12295f; stroke-width: 1; }
.ltwk-sketch .sk-beam { stroke: var(--ltwk-blue); stroke-width: 10; stroke-linecap: butt; }
.ltwk-sketch .sk-sheet { fill: #9aa3a8; stroke: #5f686d; stroke-width: 1; }
.ltwk-sketch .sk-sheet-line { stroke: #6b747a; stroke-width: 1.2; }
.ltwk-sketch .sk-timber { fill: #b98a52; stroke: #7a5630; stroke-width: 1; }
.ltwk-sketch .sk-timber-line { stroke: #7a5630; stroke-width: 1; }
.ltwk-sketch .sk-ghost { fill: #b8bec2; stroke: #858d92; stroke-width: 1; }
.ltwk-sketch .sk-ghost-top { fill: #a1a8ad; stroke: #858d92; stroke-width: 1; }
.ltwk-sketch .sk-ghost-strut { stroke: #7d868b; stroke-width: 4; }
.ltwk-sketch .sk-cross { stroke: #e0b400; stroke-width: 9; stroke-linecap: round; }
.ltwk-sketch .sk-pipe { fill: #b9bfc3; stroke: #6b747a; stroke-width: 1; }
.ltwk-sketch .sk-pipe-end { fill: #d3d8db; stroke: #6b747a; stroke-width: 1; }
.ltwk-sketch .sk-pipe-hole { fill: #4a5257; }
.ltwk-sketch .sk-dim { stroke: #1d2327; stroke-width: 1.2; stroke-dasharray: 4 3; }
.ltwk-sketch .sk-aux { stroke: #1d2327; stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.ltwk-sketch text { font: 700 13px sans-serif; fill: var(--ltwk-blue); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* Ergebnis-Karten */
.ltwk-lead { color: var(--ltwk-muted); }
.ltwk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(1 * 16px); }
.ltwk-card { position: relative; display: flex; align-items: flex-start; gap: calc(.7 * 16px); padding: calc(1 * 16px) calc(1.1 * 16px); border: 2px solid var(--ltwk-line); border-radius: 8px; cursor: pointer; background: #fff; margin: 0; transition: border-color .15s; }
.ltwk-card:hover { border-color: #a9b2b8; }
.ltwk-card.sel { border-color: var(--ltwk-accent); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.ltwk-card input { margin-top: calc(.3 * 16px); accent-color: var(--ltwk-accent); flex: none; }
.ltwk-card.miss { cursor: default; background: var(--ltwk-bg); opacity: .85; }
.ltwk-card p { font-size: calc(.9 * 16px); color: var(--ltwk-muted); margin: calc(.35 * 16px) 0 calc(.5 * 16px); }
.ltwk-card a { font-size: calc(.88 * 16px); text-decoration: none; font-weight: 600; color: var(--ltwk-blue); }
.ltwk-ch { display: flex; flex-wrap: wrap; gap: calc(.4 * 16px); align-items: center; }
.ltwk-badge { font-style: normal; font-size: calc(.72 * 16px); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--ltwk-blue); color: #fff; padding: calc(.15 * 16px) calc(.45 * 16px); border-radius: 4px; }
.ltwk-ok { font-style: normal; font-size: calc(.78 * 16px); color: var(--ltwk-blue); font-weight: 600; }
.ltwk-specs { list-style: none; margin: 0 0 calc(.6 * 16px); padding: 0; font-size: calc(.85 * 16px); }
.ltwk-specs li { display: flex; justify-content: space-between; gap: calc(1 * 16px); padding: calc(.2 * 16px) 0; border-top: 1px solid var(--ltwk-line); margin: 0; }
.ltwk-specs li span { color: var(--ltwk-muted); }
.ltwk-warn { color: #9a5a00 !important; font-weight: 600; font-size: calc(.85 * 16px) !important; }
.ltwk-why { color: #a1251b !important; font-weight: 600; }
.ltwk-advise { margin-top: calc(1 * 16px); }
.ltwk-small { font-size: calc(.85 * 16px); color: var(--ltwk-muted); margin: calc(-.25 * 16px) 0 calc(.75 * 16px); }
.ltwk-more { margin-top: calc(1.25 * 16px); }
.ltwk-more summary { cursor: pointer; color: var(--ltwk-muted); font-weight: 600; margin-bottom: calc(.75 * 16px); }
.ltwk-accs { margin-bottom: calc(.5 * 16px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: calc(.5 * 16px) calc(1 * 16px); }
.ltwk-hint { padding: calc(.75 * 16px) calc(1 * 16px); background: #eef2fa; border-left: 4px solid var(--ltwk-blue); border-radius: 4px; font-size: calc(.92 * 16px); }
.ltwk-note { margin-top: calc(1.25 * 16px); font-size: calc(.8 * 16px); color: var(--ltwk-muted); }
.ltwk-sum { margin-top: calc(1.5 * 16px); padding: calc(1 * 16px); background: var(--ltwk-bg); border-radius: 8px; font-size: calc(.9 * 16px); }

/* Navigation */
.ltwk-nav { display: flex; justify-content: space-between; gap: calc(1 * 16px); margin-top: calc(1.75 * 16px); }
.ltwk-btn { appearance: none; border: 2px solid var(--ltwk-accent); background: var(--ltwk-accent); color: #fff; font-family: inherit; font-weight: 600; font-size: calc(1 * 16px); line-height: 1; padding: calc(.85 * 16px) calc(1.6 * 16px); border-radius: 6px; cursor: pointer; transition: filter .15s; }
.ltwk-btn:hover { filter: brightness(1.08); }
.ltwk-btn:disabled { opacity: .6; cursor: wait; }
.ltwk-ghost { background: transparent; color: var(--ltwk-accent); }
.ltwk-msg { color: #a1251b; font-weight: 600; text-align: right; min-height: 1.5em; margin: calc(.5 * 16px) 0 0; }

/* Danke */
.ltwk-done { text-align: center; padding: calc(2 * 16px) 0; }
.ltwk-done svg { width: 72px; height: 72px; fill: none; stroke: var(--ltwk-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ltwk-done p { color: var(--ltwk-muted); margin-bottom: calc(1.5 * 16px); }
/* aufklappbare optionale Angaben */
.ltwk details.ltwk-acc { margin: calc(1 * 16px) 0 0; border: 1px solid var(--ltwk-line); border-radius: 6px; background: var(--ltwk-bg); }
.ltwk details.ltwk-acc[open] { background: #fff; }
.ltwk details.ltwk-acc > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(.15 * 16px) calc(.6 * 16px); padding: calc(.7 * 16px) calc(2.2 * 16px) calc(.7 * 16px) calc(.9 * 16px); position: relative; }
.ltwk details.ltwk-acc > summary::-webkit-details-marker { display: none; }
.ltwk details.ltwk-acc > summary::after { content: '+'; position: absolute; right: calc(.9 * 16px); top: 50%; transform: translateY(-50%); font-size: calc(1.3 * 16px); font-weight: 700; color: var(--ltwk-accent); line-height: 1; }
.ltwk details.ltwk-acc[open] > summary::after { content: '–'; }
.ltwk details.ltwk-acc > summary:focus-visible { outline: 2px solid var(--ltwk-accent); outline-offset: 2px; }
.ltwk .ltwk-acc-t { color: var(--ltwk-blue); font-weight: 700; font-size: calc(.85 * 16px); text-transform: uppercase; letter-spacing: .06em; }
.ltwk .ltwk-acc-h { color: var(--ltwk-muted); font-size: calc(.8 * 16px); }
.ltwk details.ltwk-acc > .ltwk-grid { padding: 0 calc(.9 * 16px) calc(.9 * 16px); }
.ltwk-fig .ltwk-sknote { display: block; margin-top: calc(.6 * 16px); padding-top: calc(.5 * 16px); border-top: 1px solid var(--ltwk-line); font-size: calc(.72 * 16px); line-height: 1.4; color: var(--ltwk-muted); text-align: left; }
.ltwk-fig .ltwk-sknone { margin: calc(1 * 16px) 0; padding: calc(1 * 16px); border: 2px dashed var(--ltwk-accent); border-radius: 6px; color: var(--ltwk-ink); font-weight: 600; text-align: center; line-height: 1.45; }
.ltwk-sketch .sk-st-ext { stroke: #3557a8; stroke-width: 6.5; stroke-linecap: butt; }
.ltwk-sketch .sk-st-collar { stroke: #142f73; stroke-width: 9; stroke-linecap: butt; }
.ltwk-sketch .sk-st-thread { stroke: #8d969c; stroke-width: 4; stroke-linecap: butt; }
.ltwk-fig .ltwk-stinfo { display: block; font-size: calc(.78 * 16px); color: var(--ltwk-muted); margin-top: calc(.1 * 16px); }
.ltwk-sketch text.sk-logo { fill: var(--ltwk-blue); fill-opacity: .9; font-family: Arial, Helvetica, sans-serif; font-weight: 900; font-style: normal; letter-spacing: 0; paint-order: normal; stroke: none; }

.ltwk-fig .ltwk-sknone.ltwk-skwait { border: 2px dashed var(--ltwk-line); color: var(--ltwk-muted); font-weight: 500; }
.ltwk .ltwk-linkbtn { margin-top: calc(.5 * 16px); padding: calc(.45 * 16px) calc(.8 * 16px); border: 1px solid var(--ltwk-blue); border-radius: 4px; background: #fff; color: var(--ltwk-blue); font: inherit; font-weight: 600; font-size: calc(.9 * 16px); cursor: pointer; }
.ltwk .ltwk-linkbtn:hover { background: var(--ltwk-blue); color: #fff; }
.ltwk-sketch .sk-roller { fill: #c9d3e6; stroke: #12295f; stroke-width: .8; }
.ltwk-sketch .sk-carriage-side { fill: #1f448f; stroke: #12295f; stroke-width: 1; }
.ltwk-sketch .sk-flange { stroke: #12295f; stroke-width: 4; stroke-linecap: butt; }
.ltwk .ltwk-prefwarn { margin: 0 0 calc(.8 * 16px); padding: calc(.65 * 16px) calc(.85 * 16px); border-left: 4px solid var(--ltwk-accent); border-radius: 4px; background: #fff4ec; color: #8a3d00; font-size: calc(.9 * 16px); font-weight: 600; line-height: 1.4; text-align: left; }

.ltwk .ltwk-none p { margin: 0 0 calc(.4 * 16px); }
.ltwk .ltwk-none p:last-child { margin: calc(.4 * 16px) 0 0; font-weight: 600; }
.ltwk .ltwk-none ul { margin: 0; padding-left: calc(1.2 * 16px); font-weight: 400; color: #5c2a00; }
.ltwk .ltwk-none li { margin: calc(.15 * 16px) 0; }