/* WebWerkstatt landing (/angebote/webwerkstatt & webwerkstatt.li) — redesign version, light + dark via site variables.
   Sara 2026-10-27. Loaded after css/dh-theme.css. Palette: #31beb0 #FF8577 #e3e1db #55575a #313131. */
.ww-page{--ww-card:#fff;--ww-accent:#1E7C73;--ww-frame:#31beb0;--ww-glass:rgba(255,255,255,.78);--ww-stroke:#55575a;--ww-splat:.2;position:relative;overflow:clip}
html[data-theme="dark"] .ww-page{--ww-card:var(--soft);--ww-accent:#31beb0;--ww-frame:#FF8577;--ww-glass:rgba(255,255,255,.06);--ww-stroke:rgba(255,255,255,.42);--ww-splat:.42}
.ww-page>section,.ww-page>.ww-oder{position:relative;z-index:1}
/* paint splats: decorative, palette only, softer on light paper */
.ww-splats{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ww-splat{position:absolute;max-width:none;height:auto;opacity:var(--ww-splat);-webkit-user-select:none;user-select:none}
.ww-splat--a{width:min(680px,70vw);top:760px;right:-16%;transform:rotate(18deg)}
.ww-splat--b{width:min(620px,64vw);top:31%;right:-18%;transform:rotate(16deg)}
.ww-splat--c{width:min(560px,58vw);top:60%;left:-16%;transform:rotate(-160deg)}
.ww-splat--d{width:min(420px,48vw);top:84%;right:-12%;transform:rotate(22deg)}
@media (max-width:700px){.ww-splat--a{top:760px;right:-38%}.ww-splat--b{right:-40%}.ww-splat--c{left:-40%}.ww-splat--d{display:none}}
.ww-page .lede{margin-top:16px}
.ww-hl{color:var(--ww-accent)}
/* teal full stops: #31BEB0 as the rest of the site, slightly heavier, with a faint Black edge on light paper so they read */
.ww-page h1 .lime-dot,.ww-page h2 .lime-dot{font-weight:700}
html:not([data-theme="dark"]) .ww-page h1 .lime-dot,html:not([data-theme="dark"]) .ww-page h2 .lime-dot{-webkit-text-stroke:1px rgba(49,49,49,.22);paint-order:stroke fill}
.ww-page section .eyebrow{color:var(--ww-accent)}
.ww-page section h2{font-size:clamp(2rem,3.8vw,2.9rem)}
/* hero: full-width cover image behind the title, paper (light) or #313131 (dark) gradient on the text side */
.ww-page>.ww-hero{position:relative;z-index:1;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(520px,68vh,640px);padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.ww-hero-bg{position:absolute;inset:0;z-index:-1}
.ww-hero-bg picture{display:block;height:100%}
.ww-page .ww-hero-bg img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 50%;display:block;border-radius:0}
.ww-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 18%,color-mix(in srgb,var(--paper) 96%,transparent) 38%,color-mix(in srgb,var(--paper) 72%,transparent) 58%,color-mix(in srgb,var(--paper) 18%,transparent) 82%,transparent 100%),linear-gradient(0deg,var(--paper) 0,transparent 90px)}
html[data-theme="dark"] .ww-hero-bg::after{background:linear-gradient(90deg,#313131 0%,rgba(49,49,49,.94) 34%,rgba(49,49,49,.72) 56%,rgba(49,49,49,.25) 82%,rgba(49,49,49,.05) 100%),linear-gradient(0deg,#313131 0,transparent 90px)}
.ww-hero-copy{position:relative}
.ww-hero-copy>*{max-width:40rem}
.ww-hero h1{margin-top:6px}
@media (max-width:767px){
  .ww-page>.ww-hero{align-items:flex-start;min-height:0;padding-top:40px;padding-bottom:clamp(200px,58vw,260px)}
  .ww-page .ww-hero-bg img{object-position:10% 50%}
  .ww-hero-bg::after{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 22%,color-mix(in srgb,var(--paper) 94%,transparent) 48%,color-mix(in srgb,var(--paper) 55%,transparent) 66%,transparent 84%),linear-gradient(0deg,var(--paper) 0,transparent 48px)}
  html[data-theme="dark"] .ww-hero-bg::after{background:linear-gradient(180deg,#313131 0%,rgba(49,49,49,.92) 48%,rgba(49,49,49,.55) 66%,rgba(49,49,49,.08) 84%),linear-gradient(0deg,#313131 0,transparent 48px)}
}
.ww-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.ww-avatars{display:inline-flex;margin-left:6px}
.ww-avatars img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:3px solid var(--paper)}
.ww-avatars img+img{margin-left:-12px}
/* buttons */
.ww-btn-reg{background:rgba(49,190,176,.14);border:1px solid rgba(49,190,176,.6);color:var(--ink)}
.ww-btn-reg:hover,.ww-btn-reg:focus-visible{background:#31beb0;border-color:#31beb0;color:#313131}
html[data-theme="dark"] .ww-btn-reg{background:rgba(49,190,176,.16);border-color:#31beb0;color:#fff}
html[data-theme="dark"] .ww-btn-reg:hover,html[data-theme="dark"] .ww-btn-reg:focus-visible{background:#31beb0;color:#313131}
.ww-page a.btn.ww-btn-dark{background:#313131;color:#fff!important;border-color:#313131;align-self:flex-start}
.ww-page a.btn.ww-btn-dark:hover,.ww-page a.btn.ww-btn-dark:focus-visible{background:#fff;color:#313131!important;border-color:#fff}
.ww-page .btn svg{flex:none}
/* why: tilted glass cards (01–04) with shimmer gradient edge */
@keyframes wwBorderShimmer{to{background-position:240% center}}
.ww-pain-grid{display:grid;gap:1.1rem;margin-top:2rem}
@media (min-width:700px){.ww-pain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ww-pain{position:relative;background:var(--ww-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:20px;padding:1.25rem 1.35rem;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .35s}
.ww-pain::before{content:"";position:absolute;inset:0;border-radius:20px;padding:2px;background:linear-gradient(90deg,#FF8577,#FF8577,#31beb0,#9ee5dd,#31beb0,#FF8577,#FF8577);background-size:240% auto;background-position:0 center;animation:wwBorderShimmer 7s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);pointer-events:none}
.ww-pain:nth-child(odd){transform:rotate(-.7deg)}
.ww-pain:nth-child(even){transform:rotate(.7deg)}
.ww-pain:nth-child(2)::before{animation-delay:-1.5s}
.ww-pain:nth-child(3)::before{animation-delay:-3s}
.ww-pain:nth-child(4)::before{animation-delay:-4.5s}
.ww-pain:hover{transform:translateY(-3px) rotate(0);box-shadow:0 16px 32px -20px rgba(37,156,144,.38)}
.ww-pain-top{display:flex;align-items:baseline;gap:.85rem;margin-bottom:.45rem}
.ww-n{flex:none;font-size:clamp(1.85rem,3.2vw,2.35rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ww-accent);font-variant-numeric:tabular-nums}
html[data-theme="dark"] .ww-pain .ww-n{color:#FF8577}
.ww-pain h3,.ww-step h3,.ww-astep h3{margin:0}
.ww-pain p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.6;max-width:36ch}
/* two ways */
.ww-way-grid{display:grid;gap:22px}
@media (min-width:768px){.ww-way-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ww-way{display:flex;flex-direction:column;gap:10px;border-radius:var(--radius);padding:clamp(26px,3.5vw,40px);color:#313131;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.ww-way:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 18px 40px rgba(49,49,49,.16)}
.ww-way--kurs{background:#FF8577;background-image:radial-gradient(60% 70% at 0 100%,rgba(49,190,176,.35),transparent 60%),linear-gradient(120deg,#FF8577,#FF8577 55%,#FF8577)}
.ww-way--auftrag{background:#31beb0;background-image:radial-gradient(70% 80% at 90% 10%,rgba(255,133,119,.4),transparent 55%),linear-gradient(135deg,#31beb0,#5fcdc1 60%,#31beb0)}
.ww-way-label{margin:0;font-size:12px;font-weight:600;letter-spacing:.16em;color:#313131}
main .ww-way h3{font-size:clamp(1.6rem,2.6vw,2.1rem)!important;font-weight:700!important;letter-spacing:-.035em;line-height:1.05;margin:4px 0 0;color:#313131}
.ww-way p{margin:0;color:#313131;line-height:1.6}
.ww-way .btn{margin-top:auto}
.ww-way p+.btn{margin-top:18px}
.ww-price{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:6px 0 4px}
.ww-way .ww-price{color:#313131}
.ww-price--xl{font-size:clamp(2.4rem,5vw,3.6rem);margin:18px 0 8px;color:var(--ink)}
html[data-theme="dark"] .ww-paket .ww-price--xl{color:#FF8577}
.ww-page .ww-auftrag .ww-price--xl{font-size:clamp(1.7rem,3vw,2.3rem);margin:10px 0 0;color:var(--ww-accent)}
/* timeline */
.ww-timeline{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:22px;position:relative;--ww-tl-p:1}
.ww-step{position:relative}
.ww-marker{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#31BEB0;color:#313131;font-weight:700;font-size:16px;box-shadow:0 0 0 6px rgba(49,190,176,.28);margin-bottom:18px;position:relative;z-index:1;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ww-step:hover .ww-marker{transform:translateY(-3px) scale(1.08)}
.ww-step p{margin:8px 0 0;color:var(--muted);line-height:1.6}
.ww-meta{font-size:12px!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
main .ww-step h3,main .ww-astep h3,main .ww-pain h3{font-size:clamp(1.08rem,1.5vw,1.25rem)!important;font-weight:700!important;letter-spacing:-.02em;line-height:1.25}
@media (min-width:900px){
  .ww-timeline{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .ww-timeline::before,.ww-timeline::after{content:"";position:absolute;top:23px;left:24px;right:calc(25% - 24px + 7px);height:3px;border-radius:9px;background:var(--line)}
  .ww-timeline::after{background:linear-gradient(90deg,#FF8577,#31beb0);transform-origin:left center;transform:scaleX(var(--ww-tl-p));transition:transform .2s linear}
}
@media (max-width:899px){
  .ww-step{padding-left:68px;min-height:48px}
  .ww-marker{position:absolute;left:0;top:-4px;margin:0}
  .ww-timeline::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:3px;border-radius:9px;background:var(--line)}
}
/* paket + add-ons */
.ww-paket-grid{display:grid;gap:clamp(28px,5vw,64px);align-items:start}
@media (min-width:900px){.ww-paket-grid{grid-template-columns:1.05fr .95fr}}
.ww-list{list-style:none;margin:18px 0 0;padding:0}
.ww-list li{padding:12px 0;border-bottom:1px solid var(--line)}
.ww-list--plain li{border:0;padding:4px 0;color:var(--muted)}
.ww-addons{background:var(--ww-card);border:2px solid var(--ww-frame);border-radius:var(--radius);overflow:hidden}
.ww-addons summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;list-style:none}
.ww-addons summary::-webkit-details-marker{display:none}
.ww-addons summary .eyebrow{display:block;margin:0}
.ww-addons-title{display:block;margin-top:4px;font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.ww-chev{flex:none;color:var(--ww-accent);transition:transform .25s}
.ww-addons[open] .ww-chev{transform:rotate(180deg)}
.ww-addons-intro{margin:0;padding:0 22px 6px;color:var(--muted)}
.ww-addons ul{list-style:none;margin:0;padding:0 22px 8px}
.ww-add{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:14px 0;border-top:1px solid var(--line)}
.ww-add h4{margin:0;font-size:1rem;font-weight:700;color:var(--ww-accent)}
.ww-add p{margin:2px 0 0;font-size:.95rem;color:var(--muted);line-height:1.55}
.ww-add .ww-add-who{color:var(--ink)}
.ww-add-price{text-align:right;font-size:.95rem;color:var(--muted)}
.ww-add-price strong{display:block;color:var(--ww-accent)}
/* «oder» */
.ww-oder{display:flex;justify-content:center;margin:0;padding:8px 20px;font-size:clamp(4.5rem,14vw,10rem);font-weight:700;letter-spacing:-.02em;line-height:1;text-transform:lowercase}
.ww-oder span{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px var(--ww-stroke);transition:transform .4s cubic-bezier(.16,1,.3,1),-webkit-text-fill-color .35s,-webkit-text-stroke-color .35s;cursor:default}
.ww-oder span:nth-child(odd):hover{-webkit-text-fill-color:#FF8577;-webkit-text-stroke-color:#FF8577;transform:translateY(-.12em) rotate(-5deg)}
.ww-oder span:nth-child(even):hover{-webkit-text-fill-color:#31beb0;-webkit-text-stroke-color:#31beb0;transform:translateY(-.12em) rotate(5deg)}
/* auftrag steps */
.ww-astep-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:18px}
@media (min-width:768px){.ww-astep-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ww-astep{border-radius:var(--radius);padding:24px;color:#313131;background:#31beb0;background-image:radial-gradient(70% 80% at 90% 10%,rgba(255,133,119,.35),transparent 55%),linear-gradient(135deg,#31beb0,#5fcdc1);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.ww-astep:hover{transform:translateY(-4px)}
.ww-astep .ww-n{color:#313131;font-size:1.35rem}
main .ww-astep h3{margin-top:12px;color:#313131}
.ww-astep p{margin:8px 0 0;color:#313131;line-height:1.6}
/* registration */
.ww-an-grid{display:grid;gap:24px;align-items:start}
@media (min-width:900px){.ww-an-grid{grid-template-columns:1.35fr .65fr}}
.ww-reg-card{background:var(--ww-card);border:2px solid var(--ww-frame);border-radius:var(--radius);padding:clamp(26px,4vw,44px)}
.ww-reg-intro{color:var(--muted);margin:12px 0 0}
.ww-reg{margin-top:24px;display:grid;gap:20px}
.ww-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ww-tabs button{font:inherit;font-size:15px;font-weight:600;min-height:44px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.ww-tabs button[aria-selected="true"]{background:#313131;border-color:#313131;color:#fff}
html[data-theme="dark"] .ww-tabs button[aria-selected="true"]{background:#FF8577;border-color:#FF8577;color:#313131}
.ww-tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[data-ww-panel][hidden]{display:none!important}
[data-ww-panel] .small-label{margin:0 0 10px}
.ww-dates{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:600px){.ww-dates{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ww-date{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;transition:border-color .2s,background .2s,transform .2s}
.ww-date:hover,.ww-date:focus-visible{border-color:#31beb0;background:rgba(49,190,176,.14);transform:translateY(-1px)}
.ww-date-cta{display:inline-flex;color:var(--ww-accent);transition:transform .2s}
.ww-date:hover .ww-date-cta{transform:translateX(3px)}
.ww-dates-note{color:var(--muted);font-size:.95rem}
.ww-q{background:var(--ww-card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,32px)}
main .ww-q h3{margin:6px 0 10px;font-size:clamp(1.5rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.03em}
.ww-q p{color:var(--muted);margin:0}
.ww-q .ww-list{margin:14px 0 18px}
@media (prefers-reduced-motion:reduce){.ww-pain,.ww-way,.ww-astep,.ww-marker,.ww-date,.ww-oder span{transition:none}.ww-pain::before{animation:none}.ww-way:hover,.ww-astep:hover,.ww-date:hover{transform:none}.ww-pain:nth-child(odd):hover{transform:rotate(-.7deg)}.ww-pain:nth-child(even):hover{transform:rotate(.7deg)}.ww-timeline::after{transition:none}}