/* ═══════════════════════════════════════════════════════════════════════════════
   website-punk.css · Die Website im Punk-Stil (Andy 03.11.2026: «wir sind der Punker der Therapiemethoden»,
   «kannst du aus dem nun unser neues CSS ableiten? wir machen die komplette FIVE MOVES Website in diesem Stil»).
   Abgeleitet aus /neu (release/2026-11-03-10). Regeln, Wörter und Bausteine: fm-design/welt-website.md.
   Bausteine zum Ansehen: docs/brand/punk-bausteine.html. Bewegung: web/js/punk.js.
   Alles unter .pu (Namensraum pu-). Flach und kantig: Radius 0, keine weichen Schatten, kein Glas, kein Verlauf.
   Erlaubt, weil es der Stil ist: Kopierkorn, Stempel-Textur, Tape, Aufkleber mit hartem Versatzschatten 3px 4px.
   ═══════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage Grotesque';src:url('/fonts/bricolage/bricolage-grotesque-latin-var.woff2') format('woff2');font-weight:300 600;font-display:swap}

/* ── 1. Grund ── */
.pu{
  --navy:#151A31;--papier:#F3EFE6;--weiss:#FBF8F1;--gold:#E4B56A;--goldp:#845A0B;--kamel:#D6B07E;--lila:#B98FAE;--aub:#4B2A44;--grau:#4B5168;--mag:#B31F66;--magh:#9E1759;
  --tape:rgba(228,213,180,.9);--kante:3px 4px 0 rgba(21,26,49,.18);
  --dsp:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;--txt:'Plus Jakarta Sans',sans-serif;
  --rand:clamp(20px,5.5vw,96px);--ease:cubic-bezier(.23,1,.32,1);--klatsch:cubic-bezier(.34,1.56,.64,1);
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-align:left;color:var(--navy)
}
.pu *,.pu *::before,.pu *::after{box-sizing:border-box;margin:0;padding:0}
.pu ::selection{background:var(--navy);color:var(--gold)}
.pu :focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.pu img{display:block;max-width:100%;height:auto}

