/* ==========================================================================
   K-WERKSTATT (28.09.2026) · Seite /ki-werkstatt/ (site/ki-werkstatt/index.html) · nur diese Seite lädt die Datei
   styles.css, site.js und alle anderen Seiten bleiben unberührt. Tokens (Farben, Schriften, Abstände) kommen aus styles.css.
   Aufbau: 1 Auftakt + 2 Tage (eine Bühne) · 3 Ergebnisse (Apple-Karten) · 4 Beispiel · 5 Paket · 6 Person.
   Vorbild Karten: Apple-Produktseiten am Handy (ein Gedanke, ein großes Element, viel Leere, Plakatwort; darunter
   „Fett. Rest grau.“). Maße in den Karten in cqi (1 cqi = 1 % Kartenbreite), wie K-LEISTUNGEN-APPLE.
   Bewegung: nur transform/opacity. Grundzustand = Endbild; ohne JS, mit ?static=1 und bei reduzierter Bewegung steht alles still.
   Kontrast (WCAG, gerechnet):
     Karte Erde   #F5F1EB auf #211C19 14,99 · Kopf #C9A87C 7,53
     Karte Moos   #FFFFFF auf #3F5B45  7,43 · Kopf rgb(255 255 255/.74) ≈ 4,9
     Karte Stein  #2A2521 auf #E2DCD3 11,13 · Kopf #675D54 4,71
     Beispiel     #B8ADA2 auf #221D1A  7,6
   ========================================================================== */
.p-ki-werkstatt{--kw-r:34px;--kw-r-s:22px;--kw-ease:cubic-bezier(.65,0,.35,1);--kw-out:cubic-bezier(.22,.61,.36,1)}
.p-ki-werkstatt .kw-h2{font-size:clamp(2.125rem,1.6rem + 1.9vw,3rem);line-height:1.1;letter-spacing:-.025em}
.kw-sub{margin-top:1rem;max-width:34rem;font-size:1.1875rem;line-height:1.45;color:var(--text-soft)}
.kw-kopf{margin-bottom:3rem}
.kw-nw{white-space:nowrap}
.kw-ok{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--moss-tint);color:var(--moss)}
.kw-ok .i{width:15px;height:15px;stroke-width:2.2}
.kw-btn{padding:1.0625rem 1.625rem;font-size:1.0625rem;gap:.625rem}
.kw-btn .i-arrow{transition:translate .25s var(--kw-out)}
.kw-btn:hover .i-arrow{translate:3px 0}

/* ==========================================================================
   1 + 2 · Auftakt und Tage: ein Raster, rechts die Bühne
   ========================================================================== */
.kw-auftakt{display:grid;grid-template-columns:minmax(0,1fr);padding-top:calc(var(--nav-h) + 2rem);padding-bottom:var(--sec-l)}
.kw-hero__eb{color:var(--bronze)}
.kw-hero__h1{margin-top:1.125rem;font-family:var(--font-serif);font-weight:var(--head-wght);color:var(--ink-head);
  font-size:min(11.4vw,4rem);line-height:1.02;letter-spacing:-.03em;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.kw-l{display:block}
.kw-hero__lead{margin-top:1.25rem;max-width:30rem;font-size:1.1875rem;line-height:1.45;color:var(--text)}
.kw-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.kw-chips li{display:inline-flex;align-items:center;gap:.5rem;padding:.4375rem .875rem .4375rem .6875rem;border-radius:var(--r-pill);
  background:#fff;box-shadow:var(--sh-ring);font:500 .875rem/1.3 var(--font-sans);letter-spacing:-.005em;color:var(--text)}
.kw-chips .i{width:1rem;height:1rem;color:var(--bronze)}
.kw-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2rem}
.kw-hero__tlink .i-arrow{width:1rem;height:1rem}
/* Badge-Block: Original-PNG in fester Höhe, Haarlinie in Badgehöhe, sachliche Zeile (Muster K-BADGE .badge-sig, größer) */
.kw-badge{display:flex;align-items:center;gap:1.5rem;width:fit-content;max-width:100%;margin:2.75rem 0 0;padding-top:2.25rem;border-top:1px solid var(--line)}
.kw-badge__img{flex:none;display:block;width:auto;height:104px;max-width:none}
.kw-badge__t{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-left:1.5rem;border-left:1px solid var(--badge-hair,rgb(115 90 54/.5));
  font:500 .6875rem/1.7 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-deep)}
