/* ==========================================================================
   Rex Finanzplanung — rexy.css · Maskottchen «Rexy» (Wegweiser, Tipps, Chat)
   Baut auf styles.css auf (Tokens --bord, --line, --paper …).
   Bewegung: nur transform/opacity, <=300 ms für UI, prefers-reduced-motion beachtet.
   ========================================================================== */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}

/* ---------- Figur ---------- */
.rexy-fig{position:relative;margin:0;display:flex;justify-content:center;align-items:flex-end}
.rexy-fig img{position:relative;z-index:1;width:100%;height:auto;max-width:320px}
.rexy-fig::after{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,14,27,.16),rgba(70,14,27,0));z-index:0}
.rexy-pop{animation:rexyIn .42s var(--ease-out) both}
@keyframes rexyIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Wegweiser (Startseite) ---------- */
.ww-blk{padding:8px 0 84px}
@media(max-width:767px){.ww-blk{padding:0 0 60px}}
.ww{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:36px 44px}
.ww-rexy img{max-width:240px}
.ww-h{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-bottom:8px}
.ww-sub{color:var(--muted);font-size:16px;max-width:56ch;margin-bottom:22px}
.ww-stage:focus{outline:none}
.ww-q{font-size:18px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em}
.ww-q:focus{outline:none}
.ww-step{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
.ww-opts{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.ww-opt{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .18s var(--ease-out),background-color .18s var(--ease-out),transform .16s var(--ease-out)}
.ww-opt:hover{border-color:var(--bord);background:var(--bord-soft)}
.ww-opt:active{transform:scale(.97)}
.ww-anim{animation:wwIn .26s var(--ease-out) both}
@keyframes wwIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ww-res{display:grid;gap:12px}
.ww-res p{color:var(--muted);max-width:60ch}
.ww-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;list-style:none;margin:6px 0 4px}
.ww-link{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);
  transition:border-color .18s var(--ease-out),transform .18s var(--ease-out);min-height:44px}
.ww-link:hover{border-color:var(--bord);transform:translateY(-1px)}
.ww-link b{font-size:15.5px}
.ww-link span{font-size:13.5px;color:var(--muted)}
.ww-link .k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bord);font-weight:700}
.ww-cta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:6px}
.ww-cta .klein{font-size:14px;color:var(--muted)}
.ww-cta .klein a{color:var(--bord);font-weight:600;border-bottom:1px solid var(--bord-soft)}
.ww-back{background:none;border:0;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;padding:10px 0;min-height:44px;margin-top:6px}
.ww-back:hover{color:var(--bord)}
.ww-nojs{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.ww-nojs a{display:inline-flex;min-height:44px;align-items:center;padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-weight:600;background:#fff}
@media(max-width:860px){
  .ww{grid-template-columns:1fr;gap:6px;padding:26px 22px}
  .ww-rexy{justify-content:flex-start}
  .ww-rexy img{max-width:132px}
  .ww-opt{font-size:15px;padding:10px 15px}
}

/* ---------- Seiten-Figur (Unterseiten, z. B. Pensionsplanung, 404, Danke) ---------- */
.rexy-seite{display:flex;gap:22px;align-items:center;max-width:760px;margin:0 auto;padding:22px 26px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s)}
.rexy-seite .rexy-fig{flex:none;width:132px}
.rexy-seite p{color:var(--muted);font-size:15.5px}
.rexy-seite b{color:var(--ink)}
@media(max-width:560px){.rexy-seite{flex-direction:column;align-items:flex-start;padding:20px}.rexy-seite .rexy-fig{width:110px}}

/* ---------- Rexy-Tipp (Rechner) ---------- */
.rexy-tipp{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:end;margin-top:28px}
.rexy-tipp .rexy-fig img{max-width:120px}
.rexy-bubble{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px 18px 18px 6px;
  padding:18px 20px 14px;box-shadow:var(--shadow-s);margin-bottom:22px}
.rexy-bubble::before{content:"";position:absolute;left:-8px;bottom:14px;width:14px;height:14px;background:var(--paper);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.rexy-bubble .wer{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bord);font-weight:700;margin-bottom:6px}
.rexy-bubble .tipp{font-size:15.5px;line-height:1.55;min-height:3.1em}
.rexy-bubble .tipp a{color:var(--bord);font-weight:600;border-bottom:1px solid var(--bord-soft)}
.rexy-bubble .fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;margin-top:10px;
  font-size:12.5px;color:var(--muted)}
