/* ==========================================================================
   Probetag-Widget – Studio Sonnenaufgang
   Bühne (Himmel über Wasser, Sonnenstand = gewählte Uhrzeit) · Tagesband (30 Tage) · Uhrzeiten · Zettel-Formular
   Nutzt die Tokens aus stil.css, bringt für den Standalone-Fall Fallbacks mit. Alle Klassen mit Präfix .pt
   ========================================================================== */
.probetag{--pt-sonne:var(--sonne,#F0A830);--pt-strahl:var(--strahl,#F0D854);--pt-licht:var(--lichtgelb,#FCE478);
  --pt-rinde:var(--rinde,#60300C);--pt-tief:var(--tief,#3C180C);--pt-tusche:var(--tusche,#483C30);
  --pt-sand:var(--sand,#F0E4D8);--pt-innen:var(--innen,#FBF7F1);--pt-wasser:var(--wasser,#48606C);--pt-altrosa:var(--altrosa,#B4786C);
  --pt-linie:var(--linie,rgba(72,60,48,.28));--pt-ease:var(--ease-out,cubic-bezier(.22,.61,.36,1));
  --pt-morgen:#F7D9B4;--pt-mittag:#FCEFC4;--pt-abend:#EBBBA8;
  --pt-display:var(--display,"Young Serif",Georgia,serif);--pt-body:var(--body,"Hanken Grotesk",system-ui,sans-serif);--pt-hand:var(--hand,"Kalam",cursive)}
.probetag .lead{margin-top:.6rem}
.pt{margin-top:clamp(24px,3.5vw,40px);position:relative}
.pt *{box-sizing:border-box}
.pt button{font:inherit;color:inherit}

/* ---------------------------------------------------------------- Bühne: Himmel, Sonne, Wasser */
.pt__buehne{position:relative;height:clamp(196px,19vw,250px);border:1.5px solid rgba(72,60,48,.6);border-radius:6px;overflow:hidden;
  background:var(--pt-himmel,var(--pt-morgen));--sx:14%;--sy:74%;--horizont:70%;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),0 12px 30px -16px rgba(60,24,12,.35);transition:background-color .9s var(--pt-ease)}
.pt__glut{position:absolute;inset:0;background:radial-gradient(circle at var(--sx) var(--sy),rgba(252,228,120,.75),rgba(252,228,120,.25) 18%,rgba(252,228,120,0) 42%);pointer-events:none}
.pt__sonne{position:absolute;left:var(--sx);top:var(--sy);width:clamp(76px,10vw,120px);height:auto;transform:translate(-50%,-50%);overflow:visible;
  filter:drop-shadow(0 2px 2px rgba(60,24,12,.12))}
.pt__strahlen{transform-origin:50px 50px;animation:pt-strahlen 90s linear infinite}
@keyframes pt-strahlen{to{transform:rotate(360deg)}}
.pt__wasser{position:absolute;left:0;right:0;bottom:0;top:var(--horizont);background:var(--pt-wasser);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cg stroke-linecap='round' stroke-width='2.2' fill='none'%3E%3Cpath d='M6 7h38M70 7h20M118 7h30' stroke='rgba(255,255,255,.22)'/%3E%3Cpath d='M20 17h50M96 17h44' stroke='rgba(0,0,0,.2)'/%3E%3Cpath d='M2 27h24M52 27h36M110 27h40' stroke='rgba(255,255,255,.16)'/%3E%3Cpath d='M30 36h60M126 36h20' stroke='rgba(0,0,0,.16)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:160px 40px}
.pt__wasser::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1.5px;background:var(--pt-tusche);opacity:.7}
.pt__spiegel{position:absolute;top:0;bottom:0;left:var(--sx);width:clamp(64px,9vw,100px);transform:translateX(-50%);opacity:var(--spiegel,.6);
  background:repeating-linear-gradient(to bottom,var(--pt-strahl) 0 3px,transparent 3px 9px);
  -webkit-mask:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.35) 60%,transparent) , radial-gradient(ellipse 50% 100% at 50% 0,#000 40%,transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.35) 60%,transparent),radial-gradient(ellipse 50% 100% at 50% 0,#000 40%,transparent 100%);mask-composite:intersect;mix-blend-mode:screen}
.pt__stand{position:absolute;left:clamp(14px,2.4vw,28px);top:clamp(12px,2vw,22px);right:40%;margin:0;transition:opacity .35s var(--pt-ease);font-family:var(--pt-display);color:var(--pt-rinde);
  font-size:clamp(1.05rem,.9rem + .7vw,1.45rem);line-height:1.2;text-wrap:balance;text-shadow:0 0 12px rgba(252,239,196,.9)}
.pt__stand small{display:block;margin-top:.35em;font-family:var(--pt-body);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pt-wasser)}
.pt__stand-zeit{font-variant-numeric:tabular-nums}
.pt__buehne--rechts .pt__stand{left:40%;right:clamp(14px,2.4vw,28px);text-align:right}

/* Zettel auf der Bühne (Erfolg / Fehler) */
.pt__zettel{position:absolute;left:50%;top:50%;width:min(320px,82%);transform:translate(-50%,-50%) rotate(-2deg);background:#F7EAA5;padding:26px 24px 20px;
  font-family:var(--pt-hand);font-size:1.25rem;line-height:1.35;color:var(--pt-tief);text-align:center;z-index:3;
  box-shadow:0 14px 30px -12px rgba(60,24,12,.55),0 1px 0 rgba(255,255,255,.5) inset}
.pt__zettel::before{content:"";position:absolute;left:50%;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--pt-altrosa);border:2px solid var(--pt-tusche);transform:translateX(-50%);box-shadow:0 3px 4px rgba(60,24,12,.35)}
.pt__zettel strong{display:block;font-weight:400;font-size:1.5rem;color:var(--pt-rinde)}
.pt__zettel--fehler{background:#F2D6CE}
.pt__zettel[hidden]{display:none}

/* ---------------------------------------------------------------- Tagesband */
.pt__band-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:clamp(22px,3vw,34px)}
/* Schritte 1·2·3 – echte Reihenfolge, deshalb nummeriert; Marker in der Sonnen-Optik der Tageskarten */
.pt__schritt{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--pt-display);font-weight:400;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.15;color:var(--pt-rinde)}
.pt__schritt-nr{flex:none;width:36px;height:36px;border-radius:50%;background:var(--pt-sonne);border:1.5px solid var(--pt-tusche);display:grid;place-items:center;font-size:1.15rem;color:var(--pt-tief);box-shadow:0 2px 0 rgba(72,60,48,.25)}
.pt__schritt-sub{margin:6px 0 0 48px;font-size:.95rem;color:var(--pt-wasser)}
.pt__schritt--form{margin-bottom:10px;font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
.pt__schritt--form .pt__schritt-nr{width:32px;height:32px;font-size:1.05rem}
.pt__pfeile{display:flex;gap:8px}
.pt__pfeil{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--pt-rinde);background:transparent;color:var(--pt-rinde);display:grid;place-items:center;cursor:pointer;padding:0;transition:background-color .2s var(--pt-ease)}
.pt__pfeil:hover{background:rgba(96,48,12,.07)}
.pt__pfeil:disabled{opacity:.3;cursor:default}
.pt__band-wrap{position:relative;margin-top:12px}
.pt__band-wrap::before,.pt__band-wrap::after{content:"";position:absolute;top:0;bottom:0;width:18px;z-index:2;pointer-events:none}
.pt__band-wrap::before{left:-18px;background:linear-gradient(to right,var(--pt-innen),transparent)}
.pt__band-wrap::after{right:-18px;background:linear-gradient(to left,var(--pt-innen),transparent)}
.pt__band{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 18px 14px;margin:0 -18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pt__band::-webkit-scrollbar{display:none}
.pt__tag{position:relative;flex:none;scroll-snap-align:start;width:66px;height:92px;border-radius:8px;border:1.5px solid rgba(72,60,48,.45);background:var(--pt-innen);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;padding:0;
  transition:transform .25s var(--pt-ease),background-color .25s var(--pt-ease),border-color .25s var(--pt-ease),box-shadow .25s var(--pt-ease)}
.pt__tag-wt{font-family:var(--pt-body);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pt-wasser)}
.pt__tag-nr{font-family:var(--pt-display);font-size:1.9rem;line-height:1;color:var(--pt-rinde)}
.pt__tag-sonne{width:9px;height:9px;border-radius:50%;background:var(--pt-sonne);border:1.5px solid var(--pt-tusche);margin-top:4px}
.pt__tag--leer .pt__tag-sonne{background:transparent;border-color:rgba(72,60,48,.3)}
.pt__tag--leer .pt__tag-nr{color:rgba(96,48,12,.42)}
.pt__tag--leer .pt__tag-wt{color:rgba(72,96,108,.55)}
.pt__tag--heute::after{content:"heute";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);font-family:var(--pt-hand);font-size:.82rem;line-height:1;color:var(--pt-rinde);background:var(--pt-strahl);padding:2px 7px;border-radius:3px;box-shadow:0 1px 0 rgba(72,60,48,.25)}
.pt__tag:hover:not(:disabled){transform:translateY(-3px);border-color:var(--pt-rinde)}
.pt__tag[aria-pressed="true"]{background:var(--pt-strahl);border-color:var(--pt-tusche);box-shadow:0 6px 14px -8px rgba(60,24,12,.5);transform:translateY(-3px)}
.pt__tag[aria-pressed="true"] .pt__tag-nr{color:var(--pt-tief)}
.pt__tag:disabled{cursor:default}
.pt__tag--skelett{border-style:dashed;background:transparent;pointer-events:none}
.pt__tag--skelett .pt__tag-nr{width:24px;height:22px;border-radius:4px;background:rgba(72,60,48,.08)}
.pt__tag--skelett .pt__tag-wt{width:18px;height:8px;border-radius:2px;background:rgba(72,60,48,.08)}
.pt__monat{flex:none;scroll-snap-align:start;width:26px;height:92px;display:grid;place-items:center;font-family:var(--pt-display);font-size:.85rem;color:var(--pt-wasser);
  writing-mode:vertical-rl;transform:rotate(180deg);border-left:1.5px solid var(--pt-linie);margin-left:4px;padding-left:2px;letter-spacing:.04em}

