/* =========================================================================
   Spiel 1 · Reiter „Ruf mich an“ · Kaltakquise-Simulator
   Nur Klassen mit Präfix g-anruf-, nur Variablen aus tokens.css, eigene
   @keyframes ebenfalls mit Präfix g-anruf- (alle einmalig bzw. endlich).
   Aufbau: links das Telefon (Anruf), rechts Rolle + Notizzettel.
   Unter 900 px: Rolle + Notizzettel ausgeblendet; der Zettel steht als
   schmale Leiste IM Telefon (unter der Kopfzeile), damit er beim Antworten
   immer zu sehen ist.
   ========================================================================= */
.g-anruf{--g-anruf-h:clamp(480px,calc(100svh - 200px),600px);display:grid;grid-template-columns:minmax(0,1fr) 312px;grid-template-areas:"phone side";gap:var(--sp-6);align-items:start}

/* ---------- Seite: Rolle + Notizzettel ---------- */
.g-anruf-side{grid-area:side;display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.g-anruf-role{display:flex;flex-direction:column;gap:8px;padding:16px 20px 16px;border-radius:var(--r-lg);background:var(--sf-sunken)}
.g-anruf-role-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.g-anruf-role .pill{background:var(--sf-card)}
.g-anruf-role-t{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:var(--lh-snug);color:var(--tx-1)}

.g-anruf-notes{padding:20px 20px 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--sf-card)}
.g-anruf-notes-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.g-anruf-notes-t{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.2;color:var(--tx-1)}
.g-anruf-checks{list-style:none;display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-3)}
.g-anruf-check{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--sp-3);align-items:start;margin:0 -10px;padding:9px 10px 7px;border-radius:var(--r-sm);transition:background-color var(--dur-3) var(--ease)}
.g-anruf-check.is-new{background:var(--ok-bg)}
.g-anruf-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);background:var(--sf-card);color:transparent;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.g-anruf-dot .icon{width:16px;height:16px;stroke-width:2.8}
.g-anruf-check.is-done .g-anruf-dot{border-color:var(--ok-fill);background:var(--ok-fill);color:var(--c-white);animation:t-pop var(--dur-2) var(--ease) both}
.g-anruf-check-txt{min-width:0}
.g-anruf-check-l{display:block;padding-top:3px;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.25;color:var(--tx-1)}
.g-anruf-check-s{display:block;margin-top:1px;font-size:var(--fs-sm);line-height:1.4;color:var(--tx-3)}
.g-anruf-check.is-done .g-anruf-check-s{font-size:var(--fs-md);color:var(--tx-2)}
.g-anruf-notes-foot{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:var(--fs-md);line-height:1.45;color:var(--tx-3)}

/* ---------- Telefon ---------- */
.g-anruf-phone{grid-area:phone;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--g-anruf-h);overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--sf-card);box-shadow:var(--sh-soft)}
.g-anruf-phone.is-end{height:auto;min-height:var(--g-anruf-h)}

/* Phase 1: eingehender Anruf */
.g-anruf-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-6) var(--sp-5);background:var(--grad-hero);color:var(--tx-inv);text-align:center}
.g-anruf-in :focus-visible{outline-color:var(--focus-c-inv)}
.g-anruf-ring{position:relative;display:inline-grid;margin:36px 0 26px}
.g-anruf-ring .av{box-shadow:0 0 0 3px var(--line-inv)}
.g-anruf-ring::before,.g-anruf-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c-sky);opacity:0;animation:g-anruf-ring 1.9s var(--ease) .4s 3}
.g-anruf-ring::after{animation-delay:1s}
@keyframes g-anruf-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.42);opacity:0}}
.g-anruf-in-n{margin-top:6px;font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:-.01em}
.g-anruf-in-f{margin-top:4px;font-size:var(--fs-md);color:var(--tx-inv-3)}
.g-anruf-in-t{max-width:420px;margin-top:var(--sp-4);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--tx-inv-2);text-wrap:pretty}
.g-anruf-acc{appearance:none;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px;padding:6px 16px;border:0;border-radius:var(--r-md);background:none;color:var(--tx-inv);font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-anruf-acc-b{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--ok-fill);color:var(--c-white);box-shadow:var(--sh-soft);transition:transform var(--dur-2) var(--ease-spring)}
.g-anruf-acc-b .icon{width:30px;height:30px;stroke-width:2}
.g-anruf-acc:hover .g-anruf-acc-b{transform:scale(1.07)}
.g-anruf-acc:active .g-anruf-acc-b{transform:scale(.95)}
.g-anruf-in-foot{margin-top:var(--sp-4);font-size:var(--fs-md);color:var(--tx-inv-3)}

