/* /atem · Das Pflaster (Andy 05.11.2026). Bausteine website-punk.css, hier nur Spieler, Anzeige und Karten. Namensraum .at */
.at .at-held{min-height:0;justify-content:center;padding-top:clamp(96px,10vw,150px);padding-bottom:clamp(34px,6vw,90px)}
.at .pu-f.kurz{padding-top:clamp(44px,6vw,90px);padding-bottom:clamp(44px,6vw,90px)}
.at-raster{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,3vw,48px);align-items:center}
.at .at-held .pu-wort{font-size:clamp(44px,min(10vw,11svh),150px)}
.at-zahl{display:inline-block;margin-top:clamp(8px,1.4vw,18px);padding:3px 12px 5px;background:var(--t);color:var(--g);font:600 clamp(20px,min(2.4vw,4svh),34px)/1.1 var(--dsp);letter-spacing:-.02em;rotate:-1.2deg}
.at .at-text .pu-dreh{margin-top:clamp(10px,1.8vw,26px);font-size:clamp(20px,min(2.8vw,4.2svh),44px);max-width:24ch}
.at .at-so{gap:9px;margin-top:clamp(16px,2vw,26px);max-width:34ch}
.at .at-so>*{padding:9px 14px 10px;font-size:clamp(18px,min(1.9vw,3.2svh),28px)}
.at .pu-lila .at-so>:nth-child(3),.at .pu-gold .at-so>:nth-child(4),.at .pu-kamel .at-so>:nth-child(1){background:var(--papier)}
.at .pu-kamel .at-so>:nth-child(2){background:var(--weiss)}
.at .pu-kamel .at-so>:nth-child(4){background:var(--gold)}
.at-service{margin-top:clamp(12px,1.4vw,18px);max-width:44ch;font:500 clamp(16px,min(1.3vw,2.4svh),19px)/1.45 var(--txt)}
.at-spieler{min-width:0;scroll-margin-block:16px}
.at-buehne{container-type:inline-size;position:relative;width:min(100%,60svh,720px);aspect-ratio:1;margin-inline:auto}
.at-svg{display:block;width:100%;height:100%;overflow:visible}
.at-anzeige{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;text-align:center}
.at-sek{font:600 clamp(72px,min(24vw,20svh),190px)/.85 var(--dsp);letter-spacing:-.06em}
.at-phase{font:600 clamp(20px,min(4.4vw,4svh),34px)/1 var(--txt)}
.at-tacho .at-anzeige{justify-content:flex-end;color:var(--papier)}
.at-tacho .at-sek{font-size:clamp(60px,min(18vw,15svh),130px)}
/* Schiffchen: Wort und Zahl füllen das Wasser (Andy 06.11.: «so viel Platz», «die Schrift ist mini») */
.at-schiff .at-anzeige{inset:48% 0 0;flex-direction:row;align-items:center;justify-content:center;gap:5cqw;color:var(--papier)}
.at-schiff .at-phase{font:600 17cqw/1 var(--dsp);letter-spacing:-.04em}
.at-schiff .at-sek{font-size:42cqw;line-height:.85}
.at-schiff .at-phase.at-rock{font-size:15cqw}
.at-phase.at-rock{font:600 10.5cqw/1 var(--dsp);letter-spacing:-.04em;white-space:nowrap}
.at-plakat .at-anzeige{color:var(--papier)}
.at-kurve .at-anzeige{inset:auto auto 0 0;align-items:flex-start;color:var(--papier)}
.at-kurve .at-sek{font-size:clamp(60px,min(18vw,15svh),130px)}
.at-griffe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;width:min(100%,60svh,720px);margin:clamp(12px,1.6vw,22px) auto 0}
.at-griffe .pu-klein{margin:0;font-size:16px}
.at-griffe .at-runde:empty{display:none}
/* Knopf JETZT ATMEN (Andy 06.11.: «noch geiler», Rebel): gross, schief, harte Kante, Klebeband, atmet in Ruhe mit */
.at .at-start{position:relative;flex:1 1 100%;justify-content:center;min-height:clamp(66px,min(9vw,10svh),88px);padding:10px 22px;border:0;border-radius:0;cursor:pointer;font:600 clamp(32px,min(4.2vw,6.4svh),52px)/1 var(--dsp);letter-spacing:-.04em;rotate:-1.6deg;box-shadow:7px 8px 0 var(--papier);transition:transform .12s var(--klatsch),box-shadow .12s var(--ease),background .25s var(--ease),color .25s var(--ease);animation:at-puls 5s ease-in-out infinite}
.at .at-start::before{content:'';position:absolute;top:-11px;right:9%;width:clamp(68px,8vw,104px);height:24px;background:var(--tape);rotate:5deg;pointer-events:none}
.at .at-start:hover{transform:translate(-2px,-2px);box-shadow:10px 11px 0 var(--papier)}
.at .at-start:active{transform:translate(6px,7px);box-shadow:1px 1px 0 var(--papier)}
.at .at-start.laeuft{animation:none;background:transparent;color:inherit;box-shadow:inset 0 0 0 3px currentColor;font-size:clamp(24px,min(3vw,4.6svh),36px);rotate:0deg}
.at .at-start.laeuft::before{display:none}
@keyframes at-puls{50%{scale:1.025}}
.at .pu-f .at-start:not(.laeuft){background:var(--mag);color:#fff}
.at .pu-f .at-start:not(.laeuft):hover{background:var(--magh)}
.at-teil{width:min(100%,60svh,720px);margin:clamp(14px,1.8vw,24px) auto 0}
.at-liste>.at-teil{position:relative;z-index:1;width:auto;margin:clamp(24px,3vw,40px) 0 0}
.at-schick{margin:0 0 10px;font-size:16px}
.at-kleber{display:flex;flex-wrap:wrap;gap:10px 12px}
.at-tk{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 15px;background:var(--papier);color:var(--navy);border:0;box-shadow:var(--kante);font:600 17px/1 var(--txt);text-decoration:none;cursor:pointer;rotate:-1.2deg;transition:transform .12s var(--klatsch)}
.at-tk:nth-child(2){background:var(--gold);rotate:.8deg}
.at-tk:nth-child(3){rotate:-.6deg}
.at-tk:nth-child(4){background:var(--lila);rotate:1deg}
.pu-gold .at-tk:nth-child(2),.pu-kamel .at-tk:nth-child(2){background:var(--weiss)}
.pu-lila .at-tk:nth-child(4){background:var(--weiss)}
.at-tk:hover{transform:scale(1.04)}.at-tk:active{transform:scale(.96)}
.at-tk[hidden]{display:none}
.at-tk svg{width:22px;height:22px;flex:none}
.at-herkunft .pu-titel{max-width:22ch}
.at-ehrlich{position:relative;margin-top:clamp(16px,2vw,28px);max-width:58ch;font:500 clamp(18px,min(1.7vw,2.9svh),24px)/1.45 var(--txt);color:var(--navy)}
.at-ehrlich b{font-weight:600}
.at-warnung .at-ehrlich{color:var(--papier)}
.at-quelle{margin-top:clamp(12px,1.4vw,18px)}
.at-frage{margin-top:clamp(28px,3.4vw,48px);font:600 clamp(24px,min(3vw,4.8svh),40px)/1.05 var(--dsp);letter-spacing:-.03em;color:var(--navy)}
.at-frage+.at-ehrlich{margin-top:clamp(8px,1vw,14px)}
.at-warn-raster{align-items:start}
.at-warnung .pu-dreh{font-size:clamp(22px,min(2.4vw,3.8svh),36px);max-width:26ch}
/* Plakat mit den drei Regeln: Klebeband oben, Regeln knallen nacheinander rein */
.at-regeln{position:relative;margin-top:clamp(14px,2vw,30px);padding:clamp(24px,3vw,44px) clamp(20px,2.6vw,38px);background:var(--gold);color:var(--navy);box-shadow:var(--kante);rotate:1.2deg}
.at-regeln-kopf{font:600 clamp(36px,min(4.6vw,7svh),72px)/.9 var(--dsp);letter-spacing:-.045em}
.at-regeln ol{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);margin-top:clamp(18px,2.2vw,30px);list-style:none;counter-reset:r}
.at-regeln li{position:relative;padding-left:clamp(42px,4vw,60px);counter-increment:r}
.at-regeln li::before{content:counter(r);position:absolute;left:0;top:-.04em;font:600 clamp(40px,4vw,60px)/.9 var(--dsp);color:var(--aub)}
.at-regeln strong{display:block;font:600 clamp(23px,min(2.5vw,4svh),38px)/1.02 var(--dsp);letter-spacing:-.03em}
.at-regeln span{display:block;margin-top:5px;font:500 clamp(15px,1.25vw,18px)/1.35 var(--txt)}
.at-regeln.bereit li{opacity:0;transform:scale(1.28) rotate(-2deg)}
.at-regeln.los li{opacity:1;transform:none;transition:opacity .08s linear,transform .26s var(--klatsch)}
.at-regeln.los li:nth-child(2){transition-delay:.42s}
.at-regeln.los li:nth-child(3){transition-delay:.84s}
.at-geschichte .at-ehrlich{color:var(--papier)}
.at-geschichte .pu-dreh{font-size:clamp(22px,min(2.4vw,3.8svh),36px);max-width:32ch}
/* Zwei Fotos an die Wand geklebt, Baustein pu-fotos */
.at-wand{position:relative;z-index:1;--n:1;margin:clamp(30px,4vw,56px) 0 0;padding:0}
.at-wand .pu-foto{margin:0;padding:clamp(8px,1vw,14px);--fg:var(--papier)}
.at-wand>:nth-child(n) .pu-foto{--fg:var(--papier)}
.at-wand>:nth-child(1) .pu-foto{--k:-1.8deg}.at-wand>:nth-child(2) .pu-foto{--k:1.4deg}
.at-wand .pu-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-position:50% 50%}
.at-wege{margin-top:clamp(20px,2.4vw,32px)}
.at-grenze{max-width:60ch}
/* Karten: Übersicht und «die anderen drei» */
.at-liste{gap:clamp(20px,3vw,40px)}
.at-karten{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.4vw,28px);margin-top:clamp(20px,2.4vw,32px)}
.at-liste .at-grenze{position:relative;z-index:1}
.at-karte{--t2:var(--t);display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:clamp(16px,2vw,24px);background:var(--g);color:var(--t);text-decoration:none;box-shadow:var(--kante);transition:transform .12s var(--klatsch)}
.at-karte:nth-child(odd){rotate:-.7deg}.at-karte:nth-child(even){rotate:.6deg}
.at-karte:hover{transform:scale(1.015)}.at-karte:active{transform:scale(.98)}
.at-karte strong{font:600 clamp(32px,min(5vw,6.4svh),60px)/.9 var(--dsp);letter-spacing:-.045em}
.at-karte .at-zahl{margin-top:2px;font-size:18px}
.at-karte small{font:500 16px/1.4 var(--txt)}
.at-mit{margin-top:6px;font:600 17px/1 var(--txt)}.at-mit i{font-style:normal}
.at-mini{width:100%;aspect-ratio:1;margin-bottom:6px}
/* breit: Text links, Spieler rechts; Duo offen: alles Lesbare links vom Falz */
@media (min-width:760px){
  .at-wand{--n:2}
  .at-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .at-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Die Grafik ist die Hauptfigur (Andy 06.11.: «der linke Bereich ist zu gross»), ab hier schmale Textspalte. Duo offen bleibt beim Falz */
@media (min-width:900px){
  .at-held .at-raster{grid-template-columns:minmax(0,.68fr) minmax(0,1fr)}
  .at .at-held .at-text .pu-wort{font-size:clamp(46px,min(5.4vw,9svh),92px)}
  .at .at-text .pu-dreh{font-size:clamp(19px,min(1.8vw,3svh),28px)}
  .at-text .at-service{font-size:clamp(14px,1.05vw,16px)}
  .at .at-text .at-so>*{padding:7px 12px 8px;font-size:clamp(15px,min(1.25vw,2.3svh),20px)}
  .at-text .at-zahl{font-size:clamp(18px,min(1.7vw,3svh),26px)}
  .at-held .at-buehne,.at-held .at-griffe,.at-held .at-teil{width:min(100%,68svh,860px)}
}
@media (min-width:1200px){
  .at-karten:not(.klein){grid-template-columns:repeat(3,minmax(0,1fr))}
  .at-karten:not(.klein) .at-karte strong{font-size:clamp(32px,2.6vw,50px)}
  .at-karten.klein{grid-template-columns:repeat(4,minmax(0,1fr))}
  .at-karten.klein .at-karte strong{font-size:clamp(28px,2.3vw,44px)}
}
@media (min-width:1600px){
  .at-karten:not(.klein){grid-template-columns:repeat(5,minmax(0,1fr))}
  .at-karten:not(.klein) .at-karte strong{font-size:clamp(28px,1.9vw,44px)}
}
@media (prefers-reduced-motion:reduce){.at .at-start{animation:none;transition:none}.at-regeln.bereit li{opacity:1;transform:none}.at-karte,.at-tk{transition:none}}