.rexy-next{background:none;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  padding:8px 14px;min-height:44px;cursor:pointer;transition:border-color .18s var(--ease-out),transform .16s var(--ease-out)}
.rexy-next:hover{border-color:var(--bord)}
.rexy-next:active{transform:scale(.97)}
@media(max-width:560px){.rexy-tipp{grid-template-columns:76px 1fr;gap:10px}.rexy-tipp .rexy-fig img{max-width:76px}.rexy-bubble{padding:16px 16px 12px}}

/* ---------- Chat «Rexy fragen» ---------- */

.rexy-panel{position:fixed;right:20px;bottom:20px;z-index:96;width:min(400px,calc(100vw - 32px));height:min(640px,calc(100vh - 40px));
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 70px -24px rgba(70,14,27,.38);overflow:hidden;transform-origin:bottom right;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.rexy-panel[hidden]{display:none}
.rexy-panel.zu{opacity:0;transform:translateY(8px) scale(.97)}
@media(max-width:560px){.rexy-panel{right:0;left:0;bottom:0;width:100%;height:min(88vh,100dvh);border-radius:20px 20px 0 0}}
.rexy-head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line)}
.rexy-head img{width:42px;height:42px;border-radius:50%;flex:none}
.rexy-head .nm{font-weight:700;font-size:16px;line-height:1.2}
.rexy-head .st{font-size:12.5px;color:var(--muted)}
.rexy-x{margin-left:auto;width:44px;height:44px;border:0;background:none;border-radius:12px;cursor:pointer;color:var(--ink);font-size:22px;line-height:1}
.rexy-x:hover{background:var(--bord-soft)}
.rexy-ki{font-size:12.5px;color:var(--muted);background:var(--bg);padding:9px 16px;border-bottom:1px solid var(--line);line-height:1.45}
.rexy-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.rexy-m{max-width:88%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.rexy-m.bot{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:6px}
.rexy-m.du{align-self:flex-end;background:var(--bord);color:#fff;border-bottom-right-radius:6px}
.rexy-m.neu{animation:wwIn .22s var(--ease-out) both}
.rexy-schlaf{display:flex;gap:12px;align-items:center;align-self:stretch;padding:10px 12px;border:1px dashed var(--line);border-radius:14px;font-size:13.5px;color:var(--muted)}
.rexy-schlaf img{width:64px;height:64px;flex:none}
.rexy-acts{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:100%}
.rexy-acts a,.rexy-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .18s var(--ease-out),transform .16s var(--ease-out)}
.rexy-acts a.prim{background:var(--bord);border-color:var(--bord);color:#fff}
.rexy-acts a:hover,.rexy-chip:hover{border-color:var(--bord)}
.rexy-acts a.prim:hover{background:var(--bord-bright)}
.rexy-chip:active,.rexy-acts a:active{transform:scale(.97)}
.rexy-denkt{display:flex;align-items:center;gap:10px;align-self:flex-start;font-size:13.5px;color:var(--muted)}
.rexy-denkt img{width:52px;height:52px}
.rexy-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.rexy-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rexy-form textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:14px;padding:11px 13px;font:inherit;font-size:16px;line-height:1.4;max-height:120px;background:#fff;color:var(--ink)}
.rexy-form textarea:focus{outline:2px solid var(--bord);outline-offset:1px}
.rexy-form button{flex:none;min-width:44px;min-height:44px;border:0;border-radius:14px;background:var(--bord);color:#fff;font:inherit;font-weight:600;padding:0 16px;cursor:pointer}
.rexy-form button:disabled{opacity:.5;cursor:default}
.rexy-fuss{font-size:12px;color:var(--muted);padding:0 14px 12px;background:var(--paper)}
.rexy-fuss a{color:var(--bord);border-bottom:1px solid var(--bord-soft)}

@media(prefers-reduced-motion:reduce){
  .rexy-pop,.ww-anim,.rexy-m.neu{animation:none}
  .rexy-panel,.ww-opt,.ww-link,.rexy-next,.rexy-chip,.rexy-acts a{transition:opacity .15s linear}
  .rexy-panel.zu{transform:none}
  .ww-link:hover{transform:none}
}
@media print{.rexy-panel{display:none!important}}

/* Tipp-Liste: ohne JavaScript alle Tipps sichtbar, mit JavaScript einer nach dem anderen */
.rexy-bubble ol{list-style:none;display:grid;gap:8px}
.rexy-bubble.mit-js ol{display:block}
.rexy-bubble.mit-js li:not(.an){display:none}
.rexy-bubble.mit-js li.an{animation:wwIn .24s var(--ease-out) both}
@media(prefers-reduced-motion:reduce){.rexy-bubble.mit-js li.an{animation:none}}
.rexy-seite p a{color:var(--bord);font-weight:600;border-bottom:1px solid var(--bord-soft)}

/* Freigestellte Posen haben unterschiedliche Seitenverhältnisse: in einem quadratischen Rahmen
   zeigen (kein Springen beim Posenwechsel, keine Verzerrung). */
.rexy-fig{aspect-ratio:1/1}
.rexy-fig img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.ww-rexy{max-width:240px;width:100%;margin:0 auto}
.rexy-tipp .rexy-fig{width:100%}
.rexy-denkt img,.rexy-schlaf img{object-fit:contain}
@media(max-width:860px){.ww-rexy{max-width:132px;margin:0}}
.rexy-tipp{max-width:760px}

/* ---------- Hero Startseite: Rexy neben Astrits Karte (25.10.2026) ---------- */
.hero-side{position:relative;padding-top:150px}
.hero-rexy{position:absolute;top:0;right:12px;z-index:2;display:flex;align-items:flex-start;gap:12px;pointer-events:none}
.hero-rexy-img{display:block;width:150px;height:auto;aspect-ratio:498/640;filter:drop-shadow(0 10px 14px rgba(70,14,27,.12));
  animation:rexyIn .42s var(--ease-out) .15s both}
.hero-rexy-bubble{pointer-events:auto;position:relative;margin-top:26px;max-width:240px;padding:12px 16px;min-height:44px;
  background:#fff;border:1px solid var(--line);border-radius:16px 16px 4px 16px;box-shadow:var(--shadow-s);
  font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);
  transition:border-color .18s var(--ease-out),transform .16s var(--ease-out);
  animation:wwIn .3s var(--ease-out) .45s both}
.hero-rexy-bubble::after{content:"";position:absolute;right:-7px;top:22px;width:12px;height:12px;background:#fff;
  border-right:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.hero-rexy-bubble:hover{border-color:var(--bord)}
.hero-rexy-bubble:hover::after{border-color:var(--bord)}
.hero-rexy-bubble:active{transform:scale(.97)}
.hero-rexy-bubble:focus-visible{outline:2px solid var(--bord);outline-offset:3px}
.hero-side .proof-person .pp-head{padding-right:72px}
@media(max-width:960px){
  .hero-side{padding-top:112px}
  .hero-rexy{right:4px;gap:8px}
  .hero-rexy-img{width:96px}
  .hero-rexy-bubble{margin-top:14px;max-width:220px;font-size:14px;padding:10px 14px}
  .hero-rexy-bubble::after{top:16px}
  .hero-side .proof-person .pp-head{padding-right:26px}
}
@media(max-width:400px){
  .hero-rexy-bubble{max-width:200px}
}
@media(prefers-reduced-motion:reduce){
  .hero-rexy-img,.hero-rexy-bubble{animation:none}
  .hero-rexy-bubble:active{transform:none}
}