/* Kopfzeile im Anruf */
.g-anruf-top{flex:none;display:flex;align-items:center;gap:var(--sp-3);padding:14px 18px;background:var(--grad-hero);color:var(--tx-inv)}
.g-anruf-top .av{box-shadow:0 0 0 2px var(--line-inv)}
.g-anruf-who{flex:1;min-width:0;line-height:1.2}
.g-anruf-who b{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold)}
.g-anruf-who b,.g-anruf-who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-anruf-who small{display:block;margin-top:3px;font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--tx-inv-3)}
.g-anruf-live{gap:7px;font-variant-numeric:tabular-nums}
.g-anruf-live.pill--dot::before{background:var(--ok-fill)}
.g-anruf-live.is-off.pill--dot::before{background:var(--no-fill)}
.g-anruf-time{font-weight:var(--fw-bold);color:var(--tx-inv-2)}

/* Notizzettel als Leiste im Telefon (nur unter 900 px sichtbar) */
.g-anruf-strip{display:none}
.g-anruf-strip-k .icon{width:16px;height:16px;stroke-width:2.2;margin-top:-2px}
.g-anruf-sd .icon{width:12px;height:12px;stroke-width:3.2}

/* Gesprächsverlauf */
.g-anruf-log{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:18px 18px 14px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20px);mask-image:linear-gradient(180deg,transparent 0,#000 20px)}
.g-anruf-log > :first-child{margin-top:auto}
.g-anruf-log:focus-visible{outline-offset:-3px}
.g-anruf-log .bubble{flex:none}
.g-anruf-sys{flex:none;align-self:center;margin-bottom:2px;padding:4px 12px 2px;border-radius:var(--r-pill);background:var(--sf-sunken);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.3;color:var(--tx-3);animation:t-fade var(--dur-2) var(--ease) both}
.g-anruf-typing{flex:none;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:15px 16px;border-radius:18px 18px 18px 5px;background:var(--sf-sunken);animation:t-fade var(--dur-1) var(--ease) both}
.g-anruf-typing i{width:7px;height:7px;border-radius:50%;background:var(--tx-3);opacity:.35;animation:g-anruf-dot .9s var(--ease) 2}
.g-anruf-typing i:nth-child(2){animation-delay:.15s}
.g-anruf-typing i:nth-child(3){animation-delay:.3s}
@keyframes g-anruf-dot{0%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}

/* Antworten */
.g-anruf-ask{flex:none;padding:14px 16px 16px;border-top:1px solid var(--line);background:var(--sf-sunken)}
.g-anruf-ask-k{margin:0 2px 10px;font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--tx-3)}
.g-anruf-opts{display:grid;gap:var(--sp-2)}
.g-anruf-opts .choice{animation:t-fade-up var(--dur-2) var(--ease) both}
.g-anruf-opts .choice:nth-child(2){animation-delay:.05s}
.g-anruf-opts .choice:nth-child(3){animation-delay:.1s}
.g-anruf-opts .choice[aria-disabled="true"]{cursor:default;box-shadow:none;transform:none}
.g-anruf-opts .choice[aria-disabled="true"]:not(.is-selected){opacity:.5}
.g-anruf-hang{animation:t-pop var(--dur-2) var(--ease) both}
.g-anruf-hang .icon{margin-top:-2px}

/* Phase 3: Auswertung */
.g-anruf-end{flex:1;display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-5) 26px 26px;animation:t-fade-up var(--dur-2) var(--ease) both}
.g-anruf-res{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--sp-4);align-items:center;padding:18px 20px 16px;border-radius:var(--r-md);background:var(--ok-bg)}
.g-anruf-res-i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ok);color:var(--c-white);animation:t-pop var(--dur-3) var(--ease-spring) both}
.g-anruf-res-i .icon{width:26px;height:26px}
.g-anruf-res-k{font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.12em;line-height:1.3;text-transform:uppercase;color:var(--ok)}
.g-anruf-res-t{margin-top:2px;font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:-.01em;color:var(--tx-1)}
.g-anruf-res-t:focus-visible{outline-offset:4px;border-radius:var(--r-xs)}
.g-anruf-res-s{margin-top:4px;font-size:var(--fs-md);line-height:1.4;color:var(--tx-2)}
.g-anruf-res-n{grid-column:1 / -1;display:flex;align-items:flex-start;gap:10px;padding-top:12px;border-top:1px solid rgba(0,41,61,.1);font-size:var(--fs-md);font-weight:var(--fw-semi);line-height:1.4;color:var(--tx-1)}
.g-anruf-res-n .icon{margin-top:0;color:var(--tx-petrol)}
.g-anruf-end[data-end="fruehjahr"] .g-anruf-res{background:var(--hint-bg)}
.g-anruf-end[data-end="fruehjahr"] .g-anruf-res-i{background:var(--hint)}
.g-anruf-end[data-end="fruehjahr"] .g-anruf-res-k{color:var(--hint)}
.g-anruf-end[data-end="mail"] .g-anruf-res{background:var(--sf-tint)}
.g-anruf-end[data-end="mail"] .g-anruf-res-i{background:var(--c-petrol)}
.g-anruf-end[data-end="mail"] .g-anruf-res-k{color:var(--tx-petrol)}

