/* ===== Heidi Stories (A-20261003-03) - Modul aus stories.html, Farben aus dem Seiten-Design ===== */
.hhs{--surface:var(--surface,var(--bg));--well:color-mix(in srgb,var(--ink) 4%,var(--bg));--bubble:color-mix(in srgb,var(--ink) 7%,var(--bg));
  --ink2:var(--muted);--hint:var(--faint);--edge:var(--line);--acc:var(--accent);--btn:var(--aubergine,var(--accent));--on:#FFFFFF;
  --ok:#5E9F73;--oktext:#3F7A54;--scrim:rgba(47,42,42,.30);--focus:color-mix(in srgb,var(--accent) 28%,transparent);
  --sh:var(--out);--sh-s:var(--out-s);--sh-in:var(--in);font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
:root[data-theme="dark"] .hhs{--oktext:#8CC7A0;--scrim:rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hhs{--oktext:#8CC7A0;--scrim:rgba(0,0,0,.5)}}
/* ---------- Story world ---------- */
.hhs{position:fixed;inset:0;z-index:1000;display:none;flex-direction:column;background:var(--bg);color:var(--ink);
  padding-top:env(safe-area-inset-top,0px)}
.hhs.is-open{display:flex}
.hhs button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left}
.hhs button:focus-visible,.hhs input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus)}
.hhs-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.hhs-in{width:100%;max-width:980px;margin:0 auto}
.hhs-script{font-family:'Sacramento','Brush Script MT',cursive;font-weight:400;color:var(--acc);line-height:1}
.hhs-kick{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--acc)}

.hhs-round{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--edge);background:var(--bg);
  box-shadow:var(--sh-s);color:var(--acc)!important;display:flex;align-items:center;justify-content:center;padding:0;font-weight:800}
.hhs-round:active,.hhs-soft:active,.hhs-tile:active,.hhs-pill:active{box-shadow:var(--sh-in)}
.hhs-btn{height:48px;border:none;border-radius:24px;background:var(--btn);color:var(--on)!important;box-shadow:var(--sh-s);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;font-size:15px;font-weight:800;text-align:center!important}
.hhs-btn:active{transform:scale(.98)}
.hhs-soft{height:48px;border:1px solid var(--edge);border-radius:24px;background:var(--bg);color:var(--acc)!important;box-shadow:var(--sh-s);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;font-size:14px;font-weight:800}
.hhs-soft[aria-pressed="true"]{box-shadow:var(--sh-in)}

.hhs-top{display:flex;align-items:center;gap:12px;padding:12px 16px 6px}
.hhs-mark{flex:1;display:flex;align-items:baseline;gap:8px;min-width:0}
.hhs-mark .hhs-script{font-size:36px}
.hhs-mark b{font-size:20px;font-weight:800;letter-spacing:-.6px}
.hhs-search{display:none;padding:6px 16px 0}
.hhs-search.is-on{display:block}
.hhs-search input,.hhs-bar input{width:100%;height:46px;border-radius:23px;border:1px solid var(--line);background:var(--surface);
  box-shadow:inset 1px 1px 3px var(--edge);color:var(--ink);padding:0 18px;font:500 15px 'Manrope',sans-serif}
.hhs input::placeholder{color:var(--hint)}
.hhs-seg{margin:10px 16px 4px;padding:4px;display:flex;gap:4px;border-radius:26px;background:var(--well);box-shadow:var(--sh-in)}
.hhs-seg button{flex:1;height:44px;border-radius:22px;border:1px solid transparent;background:transparent;color:var(--ink2);
  font-size:13px;font-weight:700;text-align:center;padding:0 4px;white-space:nowrap}
.hhs-seg button[aria-pressed="true"]{border-color:var(--edge);background:var(--bg);box-shadow:var(--sh-s);color:var(--acc);font-weight:800}

.hhs-main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 0 28px}
.hhs-sec{margin-top:18px}
.hhs-h{display:flex;align-items:baseline;gap:10px;padding:0 16px;font-size:17px;font-weight:800;letter-spacing:-.4px;margin:0}
.hhs-h .hhs-script{font-size:24px}
.hhs-row{display:flex;gap:14px;overflow-x:auto;padding:10px 16px 16px;scrollbar-width:none;scroll-snap-type:x proximity}
.hhs-row::-webkit-scrollbar{display:none}
.hhs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding:10px 16px 16px}
.hhs-grid .hhs-tile{width:auto}