/* ── 2. Fläche: eine flache Farbe, randlos. Farbe über Klasse, Text links. ── */
.pu-f{position:relative;overflow:hidden;background:var(--g,var(--papier));color:var(--t,var(--navy));padding:clamp(110px,11vw,170px) var(--rand) clamp(64px,8vw,120px);min-height:min(100svh,940px);display:flex;flex-direction:column;justify-content:center}
.pu-f.kurz{min-height:0}
.pu-papier{--g:var(--papier);--t:var(--navy);--p:var(--goldp);--k:var(--navy)}
.pu-weiss{--g:var(--weiss);--t:var(--navy);--p:var(--goldp);--k:var(--navy)}
.pu-navy{--g:var(--navy);--t:var(--papier);--p:var(--gold);--k:var(--gold)}
.pu-gold{--g:var(--gold);--t:var(--navy);--p:var(--aub);--k:var(--navy)}
.pu-kamel{--g:var(--kamel);--t:var(--navy);--p:var(--aub);--k:var(--navy)}
.pu-lila{--g:var(--lila);--t:var(--navy);--p:var(--aub);--k:var(--navy)}
.pu-aub{--g:var(--aub);--t:var(--papier);--p:var(--gold);--k:var(--gold)}
/* Kopierkorn: auf Papierflächen, nie auf Navy */
.pu-korn::after{content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.pu-in{position:relative;z-index:1;max-width:min(100%,1100px)}
.pu-schmal{max-width:min(100%,720px)}

/* ── 3. Schrift: Wort riesig, Dreh mit Pointe, Kleines in Jakarta ── */
.pu-wort{font:600 clamp(46px,min(11vw,17.6svh),190px)/.84 var(--dsp);letter-spacing:-.05em;text-wrap:balance}
.pu-wort .pu-leicht,.pu-leicht{font-weight:300}
.pu-titel{font:600 clamp(40px,min(7vw,11.2svh),110px)/.9 var(--dsp);letter-spacing:-.045em;text-wrap:balance}
.pu-dreh{margin-top:clamp(21px,2.6vw,40px);font:300 clamp(26px,min(3.6vw,5.76svh),58px)/1.06 var(--dsp);letter-spacing:-.028em;max-width:20ch;text-wrap:pretty}
.pu-dreh b,.pu-titel b{font-weight:600;color:var(--p)}
.pu-satz{margin-top:clamp(16px,2vw,28px);font:300 clamp(22px,min(2.7vw,4.32svh),40px)/1.08 var(--dsp);letter-spacing:-.02em;max-width:20ch}
.pu-satz b{font-weight:600}
.pu-klein{margin-top:clamp(18px,2.2vw,30px);font:500 clamp(16px,min(1.4vw,2.24svh),20px)/1.5 var(--txt);max-width:42ch}
.pu-klein a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
/* Markiert: ein Wort auf Farbe, wie mit Marker */
.pu-mark{background:var(--gold);color:var(--navy);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pu-mark.navy{background:var(--navy);color:var(--gold)}
.pu-mark.lila{background:var(--lila);color:var(--navy)}

/* ── 4. Erpresserbrief: jeder Buchstabe ein Schnipsel (punk.js baut ihn aus data-erpresser) ── */
.pu-erp{font:600 clamp(52px,min(15vw,24svh),200px)/.86 var(--dsp);letter-spacing:-.04em}
.pu-erp .w{display:inline-block;white-space:nowrap;margin-right:.18em}
.pu-erp .lb{display:inline-block;padding:.02em .08em;margin:0 .02em .06em;line-height:.9;clip-path:polygon(3% 6%,96% 0,100% 88%,92% 100%,0 96%)}

/* ── 5. Stempel: Wort mit Rahmen und Stempel-Textur, schief. Tape hält ihn an zwei Ecken. ── */
.pu-stempel-wrap{position:relative;display:inline-block;rotate:-8deg}
.pu-stempel{position:relative;display:inline-block;white-space:nowrap;font:600 clamp(80px,min(18vw,28.8svh),320px)/.8 var(--dsp);letter-spacing:-.07em;color:var(--st,var(--aub));border:clamp(6px,1.2vw,16px) solid var(--st,var(--aub));padding:.04em .12em .08em;opacity:.92;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.pu-stempel.klein{font-size:clamp(28px,min(5vw,8svh),56px);border-width:5px;letter-spacing:-.03em}

/* ── 6. Tape: hält immer etwas fest, hängt nie frei im Raum ── */
.pu-tape{position:absolute;z-index:2;width:clamp(90px,9vw,150px);height:clamp(24px,2.2vw,36px);background:var(--tape);box-shadow:0 1px 0 rgba(21,26,49,.08);clip-path:polygon(0 8%,5% 0,10% 12%,15% 0,100% 0,95% 15%,100% 30%,95% 50%,100% 70%,95% 85%,100% 100%,0 100%,5% 85%,0 70%,5% 50%,0 30%)}
.pu-tape.lo{left:-4%;top:-3%;rotate:-34deg}
.pu-tape.ru{right:-4%;bottom:-3%;rotate:-34deg}
.pu-tape.oben{left:50%;top:-12px;margin-left:calc(clamp(90px,9vw,150px) / -2);rotate:-4deg}

/* ── 7. Aufkleber: Navy-Zettel mit Etikett, Nummer und Satz (Moves, Schritte, Hinweise). Ein Aufkleber ist ein Gegenstand, kein Kicker. ── */
.pu-kleber{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;max-width:640px;padding:16px 20px 20px;background:var(--navy);color:var(--papier);box-shadow:var(--kante);rotate:-1.5deg}
.pu-kleber .nr{grid-row:1 / span 3;font:600 clamp(80px,min(20vw,32svh),170px)/.8 var(--dsp);letter-spacing:-.06em;color:var(--gold)}
.pu-kleber strong{display:block;margin-top:8px;font:600 clamp(40px,min(9vw,14.4svh),84px)/.86 var(--dsp);letter-spacing:-.05em}
.pu-kleber p{margin-top:8px;font:500 clamp(16px,min(1.8vw,2.88svh),20px)/1.4 var(--txt)}
.pu-kleber p b{color:var(--gold);font-weight:600}
.pu-tag{justify-self:start;display:inline-block;font:600 13px/1 var(--txt);letter-spacing:.08em;background:var(--gold);color:var(--navy);padding:4px 8px;rotate:-2deg}
.pu-tag.papier{background:var(--tape);color:var(--navy)}

/* ── 8. Streifen: Listen und Fragen als schiefe Farbstreifen, nie als Linienliste ── */
.pu-streifen{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:clamp(28px,3vw,44px)}
.pu-streifen>*{position:relative;padding:14px 18px;rotate:var(--k,-.6deg);box-shadow:var(--kante);font:600 clamp(22px,min(3vw,4.8svh),42px)/1.08 var(--dsp);letter-spacing:-.03em;color:var(--navy)}
.pu-streifen>:nth-child(4n+1){background:var(--kamel);--k:-.8deg}
.pu-streifen>:nth-child(4n+2){background:var(--papier);--k:.6deg;margin-left:3%}
.pu-streifen>:nth-child(4n+3){background:var(--lila);--k:-.4deg}
.pu-streifen>:nth-child(4n+4){background:var(--gold);--k:.9deg;margin-left:2%}
.pu-streifen small{display:block;margin-top:6px;font:500 clamp(15px,min(1.3vw,2.08svh),18px)/1.45 var(--txt);letter-spacing:0}
/* als Fragen zum Aufklappen */
.pu-streifen details{padding:0 18px}
.pu-streifen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:21px;min-height:64px;padding:14px 0}
.pu-streifen summary::-webkit-details-marker{display:none}
.pu-streifen summary::after{content:'+';display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--navy);color:var(--gold);font:600 30px/1 var(--dsp);rotate:6deg;transition:rotate .2s var(--ease)}
.pu-streifen details[open] summary::after{rotate:51deg}
.pu-streifen details p{padding:0 0 18px;font:500 clamp(15px,min(1.3vw,2.08svh),18px)/1.55 var(--txt);letter-spacing:0;max-width:62ch}

/* ── 9. Stufen: ein Weg in Schritten, jede Stufe höher ── */
.pu-stufen{list-style:none;margin-top:clamp(28px,3vw,48px);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(8px,1.2vw,16px);align-items:end}
.pu-stufen>li{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(14px,1.6vw,22px);min-height:calc(var(--sh,90px) * var(--h,1) + 120px);font:500 clamp(15px,min(1.3vw,2.08svh),19px)/1.3 var(--txt);color:var(--navy);transform-origin:50% 100%;rotate:calc((var(--h,1) - 2.5) * 1.2deg)}
.pu-stufen>li:nth-child(1){background:var(--lila)}.pu-stufen>li:nth-child(2){background:var(--gold)}.pu-stufen>li:nth-child(3){background:var(--papier)}.pu-stufen>li:nth-child(4){background:var(--aub);color:var(--papier)}
.pu-stufen b{display:block;font:600 clamp(30px,min(3.6vw,5.76svh),60px)/.88 var(--dsp);letter-spacing:-.045em}
.pu-stufen small{display:block;margin-top:10px;font:500 clamp(14px,min(1.15vw,1.84svh),16px)/1.4 var(--txt)}
.pu-stufen small b{display:inline;font:600 1em/inherit var(--txt);letter-spacing:0}
.pu-stufen .snr{position:absolute;top:-14px;right:10px;font:600 13px/1 var(--txt);background:var(--navy);color:var(--gold);padding:5px 8px;rotate:6deg}

/* ── 10. Zählstriche: Fortschritt als Marker-Striche (punk.js zeichnet aus data-striche) ── */
.pu-striche{display:block;width:100%;max-width:720px;height:auto;margin-top:clamp(28px,3vw,44px);overflow:visible}
.pu-striche path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pu-striche-lab{display:flex;justify-content:space-between;max-width:720px;margin-top:12px;font:600 14px/1 var(--txt);opacity:.8}

/* ── 11. Fotos: in Originalfarbe auf farbigem Karton, schief, mit Tape, Name als Aufkleber (Andy 03.11.: «die bilder NICHT farbig einfärben … eher mit einem geilen Hintergrund arbeiten») ── */
.pu-fotos{list-style:none;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(16px,2.4vw,40px);margin-top:clamp(34px,4vw,64px)}
.pu-foto{position:relative;display:block;padding:14px 14px 0;box-shadow:var(--kante);background:var(--fg,var(--kamel));color:var(--navy);text-decoration:none;rotate:var(--k,-1.5deg);transition:rotate .3s var(--ease)}
.pu-fotos>:nth-child(3n+1) .pu-foto{--fg:var(--kamel);--k:-1.8deg}.pu-fotos>:nth-child(3n+2) .pu-foto{--fg:var(--gold);--k:1.4deg}.pu-fotos>:nth-child(3n+3) .pu-foto{--fg:var(--lila);--k:-.8deg}
a.pu-foto:hover{rotate:0deg}
.pu-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.pu-foto b{display:inline-block;margin:-22px 0 0 -6px;position:relative;z-index:2;background:var(--navy);color:var(--papier);padding:6px 10px 7px;rotate:-2deg;font:600 clamp(20px,min(2vw,3.2svh),30px)/1.1 var(--dsp);letter-spacing:-.02em}
.pu-foto span{display:block;padding:10px 4px 14px;font:500 15px/1.3 var(--txt)}

/* ── 12. Knöpfe: ein Magenta pro Seite (Kaufen, Buchen), eckig, leicht schief. Sonst Ink oder Link. ── */
.pu-wege{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;margin-top:clamp(28px,3vw,44px)}
.pu-knopf{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 26px;background:var(--mag);color:#fff;font:600 17px/1 var(--txt);text-decoration:none;rotate:-1.5deg;transition:background .2s var(--ease),transform .12s var(--ease)}
.pu-knopf:hover{background:var(--magh)}
.pu-knopf:active{transform:scale(.97)}
.pu-knopf.ink{background:var(--navy);color:var(--papier)}
.pu-knopf.ink:hover{background:#2A3157}
.pu-navy .pu-knopf.ink,.pu-aub .pu-knopf.ink{background:var(--gold);color:var(--navy)}
.pu-link{display:inline-flex;align-items:center;min-height:44px;color:inherit;font:600 17px/1 var(--txt);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* ── 13. Das Zeichen: Hand-O, eingefärbt, an der Kante angeschnitten; einmal pro Seite, nie unter Lesbarem ── */
.pu-hand{position:absolute;width:clamp(380px,52vw,880px);aspect-ratio:1;right:calc(clamp(380px,52vw,880px) * -.42);top:50%;translate:0 -50%;background:var(--h,var(--navy));pointer-events:none;
  -webkit-mask:url(/assets/images/fm-logo-o-ink.svg) center/contain no-repeat;mask:url(/assets/images/fm-logo-o-ink.svg) center/contain no-repeat}
.pu-mithand .pu-in{max-width:min(48vw,640px)}

/* ── 14. Leiste: Papier, Ink, Linie (Website-Leiste aus _partials/nav.twig; Drawer bleibt Navy) ── */
html body:has(.pu,.fpk) header.fm-header,
html body:has(.pu,.fpk) header.fm-header.fm-solid{background:#F3EFE6 !important;border-bottom:1.5px solid #151A31 !important;box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
html body:has(.pu,.fpk) header.fm-header .fm-logo-mark{color:#151A31 !important}
html body:has(.pu,.fpk) header.fm-header .fm-logo-o{content:url('/assets/images/fm-logo-o-ink.svg')}
html body:has(.pu,.fpk) header.fm-header .fm-lang-link{color:#4B5168 !important}
html body:has(.pu,.fpk) header.fm-header .fm-lang-link:hover{color:#151A31 !important}
html body:has(.pu,.fpk) header.fm-header .fm-lang-link.active{color:#845A0B !important}
html body:has(.pu,.fpk) header.fm-header .fm-cta-duett{color:#151A31 !important}
html body:has(.pu,.fpk) header.fm-header .fm-cta-duett:hover{color:#845A0B !important}
html body:has(.pu,.fpk) header.fm-header .fm-duett-faden{background:#845A0B !important}
html body:has(.pu,.fpk) header.fm-header .fm-hamburger-line{background:#151A31 !important}
html body:has(.pu,.fpk) header.fm-header .fm-hamburger:hover .fm-hamburger-line,
html body:has(.pu,.fpk) header.fm-header .fm-hamburger.active .fm-hamburger-line{background:#845A0B !important}

/* ── 15. Bewegung: Dinge klatschen drauf (einmal, mit Überschwingen), nie gleiten. punk.js setzt .da ── */
@media (prefers-reduced-motion:no-preference){
  .pu-rein{transition:transform .5s var(--klatsch),opacity .15s linear}
  .pu-rein:not(.da){transform:scale(1.4) rotate(-4deg);opacity:0}
  .pu-rein.da:nth-child(2){transition-delay:.1s}.pu-rein.da:nth-child(3){transition-delay:.2s}.pu-rein.da:nth-child(4){transition-delay:.3s}
  .pu-stempel-wrap.pu-rein:not(.da){transform:scale(1.8);opacity:0}
}

/* ── 16. Geräte: eine Grösse fliesst (clamp), die Menge passt. Handy eine Spalte; Duo offen: alles Lesbare links vom Falz ── */
@media (max-width:700px){
  .pu-stufen{grid-template-columns:1fr;gap:10px;align-items:stretch}
  .pu-stufen>li{min-height:0;width:calc(52% + 12% * var(--h,1));rotate:calc((var(--h,1) - 2.5) * -.8deg);transform-origin:0 50%}
  .pu-fotos{grid-template-columns:1fr;gap:34px}
  .pu-hand{width:96vw;right:-30vw;top:auto;bottom:-16vw;translate:none}
  .pu-mithand .pu-in{max-width:100%;padding-bottom:62vw}
  .pu-kleber .nr{font-size:clamp(70px,min(22vw,35.2svh),110px)}
}
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait){
  .pu-stufen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pu-fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:701px) and (max-width:1100px) and (min-aspect-ratio:3/2){
  .pu-in,.pu-stufen,.pu-striche,.pu-streifen,.pu-kleber{max-width:calc(50vw - var(--rand) - 40px)!important}
  .pu-wort,.pu-erp{font-size:6.4vw}.pu-titel{font-size:5.4vw}.pu-dreh,.pu-satz{font-size:3.6vw}
  .pu-fotos{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px}
}
@media (prefers-reduced-motion:reduce){.pu *{transition:none!important;animation:none!important}}

/* ── Gerade statt schief (Andy 03.11.2026 abends: «es darf nicht alles krumm und quer sein», «die headlines müssen wir minimieren
   mit dem erpresser style», «ich finde so überschriften gut» zum FUNKE-Kopf). Alles steht gerade; schief bleiben nur Stempel, Tape
   und kleine Etiketten. Der Erpresserbrief kommt auf den Seiten nicht mehr vor: Überschrift gerade, die Pointe als .pu-mark.navy. ── */
.pu :not(.pu-stempel-wrap,.pu-stempel,.pu-tape,.pu-tag){rotate:none!important}
.pu .pu-rein:not(.da,.pu-stempel-wrap){transform:none!important}

/* Andy 03.11. spät: «bei den App-Screens macht das Tape keinen Sinn!»: Bildschirme tragen kein Tape, nur Fotos und Zettel */
.pu :is(.ab-scr,.ap-tel,.ad-app,.dd-app,.pm-app,.td-scr) > .pu-tape{display:none}

/* Andy 03.11. spät zu /kontakt: «das Design der Schrift ist nicht gut!» – der Navy-Balken frass die Zeile darüber
   (Zeilenabstand .84), die Unterzeilen waren zu dünn (300). Titel mit Balken bekommen Luft, die Pointe steht auf eigener
   Zeile, Unterzeilen in 500 statt 300. Gilt für alle Punk-Seiten. */
.pu :is(.pu-wort,.pu-titel):has(.pu-mark){line-height:1.04}
.pu :is(.pu-wort,.pu-titel) .pu-mark{display:inline-block;margin-top:.08em;padding:.02em .12em .06em;line-height:.96}
.pu .pu-dreh,.pu .pu-satz{font-weight:500;letter-spacing:-.02em;line-height:1.12}
.pu .pu-wort .pu-leicht,.pu .pu-leicht{font-weight:400}
/* Handy quer (Andy 03.11. spät «iPhone hoch und quer … optimal responsive»): Titel wuchsen nur mit der Breite und füllten bei 340px Höhe den ganzen Bildschirm. Quer misst die Höhe mit. */
@media (orientation:landscape) and (max-height:500px){
  .pu :is(h1,.pu-wort,.pu-titel){font-size:clamp(30px,12svh,52px)!important;line-height:1.02}
  .pu h2:not(.pu-wort,.pu-titel){font-size:clamp(26px,10svh,44px)!important}
  .pu :is(.pu-dreh,.pu-satz){font-size:clamp(18px,6svh,26px)!important}
}