/* ---------------------------------------------------------------- Uhrzeiten */
.pt__zeiten{margin-top:clamp(22px,3vw,34px);min-height:64px}
.pt__zeiten-datum{margin:6px 0 14px 48px;font-family:var(--pt-display);font-size:1.1rem;color:var(--pt-wasser)}
.pt__zeiten-datum:empty{display:none}
.pt__chips{display:flex;flex-wrap:wrap;gap:12px;margin-left:48px}
.pt__chip{display:inline-flex;flex-wrap:wrap;max-width:100%;align-items:center;gap:6px 12px;padding:10px 10px 10px 16px;border-radius:999px;border:1.5px solid var(--pt-rinde);background:var(--pt-innen);cursor:pointer;box-shadow:0 8px 18px -12px rgba(60,24,12,.45);
  text-align:left;transition:transform .25s var(--pt-ease),background-color .25s var(--pt-ease),border-color .25s var(--pt-ease),box-shadow .25s var(--pt-ease)}
.pt__chip::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--pt-sonne);border:1.5px solid var(--pt-tusche);transition:transform .25s var(--pt-ease)}
.pt__chip-zeit{font-family:var(--pt-body);font-weight:700;font-size:1.15rem;color:var(--pt-rinde);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt__chip-kurs{font-size:.95rem;color:var(--pt-tusche);white-space:nowrap}
.pt__chip-frei{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pt-altrosa);white-space:nowrap}
/* Die Pille sagt, was der Klick tut – das Anmeldefeld öffnet sich */
.pt__chip-cta{margin-left:auto;flex:none;padding:8px 14px;border-radius:999px;background:var(--pt-sonne);border:1.5px solid var(--pt-tusche);font-weight:700;font-size:.95rem;color:var(--pt-tief);white-space:nowrap;transition:background-color .25s var(--pt-ease),transform .25s var(--pt-ease)}
.pt__chip:hover .pt__chip-cta{transform:translateX(2px)}
.pt__chip[aria-pressed="true"] .pt__chip-cta{background:var(--pt-innen)}
.pt__chip:hover{transform:translateY(-2px);border-color:var(--pt-rinde)}
.pt__chip[aria-pressed="true"]{background:var(--pt-strahl);border-color:var(--pt-tusche);box-shadow:0 6px 14px -8px rgba(60,24,12,.5)}
.pt__chip[aria-pressed="true"]::before{transform:scale(1.25)}
.pt__leer{color:var(--pt-wasser);font-size:.98rem;max-width:36em;margin:0 0 0 48px}
.pt__leer:empty{display:none}
.pt__leer a{font-weight:700}