.hhs-card{border:1px solid var(--edge);background:var(--bg);box-shadow:var(--sh);border-radius:28px}
.hhs-hero{margin:4px 16px 0;padding:20px;display:flex;flex-direction:column;gap:14px}
.hhs-hero h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-1.2px;line-height:1.08}
.hhs-hero p,.hhs-meta{margin:0;font-size:14px;color:var(--ink2)}
.hhs-two{display:flex;gap:12px}
.hhs-two>*{flex:1}

.hhs-well{background:var(--well);box-shadow:var(--sh-in);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;color:var(--ink2);font-size:12px;font-weight:700}
.hhs-well img{width:100%;height:100%;object-fit:cover;display:block}
.hhs-well b{font-size:40px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--acc)}
.hhs-hero .hhs-well{height:124px}

.hhs-tile{flex:none;scroll-snap-align:start;border:1px solid var(--edge);background:var(--bg);box-shadow:var(--sh);border-radius:22px;
  display:flex;flex-direction:column;padding:16px;color:var(--ink)}
.hhs-tt{font-size:16px;font-weight:800;letter-spacing:-.4px;line-height:1.15}
.hhs-poster{width:132px;min-height:196px;padding:10px;gap:10px}
.hhs-poster .hhs-well{height:96px;border-radius:14px}
.hhs-poster .hhs-well b{font-size:34px}
.hhs-poster .hhs-txt{display:flex;flex-direction:column;gap:5px;padding:0 2px 4px}
.hhs-poster .hhs-tt{font-size:15px}
.hhs-cont{width:212px;gap:10px}
.hhs-cont .hhs-meta{font-size:13px}
.hhs-day{width:176px;min-height:108px;justify-content:space-between;gap:14px}
.hhs-short{width:140px;min-height:132px;justify-content:space-between;gap:14px}
.hhs-done{color:var(--oktext);letter-spacing:0;text-transform:none}
.hhs-prog{height:8px;border-radius:4px;background:var(--well);box-shadow:var(--sh-in);overflow:hidden}
.hhs-prog i{display:block;height:100%;border-radius:4px;background:var(--btn);width:0}
.hhs-pills{display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px 0}
.hhs-pill{height:44px;padding:0 16px;display:flex;align-items:center;gap:8px;border-radius:22px;border:1px solid var(--edge);
  background:var(--bg);box-shadow:var(--sh-s);font-size:13px;font-weight:700}
.hhs-pill span{color:var(--acc)}
.hhs-empty{padding:28px 16px;font-size:15px;line-height:1.5;color:var(--ink2)}

/* Sheet */
.hhs-wrap{position:absolute;inset:0;z-index:3;background:var(--scrim);display:none;align-items:flex-end;justify-content:center}
.hhs-wrap.is-on{display:flex}
.hhs-sheet{width:100%;max-width:560px;max-height:calc(100% - 36px);overflow-y:auto;background:var(--bg);border-radius:30px 30px 0 0;
  padding:16px 20px 22px;display:flex;flex-direction:column;gap:14px;animation:hhs-up .28s ease-out}
@keyframes hhs-up{from{transform:translateY(28px)}to{transform:none}}
.hhs-sheet>*{flex:none}
.hhs-sheet h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-1.2px;line-height:1.08}
.hhs-sheet .hhs-well{height:96px;flex:none}
.hhs-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hhs-teaser{margin:0;font-size:15px;line-height:1.5}
.hhs-note .hhs-script{font-size:26px;display:block;margin-bottom:2px}
.hhs-note p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.hhs-parts{border:1px solid var(--edge);background:var(--bg);box-shadow:var(--sh);border-radius:22px;padding:4px 16px;display:flex;flex-direction:column;flex:none}
.hhs-part{min-height:50px;display:flex;align-items:center;gap:12px;border:none;border-top:1px solid var(--line);background:none;padding:0;width:100%}
.hhs-part:first-child{border-top:none}
.hhs-part b{width:22px;font-size:16px;font-weight:800;color:var(--acc)}
.hhs-part span{flex:1;font-size:15px;font-weight:700}
.hhs-part small{font-size:13px;color:var(--ink2)}
.hhs-part small.hhs-done{font-weight:800}