.kw-badge__t > span{display:block}

.kw-tage-kopf{padding-top:var(--sec-l)}
/* Bühne: Motiv e165 in einer Leinwand, die per transform zu einem Sockel fährt.
   --z = Zoom relativ zur „cover“-Größe, --fx/--fy = Blickpunkt im Bild (0–1). clamp() hält die Bildkanten im Rahmen. */
.kw-buehne-wrap{position:relative;z-index:3}
.kw-buehne{position:relative;margin:0;container-type:size;aspect-ratio:4/3;overflow:hidden;isolation:isolate;border-radius:var(--kw-r);background:#DCD3C8;
  box-shadow:0 1px 2px rgb(34 29 26/.05),0 30px 60px -34px rgb(34 29 26/.35)}
.kw-leinwand{--z:1;--fx:.5;--fy:.5;--wc:max(100cqw,150cqh);position:absolute;left:0;top:0;width:var(--wc);height:calc(var(--wc) / 1.5);transform-origin:0 0;
  transform:translate(clamp(calc(100cqw - var(--z) * var(--wc)),calc(50cqw - var(--fx) * var(--z) * var(--wc)),0px),
                      clamp(calc(100cqh - var(--z) * var(--wc) / 1.5),calc(50cqh - var(--fy) * var(--z) * var(--wc) / 1.5),0px)) scale(var(--z));
  transition:transform 1.3s var(--kw-ease)}
.kw-leinwand picture{display:contents}
.kw-leinwand img{display:block;width:100%;height:100%;object-fit:cover}
[data-step="1"] .kw-leinwand{--z:1.9;--fx:.25;--fy:.54}
[data-step="2"] .kw-leinwand{--z:1.9;--fx:.5;--fy:.5}
[data-step="3"] .kw-leinwand{--z:1.35;--fx:.74;--fy:.34}
/* Segment-Pille unten links: Samen · Setzling · Baum */
.kw-segment{position:absolute;z-index:2;left:14px;bottom:14px;display:flex;gap:2px;padding:4px;border-radius:var(--r-pill);
  background:rgb(250 248 245/.66);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);box-shadow:0 1px 2px rgb(34 29 26/.08),0 8px 20px -10px rgb(34 29 26/.3)}
.kw-segment__b{min-height:36px;padding:0 .9375rem;border:0;border-radius:var(--r-pill);background:none;color:var(--text);
  font:500 .8125rem/1 var(--font-sans);letter-spacing:0;transition:background-color .35s var(--kw-out),color .35s var(--kw-out),box-shadow .35s var(--kw-out)}
.kw-segment__b:hover{color:var(--ink)}
.kw-segment__b[aria-current="step"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgb(34 29 26/.12),0 3px 8px -3px rgb(34 29 26/.2)}

