/* ==== Anleitungen (tour.js) ====
   Nur Markentokens aus brand.css: keine Schatten, keine Verläufe, keine eigenen Farben. Die Abdunklung nutzt --scrim.
   Positionen der Sprechblase setzt tour.js über das CSSOM (CSP: style-src self), alles Übrige steht hier. */
.tour-root{position:fixed;inset:0;z-index:400;pointer-events:none}
.tour-block{position:absolute;inset:0;pointer-events:auto;background:transparent}
.tour-shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tour-shade path{fill:var(--scrim)}
.tour-ring{position:absolute;box-sizing:border-box;border:2px solid var(--brand-white);border-radius:var(--radius-tile);pointer-events:none}
.tour-ring[hidden]{display:none}

.tour-bubble{position:absolute;box-sizing:border-box;pointer-events:auto;width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--brand-white);color:var(--brand-black);border:1px solid var(--brand-black);border-radius:var(--radius-card);padding:var(--space-5);font-size:var(--text-body);line-height:var(--leading-reading)}
.tour-bubble:focus{outline:none}
.tour-bubble[data-layout="center"]{inset:0;margin:auto;height:fit-content}
.tour-bubble[data-layout="sheet"]{left:8px;right:8px;width:auto}
.tour-bubble[data-layout="sheet"][data-side="bottom"]{top:auto;bottom:max(8px,env(safe-area-inset-bottom))}
.tour-bubble[data-layout="sheet"][data-side="top"]{bottom:auto;top:max(8px,env(safe-area-inset-top))}

.tour-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:44px;margin:calc(var(--space-3) * -1) 0 var(--space-2)}
.tour-count{font-size:var(--text-caption);color:var(--muted)}
.tour-skip{flex:none;min-height:44px;margin-right:calc(var(--space-3) * -1);font-size:var(--text-small);text-decoration:underline;text-underline-offset:3px}
.tour-title{font-size:var(--text-section);line-height:1.15;letter-spacing:var(--tracking-heading);font-weight:var(--weight-heading);margin:0}
.tour-text{margin:var(--space-3) 0 0;color:var(--brand-black);font-size:var(--text-body);line-height:var(--leading-reading);overflow-wrap:anywhere}
.tour-progress{display:block;width:100%;height:4px;margin:var(--space-4) 0 0;border:0;border-radius:var(--radius-chip);overflow:hidden}
.tour-nav{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-4)}
.tour-nav .btn{min-height:44px;min-width:96px}
.tour-choices{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.tour-choice{justify-content:flex-start;text-align:left;min-height:48px;white-space:normal}
.tour-all{margin-top:var(--space-2);min-height:44px;text-decoration:underline;text-underline-offset:3px}
.tour-quiet{flex:none;min-height:44px;margin:var(--space-2) 0 calc(var(--space-3) * -1);padding-left:0;font-size:var(--text-small);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.tour-bubble .btn{transition:none}
.tour-bubble .btn:focus-visible{outline:2px solid var(--brand-black);outline-offset:2px}

.tour-help{min-width:44px;min-height:44px;padding:0;justify-content:center;font-size:var(--text-subheading);font-weight:var(--weight-heading)}
.tour-help:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.client-header .actions .tour-help{flex:none}
.tour-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:40;min-width:48px;min-height:48px;background:var(--brand-black);border-color:var(--brand-black);color:var(--brand-white)}
.tour-fab:hover{background:var(--brand-strong-grey);color:var(--brand-white)}
.tour-fab[hidden]{display:none}
.tour-fab:focus-visible{outline:2px solid var(--brand-black);outline-offset:3px}
body:has(.client-nav) .tour-fab{bottom:calc(88px + env(safe-area-inset-bottom))}
@media(max-width:700px){body:has(.mobile-nav) .tour-fab{bottom:calc(88px + env(safe-area-inset-bottom))}}
.login-kicker .tour-help{margin-left:auto}
.login-story>.tour-help{position:absolute;top:24px;right:24px;z-index:2}
.modal-head .tour-help{margin-left:auto;margin-right:var(--space-2);flex:none}

.tour-group{font-size:var(--text-body);font-weight:var(--weight-action);margin:var(--space-6) 0 var(--space-2)}
.tour-group:first-of-type{margin-top:0}
.tour-list{list-style:none;margin:0;padding:0}
.tour-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.tour-item:last-child{border-bottom:0}
.tour-item-copy{display:grid;gap:2px;min-width:0;flex:1}
.tour-item-copy strong{font-weight:var(--weight-action);font-size:var(--text-body);line-height:1.3;overflow-wrap:anywhere}
.tour-item-copy .help{margin:0;color:var(--muted)}
.tour-item .pill{flex:none}
.tour-start{flex:none;min-height:44px;min-width:88px}
.tour-reset{min-height:44px}
.tour-hint{max-width:46ch}
.tour-auto{margin:0 0 var(--space-5);font-size:var(--text-body);color:var(--brand-black)}
.tour-reset-box{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line)}
.tour-reset-box .help{margin:0 0 var(--space-3)}
.tour-reset-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tour-status{margin:0 0 var(--space-3)}
.tour-status:empty{margin:0}
.tour-guides .card-head{flex-wrap:wrap;gap:var(--space-3)}
.tour-card-settings{margin-bottom:var(--space-5)}
.tour-guides-note{margin:var(--space-4) 0}

@media(max-width:700px){
  .tour-bubble{padding:var(--space-4) var(--space-5) var(--space-5)}
  .tour-text{font-size:var(--text-subheading)}
  .tour-count{font-size:var(--text-small)}
  .tour-skip,.tour-quiet,.tour-nav .btn{font-size:var(--text-body)}
  .tour-nav .btn.primary{flex:1}
  .tour-item{flex-wrap:wrap}
  .tour-item-copy{flex-basis:100%}
  .tour-item .pill{margin-right:auto}
  .tour-reset{width:100%}
}
@media(max-width:420px){
  .client-header .actions>.tour-help~.avatar{display:none}
}
/* Coach-Kopfzeile am Handy: Das ? braucht Platz. Das Kürzel (nur Schmuck) weicht, und bis 430 px zeigt „Kundenansicht“
   nur das Haus-Symbol (der Name steht weiter im aria-label). */
@media(max-width:700px){
  .top-actions>.tour-help~.avatar{display:none}
}
@media(max-width:430px){
  .top-actions>.tour-help~[data-action="preview"]{width:44px;min-height:44px;padding:0;justify-content:center}
  .top-actions>.tour-help~[data-action="preview"] .preview-label{display:none}
}

@keyframes tour-in{from{translate:0 8px}to{translate:0 0}}
.tour-bubble.tour-enter{animation:tour-in 180ms ease-out both}
@media(prefers-reduced-motion:reduce){
  .tour-bubble.tour-enter{animation:none}
  .tour-root *{transition:none!important;animation:none!important}
}
@media print{.tour-root,.tour-help{display:none}}
/* ==== /Anleitungen ==== */