/* Reader */
.hhs-reader{position:absolute;inset:0;z-index:2;background:var(--bg);display:none;flex-direction:column}
.hhs-reader.is-on{display:flex}
.hhs-rtop{display:flex;align-items:center;gap:12px;padding:12px 16px}
.hhs-rtop div{flex:1;min-width:0}
.hhs-rtop strong{display:block;font-size:15px;font-weight:800;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hhs-rtop small{font-size:13px;color:var(--ink2)}
.hhs-rprog{margin:0 16px}
.hhs-rbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:26px 26px 32px}
.hhs-rbody article{max-width:640px;margin:0 auto;font-size:18px;line-height:1.65}
.hhs-reader[data-size="0"] article{font-size:16px}
.hhs-reader[data-size="2"] article{font-size:21px}
.hhs-rbody h1{margin:6px 0 18px;font-size:32px;font-weight:800;letter-spacing:-1.4px;line-height:1.08}
.hhs-rbody article p{margin:0 0 18px}
.hhs-end{max-width:640px;margin:14px auto 0;padding:18px;display:flex;flex-direction:column;gap:12px}
.hhs-end .hhs-script{font-size:26px;text-align:center;line-height:1.1}
.hhs-end p{margin:0;text-align:center;font-size:14px;color:var(--ink2)}

/* Chat bar: always visible */
.hhs-bar{position:relative;z-index:4;border-top:1px solid var(--line);background:var(--bg);padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px))}
.hhs-bar-row{display:flex;align-items:center;gap:10px}
.hhs-ava{position:relative;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--edge);background:var(--bg);box-shadow:var(--sh-s);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--acc)}
.hhs-ava img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.hhs-ava i{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--bg)}
.hhs-bar label{flex:1;min-width:0}
.hhs-send{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:var(--btn);color:var(--on)!important;box-shadow:var(--sh-s);
  display:flex;align-items:center;justify-content:center;padding:0}
.hhs-ctx{display:none;align-items:center;gap:6px;margin:0 0 8px 52px;font-size:12px;font-weight:700;color:var(--ink2)}
.hhs-ctx.is-on{display:flex}
.hhs-ctx b{color:var(--acc);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hhs-ctx button{flex:none;width:28px;height:28px;border:none;background:none;color:var(--ink2);display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%}
.hhs-toast{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:10px 16px;border-radius:20px;
  background:var(--bg);border:1px solid var(--edge);box-shadow:var(--sh);font-size:13px;font-weight:800;color:var(--oktext);white-space:nowrap;display:none}
.hhs-toast.is-on{display:block}
.hhs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media (min-width:700px){
  .hhs-poster{width:164px}.hhs-cont{width:260px}.hhs-day{width:210px}.hhs-short{width:170px}
  .hhs-hero{flex-direction:row;align-items:center;gap:24px;padding:24px}
  .hhs-hero .hhs-well{flex:none;width:260px;height:160px}
  .hhs-hero .hhs-copy{flex:1}
  .hhs-wrap{align-items:center}.hhs-sheet{border-radius:30px;max-height:calc(100% - 48px)}
  .hhs-seg{max-width:460px}
}
@media (prefers-reduced-motion:reduce){.hhs *{animation:none!important;transition:none!important}}


  background:var(--bg);box-shadow:var(--sh-s);color:var(--acc);font:800 14px 'Manrope',sans-serif;cursor:pointer}
