/* punk-guides.css · Seiten-eigene Ergänzungen zu website-punk.css (Andy 03.11.2026, Punk-Welle 1). Nur was website-punk.css nicht kann.
   Guide-Übersicht (.pg, _partials/guides-punk.twig) und Guide-Profil (.pp, people/_entry.twig + people/_profil-punk.twig).
   Flach und kantig wie die Bausteine: Radius 0, kein Glas, kein Verlauf, nur der harte Versatz var(--kante). */

/* ── Gemeinsam ── */
.pg [id],.pp [id]{scroll-margin-top:96px}
/* Langer Titel: eine Sprosse unter pu-titel (welt-website: lange Texte stehen kleiner) */
.pu .pg-lang{font-size:clamp(34px,min(4.6vw,7.36svh),72px);line-height:.98;max-width:20ch}
.pu .pu-streifen details p a{display:inline-flex;align-items:center;min-height:44px}
.pu .pu-streifen details p a,.pu .pu-klein a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.pu .pu-klein b{font-weight:600}

/* ═════════ GUIDE-ÜBERSICHT ═════════ */

/* Orte als Aufkleber (Sprungmarken in die Regionen) */
.pg-orte{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(28px,3.4vw,48px);max-width:1100px}
.pg-orte a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;background:var(--navy);color:var(--papier);font:600 15px/1 var(--txt);text-decoration:none;rotate:-1.2deg;box-shadow:var(--kante);transition:rotate .2s var(--ease)}
.pg-orte a:nth-child(3n+2){background:var(--lila);color:var(--navy);rotate:1deg}
.pg-orte a:nth-child(3n+3){background:var(--kamel);color:var(--navy);rotate:-.4deg}
.pg-orte a:hover{rotate:0deg}
.pg-orte sup{font-size:12px;line-height:1;vertical-align:baseline;opacity:.8}

/* Kontaktbogen: alle Gesichter klein, schwarz-weiss kopiert. Handy und iPad: eine Reihe zum Wischen, Rechner: umbrochen */
.pg-bogen{position:relative;z-index:1;list-style:none;display:flex;gap:10px;margin:clamp(28px,3vw,44px) calc(var(--rand) * -1) 0;padding:6px var(--rand) 14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--rand);scrollbar-width:thin;scrollbar-color:var(--navy) transparent}
.pg-bogen li{flex:none;scroll-snap-align:start}
.pg-bogen a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:76px;color:var(--navy);text-decoration:none}
.pg-pass{display:block;width:76px;height:76px;padding:4px;background:var(--kamel)}
.pg-bogen li:nth-child(3n+2) .pg-pass{background:var(--gold)}
.pg-bogen li:nth-child(3n+3) .pg-pass{background:var(--lila)}
.pg-pass img{width:100%;height:100%;object-fit:cover}
.pg-vn{font:600 13px/1.2 var(--txt);max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-bogen a:hover .pg-pass{rotate:-3deg}
@media (min-width:1101px){.pg-bogen{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;max-width:1248px}}

/* Fotos: Beschriftung unter dem Namen-Aufkleber */
.pu-foto .pg-info small{display:block;margin-top:3px;font:500 14px/1.35 var(--txt)}
.pu-foto .pg-weiter{display:block;margin-top:8px;font:600 15px/1.3 var(--txt);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pg-leer{display:block;aspect-ratio:4/5;background:rgba(21,26,49,.12)}
.pg-leads{max-width:880px}
.pg-band{grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));gap:clamp(30px,3vw,48px) clamp(18px,2.2vw,36px)}
.pg-band .pu-foto b{font-size:clamp(19px,min(1.7vw,2.72svh),25px)}

/* Online-Schalter (wie bisher: Klasse nur-online am #gr dimmt alle ohne Online) */
.pg-online{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;font:500 clamp(16px,min(1.4vw,2.24svh),19px)/1.4 var(--txt)}
.pg-schalter{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;background:transparent;color:var(--navy);border:2px solid var(--navy);font:600 16px/1 var(--txt);cursor:pointer;rotate:-1deg;transition:background .2s var(--ease),color .2s var(--ease)}
.pg-schalter:hover{background:rgba(21,26,49,.08)}
.pg-schalter[aria-pressed="true"]{background:var(--navy);color:var(--papier)}
.pg.nur-online .pg-pp[data-online=""]{opacity:.22}
.pg-pp{transition:opacity .2s linear}

