/* punk-rest.css · Seiten-eigene Ergänzungen zu website-punk.css (Andy 03.11.2026, Punk-Welle 3, Helfer h-rest). Nur was website-punk.css nicht kann.
   Stadtseite /guides/<stadt> (.pu.st, _partials/stadt-punk.twig), Lebendige Familie (.pu.fa, _partials/familie-punk.twig),
   Einverständnis Kinder: nur die Kinder-Bausteine (attendance-*, child-*), die punk-recht.css (.pu.re, Helfer h-recht) nicht kennt.
   Flach und kantig wie die Bausteine: Radius 0, kein Glas, kein Verlauf, nur der harte Versatz var(--kante). */

/* ═════════ STADTSEITE (.pu.st) ═════════ */
.pu.st [id]{scroll-margin-top:96px}
.pu.st .st-lang{font-size:clamp(34px,min(4.6vw,7.36svh),72px);line-height:.98;max-width:20ch}
.pu.st .st-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-bottom:clamp(18px,2.4vw,32px);font:500 16px/1.3 var(--txt)}
.pu.st .st-crumb 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}
.pu.st .st-crumb b{font-weight:600}
.pu.st .st-stadt{overflow-wrap:break-word;hyphens:manual}
.pu.st .st-stadt .st-pointe{display:inline-block;margin-top:.18em;font-size:.42em;line-height:1.05;letter-spacing:-.035em}
.pu.st .st-sub{max-width:52ch}

