/* WebRise-Varianten 6 bis 9 (Abwandlungen von 3 «Werkstatt-Blick») */

/* =========================================================
   Gemeinsam (Präfix vwx-)
   ========================================================= */
.vwx-head {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "logo logo" "title lead";
  column-gap: clamp(30px, 5vw, 90px); align-items: end; padding: 0 var(--pad); margin-bottom: clamp(36px, 6vh, 70px);
}
.vwx-logo { grid-area: logo; display: block; width: clamp(210px, 19vw, 320px); margin-bottom: clamp(18px, 2.6vh, 32px); }
.vwx-logo-img { display: block; width: 100%; height: auto; }
.vwx-title { grid-area: title; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, min(4.8vw, 8.4vh), 86px); line-height: .96; letter-spacing: -.02em; color: var(--wr); }
.vwx-title em { color: var(--ink); }
.vwx-lead { grid-area: lead; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: #4A4744; max-width: 32em; padding-bottom: .4em; }
/* Aufruf ruhig: eine Zeile, mittelgross, mit Trennlinie (danach folgt der grosse Laden-Abschnitt) */
.vwx-call { margin-left: var(--pad); margin-right: var(--pad); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid rgba(28,56,41,.16); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q actions" "a actions"; align-items: center; column-gap: 40px; }
.vwx-q, .vwx-a { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.12; letter-spacing: -.015em; }
.vwx-q { grid-area: q; }
.vwx-a { grid-area: a; color: var(--wr); }
.vwx-actions { grid-area: actions; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .vwx-call { grid-template-columns: 1fr; grid-template-areas: "q" "a" "actions"; row-gap: 0; }
  .vwx-actions { margin-top: 22px; }
}
.vwx-btn { background: var(--wr); color: #fff; }
.vwx-btn:hover { background: var(--ink); }
.vwx-url { font-family: var(--mono); font-size: 15px; color: var(--wr); text-decoration: none; border-bottom: 1px solid rgba(28,56,41,.35); }
.vwx-url:hover { border-bottom-color: var(--wr); }

.vwx-l { position: absolute; inset: 0; }
.vwx-real { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vwx-sk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vwx-sk path { fill: none; stroke: #3B3935; stroke-width: .6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; }
.vwx-sk .vwx-sk-dash { stroke-width: .5; }
.vwx-sk .vwx-r { stroke: #D9534F; }
.vwx-sk--frame path:first-child { stroke-width: .9; }
.vwx-sk-t { font-family: 'Caveat', cursive; font-weight: 600; font-size: 6.4px; fill: #D9534F; }
.vwx-sk-m { font-family: 'Playfair Display', serif; font-style: italic; font-size: 5.6px; fill: #3B3935; }

.vwx-wf { position: absolute; inset: 0; background: #F5F5F3; container-type: inline-size; }
.vwx-wf > * { position: absolute; display: block; font-style: normal; }
.vwx-wf-bar { background: #CFCFCB; border-radius: 99px; }
.vwx-wf-done { display: grid; place-items: center; background: #111; color: #fff; border-radius: 99px; font: 600 4cqw/1 var(--sans); }
.vwx-wf-canvas { background: #fff; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.06); outline: .5cqw solid var(--blau); outline-offset: 1cqw; }
.vwx-wf-cell { background: repeating-linear-gradient(45deg, #ECECEA 0 2cqw, #E3E3E0 2cqw 4cqw); }
.vwx-wf-dot { border-radius: 50%; background: var(--c); }
.vwx-wf-mood { display: flex; align-items: center; justify-content: center; font: italic 500 5.6cqw/1 'Playfair Display', serif; color: #1D1D1F; }
.vwx-wf-dim { display: grid; place-items: center; background: var(--blau); color: #fff; font: 3.2cqw/1 var(--mono); border-radius: 1cqw; }
.vwx-wf-guide--v { border-left: .4cqw dashed var(--rosa); }
.vwx-wf-guide--h { border-top: .4cqw dashed var(--rosa); }
.vwx-wf-tile { background: #fff; border-radius: 3cqw; box-shadow: inset 0 0 0 .3cqw #E6E6E3; }
.vwx-wf-tile.is-dash { background: transparent; box-shadow: none; border: .5cqw dashed #B5B5B0; }
.vwx-wf-tab { background: #E6E6E3; border-radius: 2cqw; }
.vwx-wf-tab.is-on { background: #111; border-radius: 3cqw; }
.vwx-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 30; background: var(--gruen); box-shadow: 0 0 12px 3px rgba(157,190,91,.7); opacity: 0; pointer-events: none; }

.vwx-store {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 12px 14px 12px 12px;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.03);
}
.vwx-store img { width: 56px; height: 56px; border-radius: 13px; flex: none; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.vwx-store-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vwx-store-t b { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.vwx-store-t small { font-size: 12px; color: var(--muted); }
.vwx-store-t .vwx-store-free { color: var(--wr); font-weight: 600; }
.vwx-store-get { margin-left: auto; flex: none; background: #EEF1F6; color: #2F6FD6; font-weight: 700; font-size: 14px; padding: 6px 16px; border-radius: 99px; }

.vwx-chips i { display: block; background: #fff; }
.vwx-chips i::before { content: ""; display: block; background: var(--c); }
.vwx-chips span { display: block; font-family: var(--mono); color: #6A655F; }

@media (max-width: 860px) {
  .vwx-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "title" "lead"; row-gap: 16px; }
  .vwx-logo { margin-bottom: 4px; }
  .vwx-q, .vwx-a { font-size: clamp(34px, 9.4vw, 52px); }
  .vwx-store { gap: 10px; padding: 10px 12px 10px 10px; border-radius: 16px; }
  .vwx-store img { width: 44px; height: 44px; border-radius: 10px; }
  .vwx-store-t b { font-size: 13px; }
  .vwx-store-t small { font-size: 11px; }
  .vwx-store-get { font-size: 12px; padding: 5px 12px; }
}

/* =========================================================
   6 · Werkbank von oben
   ========================================================= */
.vw6 { position: relative; background: var(--bg); color: var(--ink); padding: clamp(90px, 10vw, 150px) 0 clamp(70px, 8vw, 120px); overflow: hidden; }
.vw6-pin { padding: 0 var(--pad); }
.vw6-desk {
  position: relative; height: calc(100vh - 100px); min-height: 560px; max-height: 880px; border-radius: 28px; overflow: hidden;
  background-color: #E9DDC9;
  background-image:
    radial-gradient(ellipse 50% 40% at 28% 35%, rgba(255,255,255,.28), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(160,110,60,.08), transparent 70%),
    repeating-linear-gradient(178.5deg, rgba(130,90,45,.055) 0 2px, transparent 2px 11px, rgba(130,90,45,.035) 11px 12px, transparent 12px 27px),
    repeating-linear-gradient(181deg, transparent 0 60px, rgba(255,255,255,.12) 60px 64px, transparent 64px 140px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 -40px 80px -50px rgba(90,60,25,.3);
}
.vw6-it { position: absolute; }
.vw6-pencil {
  position: absolute; left: 21%; top: 47%; width: clamp(150px, 15vw, 230px); height: 12px; rotate: 64deg; border-radius: 2px;
  background: linear-gradient(90deg, #E8B4A8 0 7%, #B9B6B0 7% 12%, var(--gelb) 12% 86%, #E8CFA4 86% 100%);
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
  box-shadow: 0 8px 10px -6px rgba(60,40,10,.35);
}
.vw6-pencil::after { content: ""; position: absolute; right: 0; top: 50%; width: 5%; height: 40%; translate: 0 -50%; background: #333; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vw6-clip { position: absolute; left: 39.5%; top: 3.5%; z-index: 3; width: 20px; height: 54px; border: 2.5px solid #9AA0A6; border-radius: 10px; rotate: 6deg; }

.vw6-pad {
  left: 3%; top: 8%; width: 23%; aspect-ratio: 3 / 4; border-radius: 6px;
  background: #FCFAF4; background-image: radial-gradient(rgba(60,50,40,.13) 1px, transparent 1.4px); background-size: 16px 16px;
  box-shadow: 0 2px 0 #EDE7DA, 0 4px 0 #E4DDCD, 0 30px 50px -28px rgba(60,40,15,.45);
}
.vw6-rings { position: absolute; left: 8%; right: 8%; top: -10px; height: 22px; background: radial-gradient(circle at 50% 50%, transparent 4px, #8E9398 4.5px 6px, transparent 6.5px) 0 0 / 22px 22px repeat-x; }
.vw6-pad-in { position: absolute; inset: 10% 7% 6%; display: flex; gap: 6%; }
.vw6-scr { position: relative; height: 100%; aspect-ratio: 100 / 217; flex: none; }
.vw6-hand { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.05; color: #D9534F; rotate: -6deg; margin-top: 18%; }

.vw6-fan { left: 4%; top: 64%; width: 19%; height: 27%; }
.vw6-fan .vwx-chips i { position: absolute; left: 39%; bottom: 0; width: 22%; height: 100%; transform-origin: 50% 88%; border-radius: 6px; padding: 6%; box-shadow: 0 10px 20px -12px rgba(60,40,15,.5), 0 0 0 1px rgba(0,0,0,.04); }
.vw6-fan .vwx-chips i::before { height: 64%; border-radius: 3px; }
.vw6-fan .vwx-chips span { font-size: 8px; margin-top: 6px; writing-mode: vertical-rl; rotate: 180deg; }

.vw6-type { left: 26.5%; top: 66%; width: 15%; aspect-ratio: 4 / 3; background: #fff; border-radius: 10px; padding: 3% 4%; box-shadow: 0 24px 40px -26px rgba(60,40,15,.5); display: grid; grid-template-columns: auto 1fr; align-content: space-between; column-gap: 10px; }
.vw6-type b { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 62px); line-height: 1; }
.vw6-type-l { white-space: nowrap; display: flex; flex-direction: column; justify-content: center; font-size: 11px; color: var(--muted); gap: 2px; }
.vw6-type-l i { font-style: normal; }
.vw6-type-l i:nth-child(1) { font-family: var(--serif); }
.vw6-type-l i:nth-child(3) { font-family: 'Caveat', cursive; font-size: 14px; }
.vw6-logo { grid-column: 1 / -1; font-weight: 600; letter-spacing: -.046em; font-size: clamp(17px, 1.5vw, 24px); display: inline-flex; gap: .25em; align-items: baseline; }

.vw6-print { left: 28%; top: 6%; width: 20%; background: #fff; padding: 3.6% 3.6% 10%; box-shadow: 0 30px 50px -30px rgba(60,40,15,.5); }
.vw6-print img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 799; }
.vw6-crop { position: absolute; inset: 1.6%; pointer-events: none;
  background:
    linear-gradient(#999, #999) 0 0 / 12px 1px no-repeat, linear-gradient(#999, #999) 0 0 / 1px 12px no-repeat,
    linear-gradient(#999, #999) 100% 0 / 12px 1px no-repeat, linear-gradient(#999, #999) 100% 0 / 1px 12px no-repeat; }
.vw6-print-ok { position: absolute; left: 6%; bottom: 2.4%; font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(17px, 1.5vw, 24px); color: var(--wr); rotate: -3deg; }

.vw6-phone-wrap { left: 51%; top: 6%; z-index: 2; }
.vw6-phone { width: min(16vw, 31vh); }
.vw6-store { left: 47%; top: 76%; z-index: 3; }

.vw6-list {
  left: 73%; top: 6%; width: 24%; background: #fff; border-radius: 6px; padding: 16px 18px 12px;
  background-image: linear-gradient(#E9A0A0, #E9A0A0), repeating-linear-gradient(transparent 0 33px, rgba(79,143,232,.16) 33px 34px);
  background-size: 100% 1px, 100% 100%; background-position: 0 44px, 0 10px; background-repeat: no-repeat, repeat;
  box-shadow: 0 24px 44px -28px rgba(60,40,15,.5);
}
.vw6-list-h { font-family: 'Caveat', cursive; font-weight: 600; font-size: 24px; color: var(--wr); line-height: 1; height: 30px; }
.vw6-list ol { display: grid; gap: 0; margin-top: 4px; }
.vw6-list li { display: grid; grid-template-columns: 24px 26px 1fr; grid-template-areas: "box n t" "box n d"; align-items: center; column-gap: 6px; padding: 5px 0; transition: opacity .4s; opacity: .45; }
.vw6-list li.is-on, .vw6-list li.is-done { opacity: 1; }
.vw6-box { grid-area: box; width: 20px; height: 20px; border: 1.5px solid #3B3935; border-radius: 4px; }
.vw6-box svg { width: 100%; height: 100%; overflow: visible; }
.vw6-box path { fill: none; stroke: var(--wr); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .5s var(--ease); }
.vw6-list li.is-done .vw6-box path { stroke-dashoffset: 0; }
.vw6-list li.is-on .vw6-box { border-color: var(--wr); box-shadow: 0 0 0 3px rgba(157,190,91,.35); }
.vw6-n { grid-area: n; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.vw6-list b { grid-area: t; font-weight: 600; font-size: 15px; line-height: 1.15; }
.vw6-list em { grid-area: d; font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.2; }

.vw6-note {
  left: 72%; top: 47%; width: 25%; z-index: 4; padding: clamp(22px, 2.2vw, 32px) clamp(20px, 2vw, 30px) clamp(20px, 2vw, 28px);
  background: #FCE9A6; background-image: linear-gradient(180deg, rgba(255,255,255,.35), transparent 30%);
  box-shadow: 0 30px 40px -26px rgba(60,40,15,.55), 0 1px 0 rgba(0,0,0,.04);
}
.vw6-tape { position: absolute; left: 32%; top: -13px; width: 36%; height: 26px; background: rgba(255,255,255,.55); rotate: -3deg; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.vw6-note-q { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.05; color: #2C2A26; }
.vw6-note-a { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.05; color: var(--wr); margin-top: 8px; }
.vw6-note-a em { font-style: normal; }
.vw6-note-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: clamp(14px, 2vh, 22px); }
.vw6-note .vwx-url { font-size: 13px; }
.vw6-now { display: none; }


@media (max-width: 1180px) and (min-width: 861px) {
  .vw6-list li em { display: none; }
  .vw6-note-q { font-size: 22px; } .vw6-note-a { font-size: 26px; }
}
@media (max-width: 860px) {
  .vw6-desk { height: calc(100vh - 72px); min-height: 600px; max-height: none; border-radius: 20px; }
  .vw6-pad { left: 3%; top: 2.5%; width: min(54%, 25vh); }
  .vw6-hand { font-size: 17px; }
  .vw6-list { display: none; }
  .vw6-fan { left: 58%; top: 8%; width: 36%; height: 15%; }
  .vw6-fan .vwx-chips i { width: 18%; left: 41%; }
  .vw6-fan .vwx-chips span { display: none; }
  .vw6-type { left: 60%; top: 25%; width: 35%; padding: 3% 5%; }
  .vw6-type b { font-size: 34px; }
  .vw6-type-l { font-size: 9px; }
  .vw6-type-l i:nth-child(3) { font-size: 12px; }
  .vw6-logo { font-size: 16px; }
  .vw6-pencil { display: none; }
  .vw6-clip { left: 30%; top: 36%; height: 40px; width: 15px; }
  .vw6-print { left: 4%; top: 38%; width: min(43%, 20vh); }
  .vw6-print-ok { font-size: 15px; }
  .vw6-phone-wrap { left: 53%; top: 36.5%; }
  .vw6-phone { width: min(38vw, 20vh); }
  .vw6-store { left: 2%; top: 67%; }
  .vw6-note { left: 4%; top: 77.5%; width: 92%; padding: 14px 16px 12px; }
  .vw6-note-q { font-size: 19px; }
  .vw6-note-a { font-size: 22px; margin-top: 2px; }
  .vw6-note-act { margin-top: 8px; }
  .vw6-note .pill { padding: 11px 18px; font-size: 15px; }
  .vw6-now {
    display: inline-flex; align-items: center; gap: 8px; position: absolute; right: 3%; top: 1.6%; z-index: 5; margin: 0;
    background: var(--wr); color: #fff; border-radius: 99px; padding: 7px 13px; font-weight: 600; font-size: 14px;
  }
  .vw6-now span { font-family: var(--mono); font-size: 11px; opacity: .7; font-weight: 400; }
}

/* =========================================================
   7 · Vier Spalten, ein Motiv
   ========================================================= */
.vw7 { position: relative; background: var(--bg); color: var(--ink); padding: clamp(90px, 10vw, 150px) 0 clamp(90px, 10vw, 150px); overflow: hidden; --vis: max(330px, min(calc(100vh - 300px), 580px)); }
.vw7-pin { padding: 0 var(--pad); }
.vw7-rail { position: relative; height: 2px; background: #E2DDD5; margin: 0 0 26px; border-radius: 2px; }
.vw7-fill { position: absolute; inset: 0; background: var(--wr); transform-origin: left center; border-radius: 2px; }
.vw7-dot { position: absolute; top: 50%; left: 100%; width: 14px; height: 14px; border-radius: 50%; background: var(--wr); translate: -50% -50%; box-shadow: 0 0 0 6px rgba(157,190,91,.35); }
.vw7-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.vw7-col { --on: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vw7-col header { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; opacity: calc(.35 + .65 * var(--on)); }
.vw7-col header span { grid-row: span 2; font-family: var(--mono); font-size: 13px; color: var(--wr); }
.vw7-col header b { font-weight: 600; font-size: clamp(17px, 1.4vw, 22px); letter-spacing: -.01em; }
.vw7-col header em { font-style: normal; font-size: 13px; color: var(--muted); }
.vw7-vis {
  position: relative; height: var(--vis); border-radius: 22px; overflow: hidden; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
}
.vw7-vis > * { opacity: calc(.22 + .78 * var(--on)); }
.vw7-note { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.1; color: #3B3935; rotate: -1.5deg; opacity: var(--on); }

.vw7-paper { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; box-shadow: inset 0 0 0 1px #ECE5D6; background: #FBF8F1; background-image: repeating-linear-gradient(transparent 0 23px, rgba(79,143,232,.13) 23px 24px); }
.vw7-tape { position: absolute; left: 50%; top: 14px; width: 30%; height: 22px; translate: -50% 0; background: rgba(246,199,68,.55); rotate: -3deg; }
.vw7-frame--sk { position: relative; height: 80%; aspect-ratio: 110 / 227; }
.vw7-board {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #F0F2F5; background-image: linear-gradient(rgba(79,143,232,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(79,143,232,.08) 1px, transparent 1px); background-size: 20px 20px;
}
.vw7-board-l { font-family: var(--mono); font-size: 11px; color: #7C8696; align-self: center; }
.vw7-frame--wf { position: relative; height: 70%; aspect-ratio: 100 / 217; border-radius: 9% / 4.2%; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(30,40,60,.35), 0 0 0 1px rgba(0,0,0,.05); }
.vw7-board .vwx-chips { display: flex; gap: 5px; }
.vw7-board .vwx-chips i { width: 18px; height: 18px; border-radius: 5px; background: var(--c); box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.vw7-board .vwx-chips i::before, .vw7-board .vwx-chips span { display: none; }
.vw7-phone { width: calc(var(--vis) * .42); }
.vw7-dark { background: #000; }
.vw7-listing { display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: 92%; }
.vw7-store { gap: 10px; padding: 10px 12px 10px 10px; }
.vw7-store img { width: 48px; height: 48px; border-radius: 11px; }
.vw7-store .vwx-store-t b { font-size: 14px; }
.vw7-store .vwx-store-get { padding: 5px 12px; font-size: 13px; }
.vw7-store { width: 100%; }
.vw7-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vw7-shots img { width: 100%; height: auto; aspect-ratio: 600 / 1304; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 14px 24px -16px rgba(0,0,0,.35); }
.vw7-call { margin-top: clamp(70px, 11vh, 130px); }
.vw7--done .vw7-col { --on: 1; }
@media (max-width: 1180px) and (min-width: 861px) {
  .vw7-store .vwx-store-get { display: none; }
  .vw7-col header em { display: none; }
}
@media (max-width: 860px) {
  .vw7 { --vis: max(300px, min(calc(100vh - 300px), 520px)); }
  .vw7-track { display: flex; width: max-content; gap: 16px; }
  .vw7-col { width: 78vw; }
  .vw7-rail { margin-bottom: 20px; }
  .vw7--done .vw7-view { overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
}

/* =========================================================
   8 · Verwandlung
   ========================================================= */
.vw8 { position: relative; background: var(--bg); color: var(--ink); padding: clamp(90px, 10vw, 150px) 0 clamp(90px, 10vw, 150px); overflow: hidden; }
.vw8-pin { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); height: calc(100vh - 90px); min-height: 560px; padding: 0 var(--pad); align-items: center; column-gap: clamp(20px, 3vw, 60px); }
.vw8-count { align-self: center; }
.vw8-num { display: flex; font-family: var(--serif); font-size: min(34vh, 21vw); line-height: 1; letter-spacing: -.04em; color: var(--wr); }
.vw8-num > span:first-child { color: rgba(28,56,41,.18); }
.vw8-roll { display: block; height: 1em; overflow: hidden; }
.vw8-digits { display: block; }
.vw8-digits i { display: block; height: 1em; font-style: normal; }
.vw8-names { position: relative; height: clamp(84px, 11vh, 110px); margin-top: 10px; }
.vw8-name { position: absolute; inset: 0 auto auto 0; opacity: 0; translate: 0 14px; transition: opacity .45s, translate .45s var(--ease); }
.vw8-name.is-on { opacity: 1; translate: 0 0; }
.vw8-name b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 3.6vw, 60px); line-height: 1; letter-spacing: -.02em; }
.vw8-name span { display: block; margin-top: 8px; font-size: clamp(15px, 1.15vw, 18px); color: var(--muted); }
.vw8-bar { display: flex; gap: 6px; max-width: 340px; margin-top: 12px; }
.vw8-bar i { flex: 1; height: 4px; border-radius: 4px; background: #E2DDD5; transition: background .45s; }
.vw8-bar i.is-on { background: var(--wr); }

.vw8-stage { position: relative; height: 100%; display: grid; place-items: center; }
.vw8-obj { position: relative; height: calc(100% - 40px); max-height: 800px; aspect-ratio: 1 / 2.065; }
.vw8-board {
  --grid: 0;
  position: absolute; left: 4.4%; right: 4.4%; top: 2.1%; bottom: 2.1%; border-radius: 5% / 2.4%; overflow: hidden;
  background: #FBF8F1; background-image: repeating-linear-gradient(transparent 0 23px, rgba(79,143,232,.13) 23px 24px);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 40px 60px -36px rgba(40,30,20,.45);
}
.vw8-board::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: var(--grid);
  background: #fff; background-image: linear-gradient(rgba(79,143,232,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(79,143,232,.12) 1px, transparent 1px); background-size: 5% 2.3%;
}
.vw8-paper { z-index: 1; }
.vw8-wf { z-index: 2; }
.vw8-design { z-index: 3; }
.vw8-red { position: absolute; z-index: 4; height: 0; border-top: 1.5px solid #E5484D; font-family: var(--mono); font-size: 10px; line-height: 1.5; color: #E5484D; text-align: center; }
.vw8-red::before, .vw8-red::after { content: ""; position: absolute; top: -5px; width: 1.5px; height: 9px; background: #E5484D; }
.vw8-red::before { left: 0; } .vw8-red::after { right: 0; }
.vw8-red--a { left: 4%; top: 32.3%; width: 6.4%; }
.vw8-red--b { left: 58.2%; top: 27.6%; width: 3.8%; }
.vw8-sel { position: absolute; z-index: 4; left: 10.4%; top: 20.05%; width: 47.8%; height: 26.4%; outline: 2px solid var(--blau); }
.vw8-sel::before, .vw8-sel::after { content: ""; position: absolute; width: 9px; height: 9px; background: #fff; border: 2px solid var(--blau); border-radius: 2px; }
.vw8-sel::before { left: -6px; top: -6px; } .vw8-sel::after { right: -6px; bottom: -6px; }
.vw8-phone-wrap { position: absolute; inset: 0; z-index: 2; }
.vw8-phone { width: 100%; }
.vw8-note {
  position: absolute; top: var(--y); z-index: 5; width: clamp(150px, 14vw, 220px); display: flex; align-items: center; gap: 8px;
  font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.02; color: #3B3935;
  opacity: 0; translate: 0 10px; transition: opacity .45s, translate .45s var(--ease);
}
.vw8-note.is-on { opacity: 1; translate: 0 0; }
.vw8-note svg { width: 56px; height: 20px; flex: none; overflow: visible; }
.vw8-note path { fill: none; stroke: #D9534F; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vw8-note--l { right: calc(100% + 6px); text-align: right; justify-content: flex-end; }
.vw8-note--r { left: calc(100% + 6px); flex-direction: row-reverse; justify-content: flex-end; }
.vw8-store { position: absolute; z-index: 6; left: -34%; bottom: 9%; width: max-content; }
.vw8-call { margin-top: clamp(60px, 9vh, 110px); }
.vw8--done .vw8-digits { transform: translateY(-75%); }
.vw8--done .vw8-board { opacity: 0; }
@media (max-width: 860px) {
  .vw8-pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 76px); min-height: 600px; row-gap: 8px; }
  .vw8-count { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num names" "bar bar"; column-gap: 16px; align-items: center; }
  .vw8-num { grid-area: num; font-size: 84px; }
  .vw8-names { grid-area: names; height: 64px; margin: 0; }
  .vw8-name b { font-size: 32px; }
  .vw8-name span { font-size: 14px; margin-top: 4px; }
  .vw8-bar { grid-area: bar; max-width: none; margin-top: 6px; }
  .vw8-obj { height: calc(100% - 16px); max-width: 76vw; }
  .vw8-note { width: auto; max-width: 52%; font-size: 18px; background: #fff; padding: 5px 10px; border-radius: 10px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.35); }
  .vw8-note svg { display: none; }
  .vw8-store { left: 50%; bottom: 3%; translate: -50% 0; }
  .vw8-note--l { right: auto; left: -9%; rotate: -3deg; }
  .vw8-note--r { left: auto; right: -9%; rotate: 3deg; }
}

/* =========================================================
   9 · Skizzenbuch zum Blättern
   ========================================================= */
.vw9 { position: relative; background: var(--bg); color: var(--ink); padding: clamp(90px, 10vw, 150px) 0 clamp(70px, 8vw, 120px); overflow: hidden; }
.vw9-pin { height: calc(100vh - 80px); min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3vh, 30px); padding: 0 var(--pad); }
.vw9-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vw9-tabs li { display: flex; align-items: baseline; gap: 8px; padding: 8px 15px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; transition: background .4s, color .4s; }
.vw9-tabs span { font-family: var(--mono); font-size: 11px; color: var(--muted); transition: color .4s; }
.vw9-tabs b { font-weight: 600; }
.vw9-tabs li.is-done span { color: var(--wr); }
.vw9-tabs li.is-on { background: var(--wr); color: #fff; box-shadow: none; }
.vw9-tabs li.is-on span { color: rgba(255,255,255,.7); }

.vw9-book { position: relative; width: min(100%, calc((100vh - 240px) * 1.44), 1080px); aspect-ratio: 1.44; perspective: 2600px; }
.vw9-shift { position: absolute; inset: 0; transform-style: preserve-3d; }
.vw9-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; }
.vw9-leaf--1 { z-index: 4; } .vw9-leaf--2 { z-index: 3; } .vw9-leaf--3 { z-index: 2; } .vw9-leaf--4 { z-index: 1; }
.vw9-page {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; container-type: size;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: #FCFAF4; background-image: linear-gradient(90deg, rgba(60,40,15,.10), transparent 7%), radial-gradient(rgba(60,50,40,.12) 1px, transparent 1.3px);
  background-size: 100% 100%, 18px 18px; border-radius: 0 10px 10px 0;
  box-shadow: inset 0 0 0 1px rgba(60,40,15,.05);
}
.vw9-leaf .vw9-page { left: 0; width: 100%; }
.vw9-back { transform: rotateY(180deg); border-radius: 10px 0 0 10px; background-image: linear-gradient(270deg, rgba(60,40,15,.10), transparent 7%), radial-gradient(rgba(60,50,40,.12) 1px, transparent 1.3px); }
.vw9-base { box-shadow: inset 0 0 0 1px rgba(60,40,15,.05), 0 40px 60px -36px rgba(40,30,20,.5); }
.vw9-pg { position: absolute; inset: 7cqmin; }
.vw9-row { display: flex; align-items: center; gap: 5cqmin; }
.vw9-col { display: flex; flex-direction: column; justify-content: center; gap: 4cqmin; }
.vw9-txt { flex: 1; min-width: 0; }
.vw9-ph { font-family: var(--serif); font-size: max(20px, 6.6cqmin); line-height: 1; letter-spacing: -.02em; }
.vw9-ph span { display: block; font-family: var(--mono); font-size: max(11px, 3cqmin); color: var(--muted); letter-spacing: 0; margin-bottom: 1.4cqmin; }
.vw9-ph b { font-weight: 400; color: var(--wr); }
.vw9-hand { font-family: 'Caveat', cursive; font-weight: 600; font-size: max(17px, 6cqmin); line-height: 1.05; color: #3B3935; margin-top: 4cqmin; rotate: -2deg; }
.vw9-hand--s { font-size: max(15px, 4.8cqmin); color: #D9534F; }
.vw9-blue { color: var(--blau); }
.vw9-fr { position: relative; height: 82cqh; aspect-ratio: 100 / 217; flex: none; }
.vw9-fr--wf { border-radius: 9% / 4.2%; overflow: hidden; box-shadow: 0 16px 30px -20px rgba(30,40,60,.4), 0 0 0 1px rgba(0,0,0,.05); }
.vw9-tp { position: absolute; left: 50%; top: -9px; z-index: 3; width: 44%; height: 20px; translate: -50% 0; background: rgba(246,199,68,.55); rotate: -3deg; }
.vw9-sw { position: relative; flex: none; width: 40cqw; background: #fff; padding: 4cqmin; rotate: 3deg; box-shadow: 0 16px 30px -20px rgba(60,40,15,.45); }
.vw9-sw .vwx-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqmin; }
.vw9-sw .vwx-chips i::before { aspect-ratio: 1; border-radius: 4px; }
.vw9-sw .vwx-chips span { font-size: max(8px, 1.8cqmin); margin-top: 3px; }
.vw9-type { display: flex; align-items: center; gap: 3cqmin; margin-top: 5cqmin; }
.vw9-type b { font-family: var(--serif); font-weight: 400; font-size: max(34px, 14cqmin); line-height: 1; }
.vw9-type span { font-size: max(10px, 2.6cqmin); color: var(--muted); line-height: 1.4; }
.vw9-check { margin-top: 5cqmin; display: grid; gap: 2.4cqmin; }
.vw9-check li { position: relative; padding-left: 1.4em; font-family: 'Caveat', cursive; font-weight: 600; font-size: max(16px, 5cqmin); line-height: 1.05; color: #3B3935; }
.vw9-check li::before { content: "✓"; position: absolute; left: 0; color: var(--wr); }
.vw9-ph-wrap { flex: none; display: flex; align-items: center; }
.vw9-phone { width: calc(66cqh / 2.065); rotate: 4deg; }
.vw9-print { position: relative; flex: none; height: 78cqh; aspect-ratio: 600 / 1304; background: #fff; padding: 1.6cqmin; rotate: 3deg; box-shadow: 0 16px 30px -20px rgba(60,40,15,.45); }
.vw9-print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vw9-st { position: relative; rotate: -2deg; align-self: stretch; }
.vw9-st .vwx-store { padding-top: 16px; }

.vw9-cover {
  background-color: var(--wr); border-radius: 6px 14px 14px 6px;
  background-image: linear-gradient(90deg, rgba(0,0,0,.25), transparent 6%), repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px);
  background-size: auto; box-shadow: 0 40px 60px -34px rgba(20,30,20,.6);
}
.vw9-band { position: absolute; top: 0; bottom: 0; right: 9%; width: 3.4%; background: #0E1F16; box-shadow: -2px 0 4px rgba(0,0,0,.25); }
.vw9-label { position: absolute; left: 50%; top: 36%; translate: -50% -50%; width: 58cqw; padding: 5cqmin 5cqmin 4cqmin; background: #F6F0E2; border-radius: 4px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.vw9-label small { display: block; font-family: 'Caveat', cursive; font-weight: 600; font-size: max(16px, 5cqmin); color: #6A655F; }
.vw9-cover-logo { display: inline-flex; gap: .25em; align-items: baseline; font-weight: 600; letter-spacing: -.046em; font-size: max(26px, 10cqmin); line-height: 1.1; }
.vw9-cover-mark { position: absolute; left: 50%; bottom: 9cqmin; width: 11cqmin; height: auto; translate: -50% 0; opacity: .9; }

.vw9-own .vw9-pg { display: flex; flex-direction: column; justify-content: center; gap: 3cqmin; }
.vw9-own-h { font-family: 'Caveat', cursive; font-weight: 600; font-size: max(17px, 5.6cqmin); color: #6A655F; }
.vw9-own-logo { width: min(78cqw, 340px); height: auto; }
.vw9-own-w { font-family: var(--mono); font-size: max(11px, 3cqmin); color: var(--muted); }
.vw9-own-t { margin-top: 5cqmin; font-family: var(--serif); font-size: max(26px, 10cqmin); line-height: 1; letter-spacing: -.02em; color: var(--wr); }

.vw9-cta .vw9-pg { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.vw9-cta-logo { display: block; width: min(64cqw, 300px); margin-bottom: 6cqmin; }
.vw9-cta-logo-img { display: block; width: 100%; height: auto; }
.vw9-cta-q, .vw9-cta-a { font-family: var(--serif); font-size: max(22px, 8cqmin); line-height: 1.04; letter-spacing: -.01em; }
.vw9-cta-a { color: var(--wr); }
.vw9-cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6cqmin; }
.vw9-cta-act .vwx-url { font-size: 14px; }

.vw9--done .vw9-leaf { transform: rotateY(-180deg); }
.vw9--done .vw9-leaf--1 { z-index: 10; } .vw9--done .vw9-leaf--2 { z-index: 11; } .vw9--done .vw9-leaf--3 { z-index: 12; } .vw9--done .vw9-leaf--4 { z-index: 13; }

@media (max-width: 860px) {
  .vw9-pin { height: calc(100vh - 70px); min-height: 600px; gap: 14px; }
  .vw9-tabs { gap: 6px; flex-wrap: nowrap; }
  .vw9-tabs li { padding: 7px 11px; font-size: 13px; }
  .vw9-tabs li b { display: none; }
  .vw9-tabs li.is-on b { display: inline; }
  .vw9-book { width: min(100%, calc((100vh - 170px) * .56)); aspect-ratio: .56; perspective: 1800px; }
  .vw9-page { top: 50%; left: 0; width: 100%; height: 50%; border-radius: 0 0 10px 10px; background-image: linear-gradient(180deg, rgba(60,40,15,.10), transparent 7%), radial-gradient(rgba(60,50,40,.12) 1px, transparent 1.3px); }
  .vw9-leaf { top: 50%; left: 0; width: 100%; height: 50%; transform-origin: center top; }
  .vw9-leaf .vw9-page { top: 0; height: 100%; }
  .vw9-back { transform: rotateX(180deg); border-radius: 10px 10px 0 0; background-image: linear-gradient(0deg, rgba(60,40,15,.10), transparent 7%), radial-gradient(rgba(60,50,40,.12) 1px, transparent 1.3px); }
  .vw9-cover { border-radius: 6px 6px 14px 14px; }
  .vw9-band { top: auto; bottom: 12%; right: 0; left: 0; width: auto; height: 5%; }
  .vw9-label { top: 44%; width: 60cqw; }
  .vw9-cover-mark { bottom: auto; top: 6cqmin; left: auto; right: 6cqmin; translate: none; width: 9cqmin; }
  .vw9-hand { margin-top: 3cqmin; }
  .vw9-sw { width: 44cqw; }
  .vw9-cta-logo { width: 50cqw; margin-bottom: 4cqmin; }
  .vw9-cta-act { margin-top: 4cqmin; }
  .vw9-cta .pill { padding: 10px 16px; font-size: 14px; }
  .vw9--done .vw9-leaf { transform: rotateX(180deg); }
}

/* WebRise-Aufruf auf dem Handy: ruhig wie am Desktop, Haarlinie, Serifenschrift, ein breiter Knopf */
@media (max-width: 860px) {
  .vwx-call { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(28,56,41,.18); }
  .vwx-q { font-size: 28px; line-height: 1.1; color: var(--ink); }
  .vwx-a { font-size: 28px; line-height: 1.1; color: var(--wr); }
  .vwx-actions { margin-top: 26px; display: grid; gap: 14px; justify-items: center; }
  .vwx-btn.pill { width: 100%; justify-content: space-between; padding: 17px 22px 17px 24px; font-size: 16px; border-radius: 16px; }
  .vwx-url { font-size: 13px; letter-spacing: .02em; color: #8A857E; border-bottom: 0; }
}