/* Die Tage */
.kw-tag{display:flex;flex-direction:column;justify-content:center;padding-block:3rem}
.kw-tag__kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.p-ki-werkstatt .kw-pill-tag{--pill:var(--moss);font-size:.875rem;padding:7px 13px}
.p-ki-werkstatt .kw-pill-tag--opt{background:#fff;color:var(--bronze);box-shadow:inset 0 0 0 1.5px rgb(115 90 54/.45)}
.p-ki-werkstatt .kw-pill-opt{font-size:.8125rem;padding:6px 11px}
.kw-tag__h{margin-top:1.125rem;font-family:var(--font-serif);font-weight:var(--head-wght);color:var(--ink-head);
  font-size:clamp(2rem,1.5rem + 1.6vw,2.75rem);line-height:1.08;letter-spacing:-.025em;font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.kw-tag__liste{display:grid;gap:.625rem;margin-top:1.25rem;max-width:30rem}
.kw-tag__liste li{position:relative;padding-left:1.375rem;font-size:1.0625rem;line-height:1.5;color:var(--text)}
.kw-tag__liste li::before{content:"";position:absolute;left:.125rem;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--champagne)}
.kw-abend{display:flex;align-items:center;gap:.875rem;width:fit-content;max-width:100%;margin-top:1.625rem;padding:.875rem 1.25rem .875rem .875rem;border-radius:18px;
  background:#fff;box-shadow:var(--sh-ring);font-size:1.0625rem;line-height:1.35;color:var(--ink)}
.kw-abend__l{display:block;font:500 .6875rem/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.1875rem}
.kw-abend strong{font-weight:500}
.kw-abend--opt{background:rgb(255 255 255/.55);box-shadow:inset 0 0 0 1.5px rgb(115 90 54/.28)}
.kw-abend--opt .kw-ok{background:var(--bronze-tint);color:var(--bronze)}

/* Desktop: zwei Spalten, Bühne sticky über Hero und Tage */
@media (min-width:992px){
  .kw-auftakt{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,5.5vw,5.5rem);padding-top:calc(var(--nav-h) + 3.5rem)}
  .kw-hero{grid-column:1;grid-row:1}
  .kw-tage-kopf{grid-column:1;grid-row:2}
  .kw-tag{grid-column:1;min-height:74vh;justify-content:flex-start;padding-block:2rem 4rem}
  #tag-1{grid-row:3} #tag-2{grid-row:4} #tag-3{grid-row:5}
  .kw-buehne-wrap{grid-column:2;grid-row:1 / 6;align-self:start;position:sticky;top:calc(var(--nav-h) + 3.5rem)}
  .kw-buehne{max-height:calc(100vh - var(--nav-h) - 6rem)}
  .kw-hero__h1{font-size:clamp(2.75rem,4.7vw,4.25rem)}
  .kw-tage-kopf{padding-top:clamp(4rem,12vh,7rem)}
  .kw-tag:last-child{min-height:80vh}
  /* aktiver Tag voll, die anderen leiser (nur mit JS; ohne JS alles voll) */
  html.js [data-kw-story].is-live .kw-tag{opacity:.32;transition:opacity .6s var(--kw-out)}
  html.js [data-kw-story].is-live .kw-tag.is-active{opacity:1}
  .kw-segment{left:18px;bottom:18px}
}
@media (min-width:1200px){.kw-badge__img{height:112px}}
/* Handy/Tablet: Bühne klebt unter der Leiste; Papierkante oben und weicher Auslauf unten, damit Text sauber darunter verschwindet */
@media (max-width:991px){
  .kw-buehne-wrap{position:sticky;top:var(--nav-h);margin-inline:calc(-1 * var(--gutter));padding:.625rem var(--gutter) 1.25rem;background:var(--paper)}
  .kw-buehne-wrap::after{content:"";position:absolute;left:0;right:0;top:100%;height:1.75rem;background:linear-gradient(var(--paper),rgb(247 246 243/0));pointer-events:none}
  .kw-tage-kopf{padding-top:var(--sec-m);padding-bottom:1.5rem}
  .kw-buehne{max-height:44svh;border-radius:28px}
  .kw-tag{min-height:64svh;justify-content:flex-start;padding-block:2rem 3rem}
  .kw-tag:last-child{min-height:0;padding-bottom:0}
  .kw-segment{left:10px;bottom:10px}
  .kw-segment__b{min-height:34px;padding:0 .8125rem}
}
@media (min-width:768px) and (max-width:991px){
  .kw-buehne{max-height:48svh;margin-inline:auto}
}
@media (max-width:479px){
  .kw-auftakt{padding-top:calc(var(--nav-h) + 1.5rem)}
  .kw-hero__lead{font-size:1.125rem}
  .kw-chips li{font-size:.8125rem}
  .kw-hero__cta{margin-top:1.75rem}
  .kw-hero__cta .kw-btn{width:100%}
  .kw-badge{gap:1.125rem;margin-top:2.25rem;padding-top:1.75rem}
  .kw-badge__img{height:84px}
  .kw-badge__t{padding-left:1.125rem;font-size:.625rem}
  .kw-tag__h{font-size:2rem}
  .kw-abend{font-size:1rem}
}

/* ==========================================================================
   3 · Ergebnisse: Apple-Karten
   ========================================================================== */
.kw-erg{padding-top:var(--sec-m)}
.kw-reihe__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 1.5rem;width:100%;max-width:calc(var(--w-xl) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.kw-karte{--bg:#ECEAE6;--ck:#675D54;--cn:#2A2521;--cp:#1F1D1B;--pad:8.5cqi;position:relative;container-type:inline-size;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--kw-r);background:var(--bg);color:var(--cn)}
.kw-karte--erde{--bg:#211C19;--ck:#C9A87C;--cn:#F5F1EB;--cp:#F5F1EB}
.kw-karte--stein{--bg:#E2DCD3}
.kw-karte--nebel{--bg:#ECEAE6}
.kw-karte--weiss{--bg:#FFFFFF;box-shadow:inset 0 0 0 1px rgb(42 37 33/.07)}
.kw-karte--sand{--bg:#E9E2D6}
.kw-karte--moos{--bg:#3F5B45;--ck:rgb(255 255 255/.74);--cn:#fff;--cp:#fff}
.kw-karte__top{position:absolute;z-index:2;left:var(--pad);right:var(--pad);top:8cqi}
.kw-kick{font:500 3.2cqi/1.25 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ck)}
.kw-name{margin-top:.9cqi;font:600 4.8cqi/1.15 var(--font-sans);letter-spacing:-.015em;color:var(--cn)}
.kw-poster{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:8cqi;font-family:var(--font-serif);font-weight:300;font-size:15.5cqi;line-height:.96;
  letter-spacing:-.035em;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;color:var(--cp)}
.kw-motiv{position:absolute;z-index:1;left:0;right:0;top:25cqi;bottom:33cqi;display:grid;place-items:center}
.kw-cap{margin-top:1.25rem;max-width:26rem;font-size:1.0625rem;line-height:1.45;letter-spacing:-.01em;color:var(--text-soft)}
.kw-cap strong{font-weight:600;color:var(--ink)}

/* Karte 1 · drei Sockel, je ein grüner Punkt „läuft“ */
.kw-m-sockel{display:flex;gap:5cqi}
.kw-m-sockel__i{position:relative;display:grid;place-items:center;width:20cqi;aspect-ratio:1}
.kw-m-sockel__i svg{position:absolute;inset:0;width:100%;height:100%;fill:rgb(245 241 235/.06);stroke:rgb(201 168 124/.55);stroke-width:1.6;vector-effect:non-scaling-stroke}
.kw-m-sockel__i i{width:4.2cqi;height:4.2cqi;border-radius:50%;background:#7FB08A;box-shadow:0 0 0 1.4cqi rgb(127 176 138/.18),0 0 5cqi rgb(127 176 138/.45)}
.kw-m-sockel__i b{position:absolute;top:calc(100% + 2.6cqi);font:500 3.1cqi/1 var(--font-sans);letter-spacing:.02em;color:rgb(245 241 235/.72)}

/* Karte 2 · Landkarte: Punktraster, drei Punkte oben rechts dunkel und nummeriert */
.kw-m-karte{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:2cqi 2.4cqi;width:66cqi}
.kw-m-karte__feld{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(5,1fr);gap:3.1cqi;padding:3cqi;border-left:1px solid rgb(42 37 33/.22);border-bottom:1px solid rgb(42 37 33/.22)}
.kw-m-karte__feld i{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 .2cqi .6cqi rgb(34 29 26/.1)}
.kw-m-karte__feld i.is-top{background:#2A2521;scale:1.15}
.kw-m-karte__feld em{font:600 2.9cqi/1 var(--font-sans);font-style:normal;color:#F7F4EF}
.kw-m-karte__y{grid-column:1;grid-row:1;writing-mode:vertical-rl;rotate:180deg;align-self:center;font:500 2.9cqw/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:#675D54}
.kw-m-karte__x{grid-column:2;grid-row:2;justify-self:end;font:500 2.9cqi/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:#675D54}

/* Karte 3 · Plan: drei Balken nacheinander auf einer 90-Tage-Achse */
.kw-m-plan{position:relative;display:grid;gap:2.6cqi;width:72cqi}
.kw-m-plan__b{position:relative;display:flex;align-items:center;height:9.4cqi;margin-left:calc(var(--a) * 1%);width:calc((var(--e) - var(--a)) * 1%);padding:0 3cqi;border-radius:99px;
  background:#fff;box-shadow:0 .25cqi .6cqi rgb(34 29 26/.07),0 1.6cqi 3.4cqi -1cqi rgb(34 29 26/.16);font:500 3.3cqi/1 var(--font-sans);color:#2A2521;white-space:nowrap}
.kw-m-plan__b:first-child{background:#2A2521;color:#F7F4EF}
.kw-m-plan__achse{display:flex;justify-content:space-between;margin-top:1.6cqi;padding-top:2cqi;border-top:1px solid rgb(42 37 33/.2);font:500 2.9cqi/1 var(--font-sans);letter-spacing:.04em;color:#675D54}

/* Karte 4 · Regelwerk: schwarze Systempille, vier Themen als Chips */
.kw-m-regel{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:2.4cqi 2cqi;width:76cqi}
.kw-m-regel__chip{display:inline-flex;align-items:center;justify-content:center;height:8cqi;padding:0 3.2cqi;border-radius:99px;background:#F2F1EE;font:500 3.3cqi/1 var(--font-sans);color:#4C4641}
.kw-m-regel__pille{order:-1;grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:2.4cqi;height:15cqi;margin-bottom:2.6cqi;border-radius:99px;background:#0F0D0C;color:#fff;
  font:600 4.6cqi/1 var(--font-sans);letter-spacing:-.01em;box-shadow:0 1cqi 2cqi rgb(15 13 12/.18),0 4cqi 8cqi -3cqi rgb(15 13 12/.35)}
.kw-m-regel__ok{display:grid;place-items:center;width:6.6cqi;height:6.6cqi;border-radius:50%;background:#7FB08A;color:#0F0D0C}
.kw-m-regel__ok svg{width:4.2cqi;height:4.2cqi;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* Karte 5 · GPTs und Vorlagen: drei App-Kacheln, die mittlere groß in Champagner-Metall */
.kw-m-app{display:flex;align-items:center;gap:4cqi}
.kw-m-app__kachel{display:grid;place-items:center;width:30cqi;aspect-ratio:1;border-radius:24%;color:#3E3326;
  background:linear-gradient(150deg,#F3E7CF 0%,#D8BD8C 46%,#B8955E 100%);
  box-shadow:inset 0 .5cqi .6cqi rgb(255 255 255/.65),inset 0 -.8cqi 1.4cqi rgb(90 64 30/.28),0 1.2cqi 2.4cqi rgb(34 29 26/.14),0 5cqi 9cqi -4cqi rgb(34 29 26/.35)}
.kw-m-app__kachel svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.5}
.kw-m-app__kachel--klein{width:17cqi;border-radius:26%;background:#fff;color:#675D54;box-shadow:0 .4cqi 1cqi rgb(34 29 26/.1),0 3cqi 6cqi -3cqi rgb(34 29 26/.25)}

/* Karte 6 · Team: zwölf Punkte, bis zu 12 Personen */
.kw-m-team{display:grid;grid-template-columns:repeat(6,1fr);gap:4.6cqi 3.4cqi}
.kw-m-team i{position:relative;display:block;width:8cqi;height:10.5cqi}
.kw-m-team i::before{content:"";position:absolute;left:50%;top:0;width:4.4cqi;height:4.4cqi;translate:-50% 0;border-radius:50%;background:rgb(255 255 255/.94)}
.kw-m-team i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5.2cqi;border-radius:4cqi 4cqi 1.2cqi 1.2cqi;background:rgb(255 255 255/.94)}

/* Handy/Tablet: Wisch-Reihe mit Punkten */
.kw-punkte{display:none}
@media (max-width:991px){
  .kw-reihe__scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kw-reihe__scroll::-webkit-scrollbar{display:none}
  .kw-reihe__scroll:focus-visible{outline-offset:-2px}
  .kw-reihe__track{display:flex;gap:12px;width:max-content;max-width:none;margin:0}
  .kw-reihe__track > .kw-item{flex:none;width:min(82vw,380px);scroll-snap-align:start}
  .kw-punkte{display:flex;justify-content:center;gap:0;margin:1.5rem auto 0;padding:0 6px;width:fit-content;border-radius:var(--r-pill);background:#E9E6E1}
  .kw-punkte__b{position:relative;width:34px;height:44px;border:0;background:none;padding:0}
  .kw-punkte__b::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:99px;translate:-50% -50%;background:#8C837C;transition:width .35s var(--kw-out),background-color .35s}
  .kw-punkte__b[aria-current="true"]{width:50px}
  .kw-punkte__b[aria-current="true"]::before{width:30px;background:#C3BCB4}
}
@media (max-width:767px){
  .p-ki-werkstatt{--kw-r:30px}
  .kw-cap{font-size:1rem}
}

/* ==========================================================================
   4 · Beispiel „Ihr Stand nach Tag 2“ (dunkle Bühne)
   ========================================================================== */
.kw-bsp{background:var(--earth);color:var(--on-dark-soft);padding-block:var(--sec-l)}
.kw-bsp__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4rem;align-items:center}
.kw-bsp .kw-h2{margin-top:1.25rem;color:var(--on-dark)}
.kw-bsp__marke{display:inline-flex;align-items:center;gap:.5rem;padding:6px 12px 6px 10px;border-radius:var(--r-pill);background:rgb(201 168 124/.14);
  box-shadow:inset 0 0 0 1px rgb(201 168 124/.35);font:500 .8125rem/1.2 var(--font-sans);letter-spacing:.01em;color:var(--champagne)}
.kw-bsp__punkt{width:7px;height:7px;border-radius:50%;background:var(--champagne)}
.kw-bsp__p{margin-top:1.25rem;max-width:28rem;font-size:1.1875rem;line-height:1.5;color:var(--on-dark-soft)}
.kw-ui{position:relative;padding:1.75rem;border-radius:26px;background:#fff;color:var(--ink);box-shadow:0 1px 0 rgb(255 255 255/.06),0 40px 80px -40px rgb(0 0 0/.7)}
.kw-ui__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.125rem;border-bottom:1px solid var(--line-soft)}
.kw-ui__titel{font-family:var(--font-serif);font-weight:400;font-size:1.5rem;line-height:1.2;letter-spacing:-.015em;color:var(--ink-head);font-variation-settings:"opsz" 24,"SOFT" 0,"WONK" 0}
.p-ki-werkstatt .kw-ui__bsp{font-size:.8125rem;padding:5px 11px}
.kw-ui__liste{display:grid}
.kw-ui__zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem 0;border-bottom:1px solid var(--line-soft)}
.kw-ui__fall{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.kw-ui__n{font:500 1.125rem/1.25 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.kw-ui__m{font-size:.875rem;line-height:1.35;color:var(--text-soft)}
.kw-ui__st{display:grid;justify-items:end;flex:none}
.kw-st{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-pill);font:500 .875rem/1 var(--font-sans);white-space:nowrap}
.kw-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.kw-st--ok{background:var(--moss-tint);color:var(--moss)}
.kw-st--bau{background:var(--bronze-tint);color:var(--bronze);opacity:0;visibility:hidden}
.kw-ui__haken{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;padding-top:1.25rem}
.kw-ui__haken li{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;line-height:1.3;color:var(--text)}
.kw-ui__haken .kw-ok{width:22px;height:22px}
.kw-ui__haken .kw-ok .i{width:13px;height:13px}
/* Einmaliger Wechsel „in Arbeit“ → „läuft“ (werkstatt.js setzt is-armed, im Blick is-run) */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.is-static) .kw-ui.is-armed .kw-st--bau{opacity:1;visibility:visible}
  html.js:not(.is-static) .kw-ui.is-armed .kw-st--ok{opacity:0;scale:.85}
  html.js:not(.is-static) .kw-ui.is-armed .kw-st--bau::before{animation:kw-puls 1.1s ease-in-out infinite}
  html.js:not(.is-static) .kw-ui.is-armed .kw-ui__haken li{opacity:0;translate:0 6px}
  html.js:not(.is-static) .kw-ui.is-armed.is-run .kw-st--bau{opacity:0;visibility:hidden;transition:opacity .25s ease calc(.7s + var(--i) * .65s),visibility 0s calc(.95s + var(--i) * .65s)}
  html.js:not(.is-static) .kw-ui.is-armed.is-run .kw-st--ok{opacity:1;scale:1;transition:opacity .35s var(--kw-out) calc(.8s + var(--i) * .65s),scale .5s cubic-bezier(.34,1.45,.64,1) calc(.8s + var(--i) * .65s)}
  html.js:not(.is-static) .kw-ui.is-armed.is-run .kw-ui__haken li{opacity:1;translate:none;transition:opacity .45s var(--kw-out) 2.8s,translate .45s var(--kw-out) 2.8s}
  html.js:not(.is-static) .kw-ui.is-armed.is-run .kw-ui__haken li + li{transition-delay:3s}
}
@keyframes kw-puls{50%{opacity:.35}}
@media (max-width:991px){
  .kw-bsp__grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}
}
@media (max-width:479px){
  .kw-ui{padding:1.25rem 1.125rem;border-radius:22px}
  .kw-ui__titel{font-size:1.3125rem}
  .kw-ui__n{font-size:1.0625rem}
  .kw-ui__m{font-size:.8125rem}
  .kw-st{padding:6px 10px;font-size:.8125rem}
  .kw-ui__haken{flex-direction:column;gap:.625rem}
}

/* ==========================================================================
   5 · Paket
   ========================================================================== */
.kw-paket__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.5rem;align-items:start}
.kw-plan{display:flex;flex-direction:column;padding:2.75rem 2.75rem 2.5rem;border-radius:var(--kw-r);background:var(--earth);color:var(--on-dark);box-shadow:0 30px 60px -34px rgb(34 29 26/.55)}
.kw-plan__name{font:500 .75rem/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--champagne)}
.kw-plan__tage{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .875rem;margin-top:1.25rem}
.kw-plan__gross{font-family:var(--font-serif);font-weight:300;font-size:clamp(3.5rem,2.6rem + 3vw,5.25rem);line-height:.95;letter-spacing:-.035em;color:#fff;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.kw-plan__plus{font-size:1.25rem;color:var(--on-dark-soft)}
.kw-plan__preis{margin-top:1rem;font-size:1.125rem;line-height:1.45;color:var(--on-dark)}
.kw-plan__h{margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--line-dark);font:500 .75rem/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-soft)}
.kw-plan__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;margin-top:1.25rem}
.kw-plan__liste li{display:flex;align-items:flex-start;gap:.75rem;font-size:1.0625rem;line-height:1.4;color:var(--on-dark)}
.kw-plan__liste .kw-ok{margin-top:-1px;background:rgb(201 168 124/.18);color:var(--champagne)}
.kw-plan__rahmen{margin:1.75rem 0 2rem;font-size:.9375rem;line-height:1.45;color:var(--on-dark-soft)}
.p-ki-werkstatt .kw-plan__btn{--btn-bg:var(--on-dark);--btn-fg:var(--ink);--btn-bg-h:#fff;--btn-fg-h:var(--ink);align-self:flex-start;margin-top:auto}
/* Mappe: drei Blätter, leicht gefächert */
.kw-m-mappe{display:grid;justify-items:center;gap:3.2cqi}
.kw-m-mappe__b{display:flex;align-items:center;gap:2.6cqi;width:58cqi;height:12.5cqi;padding:0 4cqi;border-radius:3.2cqi;background:#fff;
  translate:calc(var(--x) * 1cqi) 0;rotate:calc(var(--r) * 1deg);
  box-shadow:0 .25cqi .6cqi rgb(34 29 26/.07),0 1.6cqi 3.4cqi -1cqi rgb(34 29 26/.18);font:500 3.9cqi/1 var(--font-sans);letter-spacing:-.01em;color:#2A2521}
.kw-m-mappe__b svg{flex:none;width:5.4cqi;height:5.4cqi;fill:none;stroke:#735A36;stroke-width:1.6}
/* Desktop: Karte rechts per Subgrid in Zeile 1, Unterzeile in Zeile 2 → Plan-Karte und Karte enden auf einer Linie */
@media (min-width:992px){
  .kw-paket__grid{grid-template-rows:auto auto;row-gap:0}
  .kw-plan{grid-column:1;grid-row:1;align-self:stretch}
  .kw-item--eigen{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-rows:subgrid}
}
@media (max-width:991px){
  .kw-paket__grid{grid-template-columns:minmax(0,1fr);gap:3rem}
  .kw-item--eigen{max-width:30rem}
}
@media (max-width:767px){
  .kw-plan{padding:2rem 1.5rem 1.75rem;border-radius:28px}
  .kw-plan__liste{grid-template-columns:minmax(0,1fr);gap:.875rem}
  .p-ki-werkstatt .kw-plan__btn{align-self:stretch}
}

/* ==========================================================================
   6 · Person
   ========================================================================== */
.kw-person{padding-top:var(--sec-m)}
.kw-person__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.kw-portraet{position:sticky;top:calc(var(--nav-h) + 2rem);margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--kw-r);background:var(--grad-portrait);box-shadow:0 30px 60px -36px rgb(34 29 26/.4)}
.kw-portraet picture{display:contents}
.kw-portraet img{width:100%;height:100%;object-fit:cover;object-position:60% 22%}
.kw-person__name{margin-top:1rem;font-family:var(--font-serif);font-weight:var(--head-wght);font-size:clamp(2.75rem,2rem + 3vw,4.5rem);line-height:1;letter-spacing:-.03em;color:var(--ink-head);
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.kw-person__rolle{margin-top:.875rem;font-size:1.25rem;color:var(--text-soft)}
.kw-person__bio{margin-top:1.5rem;max-width:36rem;font-size:1.1875rem;line-height:1.5;color:var(--text)}
.kw-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2.25rem 0 0}
.kw-zahl{display:flex;flex-direction:column;gap:.625rem;padding:1.375rem 1.5rem 1.375rem;border-radius:var(--kw-r-s);background:#fff;box-shadow:var(--sh-ring)}
.kw-zahl dt{font-family:var(--font-serif);font-weight:400;font-size:clamp(2.25rem,1.9rem + 1.2vw,3rem);line-height:1;letter-spacing:-.03em;color:var(--bronze);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.kw-zahl dd{margin:0;font-size:.9375rem;line-height:1.4;color:var(--text-soft)}
.kw-termin{margin-top:2.25rem;padding:1.75rem;border-radius:var(--kw-r-s);background:var(--stone)}
.kw-termin__t{font-family:var(--font-serif);font-weight:400;font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink-head);font-variation-settings:"opsz" 36,"SOFT" 0,"WONK" 0}
.kw-termin__p{margin-top:.625rem;max-width:30rem;font-size:1rem;line-height:1.5;color:var(--text-soft)}
.kw-termin .kw-btn{margin-top:1.375rem}
@media (max-width:991px){
  .kw-person__grid{grid-template-columns:minmax(0,1fr)}
  .kw-portraet{position:relative;top:auto;max-width:28rem}
}
@media (max-width:479px){
  .kw-zahl{padding:1.125rem 1.125rem 1.125rem}
  .kw-zahl dd{font-size:.875rem}
  .kw-termin{padding:1.5rem 1.25rem}
  .kw-termin .kw-btn{width:100%}
}

/* ==========================================================================
   Bewegung: ein Auftakt beim Laden (Zeilen der H1, dann Bühne). Reduziert/static: nichts.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.is-static) .kw-hero .kw-l,
  html.js:not(.is-static) .kw-hero__lead,
  html.js:not(.is-static) .kw-chips,
  html.js:not(.is-static) .kw-hero__cta,
  html.js:not(.is-static) .kw-badge{animation:kw-auf .9s var(--kw-out) both}
  html.js:not(.is-static) .kw-hero .kw-l:nth-child(1){animation-delay:.05s}
  html.js:not(.is-static) .kw-hero .kw-l:nth-child(2){animation-delay:.15s}
  html.js:not(.is-static) .kw-hero .kw-l:nth-child(3){animation-delay:.25s}
  html.js:not(.is-static) .kw-hero__lead{animation-delay:.4s}
  html.js:not(.is-static) .kw-chips{animation-delay:.5s}
  html.js:not(.is-static) .kw-hero__cta{animation-delay:.6s}
  html.js:not(.is-static) .kw-badge{animation-delay:.75s}
  html.js:not(.is-static) .kw-buehne{animation:kw-buehne 1.4s var(--kw-out) .2s both}
}
@keyframes kw-auf{from{opacity:0;translate:0 .6rem}}
@keyframes kw-buehne{from{opacity:0;scale:.965}}
@media (prefers-reduced-motion:reduce){
  .kw-leinwand{transition:none}
}
html.is-static .kw-leinwand,html.is-static [data-kw-story] .kw-tag{transition:none}

/* Handy-Hero mit Motiv (Inhaber 28.09.2026 „Bild rein“) */
.kw-hero__bild{display:none}
@media (max-width:991px){
  .kw-hero__bild{display:block;margin:1.5rem calc(-1 * var(--gutter) + 12px) 0;border-radius:28px;overflow:hidden;background:#e9e3da;aspect-ratio:4/3}
  .kw-hero__bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
}
@media (min-width:768px) and (max-width:991px){.kw-hero__bild{margin-inline:0;max-width:720px;aspect-ratio:16/10}}
.kw-hero__bild picture{display:block;height:100%}   /* Bild füllt den 4:3-Rahmen (28.09.2026) */