/* Regionen */
.pg-reg{position:relative;z-index:1;margin-top:clamp(64px,8vw,120px)}
.pg-reg-h{font:600 clamp(34px,min(4.4vw,7.04svh),68px)/.95 var(--dsp);letter-spacing:-.04em}
.pg-reg-orte{margin-top:10px;font:500 clamp(15px,min(1.3vw,2.08svh),18px)/1.45 var(--txt);color:var(--grau);max-width:60ch}
.pg-reg .pu-fotos{margin-top:clamp(28px,3vw,44px)}
.pg-facts{position:relative;z-index:1;margin-top:clamp(64px,7vw,104px);max-width:52ch}

@media (max-width:700px){
  .pu-fotos.pg-leads{grid-template-columns:1fr;gap:34px}
  .pu-fotos.pg-band{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .pg-band .pu-foto{padding:7px 7px 0}
  .pg-band .pu-foto b{font-size:18px;margin:-18px 0 0 -4px;padding:5px 8px 6px}
  .pg-band .pu-foto span.pg-info{padding:8px 2px 12px;font-size:14px}
  .pg-band .pg-weiter{font-size:14px}
}
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait){
  .pu-fotos.pg-band{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Duo offen: zwei Spalten, der Falz liegt im Zwischenraum */
@media (min-width:701px) and (max-width:1100px) and (min-aspect-ratio:3/2){
  .pu-fotos.pg-band,.pu-fotos.pg-leads{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 80px;max-width:none}
  .pg-orte,.pg-online,.pg-facts{max-width:calc(50vw - var(--rand) - 40px)}
  .pg-bogen{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;max-width:calc(50vw - var(--rand) - 40px)}
}

/* ═════════ GUIDE-PROFIL ═════════ */

/* Held: Porträt kopiert mit Tape, Name gross, der Satz, ein Weg */
.pp-held-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(34px,5vw,96px);align-items:center;max-width:1248px}
.pp-foto{max-width:520px;--fg:var(--kamel);--k:-1.8deg}
.pp-foto b{font-size:clamp(18px,min(1.6vw,2.56svh),24px)}
.pp-init{display:grid;place-items:center;aspect-ratio:4/5;font:300 clamp(64px,min(8vw,12.8svh),120px)/1 var(--dsp);color:var(--navy);background:rgba(21,26,49,.1)}
.pp-name{font-size:clamp(44px,min(5.6vw,8.96svh),96px);overflow-wrap:break-word}
.pp-zk{max-width:22ch}
.pp-facts{font-size:clamp(15px,min(1.2vw,1.92svh),17px)}
.pp .pu-wege button.pu-link{background:none;border:0;padding:0;cursor:pointer}

/* Spiegel (people/_profil-spiegel.twig, Markup unverändert): Navy-Fläche, die Sätze als Streifen zum Aufklappen */
.pp .gp-sp{position:relative;background:var(--navy);color:var(--papier);padding:clamp(80px,9vw,150px) var(--rand) clamp(64px,8vw,120px)}
.pp .gp-sp .wrap{max-width:1248px;margin:0;padding:0;width:auto}
.pp .gp-sp-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.pp .gp-sp-h{font:600 clamp(34px,min(4.4vw,7.04svh),68px)/.98 var(--dsp);letter-spacing:-.04em;text-wrap:balance}
.pp .gp-sp-h .l{font-weight:300}
.pp .gp-sp-h .g{color:var(--gold)}
.pp .gp-sp-intro{margin-top:18px;font:500 clamp(16px,min(1.4vw,2.24svh),19px)/1.5 var(--txt);max-width:34ch}
.pp .gp-spl{display:flex;flex-direction:column;gap:14px}
.pp .gp-spz{position:relative;padding:0 18px;background:var(--kamel);color:var(--navy);box-shadow:var(--kante);rotate:-.8deg}
.pp .gp-spz:nth-child(4n+2){background:var(--papier);rotate:.6deg;margin-left:3%}
.pp .gp-spz:nth-child(4n+3){background:var(--lila);rotate:-.4deg}
.pp .gp-spz:nth-child(4n+4){background:var(--gold);rotate:.9deg;margin-left:2%}
.pp div.gp-spz{padding:16px 18px}
.pp .gp-spz summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:21px;min-height:64px;padding:12px 0}
.pp .gp-spz summary::-webkit-details-marker{display:none}
.pp .gp-spz .t{font:600 clamp(20px,min(2.2vw,3.52svh),30px)/1.08 var(--dsp);letter-spacing:-.025em}
.pp .gp-spz .p{flex:none;display:grid;place-items:center;width:44px;height:44px;background:var(--navy);rotate:6deg;transition:rotate .2s var(--ease)}
.pp .gp-spz .p::before{content:'+';color:var(--gold);font:600 30px/1 var(--dsp)}
.pp .gp-spz[open] .p{rotate:51deg}
.pp .gp-spz .d{padding:0 0 8px;font:500 clamp(15px,min(1.3vw,2.08svh),18px)/1.55 var(--txt);max-width:58ch}
.pp .gp-spz .m{display:inline-flex;align-items:center;min-height:44px;margin-bottom:8px;color:var(--navy);font:600 16px/1 var(--txt);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.pp .gp-sp-miss{margin-top:28px;font:500 clamp(16px,min(1.4vw,2.24svh),19px)/1.5 var(--txt)}
.pp .gp-sp-miss a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* Warum: in ihren eigenen Worten */
.pu .pp-quote{max-width:28ch;font-size:clamp(26px,min(3vw,4.8svh),46px);line-height:1.1}
.pp-mehr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(34px,4vw,60px);max-width:1100px}
.pp-lab{font:600 15px/1.3 var(--txt);margin-bottom:8px}
.pp-mehr p{font:500 clamp(15px,min(1.3vw,2.08svh),17px)/1.6 var(--txt);max-width:60ch}
.pp-mehr p+p{margin-top:8px}

