/* LDT INC | the workshop layer on /workshops. 09.10.2026 rebuild: a sales page in two reading depths.
   Overview: offer, formats, topic questions, audiences, request. Depth: topic descriptions, experience. */

.w-sec{position:relative;padding:12vh var(--m);background:#fff}
.w-sec.dark{background:#000;color:#fff}
.sec{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:4vh}
.fw-k{font-size:clamp(24px,2.3vw,40px);line-height:1.12;letter-spacing:-.025em;max-width:26ch;margin:0}
.label{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* 1 opening: one typographic composition. The title carries both offers; the statement answers it; audiences and the request follow in reach */
.w-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:0 var(--m) 7vh;background:#fff}
.w-hero .kick{margin:9vh 0 0}
.w-hero .kick .t{font-size:clamp(44px,8vw,148px);font-weight:700;letter-spacing:-.055em;line-height:.93}
.w-hero .kick .t .h-l{display:block}
.w-hero .kick .t .amp{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;margin-left:.06em}
.w-cta .plus,.fm-go .plus{transition:transform .45s var(--ease)}
.w-cta:hover .plus,.w-cta:focus-visible .plus{transform:rotate(90deg)}


/* 1 opening (redesign 09.10.2026): a centered title over three full-width fields. White, black, white: the idea, the decision, the thing that works. The request sits right under them */
.w-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--m) 7vh;background:#fff}
.w-hero .subbar{align-self:stretch;text-align:left}
.w-hero .kick{margin:6vh 0 0;align-items:center}
.w-hero .kick .t{font-size:clamp(44px,6.7vw,128px);font-weight:700;letter-spacing:-.055em;line-height:.93}
.w-hero .kick .t .h-l{display:block}
.w-hero .kick .t .amp{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;margin-left:.06em}
.w-sub{margin:3vh auto 0;font-size:clamp(18px,1.55vw,25px);line-height:1.3;color:#333;max-width:46ch}
.w-pans{list-style:none;padding:0;align-self:stretch;margin:4.2vh calc(var(--m) * -1) 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid #000;border-bottom:2px solid #000}
.pan{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:3vh;min-height:clamp(236px,31vh,370px);padding:4vh 2vw 4.4vh;background:#fff;color:#000}
.pan2{background:#000;color:#fff}
.pan-t{margin:0;font-size:clamp(26px,3.3vw,56px);line-height:1;font-weight:700;letter-spacing:-.04em}
.pan3 .pan-t{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:clamp(28px,3.6vw,60px)}
.pan{overflow:hidden}
.w-anim .w-pans svg{clip-path:inset(0 100% 0 0);animation:w-reveal 0s 4.5s forwards}
@keyframes w-reveal{to{clip-path:inset(0 0 0 0)}}
.pan svg{display:block;width:calc(100% + 4vw);max-width:none;margin:0 -2vw;height:auto;flex:none}
.w-cta{align-self:center;margin-top:3.6vh;min-width:340px;border-top:0;background:#000;color:#fff;padding:20px 28px;text-align:left}
.w-cta .plus{transition:transform .45s var(--ease)}
.w-cta:hover,.w-cta:focus-visible{background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000}
.w-cta:hover .plus,.w-cta:focus-visible .plus{transform:rotate(90deg)}
.w-cta:focus-visible{outline:2px solid #000;outline-offset:4px}
.w-aud{list-style:none;margin:3.6vh 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1.4vh 0}
.w-aud li{padding:0 2.2vw;border-left:1px solid #000}
.w-aud li:first-child{border-left:0}
.w-aud a{display:block;font-size:clamp(16px,1.45vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.2;color:#000}
.w-aud a:hover,.w-aud a:focus-visible{text-decoration:underline;text-underline-offset:.2em}

/* 2 formats: one comparison. Every block has the same positions: length bar, term, offer, purpose, duration, explanation */
.w-fm{padding:13vh var(--m) 14vh}
.fm-top{display:flex;justify-content:space-between;align-items:baseline;gap:4vw}
.fm-top .sec{margin-bottom:0}
.fm-k{font-size:clamp(17px,1.4vw,22px);letter-spacing:-.015em;color:rgba(255,255,255,.85)}
.ways{list-style:none;margin:9vh 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:3.4vw}
.way{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start}
.fm-bar{display:block;position:relative;height:2px;background:rgba(255,255,255,.22);margin-bottom:3.6vh;align-self:start}
.fm-bar::before{content:"";position:absolute;left:0;top:0;height:2px;width:var(--l);background:#fff}
.fm-bar::after{content:"";position:absolute;top:-4px;left:var(--l);width:10px;height:10px;margin-left:-10px;border-radius:50%;background:#fff}
.term{display:block;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.7)}
.fm-n{margin:2.6vh 0 0;font-weight:700;font-size:clamp(25px,2.4vw,40px);letter-spacing:-.035em;line-height:1.05}
.fm-o{margin:2vh 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.8vw,29px);line-height:1.2}
.fm-dur{margin:4.2vh 0 0;padding-top:1.8vh;border-top:1px solid rgba(255,255,255,.4);font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(16px,1.3vw,21px);letter-spacing:-.01em}
.fm-d{margin:1.8vh 0 0;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:rgba(255,255,255,.7);max-width:32ch}
.flex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.4vw;margin:11vh 0 0;padding-top:2.6vh;border-top:1px dashed rgba(255,255,255,.55)}
.flex div{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:baseline}
.flex dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.flex dd{margin:0;font-size:16px;line-height:1.45;max-width:46ch}

/* 3 topics overview: a table. The question leads, the title is the second level, three columns show what each topic works through */
.w-ov{padding:12vh var(--m) 13vh}
.ov-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2.4vw;align-items:end}
.ov-top .sec{grid-column:1/-1;margin-bottom:3vh}
.ov-top .fw-k{grid-column:1/8}
.tq-head,.tq a{display:grid;grid-template-columns:clamp(48px,5vw,84px) minmax(0,1fr) repeat(3,minmax(0,clamp(120px,12.5vw,176px)));column-gap:1.6vw}
.tq-head{margin-top:8vh;padding-bottom:2.4vh;align-items:start}
.tq-head dl,.tq-head div{display:contents}
.tq-head div{display:block}
.tq-head dl{display:contents}
.tq-head dl>div{display:block;grid-column:auto}
.tq-head dl>div:nth-child(1){grid-column:3}.tq-head dl>div:nth-child(2){grid-column:4}.tq-head dl>div:nth-child(3){grid-column:5}
.tq-head dt{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.tq-head dd{margin:.8vh 0 0;font-size:clamp(14px,1.1vw,17px);line-height:1.3;color:#333;max-width:18ch}
.tq{list-style:none;margin:0;padding:0;border-bottom:1px solid #000}
.tq a{align-items:center;padding:3.2vh 0;border-top:1px solid #000;color:#000;transition:padding-left .45s var(--ease)}
.tq a:hover,.tq a:focus-visible{padding-left:1.2vw}
.tq-n{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,32px);line-height:1;-webkit-text-stroke:.045em currentColor}
.tq-q{display:block;font-weight:600;font-size:clamp(23px,2.4vw,41px);line-height:1.07;letter-spacing:-.032em;max-width:22ch}
.tq-t{display:block;margin-top:1.2vh;font-size:clamp(14px,1.05vw,16px);line-height:1.35;color:#333}
.tq-ms{display:contents}
.tq-m{display:flex;align-items:center;gap:10px}
.tq-m i{display:block;width:15px;height:15px;border-radius:50%;background:#000;border:1.5px solid #000}
.tq-m:not(.on) i{width:15px;height:2px;border-radius:0;border:0;background:#b5b5b5;margin:0}
.tq-m b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 4 audiences: six groups in one grid */
.w-env{padding:6vh var(--m) 14vh}
.w-env .fw-k{max-width:none;font-size:clamp(28px,3vw,52px);line-height:1.04}
.env{list-style:none;margin:7vh 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.4vw;row-gap:7vh}
.env li{border-top:2px solid #000;padding-top:2.8vh;font-size:clamp(21px,1.9vw,31px);line-height:1.14;letter-spacing:-.028em}
.env b{display:block;font-weight:700}
.env .it{display:block;margin-top:.6vh;letter-spacing:-.012em;font-size:.92em}

/* 5 the five topics in depth. One set of rules (label, question, description, quiet what-it-works-through row), five compositions chosen by what each topic explains */
.w-tp{--fg:#000;--bg:#fff;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2.4vw;align-content:center;padding:13vh var(--m)}
.w-tp.dark{--fg:#fff;--bg:#000}
.tp-head{grid-column:1/-1;grid-row:1;display:flex;align-items:baseline;gap:18px;margin-bottom:5.4vh}
.tp-n{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;line-height:1;letter-spacing:.01em;font-variant-numeric:lining-nums;-webkit-text-stroke:.045em currentColor}
.tp-name{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(14px,1.15vw,18px);letter-spacing:-.01em;line-height:1.25;max-width:46ch}
.tp-q{font-size:clamp(32px,3.9vw,64px);font-weight:700;letter-spacing:-.035em;line-height:1.03}
.tp-d{font-size:clamp(18px,1.4vw,22px);line-height:1.5;max-width:44ch}
.tp-fpd{display:flex;flex-wrap:wrap;gap:8px 22px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding-top:1.8vh;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 35%,transparent)}
.tp-fpd li{display:inline-flex;align-items:center;gap:8px;opacity:.55}
.tp-fpd li.on{opacity:1;font-weight:700}
.tp-fpd i{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor}
.tp-fpd li.on i{background:currentColor}
.tp-g{position:relative;color:var(--fg)}
.tp-g p,.tp-g li{margin:0}
.tp-g ol,.tp-g ul{list-style:none;margin:0;padding:0}
.tp-q,.tp-d,.tp-fpd,.tp-g{grid-row:auto}

/* 1 creative vision: a rising stair. Each stage lifts the next; the last stands solid */
.g1{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:1.6vw;align-items:start}
.g1 li{margin-top:calc((4 - var(--i)) * 64px);border-top:2px solid currentColor;padding-top:2.2vh}
.g1 li:last-child{border-top-width:6px}
.g1 svg{display:block;width:100%;max-width:150px;height:auto;overflow:visible}
.g1 span{display:block;margin-top:1.8vh;font-size:clamp(17px,1.5vw,23px);font-weight:600;line-height:1.2;letter-spacing:-.01em}

/* 2 operating model: the business model rests on the three things that carry it, above the base of execution */
.g2-top{border:1.5px solid currentColor;padding:20px 24px;font-size:clamp(17px,1.4vw,21px);font-weight:600}
.g2-legs{display:grid;grid-template-columns:repeat(3,1fr);column-gap:14px;margin-top:-1.5px;padding:0 4%}
.g2-legs li{min-height:150px;padding:16px 14px;background:var(--fg);color:var(--bg);font-size:clamp(15px,1.2vw,18px);font-weight:600;line-height:1.2}
.g2-base{margin-top:14px;border-top:3px solid currentColor;padding-top:12px;font-size:clamp(15px,1.2vw,18px);font-weight:600}
/* 3 sustainable growth: rings widen, the core stays the same */
.g3{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:28px;align-items:stretch}
.g3 svg{width:100%;height:auto;display:block;max-width:340px}
.g3 ul{display:flex;flex-direction:column;justify-content:space-between;padding:6% 0}
.g3 li{display:flex;align-items:center;gap:14px;font-size:clamp(15px,1.2vw,18px);line-height:1.2}
.g3 li::before{content:"";flex:none;width:30px;height:0;border-top:1.5px solid currentColor}
.g3 li b{font-weight:600}
/* 4 positioning and commercial strategy: three choices measured against one position; one stops short */
.g4{--x:66%;position:relative;padding-top:72px}
.g4-cap,.g4-pos{position:absolute;top:0;margin:0;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.g4-cap{left:0}.g4-pos{left:var(--x);transform:translateX(-50%);text-align:center;white-space:nowrap;top:26px}
.g4-line{position:absolute;left:var(--x);top:58px;bottom:0;border-left:2px dashed currentColor}
.g4-r{position:relative;height:74px}
.g4-r span{position:absolute;left:0;top:0;font-size:clamp(16px,1.3vw,20px);font-weight:600}
.g4-r i{position:absolute;left:0;bottom:16px;height:2px;width:calc(var(--x)*var(--k,1));background:currentColor}
.g4-r i::after{content:"";position:absolute;right:-7px;top:-6px;width:14px;height:14px;border-radius:50%;background:currentColor}
.g4-r.off i{--k:.74}
.g4-r.off i::after{background:var(--bg);border:2px solid currentColor;box-sizing:border-box}
/* 5 transformation: the operating structure continues through the new context and arrives in execution on a different level */
.g5-cap{margin:0 0 4vh;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.g5 ol{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:start}
.g5 li{position:relative;border-top:2px solid currentColor;padding:14px 14px 0 0;font-size:clamp(15px,1.2vw,18px);font-weight:600;line-height:1.3}
.g5 .z1{margin-top:130px}
.g5 .z2{margin-top:65px;border:1.5px dashed currentColor;padding:14px;margin-left:14px;margin-right:14px}
.g5 .z3{margin-top:0}
.g5 .z2::before,.g5 .z3::before{content:"";position:absolute;left:-16px;top:-2px;height:67px;border-left:2px solid currentColor}
.g5 .z3::before{left:-14px}



.g2-legs li{min-height:210px}
.tp-g .g2-base{margin-top:18px;border-top:5px solid currentColor;padding-top:12px;letter-spacing:.01em}
.g3 svg{max-width:420px}
.g4{--x:70%}.g4-r{height:84px}.g4-r span{font-size:clamp(17px,1.4vw,22px)}

/* where the frameworks come from: one reading moment, the years first */
.w-src{padding-bottom:10vh}
.src-top{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:5vw;align-items:end}
.src-yr{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(120px,15vw,240px);letter-spacing:-.06em;line-height:.74;margin-left:-.04em}
.src-cap{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:2.4vh}
.src-k{font-size:clamp(28px,2.8vw,48px);line-height:1.05;letter-spacing:-.03em;max-width:18ch}
.src-k .it{letter-spacing:-.01em}
.src-pr{margin-top:2.6vh;font-size:clamp(18px,1.5vw,24px);line-height:1.25;max-width:30ch;color:#222}
.src-led{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.4vw;margin-top:9vh}
.src-led div{padding-top:2vh;border-top:1px solid #000}
.src-led dt{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.6vw,26px);margin-bottom:1.2vh}
.src-led dd{font-size:clamp(17px,1.4vw,22px);letter-spacing:-.015em;line-height:1.35}
.src-led dd i{font-style:normal;font-weight:300;margin:0 .15em}
.src-why{margin-top:7vh;font-size:clamp(17px,1.35vw,21px);line-height:1.5;max-width:70ch}
.src-why b{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-right:.3em}
.src-why .ar{font-style:normal;margin:0 .5em 0 .1em;font-size:1.1em}

/* 6 experience: the reason for the offer. One quiet statement, not several loud ones */
.src-yr{font-size:clamp(84px,9vw,150px)}
.src-k{font-size:clamp(22px,2vw,34px);max-width:22ch}
.src-pr{font-size:clamp(16px,1.3vw,21px)}
.src-led div{border-top:1px solid #000}
.src-why{list-style:none;margin:8vh 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.4vw;max-width:none;position:relative}
.src-why::before{content:"";position:absolute;left:0;right:0;top:7px;border-top:1.5px solid #000}
.src-why li{position:relative;padding-top:34px;font-size:clamp(16px,1.3vw,20px);line-height:1.4;max-width:24ch}
.src-why li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#000}
.src-why li:nth-child(1)::before{background:#fff;border:1.5px solid #000;box-sizing:border-box}
.src-why b{display:block;margin:0 0 6px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* closing: a calm request */
.w-close{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:18vh}
.w-close .row{position:relative;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #fff;border-bottom:1px solid #fff;padding:2.6vh 1.2vw;cursor:pointer}
.w-close .row:focus-visible{outline-offset:-2px}
.w-close .word{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(44px,8.4vw,160px);letter-spacing:-.05em;line-height:.9}
.w-close .row .plus{font-size:clamp(28px,3vw,48px);font-weight:300}
.w-close .rows{margin-top:8vh;max-width:780px}
.cl-k{color:#fff;font-size:clamp(24px,2.4vw,40px);line-height:1.18;letter-spacing:-.02em;max-width:34ch;margin-bottom:10vh}
.w-close .crow{border-top:0;border-bottom:0;grid-template-columns:140px auto 1fr}
.w-close .crow .plus{justify-self:start;margin-left:28px}
.w-close .crow .k{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;font-variation-settings:normal;text-transform:none;letter-spacing:0;font-size:clamp(20px,1.6vw,24px)}



/* overview rows below desktop: number, question and title, then only the columns the topic works through */
@media (max-width:1100px){
  .tq a{display:grid;grid-template-columns:clamp(40px,6vw,64px) minmax(0,1fr);column-gap:18px;row-gap:1.8vh;padding:2.8vh 0;align-items:start}
  .tq-n{grid-column:1;grid-row:1/3}
  .tq-main{grid-column:2;grid-row:1}
  .tq-ms{display:flex;flex-wrap:wrap;gap:6px 22px;grid-column:2;grid-row:2}
  .tq-m{font-size:12px}
  .tq-m:not(.on){display:none}
  .tq-m b{position:static;width:auto;height:auto;clip:auto;font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
  .tq-head{margin-top:5vh;padding-bottom:3vh;display:block}
  .tq-head dl{display:block}.tq-head dl>div{display:flex;flex-wrap:wrap;gap:0 10px;margin-bottom:1.2vh;grid-column:auto}
  .tq-head dt{font-size:12.5px}.tq-head dd{margin:0;font-size:14px;max-width:none}
}

/* compositions (desktop) */
@media (min-width:1101px){
  /* 1: question and description side by side, the stair across the full width below */
  .tp1 .tp-q{grid-column:1/8;grid-row:2}
  .tp1 .tp-d{grid-column:8/-1;grid-row:2;align-self:end;margin:0}
  .tp1 .tp-fpd{grid-column:1/-1;grid-row:3;margin-top:5vh}
  .tp1 .tp-g{grid-column:1/-1;grid-row:4;margin-top:6vh}
  /* 2: the structure on the left, the words on the right */
  .tp2 .tp-g{grid-column:1/7;grid-row:2/5;align-self:center}
  .tp2 .tp-q{grid-column:8/-1;grid-row:2}
  .tp2 .tp-d{grid-column:8/-1;grid-row:3;margin-top:4vh}
  .tp2 .tp-fpd{grid-column:8/-1;grid-row:4;margin-top:5vh;align-self:start}
  /* 3: centered, the core in the middle; question, explanation and drawing close together */
  .tp3{padding:9vh var(--m)}
  .tp3 .tp-head{justify-content:center;margin-bottom:3.6vh}
  .tp3 .tp-q{grid-column:3/11;grid-row:2;text-align:center}
  .tp3 .tp-d{grid-column:4/10;grid-row:3;margin:3vh auto 0;text-align:center}
  .tp3 .tp-fpd{grid-column:4/10;grid-row:4;margin-top:3vh;justify-content:center}
  .tp3 .tp-g{grid-column:3/11;grid-row:5;margin-top:5vh}
  .tp3 .g3{max-width:620px;margin:0 auto;grid-template-columns:auto minmax(0,1fr);column-gap:40px;align-items:center}
  .tp3 .g3 svg{max-width:270px}
  /* 4: question on top, the comparison and its explanation side by side */
  .tp4{padding:10vh var(--m)}
  .tp4 .tp-q{grid-column:1/10;grid-row:2}
  .tp4 .tp-g{grid-column:1/8;grid-row:3/5;margin-top:5vh}
  .tp4 .tp-d{grid-column:9/-1;grid-row:3;margin-top:5vh;align-self:start}
  .tp4 .tp-fpd{grid-column:9/-1;grid-row:4;margin-top:4vh;align-self:start}
  .tp4 .g4{--x:70%;padding-top:64px}.tp4 .g4-r{height:62px}.tp4 .g4-r span{font-size:clamp(16px,1.25vw,19px)}.tp4 .g4-pos{top:24px}.tp4 .g4-line{top:54px}
  /* 5: a wide question on top, the words left and the transition right below it */
  .tp5 .tp-q{grid-column:1/11;grid-row:2}
  .tp5 .tp-d{grid-column:1/6;grid-row:3;margin-top:5vh}
  .tp5 .tp-fpd{grid-column:1/6;grid-row:4;margin-top:4vh;align-self:start}
  .tp5 .tp-g{grid-column:7/-1;grid-row:3/5;align-self:start;margin-top:5vh}
}
@media (min-width:1101px){.tp2,.tp5{min-height:calc(100svh - 40px)}}

/* tablet */
@media (max-width:1100px) and (min-width:761px){
  .pan{padding:3.4vh 1.6vw}.pan svg{width:calc(100% + 3.2vw);margin:0 -1.6vw}
  .tp-q,.tp-d,.tp-fpd,.tp-g{grid-column:1/-1}
  .tp-d{margin-top:3.4vh}.tp-fpd{margin-top:4vh}.tp-g{margin-top:6vh;max-width:680px}
  .tp4 .tp-g{max-width:none}
  .tp3 .tp-q,.tp3 .tp-d,.tp3 .tp-fpd{text-align:left;justify-content:flex-start;margin-left:0}
  .g1{grid-template-columns:1fr;row-gap:2vh}.g1 li{margin-top:0;display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:22px;align-items:center;padding-top:2vh}.g1 span{margin:0}
  .ov-top .fw-k{grid-column:1/-1}
  .env{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ways{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-height:620px) and (min-width:761px){.w-tp{min-height:0;padding:9vh var(--m)}.w-hero{min-height:0;padding-bottom:9vh}.w-hero .kick{margin-top:5vh}}

/* phone: its own arrangement, offer and request early */
@media (max-width:760px){
  .w-sec{padding:8vh var(--m)}.sec{margin-bottom:3vh}
  .w-hero{min-height:0;padding-bottom:6vh}
  .w-hero .kick{margin-top:7vh}
  .w-hero .kick .t{font-size:clamp(36px,11.4vw,54px);font-stretch:100%;font-variation-settings:normal;letter-spacing:-.045em}
  .w-sub{order:1;font-size:18px;margin-top:3vh}
  .w-cta{order:2;min-width:0;width:100%;margin-top:3.6vh}
  .w-pans{order:3;grid-template-columns:1fr;margin-top:5vh}
  .pan{min-height:0;flex-direction:row;justify-content:space-between;text-align:left;padding:3vh var(--m);gap:4vw}
  .pan-t{font-size:clamp(22px,6.4vw,30px)}.pan3 .pan-t{font-size:clamp(24px,6.9vw,32px)}
  .pan svg{width:46%;max-width:210px;height:auto;margin:0;flex:none}.pan-t{flex:1;min-width:0}
  .w-aud{order:4;flex-direction:column;align-items:center;margin-top:4vh}
  .w-aud li{border-left:0;padding:.9vh 0}.w-aud a{font-size:19px}
  .w-fm{padding:9vh var(--m)}
  .fm-top{display:block}.fm-top .sec{margin-bottom:2vh}
  .ways{display:block;margin-top:6vh}
  .way{display:block;padding-bottom:6vh}
  .fm-n{font-size:28px}.fm-o{font-size:23px}.fm-dur{font-size:17px;margin-top:3vh}.fm-d{max-width:none;font-size:16px}
  .flex{grid-template-columns:1fr;row-gap:2.4vh;margin-top:3vh}.flex div{grid-template-columns:1fr;row-gap:4px}
  .w-ov{padding:8vh var(--m)}
  .ov-top .fw-k{grid-column:1/-1}
  .tq-head{margin-top:5vh;padding-bottom:3vh;display:block}
  .tq-head dl{display:block}.tq-head dl>div{display:flex;flex-wrap:wrap;gap:0 10px;margin-bottom:1.2vh}
  .tq-head dt{font-size:12.5px}.tq-head dd{margin:0;font-size:14px;max-width:none}
  .tq-q{font-size:24px;max-width:none}.tq-n{font-size:22px}
  .w-env{display:block;padding:4vh var(--m) 9vh}
  .env{grid-template-columns:1fr;row-gap:3.6vh;margin-top:4vh}.env li{font-size:22px}
  .w-tp{display:block;min-height:0;padding:9vh var(--m)}
  .tp-head{margin-bottom:3.4vh}.tp-n{font-size:24px}.tp-name{font-size:15px}
  .tp-q{font-size:clamp(30px,8.6vw,38px)}
  .tp-d{margin-top:3vh;font-size:18px}
  .tp-fpd{margin-top:3vh;gap:8px 14px;font-size:12.5px;letter-spacing:.06em}
  .tp-g{margin-top:5vh}
  .g1{grid-template-columns:1fr;row-gap:2vh}.g1 li{margin-top:0;display:grid;grid-template-columns:90px minmax(0,1fr);column-gap:16px;align-items:center;padding-top:1.6vh}.g1 span{margin:0;font-size:17px}
  .g2-top{padding:16px 16px;font-size:17px}.g2-legs{column-gap:8px;padding:0 2%}.g2-legs li{min-height:120px;padding:12px 10px;font-size:15px}
  .g3{grid-template-columns:1fr;row-gap:24px}.g3 svg{max-width:280px;margin:0 auto}.g3 ul{flex-direction:column;gap:18px;padding:0}
  .g4{--x:62%}.g4-r{height:74px}.g4-r span{font-size:16px}
  .g5 ol{display:block}.g5 li{border-top:0;border-left:2px solid currentColor;padding:2px 0 2px 14px;margin:0 0 18px}
  .g5 .z1{margin-left:0;margin-top:0}.g5 .z2{margin:0 0 18px 22px;border:0;border-left:2px dashed currentColor;padding:2px 0 2px 14px}.g5 .z3{margin-left:44px}
  .g5 .z2::before,.g5 .z3::before{display:none}
  .src-top{grid-template-columns:1fr;row-gap:3vh}.src-yr{font-size:96px}
  .src-led{grid-template-columns:1fr;row-gap:3vh;margin-top:6vh}
  .src-why{grid-template-columns:1fr;row-gap:22px;margin-top:5vh}.src-why::before{display:none}.src-why li{padding:0 0 0 30px;max-width:none}.src-why li::before{top:4px;width:14px;height:14px}
  .cl-k{margin-bottom:8vh}
  .w-close .crow{grid-template-columns:90px auto 1fr}.w-close .crow .plus{margin-left:18px}
}
@media (prefers-reduced-motion:reduce){.w-cta .plus,.tq a{transition:none}}
@media (min-width:1101px){.tp3 .g3 ul{gap:34px;padding:0;justify-content:center}}

/* the two section words are headlines: Formats and Workshop Topics must be read at once */
.w-fm .fm-top .sec,.w-ov .ov-top .sec{font-stretch:100%;font-variation-settings:normal;font-size:clamp(36px,5.4vw,92px);font-weight:700;letter-spacing:-.045em;line-height:.92;text-transform:uppercase}
.w-fm .fm-top{align-items:flex-end;flex-wrap:wrap}
.w-ov .ov-top .sec{margin-bottom:4vh}
@media (max-width:760px){.w-fm .fm-top .sec,.w-ov .ov-top .sec{font-size:clamp(34px,10.4vw,48px)}.w-fm .fm-top .sec{margin-bottom:2.4vh}.w-ov .ov-top .sec{margin-bottom:3vh}}

/* phones: the closing section never grows past the visible screen, so the sentence stays fully readable when the button scrolls here (Lena 09.10.2026) */
@media (max-width:760px){.w-close{padding-top:max(16vh,112px)}.w-close .cl-k{margin-bottom:7vh}}