/* Kleine, kontextbezogene Hilfe im vorhandenen Lesefluss; nur auf drei Vorschauseiten. */
.held-hilfe{scroll-margin-top:calc(var(--header-h) + 24px);display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px 18px;align-items:center;padding:22px;margin:28px 0;border:1px solid var(--line);border-radius:18px;background:var(--mist);color:var(--night);isolation:isolate}
.held-hilfe__held{width:72px;height:97px;object-fit:contain;transform-origin:50% 95%;align-self:start}
.held-hilfe__inhalt{min-width:0}
.held-hilfe__titel{font-weight:800;line-height:1.35;font-size:1.1rem;margin:0}
.held-hilfe__titel span{position:relative;z-index:0}
.held-hilfe__titel span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--yellow);transform-origin:left;z-index:-1}
.held-hilfe__text{margin:12px 0 0;font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.held-hilfe__links{display:flex;gap:4px 22px;flex-wrap:wrap;margin-top:8px}
.held-hilfe__links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:.9375rem;text-underline-offset:4px;color:var(--night)}
.held-hilfe__links a:hover{text-decoration-thickness:2px}
.held-hilfe__kontakt{grid-column:2}
.held-hilfe__kontakt:has([hidden]){display:none}
.held-hilfe__kontakt .btn{min-height:52px;font-size:1rem;padding:12px 18px}
.held-hilfe :focus-visible,.packliste :focus-visible{outline:3px solid var(--eu);outline-offset:4px}
.packliste{margin-top:18px}
.packliste__kopf{display:flex;gap:10px;justify-content:space-between;align-items:center;min-height:58px;margin-bottom:12px}
.packliste__status{font-size:.875rem;line-height:1.4;color:var(--muted);margin:0;max-width:38ch}
.packliste__reset{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--night);padding:8px 10px;min-height:44px;font:inherit;font-size:.8125rem;cursor:pointer}
.packliste .checklist{margin-top:0}
.packliste .checklist li{position:relative}
.packliste__wahl{appearance:auto;accent-color:var(--night);width:24px;height:24px;margin:2px 0 0;cursor:pointer}
.packliste__label{cursor:pointer;min-height:44px;line-height:1.5;padding-bottom:6px}
.packliste__wahl:checked+.packliste__label{color:var(--night)}
.packliste__wahl:checked+.packliste__label{background:var(--yellow-soft);border-radius:4px}
.packliste__hinweis{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:14px 0 0}
@media(min-width:1000px){.held-hilfe{grid-template-columns:82px minmax(0,1fr) auto;padding:24px 28px;gap:24px}.held-hilfe__held{width:82px;height:110px}.held-hilfe__kontakt{grid-column:auto}}
@media(max-width:479px){.held-hilfe{padding:18px 16px;grid-template-columns:48px minmax(0,1fr);gap:12px}.held-hilfe__held{width:48px;height:65px}.held-hilfe__inhalt{display:contents}.held-hilfe__titel{align-self:center}.held-hilfe__text,.held-hilfe__links{grid-column:1/-1;margin-top:0}.held-hilfe__links{gap:4px}.held-hilfe__links a{width:100%}.held-hilfe__kontakt{grid-column:1/-1}.held-hilfe__kontakt .btn{width:100%}.held-hilfe__titel{font-size:1rem}}
@media(prefers-reduced-motion:no-preference){
  .held-hilfe.is-angekommen .held-hilfe__held{animation:held-hinweis .85s ease-out 1}
  .held-hilfe.is-angekommen .held-hilfe__titel span::after{animation:held-markierung .6s ease-out 1}
  @keyframes held-hinweis{0%{transform:translateX(-12px) rotate(-4deg)}65%{transform:translateX(2px) rotate(1deg)}100%{transform:none}}
  @keyframes held-markierung{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
}
@media(prefers-reduced-motion:reduce){.held-hilfe__held,.held-hilfe__titel span::after{animation:none!important}}
@media print{.held-hilfe,.packliste__reset{display:none!important}.packliste__kopf{min-height:0}.packliste__wahl{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* Kurze Aktionen im Lesefluss. Platz steht schon vor dem Bilddownload fest. */
.held-figur{display:block;flex:none;width:76px;height:98px;pointer-events:none;user-select:none}
.held-figur img{width:100%;height:100%;object-fit:contain;transform-origin:50% 88%}
.nudge.nudge--held{grid-template-columns:76px minmax(0,1fr)}
.nudge--held .held-figur{margin-block:-4px}
.held-randmoment{float:right;display:block;margin:8px 0 14px 20px;pointer-events:none}
.held-randmoment[data-held-moment="zeigen"] img{transform:scaleX(-1)}
.held-randmoment .held-figur{width:64px;height:86px}
.held-kontaktmoment{display:flex;align-items:center;gap:8px;max-width:100%;isolation:isolate}
.held-kontaktmoment .held-figur{width:112px;height:64px;position:relative}
.faq__intro:has(.held-kontaktmoment)>.guide--phone{display:none}
.held-kontaktmoment .btn{flex:1;min-width:0;transform-origin:right center}
.held-kontaktmoment .held-figur::before,.held-kontaktmoment .held-figur::after{content:"";position:absolute;right:-2px;top:25px;width:20px;height:2px;background:var(--yellow);border-radius:2px;opacity:0}
.held-kontaktmoment .held-figur::after{top:34px;width:12px}
.held-kontaktmoment:is(:hover,:focus-within)>.btn,.held-kontaktmoment:is(:hover,:focus-within) .held-figur img,.held-kontaktmoment:is(:hover,:focus-within) .held-figur::before,.held-kontaktmoment:is(:hover,:focus-within) .held-figur::after{animation:none!important}
@media(min-width:800px){.nudge.nudge--held{grid-template-columns:76px minmax(0,1fr) auto}}
@media(max-width:479px){.held-kontaktmoment{width:100%}.held-kontaktmoment .held-figur{width:72px;height:54px}.held-kontaktmoment .btn{font-size:1rem;padding-inline:12px}.held-randmoment{margin-left:12px}.held-randmoment .held-figur{width:52px;height:72px}.nudge.nudge--held{grid-template-columns:56px minmax(0,1fr)}.nudge--held .held-figur{width:56px;height:76px}}
@media(prefers-reduced-motion:no-preference){
  [data-held-moment="telefon"].is-held-active .held-figur img{animation:held-telefon 1.65s ease-in-out both}
  [data-held-moment="zeigen"].is-held-active :is(.held-figur img,img){animation:held-zeigen 1.5s ease-in-out both}
  [data-held-moment="paket"].is-held-active img{animation:held-paket 1.6s ease-in-out both}
  [data-held-moment="flug"].is-held-active img{animation:held-flug 1.75s cubic-bezier(.22,1,.36,1) both}
  [data-held-moment="stups"].is-held-active .held-figur img{animation:held-stups 1.65s ease-in-out both}
  [data-held-moment="stups"].is-held-active>.btn{animation:held-button 1.65s ease-in-out both}
  [data-held-moment="stups"].is-held-active .held-figur::before,[data-held-moment="stups"].is-held-active .held-figur::after{animation:held-spur 1.65s ease-in-out both}
  @keyframes held-telefon{0%,100%{rotate:0deg;translate:0 0}25%{rotate:-7deg;translate:0 -3px}55%{rotate:3deg}75%{rotate:-2deg}}
  @keyframes held-zeigen{0%,100%{rotate:0deg;translate:0 0}35%{rotate:-5deg;translate:-6px -3px}60%{rotate:2deg;translate:2px 0}}
  @keyframes held-paket{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 5px;rotate:-3deg}58%{translate:0 -10px;rotate:2deg}80%{translate:0 2px}}
  @keyframes held-flug{0%{translate:60px -16px;rotate:-7deg;opacity:0}25%{opacity:1}65%{translate:-12px 2px;rotate:2deg}100%{translate:0 0;rotate:0deg}}
  @keyframes held-stups{0%,100%{translate:0 0;rotate:0deg}22%{translate:10px -3px;rotate:-4deg}42%{translate:-12px 0;rotate:2deg}60%{translate:3px -4px;rotate:-2deg}80%{translate:0 0}}
  @keyframes held-button{0%,39%,75%,100%{translate:0 0;rotate:0deg}44%{translate:-3px 0;rotate:-1.5deg}52%{translate:2px 0;rotate:1deg}62%{translate:-1px 0;rotate:-.5deg}}
  @keyframes held-spur{0%,26%,70%,100%{opacity:0;translate:0 0}38%{opacity:.8;translate:3px 0}55%{opacity:0;translate:12px 0}}
}
@media(prefers-reduced-motion:reduce){[data-held-moment] img,[data-held-moment]>.btn,[data-held-moment] .held-figur::before,[data-held-moment] .held-figur::after{animation:none!important}}
@media print{.held-kontaktmoment .held-figur,.held-randmoment{display:none}.nudge--held .held-figur{display:none}}