/* Ergaenzungen fuer die Seite: Zaehler am Avatar, Sperr-Karte */
.hhs-ava{position:relative;cursor:pointer}
.hhs-ava b.hhs-unread{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--btn);color:var(--on);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hhs-lock-steps{display:grid;gap:10px;margin:4px 0 2px;padding:0;list-style:none}
.hhs-lock-steps li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;box-shadow:var(--sh-in)}
.hhs-lock-steps li i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;background:var(--bg);box-shadow:var(--sh-s);color:var(--acc)}
.hhs-lock-steps li.ok i{background:var(--ok);color:#fff;box-shadow:none}
.hhs-lock-steps li span{flex:1;font-size:15px;line-height:1.35}
.hhs-lock-steps li.ok span{color:var(--ink2);text-decoration:line-through}

/* Passwort-Fenster vor den Stories (A-20261003-17) */
.hh-sp-dialog{border:0;border-radius:24px;padding:22px;width:min(380px,calc(100vw - 32px));background:var(--bg);color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hh-sp-dialog::backdrop{background:rgba(30,20,25,.4)}
.hh-sp-dialog h2{margin:0 0 6px;font-size:19px}
.hh-sp-dialog p{margin:0 0 14px;color:var(--muted);font-size:15px}
.hh-sp-dialog input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.hh-sp-dialog small{display:block;min-height:1.3em;margin:8px 0;color:var(--accent);font-size:13.5px}
.hh-sp-dialog div{display:flex;gap:10px;justify-content:flex-end}
.hh-sp-dialog h2{font-size:20px!important;line-height:1.25!important;letter-spacing:0!important;font-family:var(--sans)!important}
.hh-sp-dialog [type=submit]{background:var(--accent)!important;color:#fff!important}

/* ===== Bewegung und Klang (A-20261008-01): nur Dekor bewegt sich, der Fliesstext bleibt sofort lesbar ===== */
.hhs-rbody h1 .hhm-zeile,.hhs-rbody h3 .hhm-zeile,.hhs-rbody h2 .hhm-zeile{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hhm-zeile-in{display:inline-block;will-change:transform}
.hhm-trenner{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto 24px;color:var(--acc)}
.hhs-end + .hhm-trenner,.hhm-trenner + .hhs-end{margin-top:6px}
.hhm-linie{flex:1;height:4px;overflow:visible;opacity:.55}
.hhm-l{transform-origin:left center}.hhm-r{transform-origin:right center}
.hhm-orn{flex:none;display:block}
.hhs-end .hhm-notiz{display:block;-webkit-mask-image:linear-gradient(90deg,#000 var(--hhm-schrift,104%),transparent calc(var(--hhm-schrift,104%) + 5%));
  mask-image:linear-gradient(90deg,#000 var(--hhm-schrift,104%),transparent calc(var(--hhm-schrift,104%) + 5%))}
.hhs-end .hhm-notiz.hhm-fertig{-webkit-mask-image:none;mask-image:none}
.hhm-strich{display:block;margin:4px auto 0;color:var(--acc);overflow:visible}
.hhm-pfeil{display:block;margin:2px auto -8px;color:var(--acc);overflow:visible}
.hhm-lz{flex:none;overflow:visible}
.hhm-lz .hhm-zeichen{transform-box:fill-box;transform-origin:50% 0}
.hhs-fb{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.hhs-end .hhs-fb-t{margin:0;text-align:center;font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.3px}
.hhs-fb textarea{width:100%;min-height:84px;resize:vertical;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:12px 14px;font:500 16px/1.45 'Manrope',sans-serif;box-shadow:inset 1px 1px 3px var(--edge);box-sizing:border-box}
.hhs-fb textarea:disabled{opacity:.6}
.hhs-fb-err{margin:0;text-align:center;font-size:13px;font-weight:700;color:var(--acc)}
.hhm-karte{position:fixed;z-index:2000;padding:10px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(47,42,42,.16);font:500 14px/1.4 'Manrope',sans-serif;color:var(--ink);pointer-events:none;box-sizing:border-box;transform-origin:50% 50%}
.hhm-schublade{position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);display:none;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;
  background:var(--bg);border:1px solid var(--line);box-shadow:0 -6px 22px rgba(47,42,42,.12);font-size:14px;font-weight:700;z-index:5}
.hhm-schublade.is-on{display:flex}
.hhm-sch-text{flex:1;min-width:0}
.hhm-sch-ja,.hhm-sch-spaeter{flex:none;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--edge);background:var(--bg);color:var(--acc)!important;font-weight:800}
.hhm-sch-ja{background:var(--btn);color:var(--on)!important;border-color:transparent}
.hhm-ton[aria-pressed="true"]{box-shadow:var(--sh-in)}
@media (prefers-reduced-motion:reduce){.hhs-end .hhm-notiz{-webkit-mask-image:none;mask-image:none}.hhm-zeile-in{will-change:auto}}
/* Englisch verbessern (A-20261009-10): kleiner Hinweis ueber englischen Texten, Absaetze antippen und Vorschlag senden */
.hhs-fix-note{margin:0 0 18px;padding:12px 14px;border:1px dashed var(--line);border-radius:16px;background:var(--surface);font-size:14px;line-height:1.5}
.hhs-fix-note p{margin:0 0 10px}
.hhs-fix-note .hhs-soft{display:inline-flex;align-items:center;gap:8px}
.hhs-fix-note .hhs-fix-on{margin:10px 0 0;font-weight:700}
.hhs-fixmode #hhs-text p{cursor:pointer;border-radius:10px;outline:1.5px dashed var(--line);outline-offset:4px;transition:background .15s}
.hhs-fixmode #hhs-text p:hover,.hhs-fixmode #hhs-text p:focus-visible{background:var(--surface)}
.hhs-fix-ed{display:flex;flex-direction:column;gap:10px;margin:6px 0 22px}
.hhs-fix-ed textarea{width:100%;resize:vertical;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:1.55;padding:12px 14px;box-sizing:border-box}
.hhs-fix-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}