/* Ablauf als Stufen */
.pp-stufen b{font-size:clamp(24px,min(2.4vw,3.84svh),36px);line-height:.95}
.pp-k{display:block;font:600 14px/1 var(--txt)}
.pp-stufen small .hl{font-weight:600}

/* Medien / Aus meiner Feder als Streifen */
.pp-presse-liste>li{font-size:clamp(20px,min(2.2vw,3.52svh),30px)}
.pp-presse-liste a{display:block;color:inherit;text-decoration:none}
.pp-presse-liste a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.pp-quelle{font-weight:600}

/* Termin: Gold-Fläche, Buchung im Punk-Kleid (booking.css bleibt, hier nur die Haut: eckig, Ink statt Magenta) */
.pp-termin .pu-in{max-width:min(100%,960px)}
.pp-preis{margin-top:14px;font:600 16px/1.4 var(--txt)}
.pp .booking-inline-wrap{padding:0;margin-top:clamp(24px,3vw,36px);max-width:480px}
.pp .booking-widget-card{border:0;border-radius:0;background:var(--weiss);box-shadow:var(--kante);padding:22px 20px 20px}
.pp .bk-btn{border-radius:0;background:var(--navy);color:var(--papier);box-shadow:none;min-height:56px;font-size:16px}
.pp .bk-btn:hover{background:#2A3157;transform:none}
.pp .bk-btn:disabled{background:rgba(21,26,49,.12);color:var(--grau)}
.pp .bk-back{min-height:44px;color:var(--grau)}
.pp .bk-session{border-radius:0;background:var(--papier)}
.pp .bk-session.selected{border-color:var(--navy);box-shadow:var(--kante)}
.pp .bk-session.selected .bk-session-price{background:var(--navy);color:var(--gold)}
.pp .bk-session-price{border-radius:0}
.pp .bk-radio{border-radius:0}
.pp .bk-session.selected .bk-radio{background:var(--navy);border-color:var(--navy)}
.pp .bk-session.selected .bk-radio::after{border-radius:0;background:var(--gold)}
.pp .bk-cal-btn{width:44px;height:44px;border-radius:0;border:2px solid var(--navy)}
.pp .bk-cal-day{border-radius:0;min-height:40px}
.pp .bk-cal-day.available{background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--navy)}
.pp .bk-cal-day.available:hover{background:var(--navy);color:var(--gold)}
.pp .bk-cal-day.selected{background:var(--navy) !important;color:var(--gold) !important}
.pp .bk-cal-day.today.available{box-shadow:inset 0 0 0 2.5px var(--navy)}
.pp .bk-date-display{border-left:0;border-radius:0;background:var(--papier)}
.pp .bk-slot{border-radius:0;min-height:44px}
.pp .bk-slot.selected{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.pp .bk-summary{border-radius:0}
.pp .bk-field label{color:var(--goldp)}
.pp .bk-field input,.pp .bk-field textarea{border-radius:0;border:1.5px solid rgba(21,26,49,.35);background:#fff;min-height:48px}
.pp .bk-field input:focus,.pp .bk-field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--gold)}
.pp .bk-confirm-close{border-radius:0;min-height:48px}
.pp .bk-progl,.pp .bk-pick,.pp .bk-alt,.pp .bk-field-help{font-size:14px;color:var(--grau);margin-top:10px}
.pp .bk-alt a{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.pp .bk-confirm-date{font:600 clamp(32px,min(6vw,9.6svh),44px)/1 var(--dsp);letter-spacing:-.02em;margin:14px 0 4px}

/* Kontakt: Zettel statt Karten, ein Weg je Zettel */
.pp .fin-contact-line{margin-top:clamp(28px,4vw,44px);font:500 16px/1.6 var(--txt)}
.pp .fin-contact-line a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.pp .fcl-lab{margin-right:8px}
.pp .kcards{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(28px,4vw,44px)}
.pp .kcard{flex:0 1 240px;min-width:min(100%,200px);display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px;background:var(--weiss);color:var(--navy);text-decoration:none;box-shadow:var(--kante);rotate:-.8deg;transition:rotate .2s var(--ease)}
.pp .kcard:nth-child(2n){rotate:.7deg}
.pp a.kcard:hover{rotate:0deg}
.pp .kc-icon svg{width:24px;height:24px}
.pp .kc-lab{font:600 18px/1.2 var(--txt)}
.pp .kc-sub{font:500 14px/1.4 var(--txt)}
.pp .kc-link{display:inline-flex;align-items:center;min-height:44px;margin-right:14px;color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.pp .vcf{display:inline-flex;align-items:center;gap:9px;min-height:48px;margin-top:24px;padding:0 18px;background:transparent;color:var(--navy);border:2px solid var(--navy);font:600 15px/1 var(--txt);cursor:pointer;rotate:-1deg}
.pp .vcf:hover{background:rgba(21,26,49,.08)}
.pp .vcf svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.pp .fin-trust{margin-top:clamp(28px,4vw,40px);font:500 15px/1.5 var(--txt)}
.pp .fin-trust b{font-weight:600}
.pp .claim{margin-top:6px;font:500 14px/1.4 var(--txt);color:var(--aub)}

/* Leiste am Handy (zeigt nur den ersten Weg) */
.pp-dock{display:none}
@media (max-width:760px){
  .pp{padding-bottom:84px}
  .pp-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;background:var(--papier);border:2px solid var(--navy);box-shadow:var(--kante);transform:translateY(160%);transition:transform .3s var(--ease)}
  .pp-dock.on{transform:none}
  .pp-dock img{width:40px;height:40px;object-fit:cover;flex:none}
  .pp-dn{flex:1;min-width:0;font:600 14px/1.2 var(--txt);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pp-dn small{display:block;font:500 13px/1.3 var(--txt);color:var(--grau)}
  .pp-dock .pu-link{display:none}
  .pp-dock .pu-knopf{flex:none;min-height:48px;padding:0 16px;font-size:15px;rotate:0deg}
}

@media (max-width:760px){
  .pp-held-grid{grid-template-columns:1fr;gap:clamp(34px,8vw,48px)}
  .pp-foto{max-width:min(100%,420px)}
  .pp .gp-sp-grid{grid-template-columns:1fr}
}
/* Duo offen und iPad hoch: Porträt links, Text rechts, der Falz (80 in der Mitte) bleibt frei */
@media (min-width:761px) and (max-width:1100px){
  .pp-held-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:80px}
  .pp .gp-sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:80px}
}
@media (min-width:701px) and (max-width:1100px) and (min-aspect-ratio:3/2){
  .pp-name{font-size:5vw}
  .pp-mehr{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:80px;max-width:none}
  .pp-stufen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pu-foto .pp-ohne{padding:0 0 12px}

/* Tippfläche für Textlinks im Profil (Prüflauf 03.11.: «Alle Insights ansehen» 25px) */
.pp a.pu-link,.pp .pp-mehr-link,.pu .pp-insights a{display:inline-flex;align-items:center;min-height:44px}