/* Guides als Fotos auf Karton (wie pg-band auf der Übersicht, kopiert) */
.pu.st .st-band{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(30px,3vw,48px) clamp(18px,2.2vw,36px);max-width:1180px}
.pu.st .st-band .pu-foto b{font-size:clamp(19px,min(1.7vw,2.72svh),25px)}
.pu.st .pu-foto .st-info{display:block;padding:10px 4px 14px;font:500 15px/1.35 var(--txt)}
.pu.st .pu-foto .st-info .st-spec{display:inline;padding:0;font:inherit}
.pu.st .pu-foto .st-info small{display:block;margin-top:3px;font:500 14px/1.35 var(--txt)}
.pu.st .pu-foto .st-weiter{display:block;margin-top:8px;font:600 15px/1.3 var(--txt);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pu.st .st-init{display:grid;place-items:center;aspect-ratio:4/5;font:300 clamp(56px,min(6vw,9.6svh),96px)/1 var(--dsp);color:var(--navy);background:rgba(21,26,49,.1)}

/* Themen und Orte als Aufkleber (wie pg-orte, kopiert) */
.pu.st .st-kleber{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(28px,3.4vw,48px);max-width:1100px}
.pu.st .st-kleber a{display:inline-flex;align-items:center;min-height:48px;padding:8px 16px;background:var(--navy);color:var(--papier);font:600 16px/1.2 var(--txt);text-decoration:none;box-shadow:var(--kante)}
.pu.st .st-kleber a:nth-child(3n+2){background:var(--papier);color:var(--navy)}
.pu.st .st-kleber a:nth-child(3n+3){background:var(--lila);color:var(--navy)}
.pu.st .st-orte a:nth-child(3n+3){background:var(--gold)}
.pu.st .st-kleber a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pu.st .st-h{font:600 clamp(34px,min(4.4vw,7.04svh),68px)/.95 var(--dsp);letter-spacing:-.04em}
.pu.st .st-fragen summary{font-size:clamp(20px,min(2.2vw,3.52svh),32px)}
.pu.st .st-fin{max-width:16ch}

@media (max-width:700px){
  .pu.st .pu-fotos.st-band{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .pu.st .st-band .pu-foto{padding:7px 7px 0}
  .pu.st .st-band .pu-foto b{font-size:18px;margin:-18px 0 0 -4px;padding:5px 8px 6px}
  .pu.st .st-band .pu-foto .st-info{padding:8px 2px 12px;font-size:14px}
  .pu.st .st-kleber a{font-size:15px}
}
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait){
  .pu.st .pu-fotos.st-band{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Duo offen: zwei Spalten, der Falz liegt im Zwischenraum; Lesbares links */
@media (min-width:701px) and (max-width:1100px) and (min-aspect-ratio:3/2){
  .pu.st .pu-fotos.st-band{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 80px;max-width:none}
  .pu.st .st-kleber{max-width:calc(50vw - var(--rand) - 40px)}
}

/* ═════════ LEBENDIGE FAMILIE (.pu.fa) ═════════ */
.pu.fa [id]{scroll-margin-top:96px}
.pu.fa .fa-h1{line-height:1.02}
.pu.fa .fa-h1 .pu-mark{line-height:1.1}
.pu.fa .fa-sub{max-width:46ch}
.pu.fa .pu-klein b{font-weight:600}
.pu.fa .fa-lese{max-width:56ch}
.pu.fa .fa-lang{font-size:clamp(34px,min(4.6vw,7.36svh),72px);line-height:.98;max-width:22ch}
.pu.fa .fa-tag{margin-top:clamp(18px,2vw,26px)}
.pu.fa .fa-stufen{max-width:1100px}
.pu.fa .fa-stufen b{font-size:clamp(24px,min(2.4vw,3.84svh),36px);line-height:.95}
.pu.fa .fa-stufen .snr{font-size:14px}
.pu.fa .fa-statt{max-width:900px}
.pu.fa .fa-statt small{opacity:.85}
.pu.fa .fa-fin{max-width:16ch}
.pu.fa .fa-fin .pu-leicht{display:block;margin-top:.2em;font-size:.6em;line-height:1.02}

/* ═════════ EINVERSTÄNDNIS KINDER: Kinder-Bausteine im Rahmen von punk-recht (.pu.re) ═════════ */
/* Anwesenheit: zwei Wege zum Wählen, wie touch-option */
.pu.re .attendance{background:var(--papier);color:var(--navy);box-shadow:var(--kante);padding:20px clamp(16px,2.4vw,28px);margin:clamp(24px,3vw,40px) 0 0;border:0;border-radius:0}
.pu.re .attendance-title,.pu.re .child-name-label{display:inline-block;margin-bottom:12px;background:var(--navy);color:var(--gold);font:600 14px/1 var(--txt);letter-spacing:.02em;text-transform:none;padding:6px 9px}
.pu.re .attendance-option{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;margin-bottom:10px;background:var(--weiss);border:2px solid var(--navy);border-radius:0;cursor:pointer;transition:background .12s linear}
.pu.re .attendance-option:hover{background:rgba(228,181,106,.3)}
.pu.re .attendance-option.selected{background:var(--gold)}
.pu.re .attendance-radio{flex:none;display:grid;place-items:center;width:26px;height:26px;margin:0;background:var(--weiss);border:2.5px solid var(--navy);border-radius:0}
.pu.re .attendance-option.selected .attendance-radio::after{content:'';width:12px;height:12px;background:var(--navy)}
.pu.re .attendance-option-text{font:400 16px/1.4 var(--txt);color:var(--navy)}
.pu.re .attendance-option-text strong{font-weight:600}
.pu.re .attendance-option-sub{font:500 14px/1.4 var(--txt);color:var(--grau)}

/* Für dich: der Kinder-Teil als Lila-Zettel */
.pu.re .child-section{position:relative;background:var(--lila);color:var(--navy);box-shadow:var(--kante);padding:clamp(22px,3vw,36px) clamp(18px,2.6vw,32px);margin:clamp(34px,4vw,55px) 0 0;border:0;border-radius:0}
.pu.re .child-hello{font:600 clamp(32px,min(4vw,6.4svh),48px)/1 var(--dsp);letter-spacing:-.03em;color:var(--navy);margin-bottom:14px}
.pu.re .child-title{font:600 clamp(19px,min(2vw,3.2svh),22px)/1.3 var(--txt);color:var(--navy);margin-bottom:8px}
.pu.re .child-text{font:500 17px/1.65 var(--txt);color:var(--navy);margin-bottom:22px}
.pu.re .child-touch-title{font:600 18px/1.3 var(--txt);color:var(--navy);margin-bottom:8px}
.pu.re .child-touch-text{font:500 16px/1.6 var(--txt);color:var(--navy);margin-bottom:16px}
.pu.re .child-touch-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.pu.re .child-touch-option{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:14px 16px;background:var(--weiss);border:2px solid var(--navy);border-radius:0;cursor:pointer;text-align:left;transition:background .12s linear}
.pu.re .child-touch-option:hover{background:rgba(228,181,106,.3)}
.pu.re .child-touch-option.selected{background:var(--gold)}
.pu.re .child-touch-option-title{font:600 16px/1.3 var(--txt);color:var(--navy);margin-bottom:4px}
.pu.re .child-touch-option-desc{font:500 14px/1.4 var(--txt);color:var(--navy)}
.pu.re .child-stopp{background:var(--navy);color:var(--gold);padding:16px 20px;margin-bottom:22px;border-radius:0;text-align:left}
.pu.re .child-stopp-text{font:600 17px/1.5 var(--txt);color:var(--gold)}
.pu.re .child-name-section{margin-top:22px}
.pu.re .child-name-input{width:100%;padding:16px;border:2px dashed var(--navy);border-radius:0;background:var(--weiss)}
.pu.re .child-name-hint{font:500 14px/1.4 var(--txt);color:var(--navy);margin-top:8px}

@media (max-width:700px){
  .pu.re .child-touch-options{grid-template-columns:1fr}
}
@media (min-width:701px) and (max-width:1100px) and (min-aspect-ratio:3/2){
  .pu.re .child-touch-options{grid-template-columns:1fr}
}
@media print{
  .pu.re .child-section,.pu.re .attendance{box-shadow:none}
}