.pt__hinweis{margin-top:14px;max-width:44em}
.pt__hinweis[hidden]{display:none}

/* ---------------------------------------------------------------- Formular als Zettel-Block */
.pt__form{margin-top:clamp(18px,2.4vw,26px);padding:clamp(18px,2.6vw,28px);border:1.5px solid rgba(72,60,48,.5);border-radius:8px;background:var(--pt-sand);
  box-shadow:0 18px 36px -24px rgba(60,24,12,.4);position:relative}
.pt__form[hidden]{display:none}
.pt__form-titel{font-family:var(--pt-display);font-size:1.2rem;color:var(--pt-rinde);margin:0 0 4px}
.pt__form-hinweis{font-size:.92rem;color:var(--pt-wasser);margin:0 0 16px;max-width:44em}
.pt__felder{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.pt__feld{display:grid;gap:6px}
.pt__feld--breit{grid-column:1 / -1}
.pt__feld label{font-weight:700;font-size:.92rem;color:var(--pt-rinde)}
.pt__feld label small{font-weight:400;color:var(--pt-wasser)}
.pt__feld input,.pt__feld textarea{font:inherit;font-size:1.05rem;color:var(--pt-tusche);background:var(--pt-innen);border:1.5px solid rgba(72,60,48,.5);border-radius:6px;padding:12px 14px;width:100%;
  transition:border-color .2s var(--pt-ease),box-shadow .2s var(--pt-ease)}
.pt__feld input:focus,.pt__feld textarea:focus{outline:none;border-color:var(--pt-rinde);box-shadow:0 0 0 3px rgba(240,168,48,.35)}
.pt__feld input[aria-invalid="true"]{border-color:var(--pt-altrosa);box-shadow:0 0 0 3px rgba(180,120,108,.25)}
.pt__feld textarea{min-height:76px;resize:vertical}
.pt__fehler{font-size:.88rem;color:var(--pt-altrosa);font-weight:700;min-height:1.2em;margin:0}
.pt__fehler:empty{display:none}
.pt__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.pt__senden{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:18px}
.pt__senden .btn{min-width:220px}
.pt__senden .klein{margin:0}
.pt .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.pt__form-fehler{margin:14px 0 0;font-size:.95rem;color:var(--pt-tief);background:#F2D6CE;border:1.5px solid rgba(180,120,108,.6);border-radius:6px;padding:10px 14px}
.pt__form-fehler:empty{display:none}

/* Erfolg unter der Bühne */
.pt__erfolg{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.pt__erfolg[hidden]{display:none}
.pt__erfolg p{margin:0;max-width:40em}
.pt__erfolg .btn{font-size:.95rem}

/* Ladefehler */
.pt__laden-fehler{margin-top:16px;padding:16px 18px;border:1.5px dashed rgba(72,60,48,.4);border-radius:8px;color:var(--pt-tusche)}
.pt__laden-fehler[hidden]{display:none}
.pt__laden-fehler .btn{margin-top:10px}

/* ---------------------------------------------------------------- Responsive */
@media (max-width:720px){
  .pt__buehne{height:200px;--horizont:68%}
  .pt__stand{top:auto;bottom:calc(32% + 10px);left:14px;right:46%;font-size:1.05rem}
  .pt__buehne--rechts .pt__stand{left:46%;right:14px}
  .pt__buehne--zettel .pt__stand{opacity:0}
  .pt__pfeile{display:none}
  .pt__band{padding:12px var(--pad,16px) 12px;margin:0 calc(-1 * var(--pad,16px))}
  .pt__band-wrap::before,.pt__band-wrap::after{display:none}
  .pt__tag{width:60px;height:84px}
  .pt__tag-nr{font-size:1.7rem}
  .pt__schritt{font-size:1.35rem;gap:10px}
  .pt__schritt-nr{width:32px;height:32px;font-size:1.05rem}
  .pt__schritt-sub,.pt__zeiten-datum,.pt__chips,.pt__leer{margin-left:0}
  .pt__chip{width:100%;padding:12px 10px 12px 14px}
  .pt__chip-cta{margin-left:auto}
  .pt__felder{grid-template-columns:1fr}
  .pt__senden .btn{width:100%;min-width:0}
  .pt__zettel{width:min(300px,86%);font-size:1.15rem;padding:22px 18px 16px}
}
@media (hover:none){.pt__pfeile{display:none}}

/* Reduced Motion: kein Strahlenkreisen, keine Tweens (JS setzt direkt) */
@media (prefers-reduced-motion:reduce){
  .pt__strahlen{animation:none}
  .pt__buehne,.pt__tag,.pt__chip,.pt__chip-cta,.pt__pfeil,.pt__feld input,.pt__feld textarea{transition:none}
  .pt__tag:hover:not(:disabled),.pt__chip:hover{transform:none}
  .pt__chip:hover .pt__chip-cta{transform:none}
}