.g-anruf-pts-t{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.2;color:var(--tx-1)}
.g-anruf-pts{list-style:none;display:grid;gap:var(--sp-3);margin-top:14px;counter-reset:g-anruf-n}
.g-anruf-pts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--sp-3);font-size:var(--fs-md);line-height:1.45;color:var(--tx-1);text-wrap:pretty}
.g-anruf-pts li::before{counter-increment:g-anruf-n;content:counter(g-anruf-n);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sf-tint);color:var(--tx-petrol);font-size:var(--fs-sm);font-weight:var(--fw-black);padding-top:2px}
.g-anruf-dvag{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 10px;border-radius:var(--r-sm);background:var(--sf-sunken);font-size:var(--fs-md);line-height:1.45;color:var(--tx-2)}
.g-anruf-dvag .icon{margin-top:1px;color:var(--tx-petrol)}

.g-anruf-foot{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.g-anruf-found{display:flex;flex-direction:column;gap:8px;min-width:0}
.g-anruf-found-k{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.2;color:var(--tx-1)}
.g-anruf-found-l{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.g-anruf-found-l .icon.g-anruf-pi{width:14px;height:14px;stroke-width:2.8;margin-top:-2px}
.g-anruf-miss{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--tx-3)}
.g-anruf-found-h{font-size:var(--fs-md);line-height:1.4;color:var(--ok)}
.g-anruf-again .icon{margin-top:-2px}

/* ---------- Tablet und Handy: Zettel als Leiste im Telefon ---------- */
@media (max-width:900px){
  .g-anruf{grid-template-columns:minmax(0,1fr);grid-template-areas:"phone";gap:0}
  .g-anruf-side{display:none}
  .g-anruf-strip{flex:none;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;padding:8px 12px 7px;border-bottom:1px solid var(--line);background:var(--sf-sunken);overflow:hidden}
  .g-anruf-strip-k{display:inline-flex;align-items:center;gap:5px;margin-right:2px;font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.08em;line-height:1.2;text-transform:uppercase;color:var(--tx-petrol);white-space:nowrap}
  .g-anruf-si{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:4px 9px 2px 4px;border-radius:var(--r-pill);background:var(--sf-card);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.2;color:var(--tx-2);white-space:nowrap;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
  .g-anruf-sd{flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:-2px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--sf-card);color:transparent;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
  .g-anruf-si.is-done{background:var(--ok-bg);box-shadow:none;color:var(--ok)}
  .g-anruf-si.is-done .g-anruf-sd{border-color:var(--ok-fill);background:var(--ok-fill);color:var(--c-white)}
  .g-anruf-si.is-new{animation:t-pop var(--dur-3) var(--ease-spring) both}
}
@media (max-width:760px){
  .g-anruf-phone{border-radius:var(--r-md)}
  .g-anruf-top{padding:12px 12px 12px 14px;gap:10px}
  .g-anruf-who b{font-size:var(--fs-md)}
  .g-anruf-log{padding:14px 12px 12px;gap:8px}
  .g-anruf-log .bubble{max-width:92%}
  .g-anruf-ask{padding:12px 12px 14px}
  .g-anruf-opts .choice{min-height:52px;padding:10px 14px 8px;gap:10px}
  .g-anruf-in{padding:var(--sp-5) var(--sp-4)}
  .g-anruf-ring{margin:30px 0 22px}
  .g-anruf-in .av--xl{width:76px;height:76px;font-size:25px}
  .g-anruf-end{gap:20px;padding:20px 16px 20px}
  .g-anruf-res{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:14px 14px 12px}
  .g-anruf-res-i{width:44px;height:44px}
  .g-anruf-res-i .icon{width:22px;height:22px}
  .g-anruf-res-t{font-size:var(--fs-xl)}
  .g-anruf-foot{flex-direction:column;align-items:stretch}
  .g-anruf-again{width:100%}
}
@media (max-width:420px){
  /* Kopfzeile schmal: Status nur als Punkt + Zeit (Text bleibt für Screenreader) */
  .g-anruf-live [data-state]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .g-anruf-strip{gap:6px;padding-left:12px;padding-right:10px}
  .g-anruf-strip-kt{display:none}
  .g-anruf-si{padding-right:8px}
}
@media (max-width:340px){
  .g-anruf-strip-k{display:none}
  .g-anruf-strip{gap:4px;padding-left:8px;padding-right:8px}
  .g-anruf-si{padding-right:6px}
}