@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter.woff2) format('woff2')}
  @font-face{font-family:'Kristi';font-weight:400;font-display:swap;src:url(/assets/fonts/kristi.woff2) format('woff2')}
  /* HeidisNylons · Edition 02 */
  :root{
    --bg:#F3E8E1; --surface:#FBF6F2; --ink:#3A3A3A; --muted:#6A625D; --faint:#9B918A;
    --line:#D9CEC3; --accent:#9E3A49; --aubergine:#9E3A49; --aubergine-ink:#FFFFFF;
    --rose:#D0C6B8; --online:#5E8A62; --sand:#D0C6B8;
    --serif:"Kristi","Bradley Hand",cursive;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --script:"Kristi","Bradley Hand",cursive;
    --col:600px;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#242221; --surface:#2F2C2A; --ink:#F3E8E1; --muted:#C2B8B0; --faint:#8F8780;
      --line:#3E3A37; --accent:#D27D88; --aubergine:#A23B49; --rose:#4A3A3A; --online:#8DBB8F; --sand:#4A4440;
    }
  }
  :root[data-theme="dark"]{
    --bg:#242221; --surface:#2F2C2A; --ink:#F3E8E1; --muted:#C2B8B0; --faint:#8F8780;
    --line:#3E3A37; --accent:#D27D88; --aubergine:#A23B49; --rose:#4A3A3A; --online:#8DBB8F; --sand:#4A4440;
  }
  *,*::before,*::after{box-sizing:inherit}
  html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

  .wrap{max-width:var(--col);margin:0 auto;padding:0 22px}

  /* Header */
  header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}
  .logo{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;text-decoration:none}
  .head-actions{display:flex;gap:10px}
  .round{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
  .avatar{background:linear-gradient(145deg,#C9B3C3,#8C7088);color:#2F2730;font-family:var(--serif);border:0;overflow:hidden;padding:0}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

  /* Hero */
  .kicker{margin:44px 0 10px;color:var(--accent);font-size:13px;letter-spacing:.02em}
  h1{font-family:var(--serif);font-weight:600;font-size:clamp(44px,11vw,64px);line-height:1;letter-spacing:-.03em;margin:0 0 18px}
  .lede{color:var(--muted);font-size:18px;margin:0 0 24px;max-width:34em}

  /* Video */
  .video{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:18px;overflow:hidden;cursor:pointer;
    background:
      radial-gradient(circle at 74% 38%,#D3A9B6 0 15%,transparent 15.5%),
      linear-gradient(125deg,#7C6A78 0%,#4A3B48 30%,#93707F 30.5%,#93707F 55%,#241D24 55.5%,#17121A 100%);
    color:#fff;text-align:left;font:inherit}
  .video .thumbs{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#fff}
  .video .thumbs img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  .video::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(to bottom,transparent,rgba(15,10,15,.88))}
  .video .brand{position:absolute;top:16px;right:18px;font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:.06em;opacity:.85;z-index:1}
  .video .play{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.3);z-index:1}
  .video .play svg{margin-left:4px}
  .video.ohne-video{cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}
  .video .meta{position:absolute;left:18px;right:18px;bottom:14px;z-index:1}
  .video .title{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(22px,6vw,28px);letter-spacing:-.01em;line-height:1.1;margin:0 0 5px;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
  .video .sub{display:block;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.3;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.4)}

  /* Video-Player (9:16, Vollbild) */
  .player{position:fixed;inset:0;z-index:30;background:rgba(12,8,12,.92);display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .player[hidden]{display:none}
  .player-frame{position:relative;height:min(100%,calc((100vw - 32px) * 16 / 9));aspect-ratio:9/16;border-radius:18px;overflow:hidden;
    background:radial-gradient(circle at 70% 30%,#D3A9B6 0 22%,transparent 22.5%),linear-gradient(150deg,#7C6A78 0%,#4A3B48 35%,#93707F 35.5%,#93707F 60%,#241D24 60.5%,#17121A 100%)}
  .player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
  .player-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:1}
  .player-empty{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:rgba(255,255,255,.8);font-size:14px}

  /* CTA */
  .cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:18px 0 8px;padding:17px 20px;border-radius:14px;background:var(--aubergine);color:var(--aubergine-ink);font-weight:700;font-size:18px;text-decoration:none}
  .cta small{display:block;font-weight:400;font-size:14px;opacity:.85}
  .note{color:var(--muted);font-size:15px;margin:0}

  hr{border:0;border-top:1px solid var(--line);margin:48px 0}
  h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,8vw,44px);letter-spacing:-.02em;line-height:1.05;margin:0 0 10px}
  .section-lede{color:var(--muted);margin:0 0 22px}

  /* Chat */
  .chat{border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden}
  .chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
  .chat-head .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
  .chat-head b{display:block;font-size:17px}
  .status{font-size:14px;color:var(--faint);display:flex;align-items:center;gap:6px}
  .status[data-online="true"]{color:var(--online)}
  .status i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
  .chat-body{padding:18px;display:flex;flex-direction:column;gap:12px}
  .msg{max-width:88%;padding:12px 15px;border-radius:16px;font-size:16px;line-height:1.5}
  .msg.her{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
  .msg.me{background:var(--aubergine);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;white-space:pre-wrap}
  .msg.sys{align-self:center;background:transparent;color:var(--muted);font-size:14px;text-align:center;padding:4px 8px}
  textarea{width:100%;min-height:96px;resize:vertical;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
  textarea::placeholder{color:var(--faint)}
  .send{width:100%;margin-top:12px;padding:15px;border:0;border-radius:14px;background:var(--aubergine);color:#fff;font:inherit;font-weight:700;font-size:17px;cursor:pointer;transition:opacity .15s}
  .send:disabled{opacity:.45;cursor:default}
  .fineprint{font-size:13px;color:var(--muted);margin:12px 0 0}

  /* Vorschau-Status (nur Test) */
  .preview-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;border:1px dashed var(--line);border-radius:14px;font-size:15px;color:var(--muted)}
  .preview-toggle div{display:flex;gap:6px}
  .preview-toggle button{padding:7px 14px;border-radius:999px;border:1px solid var(--aubergine);background:transparent;color:var(--aubergine);font:inherit;cursor:pointer}
  .preview-toggle button[aria-pressed="true"]{background:var(--aubergine);color:#fff}
  :root[data-theme="dark"] .preview-toggle button:not([aria-pressed="true"]){color:var(--ink)}

  /* Ansichten */
  [data-view][hidden]{display:none}
  .conv-header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:36px}
  .back{background:none;border:0;padding:0;font:inherit;font-size:16px;color:var(--aubergine);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  :root[data-theme="dark"] .back{color:var(--accent)}
  .typing{align-self:flex-start;display:flex;gap:4px;padding:14px 16px;border-radius:16px;border-bottom-left-radius:5px;background:var(--surface);border:1px solid var(--line)}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:blink 1.2s infinite}
  .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
  @keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
  @media (prefers-reduced-motion:reduce){.typing i{animation:none}}

  .escape{position:fixed;inset:0;background:rgba(30,20,30,.55);display:grid;place-items:end center;padding:16px;z-index:20}
  .escape[hidden]{display:none}
  .escape-card{width:100%;max-width:440px;background:var(--bg);border-radius:20px;padding:24px 22px calc(22px + env(safe-area-inset-bottom,0px));text-align:center}
  .escape-card h3{font-family:var(--serif);font-weight:500;font-size:28px;margin:0 0 8px}
  .escape-card p{color:var(--muted);margin:0 0 12px}
  .escape-card .hint{color:var(--ink);font-weight:600}

  .typing-row{align-self:flex-start;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
  .auto{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--bg);color:var(--muted)}
  .auto b{display:block;color:var(--muted);margin-bottom:2px}
  .auto p{margin:0 0 14px;line-height:1.6}
  .auto-actions{display:flex;flex-wrap:wrap;gap:8px}
  .pill{padding:9px 16px;border-radius:999px;border:1px solid var(--aubergine);background:transparent;color:var(--aubergine);font:inherit;font-size:15px;cursor:pointer}
  .pill.solid{background:var(--aubergine);color:#fff}
  :root[data-theme="dark"] .pill:not(.solid){color:var(--ink)}
  .pill[aria-pressed="true"]{background:var(--aubergine);color:#fff}
  .mail-panel{position:relative;flex-basis:100%;margin:6px 0 4px;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
  .mail-panel[hidden]{display:none}
  .mail-panel::before{content:"";position:absolute;top:-7px;left:28px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
  .google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;border-radius:999px;border:1px solid #DADCE0;background:#fff;color:#3C4043;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
  .google:hover{background:#F8F9FA}
  .or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--faint);font-size:13px}
  .or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
  .mail-form{display:flex;gap:8px}
  .mail-ok{position:relative;flex-basis:100%;margin:6px 0 4px;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--online) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--online) 35%,transparent);color:var(--ink);font-size:15px;line-height:1.5}
  .mail-ok::before{content:"";position:absolute;top:-7px;left:28px;width:12px;height:12px;background:inherit;border-left:inherit;border-top:inherit;transform:rotate(45deg)}
  .mail-ok strong{word-break:break-all}
  .mail-err{margin:8px 0 0 !important;font-size:14px;color:#B3261E}
  .mail-note{margin:10px 0 0 !important;font-size:13px;color:var(--faint)}
  .mail-form input{flex:1;min-width:0;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
  .auto-done{margin:12px 0 0 !important;color:var(--ink)}
  .auto-actions[hidden]{display:none}
  .pill.ok{display:inline-flex;align-items:center;gap:8px;border-color:var(--online);color:var(--online);background:transparent;cursor:default}
  .pill.ok .check{width:20px;height:20px;border-radius:50%;background:var(--online);color:#fff;display:grid;place-items:center;animation:pop .35s ease-out}
  @keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
  @media (prefers-reduced-motion:reduce){.pill.ok .check{animation:none}}
  .follow{margin:8px 0 0 !important;font-size:14px;color:var(--muted)}
  .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--aubergine);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  :root[data-theme="dark"] .linkbtn{color:var(--accent)}

  /* Anleitung Benachrichtigungen */
  .guide{position:fixed;inset:0;z-index:25;background:rgba(30,20,30,.55);display:grid;place-items:center;padding:10px}
  .guide[hidden]{display:none}
  .guide-card{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 20px);overflow:auto;background:var(--bg);border-radius:22px;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0px))}
  .guide-card h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 40px 8px 0;line-height:1.15}
  .g-lede{color:var(--muted);margin:0 0 14px;font-size:15px}
  .g-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px;cursor:pointer}
  .g-tabs{display:inline-flex;gap:2px;padding:2px;margin:0 0 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
  .g-tabs button{padding:4px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .g-tabs button:focus-visible{outline-offset:1px}
  .g-lede:empty{display:none}
  .g-tabs button[aria-pressed="true"]{background:var(--aubergine);color:#fff}
  .g-media{display:grid;place-items:center;margin-bottom:12px}
  .g-media.has-video{padding-top:8px!important;background:#F4EAF2;border-radius:18px;padding:14px 12px 12px;margin-left:-6px;margin-right:-6px}
  .g-media canvas{width:min(80vw,340px,calc((100dvh - 310px) * 270 / 398));height:auto;aspect-ratio:270/398;background:transparent;display:block}
  .g-media canvas[hidden]{display:none}
  .g-cap,.g-dots{display:none}
  .has-video .g-cap{display:block;min-height:2.9em;margin:10px 4px 6px;text-align:center;color:#2F2730;font-size:16px;line-height:1.45}
  .g-cap span{display:block;font-size:12px;color:#D99BC3;margin-bottom:2px}
  .g-cap b{color:inherit}
  .g-dots button{background:rgba(101,61,92,.22)!important}
  .g-dots button.on{background:#B5729E!important}
  :root[data-theme="dark"] .g-media.has-video{background:#17111B}
  :root[data-theme="dark"] .has-video .g-cap{color:#fff}
  :root[data-theme="dark"] .g-dots button{background:rgba(255,255,255,.28)!important}
  :root[data-theme="dark"] .g-dots button.on{background:#D99BC3!important}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .g-media.has-video{background:#17111B}
    :root:not([data-theme="light"]) .has-video .g-cap{color:#fff}
    :root:not([data-theme="light"]) .g-dots button{background:rgba(255,255,255,.28)!important}
    :root:not([data-theme="light"]) .g-dots button.on{background:#D99BC3!important}
  }
  .has-video .g-dots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
  .g-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.28);cursor:pointer}
  .g-dots button.on{background:#D99BC3;width:20px;border-radius:4px}
  .guide-card:has(.has-video) .g-steps{display:none}
  .g-steps{margin:0 0 14px;padding-left:22px;color:var(--muted);font-size:15px}
  .g-steps li{padding:4px 0;transition:color .2s}
  .g-steps li.on{color:var(--ink)}
  .g-steps li::marker{color:var(--accent);font-weight:700}
  .g-steps .ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--surface);border:1px solid var(--line);font-size:12px}
  .g-note{font-size:14px;color:#B3261E;margin:0 0 10px}
  /* Handy-Attrappe */
  .phone{width:170px;aspect-ratio:9/19.5;border-radius:28px;background:#1A141A;padding:7px;box-shadow:0 10px 30px rgba(40,20,40,.25)}
  .phone[hidden]{display:none}
  .screen{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#FBF7F4;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:8.5px;color:#2F2730}
  .sc{position:absolute;inset:0;opacity:0;transition:opacity .35s}
  .guide[data-dev="ios"] .phone[data-scene="0"] .sc-ios-0,.guide[data-dev="ios"] .phone[data-scene="1"] .sc-ios-1,
  .guide[data-dev="ios"] .phone[data-scene="2"] .sc-ios-2,.guide[data-dev="ios"] .phone[data-scene="3"] .sc-ios-3,
  .guide[data-dev="ios"] .phone[data-scene="done"] .sc-an-2,
  .guide[data-dev="android"] .phone[data-scene="0"] .sc-an-0,.guide[data-dev="android"] .phone[data-scene="1"] .sc-an-1,
  .guide[data-dev="android"] .phone[data-scene="2"] .sc-an-2,.guide[data-dev="android"] .phone[data-scene="done"] .sc-an-2{opacity:1}
  .url{margin:18px 8px 0;padding:5px 8px;border-radius:8px;background:#EDE6EA;text-align:center;color:#776A75}
  .page{position:absolute;top:44px;left:8px;right:8px;bottom:40px;border-radius:8px;background:linear-gradient(#E9DCE4 0 18%,transparent 18% 24%,#EFE7EC 24% 30%,transparent 30% 34%,#EFE7EC 34% 40%,transparent 40% 48%,#653D5C 48% 56%,transparent 56%)}
  .page.dim{filter:brightness(.6)}
  .bar{position:absolute;left:0;right:0;bottom:0;height:34px;background:#F2EDF0;display:flex;justify-content:space-around;align-items:center;font-size:12px;color:#2F7BF6}
  .bar span{width:12px;height:12px;display:grid;place-items:center}
  .bar span:not(.share){background:#D9D0D5;border-radius:3px;width:10px;height:10px}
  .sheet{position:absolute;left:5px;right:5px;bottom:5px;background:#fff;border-radius:12px;padding:4px 0;box-shadow:0 -4px 14px rgba(0,0,0,.2)}
  .row{padding:7px 10px;border-bottom:1px solid #EEE;display:flex;justify-content:space-between}
  .row:last-child{border-bottom:0}
  .addbar{display:flex;justify-content:space-between;align-items:center;padding:20px 8px 8px;border-bottom:1px solid #E5E5E5;font-size:7.5px;color:#2F7BF6}
  .addbar b{color:#2F2730}
  .addrow{display:flex;align-items:center;gap:8px;padding:12px 10px}
  .appicon{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:linear-gradient(145deg,#C9B3C3,#8C7088);color:#2F2730;font-family:var(--serif);font-style:normal;font-size:13px}
  .home{position:absolute;inset:0;background:linear-gradient(160deg,#8C7088,#3A2B38);display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:30px 12px;align-content:start}
  .home i{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.25)}
  .home i.appicon{background:linear-gradient(145deg,#E6D3DF,#B091A8)}
  .alert{position:absolute;left:14px;right:14px;top:38%;background:rgba(245,242,244,.97);border-radius:12px;text-align:center;overflow:hidden}
  .alert b{display:block;padding:10px 8px}
  .alert div,.dialog div{display:flex;border-top:1px solid #DDD}
  .alert span{flex:1;padding:7px 0;color:#2F7BF6}
  .alert span+span{border-left:1px solid #DDD;font-weight:700}
  .dialog{position:absolute;left:10px;right:10px;top:36%;background:#fff;border-radius:14px;padding:12px 10px 4px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .dialog b{display:block;margin-bottom:8px}
  .dialog div{border:0;justify-content:flex-end;gap:12px}
  .dialog span{padding:6px 4px;color:#1A73E8;font-weight:600}
  .cta-mock{position:absolute;left:14px;right:14px;bottom:24px;padding:8px;border-radius:9px;background:#653D5C;color:#fff;text-align:center;font-weight:700}
  .notif{position:absolute;left:8px;right:8px;top:14px;display:flex;gap:7px;align-items:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.92);animation:drop .5s ease-out}
  .notif b{display:block}
  @keyframes drop{from{transform:translateY(-30px);opacity:0}}
  .tap{position:relative}
  .tap::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(181,114,158,.45);animation:tap 1.1s ease-out infinite}
  @keyframes tap{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
  @media (prefers-reduced-motion:reduce){.tap::after,.notif{animation:none}}

  .mini-foot{display:flex;justify-content:center;padding:28px 0 40px;margin-top:24px;border-top:1px solid var(--line)}
  .mini-foot nav{display:flex;gap:22px;font-size:14px}
  .mini-foot a{color:var(--muted)}
  .legal ul li b{color:var(--ink);font-weight:600}

  /* Impressum */
  .legal{padding:8px 0 80px}
  .legal h1{font-size:clamp(40px,10vw,56px);margin:8px 0 24px}
  .legal h2{font-size:26px;margin:40px 0 10px}
  .legal address{font-style:normal;line-height:1.7;margin:0 0 14px}
  .legal p,.legal li{color:var(--muted)}
  .legal .contact{line-height:1.9;margin:0}
  .legal a{color:var(--aubergine);text-underline-offset:3px}
  :root[data-theme="dark"] .legal a{color:var(--accent)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .legal a{color:var(--accent)}}
  .legal ul{padding-left:20px;margin:10px 0 0}
  .legal li{padding:3px 0}
  .legal .back-link{margin-top:48px}

  /* Nachrichten: Liken & Antworten */
  .mrow{display:flex;align-items:center;gap:4px;max-width:92%}
  .mrow.her{align-self:flex-start}
  .mrow.me{align-self:flex-end;flex-direction:row-reverse}
  .mrow .msg{max-width:100%;position:relative;-webkit-user-select:text;user-select:text}
  .mrow.her.liked .msg{margin-bottom:10px}
  .col{display:flex;flex-direction:column;min-width:0;max-width:100%}
  .mrow.me .col{align-items:flex-end}
  .msg .meta{float:right;display:inline-flex;align-items:center;gap:4px;margin:8px 0 -4px 12px;font-size:11px;line-height:1;white-space:nowrap;color:var(--faint)}
  .msg.me .meta{color:rgba(255,255,255,.72)}
  .ticks{display:inline-flex;color:inherit}
  .ticks[data-state="read"]{color:#8CC8FF}
  .msg.me .heart.inline{color:#FFB3CF}
  .heart.inline{position:static;padding:0;border:0;background:none;font-size:14px;color:#D6457E}
  .more{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--faint);font-size:18px;line-height:1;cursor:pointer;opacity:.0;transition:opacity .15s}
  .mrow:hover .more,.more:focus-visible,.mrow:focus-within .more{opacity:1}
  @media (hover:none){.more{opacity:.6}}
  .more:hover{background:var(--surface)}
  .heart{position:absolute;bottom:-11px;font-size:12px;line-height:1;padding:3px 5px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:#D6457E}
  .mrow.her .heart{right:8px}
  .mrow.me .heart{left:8px}
  .heart-pop{position:absolute;left:50%;top:50%;font-size:34px;color:#D6457E;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;animation:heartpop .7s ease-out}
  @keyframes heartpop{30%{transform:translate(-50%,-50%) scale(1.1);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
  @media (prefers-reduced-motion:reduce){.heart-pop{display:none}}
  .msg-menu{position:fixed;z-index:15;min-width:170px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(40,20,40,.18)}
  .msg-menu[hidden]{display:none}
  .msg-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:15px;cursor:pointer;white-space:pre}
  .msg-menu button:hover,.msg-menu button:focus-visible{background:var(--bg)}
  .quote{border-left:3px solid currentColor;opacity:.85;padding:2px 0 2px 8px;margin:0 0 6px;font-size:14px;max-width:260px}
  .quote b{display:block;font-size:12px}
  .quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .reply-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:8px 10px 8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent)}
  .reply-bar[hidden]{display:none}
  .reply-bar div{flex:1;min-width:0;font-size:14px}
  .reply-bar b{display:block;font-size:12px;color:var(--accent)}
  .reply-bar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
  .reply-bar button{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}

  /* ---------- Mikroanimationen ---------- */
  /* 1 + 2: Nachrichten gleiten ein (eigene von rechts, Heidis von links) */
  .mrow.enter{animation:inMe .3s cubic-bezier(.2,.8,.2,1)}
  .mrow.her.enter{animation:inHer .32s cubic-bezier(.2,.8,.2,1)}
  @keyframes inMe{from{opacity:0;transform:translate(10px,12px) scale(.96)}}
  @keyframes inHer{from{opacity:0;transform:translate(-10px,10px) scale(.97)}}
  .typing-row{animation:fadeIn .2s ease-out}
  .typing-row.leaving{opacity:0;transform:scale(.9);transition:opacity .15s,transform .15s}
  @keyframes fadeIn{from{opacity:0}}
  /* Haken zeichnen sich, gelesen färbt sich blau */
  .ticks path{stroke-dasharray:24;stroke-dashoffset:0;animation:draw .35s ease-out}
  .ticks[data-state="read"]{animation:toBlue .5s ease-out}
  @keyframes draw{from{stroke-dashoffset:24}}
  @keyframes toBlue{from{color:rgba(255,255,255,.72)}}
  /* 3: Online-Punkt pulsiert leicht */
  .status i{position:relative}
  .status[data-online="true"] i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
  /* 4: Knöpfe geben beim Antippen nach */
  .send,.cta,.pill,.float,.google,.g-tabs button,.msg-menu button{transition:transform .12s ease,background-color .15s,opacity .15s}
  .send:active:not(:disabled),.cta:active,.pill:active:not(:disabled),.google:active,.g-tabs button:active,.msg-menu button:active{transform:scale(.97)}
  .float:active{transform:translate(-50%,0) scale(.96)}
  /* 5: Fenster und Menüs gleiten weich auf */
  .guide:not([hidden]),.escape:not([hidden]),.player:not([hidden]){animation:fadeIn .22s ease-out}
  .guide:not([hidden]) .guide-card,.escape:not([hidden]) .escape-card{animation:rise .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}}
  .msg-menu:not([hidden]){animation:menuIn .16s ease-out;transform-origin:top left}
  @keyframes menuIn{from{opacity:0;transform:scale(.95) translateY(-4px)}}
  .mail-panel:not([hidden]),.mail-ok{animation:rise .25s cubic-bezier(.2,.8,.2,1)}
  /* Extras */
  .heart{animation:heartIn .35s cubic-bezier(.3,1.6,.5,1)}
  @keyframes heartIn{from{transform:scale(0)}}
  .reply-bar:not([hidden]){animation:rise .22s cubic-bezier(.2,.8,.2,1)}
  #theme svg.spin{animation:spin .45s cubic-bezier(.4,0,.2,1)}
  @keyframes spin{from{transform:rotate(-180deg)}}
  details[open] > p{animation:faqIn .25s ease-out}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}
  .shake{animation:shake .35s ease-in-out}
  @keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
  .g-cap.swap{animation:fadeIn .3s ease-out}
  .video .play{transition:transform .2s ease}
  .video:hover .play{transform:translate(-50%,-50%) scale(1.06)}
  .video:active .play{transform:translate(-50%,-50%) scale(.95)}
  @media (prefers-reduced-motion:reduce){
    .heart,.reply-bar:not([hidden]),#theme svg.spin,details[open] > p,.shake,.g-cap.swap{animation:none!important}
    .video .play{transition:none}
  }
  @media (prefers-reduced-motion:reduce){
    .mrow.enter,.mrow.her.enter,.typing-row,.ticks path,.ticks[data-state="read"],.status[data-online="true"] i::after,
    .guide:not([hidden]),.escape:not([hidden]),.player:not([hidden]),.guide-card,.escape-card,.msg-menu:not([hidden]),.mail-panel,.mail-ok{animation:none!important}
    .send,.cta,.pill,.float,.google{transition:none}
  }

  /* FAQ */
  details{border-top:1px solid var(--line)}
  details:last-of-type{border-bottom:1px solid var(--line)}
  summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;font-weight:600;font-size:18px;cursor:pointer}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"";width:14px;height:14px;flex:none;background:
    linear-gradient(var(--muted),var(--muted)) center/14px 2px no-repeat,
    linear-gradient(var(--muted),var(--muted)) center/2px 14px no-repeat;transition:transform .2s}
  details[open] summary::after{transform:rotate(45deg)}
  details p{margin:0 2px 20px;color:var(--muted)}
  .todo{background:#FFF1B8;color:#5A4500;padding:1px 5px;border-radius:4px}

  /* Footer */
  footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:32px 0 110px;margin-top:56px;border-top:1px solid var(--line)}
  footer .logo{font-size:24px}
  footer nav{display:flex;gap:22px;font-size:15px}

  /* Floating */
  .float{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,0);padding:12px 22px;border-radius:999px;background:var(--aubergine);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 10px 30px rgba(60,30,55,.28);transition:opacity .2s,transform .2s;z-index:10}
  .float[hidden]{display:block;opacity:0;pointer-events:none;transform:translate(-50%,12px)}

  /* ================= Edition 02 · Private Scrapbook ================= */
  body{font-size:16px;line-height:1.65;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.2  0 0 0 0 0.18  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
  .logo{font-family:var(--script);font-weight:400;font-size:29px;letter-spacing:0;line-height:1}
  .kicker{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:44px}
  h1{font-family:var(--script);font-weight:400;font-size:clamp(48px,12.5vw,78px);line-height:1.02;letter-spacing:0;color:var(--ink);margin:4px 0 22px}
  h2{font-family:var(--script);font-weight:400;font-size:clamp(38px,10vw,54px);line-height:1.05;letter-spacing:0}
  .legal h1{color:var(--ink)}
  .legal h2{font-size:34px;margin-top:44px}
  .lede{font-size:16px;line-height:1.7}
  .stroke{display:block;color:var(--accent);margin:-8px 0 20px}

  /* Video als gestapelte Prints */
  .video{aspect-ratio:auto;background:none;overflow:visible;border-radius:0;color:var(--ink);padding:6px 0 0}
  .video::after{display:none}
  .video .thumbs{position:relative;display:block;aspect-ratio:16/10.5;background:none}
  .video .thumbs img{position:absolute;width:46%;height:auto;aspect-ratio:8/9;object-fit:cover;object-position:center top;background:#fff;border:7px solid #fff;border-bottom-width:24px;box-shadow:0 10px 24px rgba(40,25,20,.22),0 1px 2px rgba(40,25,20,.2)}
  .video .thumbs img:first-child{left:3%;top:3%;transform:rotate(-4deg)}
  .video .thumbs img:last-child{right:3%;top:8%;transform:rotate(3.5deg)}
  .video .thumbs::before,.video .thumbs::after{content:"";position:absolute;z-index:2;width:72px;height:22px;background:rgba(214,201,186,.75);box-shadow:0 1px 2px rgba(0,0,0,.08)}
  .video .thumbs::before{left:-1%;top:4%;width:58px;transform:rotate(-38deg)}
  .video .thumbs::after{right:-1%;top:9%;width:58px;transform:rotate(40deg)}
  .video .play{top:46%;width:60px;height:60px;z-index:3;background:#fff;box-shadow:0 8px 24px rgba(40,25,20,.25)}
  .video:hover .play,.video:active .play{top:46%}
  .video .stamp{position:absolute;z-index:3;right:-4px;bottom:22%;width:64px;height:64px;border:2px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-family:var(--script);font-size:24px;transform:rotate(-14deg);background:rgba(243,232,225,.55);box-shadow:inset 0 0 0 4px rgba(243,232,225,.0),inset 0 0 0 5px var(--accent)}
  .video .meta{position:static;margin-top:14px}
  .video .title{font-family:var(--script);font-weight:400;font-size:clamp(30px,7.5vw,38px);line-height:1;color:var(--ink);text-shadow:none;margin:0 0 4px}
  .video .sub{font-family:var(--sans);font-style:normal;font-size:14px;line-height:1.5;color:var(--muted);text-shadow:none}

  .cta{border-radius:3px;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.03em}
  .note{font-size:13.5px}
  .send{border-radius:3px;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.03em}
  textarea,.mail-form input{border-radius:3px}
  .chat{border-radius:4px;background:var(--surface);box-shadow:0 1px 0 rgba(0,0,0,.03)}
  .msg{border-radius:12px;font-size:15.5px}
  .msg.her{background:var(--bg)}
  .sig{display:block;font-family:var(--script);font-size:24px;line-height:1;color:var(--accent);margin-top:6px}
  .ticks[data-state="read"]{color:#F2D8B6}
  .heart,.heart.inline,.heart-pop{color:var(--accent)}
  .msg.me .heart.inline{color:#F2D8B6}
  .pill,.preview-toggle button,.g-tabs,.g-tabs button{border-radius:3px}
  .guide-card,.escape-card{border-radius:6px}
  .guide-card h3,.escape-card h3{font-family:var(--script);font-weight:400;font-size:29px;line-height:1}
  .g-media.has-video{border-radius:4px;background:#EEE4DA}
  .has-video .g-cap{color:var(--ink)}
  .g-dots button{background:rgba(58,58,58,.18)!important}
  .g-dots button.on{background:var(--accent)!important}
  .reply-bar{border-left-color:var(--accent);border-radius:3px}
  .reply-bar b{color:var(--accent)}
  .mail-panel,.mail-ok,.msg-menu{border-radius:4px}
  details summary{font-family:var(--sans);font-weight:600;font-size:17px}
  footer .logo{font-size:29px}
  .farewell{text-align:center;margin:64px 0 0;position:relative}
  .farewell span{display:block;font-family:var(--script);font-size:clamp(36px,9.5vw,48px);line-height:1;color:var(--ink)}
  .farewell svg{display:block;margin:6px auto 0;color:var(--accent)}
  .avatar{background:var(--sand)}
  .chat-head b{font-family:var(--script);font-weight:400;font-size:23px;line-height:1}
  h1,h2,.logo,.video .title,.farewell span,.guide-card h3,.escape-card h3{word-spacing:-.12em}
  /* Striche aus der Vorlage */
  .brush{display:block;width:min(68%,310px);height:34px;color:var(--ink);margin:-4px 0 22px 4px;overflow:visible}
  .farewell .brush{width:min(72%,330px);margin:6px auto 0;height:32px;color:var(--ink)}
  .pen{display:block;width:150px;height:16px;color:var(--ink);margin:-6px 0 20px 6px;opacity:.9}
  .pen.single{width:min(62%,240px);height:10px;margin:2px 0 8px 2px;opacity:.85}
  #faq-h + .pen{margin-bottom:24px}
  /* Kristi: schmal und hoch -> größer setzen */
  h1{font-size:clamp(56px,15vw,90px);line-height:1;word-spacing:0}
  h2{font-size:clamp(46px,12.5vw,64px);line-height:1;word-spacing:0}
  .logo{font-size:36px;word-spacing:0}
  footer .logo{font-size:36px}
  .video .title{font-size:clamp(38px,10vw,48px);word-spacing:0}
  .sig{font-size:30px}
  .farewell span{font-size:clamp(46px,12vw,60px);word-spacing:0}
  .chat-head b{font-size:28px}
  .guide-card h3,.escape-card h3{font-size:36px;word-spacing:0}
  .video .stamp{font-size:30px}
  .legal h2{font-size:42px}
@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope.woff2) format('woff2')}
/* ---- gemeinsame Neutralisierung der Scrapbook-Deko für andere Stile ---- */
html[data-skin] body{background-image:none}
html[data-skin] .brush,html[data-skin] .pen,html[data-skin] .video .stamp,html[data-skin] .farewell svg{display:none}
html[data-skin] .video .thumbs::before,html[data-skin] .video .thumbs::after{display:none}
html[data-skin] .video{aspect-ratio:auto;padding:0;overflow:hidden}
html[data-skin] .video .thumbs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;aspect-ratio:16/9}
html[data-skin] .video .thumbs img{position:static;width:100%;height:100%;aspect-ratio:auto;transform:none;border:0;box-shadow:none;object-fit:cover;object-position:center top}
html[data-skin] .video .play,html[data-skin] .video:hover .play,html[data-skin] .video:active .play{top:calc(50% - 30px)}
html[data-skin] .video .meta{position:static;margin:0;padding:16px 20px 18px}
html[data-skin] .video .title{text-shadow:none}
html[data-skin] .video .sub{text-shadow:none}
html[data-skin] h1,html[data-skin] h2,html[data-skin] .logo,html[data-skin] .video .title,html[data-skin] .farewell span,html[data-skin] .guide-card h3,html[data-skin] .escape-card h3{word-spacing:normal}
html[data-skin] .chat-head b{font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.2}
/* ================= NEUMORPHISM ================= */
html[data-skin=neolight]{
  --bg:#E8E3DE;--surface:#E8E3DE;--ink:#3A3634;--muted:#6E6762;--faint:#9C948E;--line:#D8D1CA;
  --accent:#9E3A49;--aubergine:#9E3A49;--sand:#D8D1CA;
  --serif:"Manrope",var(--sans);--script:"Manrope",var(--sans);--sans:"Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hi:#FFFFFF;--lo:#C7BFB7;
  --out:9px 9px 20px var(--lo),-9px -9px 20px var(--hi);
  --out-s:5px 5px 11px var(--lo),-5px -5px 11px var(--hi);
  --in:inset 5px 5px 11px var(--lo),inset -5px -5px 11px var(--hi);
}
@media (prefers-color-scheme:dark){html[data-skin=neolight]:not([data-theme=light]){--bg:#2B2D31;--surface:#2B2D31;--ink:#ECE7E2;--muted:#B5AEA8;--faint:#857F7A;--line:#36383D;--accent:#D08A94;--aubergine:#B04A58;--hi:#35383D;--lo:#1F2124}}
html[data-skin=neolight][data-theme=dark]{--bg:#2B2D31;--surface:#2B2D31;--ink:#ECE7E2;--muted:#B5AEA8;--faint:#857F7A;--line:#36383D;--accent:#D08A94;--aubergine:#B04A58;--hi:#35383D;--lo:#1F2124}
html[data-skin=neolight] body{background:var(--bg);font-size:16px}
html[data-skin=neolight] header{border:0;padding:22px 0}
html[data-skin=neolight] .logo{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:-.03em}
html[data-skin=neolight] .round{border:0;background:var(--bg);box-shadow:var(--out-s);width:46px;height:46px}
html[data-skin=neolight] .avatar{padding:4px;background:var(--bg)}
html[data-skin=neolight] .kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-block;padding:9px 16px;border-radius:999px;box-shadow:var(--in);margin-top:36px}
html[data-skin=neolight] h1{font-family:var(--sans);font-weight:800;font-size:clamp(40px,11vw,62px);line-height:1.02;letter-spacing:-.045em;color:var(--ink);margin:22px 0 18px}
html[data-skin=neolight] h2{font-family:var(--sans);font-weight:800;font-size:clamp(32px,8.5vw,44px);letter-spacing:-.04em;line-height:1.05}
html[data-skin=neolight] .lede{font-size:16.5px}
html[data-skin=neolight] .video{border-radius:28px;background:var(--bg);box-shadow:var(--out);padding:12px;color:var(--ink)}
html[data-skin=neolight] .video .thumbs{border-radius:20px;overflow:hidden;gap:6px;background:var(--bg)}
html[data-skin=neolight] .video .thumbs img{border-radius:20px}
html[data-skin=neolight] .video .play{width:64px;height:64px;background:var(--bg);box-shadow:var(--out-s)}
html[data-skin=neolight] .video .play svg path{fill:var(--accent)}
html[data-skin=neolight] .video .title{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink)}
html[data-skin=neolight] .video .sub{font-family:var(--sans);font-size:14.5px;color:var(--muted)}
html[data-skin=neolight] .cta{border-radius:22px;background:var(--bg);color:var(--accent);box-shadow:var(--out);font-weight:800;letter-spacing:0;padding:20px 24px;margin-top:26px}
html[data-skin=neolight] .cta:active{box-shadow:var(--in);transform:none}
html[data-skin=neolight] hr{border:0;height:0;margin:44px 0}
html[data-skin=neolight] .chat{border:0;border-radius:30px;background:var(--bg);box-shadow:var(--out)}
html[data-skin=neolight] .chat-head{border-bottom:0;padding:20px 22px 8px}
html[data-skin=neolight] .chat-head .avatar{box-shadow:var(--out-s);padding:3px;width:46px;height:46px}
html[data-skin=neolight] .msg{border-radius:20px;font-size:15.5px}
html[data-skin=neolight] .msg.her{background:var(--bg);border:0;box-shadow:var(--out-s);border-bottom-left-radius:8px}
html[data-skin=neolight] .msg.me{background:var(--accent);color:#fff;box-shadow:5px 5px 12px var(--lo),-4px -4px 10px var(--hi);border-bottom-right-radius:8px}
html[data-skin=neolight] .sig{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--accent);margin-top:8px}
html[data-skin=neolight] textarea,html[data-skin=neolight] .mail-form input{border:0;border-radius:20px;background:var(--bg);box-shadow:var(--in);padding:16px 18px}
html[data-skin=neolight] .send{border-radius:20px;background:var(--bg);color:var(--accent);box-shadow:var(--out-s);font-weight:800;letter-spacing:0}
html[data-skin=neolight] .send:disabled{opacity:.55}
html[data-skin=neolight] .send:active:not(:disabled){box-shadow:var(--in);transform:none}
html[data-skin=neolight] .preview-toggle{border:0;border-radius:20px;box-shadow:var(--in)}
html[data-skin=neolight] .preview-toggle button,html[data-skin=neolight] .pill{border:0;border-radius:999px;background:var(--bg);color:var(--ink);box-shadow:var(--out-s)}
html[data-skin=neolight] .preview-toggle button[aria-pressed=true],html[data-skin=neolight] .pill[aria-pressed=true]{box-shadow:var(--in);color:var(--accent);background:var(--bg)}
html[data-skin=neolight] .auto,html[data-skin=neolight] .mail-panel,html[data-skin=neolight] .mail-ok{border:0;border-radius:22px;background:var(--bg);box-shadow:var(--out-s)}
html[data-skin=neolight] details{border:0;border-radius:22px;box-shadow:var(--out-s);margin:0 0 16px;padding:0 20px}
html[data-skin=neolight] details:last-of-type{border:0}
html[data-skin=neolight] details summary{font-family:var(--sans);font-weight:700;font-size:16.5px}
html[data-skin=neolight] details[open]{box-shadow:var(--in)}
html[data-skin=neolight] footer{border-top:0}
html[data-skin=neolight] footer .logo{font-size:20px}
html[data-skin=neolight] .farewell span{font-family:var(--sans);font-weight:800;font-size:26px;letter-spacing:-.03em}
html[data-skin=neolight] .float{background:var(--bg);color:var(--accent);box-shadow:var(--out)}
html[data-skin=neolight] .guide-card,html[data-skin=neolight] .escape-card{border-radius:30px;background:var(--bg);box-shadow:var(--out)}
html[data-skin=neolight] .guide-card h3,html[data-skin=neolight] .escape-card h3{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:-.03em}
html[data-skin=neolight] .g-tabs{border:0;box-shadow:var(--in);border-radius:999px;background:var(--bg)}
html[data-skin=neolight] .g-tabs button{border-radius:999px}
html[data-skin=neolight] .g-tabs button[aria-pressed=true]{background:var(--bg);color:var(--accent);box-shadow:var(--out-s)}
html[data-skin=neolight] .g-media.has-video{border-radius:22px;box-shadow:var(--in)}
html[data-skin=neolight] .msg-menu{border:0;border-radius:18px;background:var(--bg);box-shadow:var(--out)}
html[data-skin=neolight] .reply-bar{border:0;border-radius:18px;background:var(--bg);box-shadow:var(--in)}
html[data-skin=neolight] .legal h1{font-family:var(--sans);font-weight:800;letter-spacing:-.04em}
html[data-skin=neolight] .legal h2{font-family:var(--sans);font-weight:800;font-size:24px;letter-spacing:-.02em}
html[data-skin=neolight] .mini-foot{border-top:0}
/* ===== Neumorphism hell & subtil ===== */
html[data-skin=neolight]{--bg:#F6F5F4;--surface:#F6F5F4;--ink:#2E2B2A;--muted:#75706C;--faint:#A39D98;--line:#ECE9E6;
  --accent:#9E3A49;--aubergine:#9E3A49;--hi:#FFFFFF;--lo:#E2DEDA;
  --out:6px 6px 16px var(--lo),-6px -6px 16px var(--hi);
  --out-s:3px 3px 8px var(--lo),-3px -3px 8px var(--hi);
  --in:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
@media (prefers-color-scheme:dark){html[data-skin=neolight]:not([data-theme=light]){--bg:#2A2C30;--surface:#2A2C30;--ink:#ECE8E4;--muted:#B0AAA5;--faint:#807A75;--line:#33363B;--accent:#D08A94;--aubergine:#B04A58;--hi:#32353A;--lo:#212326}}
html[data-skin=neolight][data-theme=dark]{--bg:#2A2C30;--surface:#2A2C30;--ink:#ECE8E4;--muted:#B0AAA5;--faint:#807A75;--line:#33363B;--accent:#D08A94;--aubergine:#B04A58;--hi:#32353A;--lo:#212326}
html[data-skin=neolight]{background:var(--bg)}
html[data-skin=neolight] .kicker{box-shadow:var(--out-s);color:var(--accent)}
html[data-skin=neolight] h1{font-weight:700;letter-spacing:-.04em}
html[data-skin=neolight] h2{font-weight:700}
html[data-skin=neolight] .video{padding:10px}
html[data-skin=neolight] .msg.me{box-shadow:var(--out-s)}
html[data-skin=neolight] .cta{box-shadow:var(--out)}
html[data-skin=neolight] .g-media.has-video{background:#F3EFEC;box-shadow:var(--in)}
html[data-skin=neolight] details[open]{box-shadow:var(--out-s)}
/* ---------- noch subtiler ---------- */
html[data-skin=neolight]{--lo:#E6E3E0;
  --out:4px 4px 12px var(--lo),-4px -4px 12px var(--hi);
  --out-s:2px 2px 6px var(--lo),-2px -2px 6px var(--hi);
  --in:inset 1.5px 1.5px 3.5px var(--lo),inset -1.5px -1.5px 3.5px var(--hi);
  --out-hover:6px 6px 16px var(--lo),-6px -6px 16px var(--hi)}
@media (prefers-color-scheme:dark){html[data-skin=neolight]:not([data-theme=light]){--lo:#232528;--out-hover:6px 6px 16px var(--lo),-6px -6px 16px var(--hi)}}
html[data-skin=neolight][data-theme=dark]{--lo:#232528;--out-hover:6px 6px 16px var(--lo),-6px -6px 16px var(--hi)}

/* ---------- Gesprächsseite als Vollbild-Chat ---------- */
html[data-skin=neolight] #conv:not([hidden]){display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:none;padding:0;overflow:hidden}
html[data-skin=neolight] #conv .conv-header{flex:none;margin:0;padding:12px max(16px,calc((100vw - 680px)/2));border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
html[data-skin=neolight] #conv .conv-header .logo{margin-right:auto;font-size:18px}
html[data-skin=neolight] .cv-legal{display:flex;gap:12px;font-size:12px}
html[data-skin=neolight] .cv-legal a{color:var(--faint);text-decoration:none}
html[data-skin=neolight] #conv .chat{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:0;box-shadow:none;background:var(--bg)}
html[data-skin=neolight] #conv .chat-head{flex:none;padding:12px max(16px,calc((100vw - 680px)/2));border-bottom:1px solid var(--line)}
html[data-skin=neolight] #conv .chat-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px max(16px,calc((100vw - 680px)/2)) 12px;scroll-behavior:smooth}
html[data-skin=neolight] #conv .chat > div:last-child{flex:none;display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;
  padding:18px max(14px,calc((100vw - 680px)/2)) calc(14px + env(safe-area-inset-bottom,0px))!important;background:var(--bg);border-top:1px solid var(--line)}
html[data-skin=neolight] #conv .reply-bar{grid-column:1/-1;margin:0}
html[data-skin=neolight] #conv textarea{min-height:50px;max-height:140px;height:50px;resize:none;padding:13px 18px;border-radius:25px;line-height:1.45}
html[data-skin=neolight] #conv .send{position:relative;width:50px;height:50px;padding:0;margin:0;border-radius:50%;font-size:0;line-height:0;display:block;color:var(--accent)}
html[data-skin=neolight] #conv .send::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
html[data-skin=neolight] #conv .send:not(:disabled){background:var(--accent);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-skin=neolight] #conv .mini-foot{display:none}
html[data-skin=neolight] #conv .preview-toggle{margin-bottom:6px}
html[data-skin=neolight].conv-open,html[data-skin=neolight].conv-open body{overflow:hidden}

/* ---------- Mikroanimationen ---------- */
@keyframes nl-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes nl-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes nl-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
@keyframes nl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes nl-shine{0%{background-position:-160% 0}100%{background-position:260% 0}}
/* Einstieg: Elemente erscheinen nacheinander */
html[data-skin=neolight] #landing header{animation:nl-rise .6s cubic-bezier(.2,.8,.2,1) both}
html[data-skin=neolight] #landing main > *:nth-child(1){animation:nl-rise .7s .05s cubic-bezier(.2,.8,.2,1) both}
html[data-skin=neolight] #landing main > *:nth-child(2){animation:nl-rise .7s .12s cubic-bezier(.2,.8,.2,1) both}
html[data-skin=neolight] #landing main > *:nth-child(3){animation:nl-rise .7s .19s cubic-bezier(.2,.8,.2,1) both}
html[data-skin=neolight] #landing main > *:nth-child(4){animation:nl-rise .7s .26s cubic-bezier(.2,.8,.2,1) both}
html[data-skin=neolight] #landing main > *:nth-child(5){animation:nl-rise .7s .33s cubic-bezier(.2,.8,.2,1) both}
html[data-skin=neolight] #landing main > *:nth-child(6){animation:nl-rise .7s .40s cubic-bezier(.2,.8,.2,1) both}
/* Beim Scrollen sanft einblenden */
html[data-skin=neolight] .nl-rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
html[data-skin=neolight] .nl-rv.nl-in{opacity:1;transform:none}
/* Weiche Neumorphism-Übergänge: heben beim Drüberfahren, eindrücken beim Tippen */
html[data-skin=neolight] .cta,html[data-skin=neolight] .send,html[data-skin=neolight] .round,html[data-skin=neolight] .pill,html[data-skin=neolight] .preview-toggle button,html[data-skin=neolight] .video,html[data-skin=neolight] details,html[data-skin=neolight] .g-tabs button,html[data-skin=neolight] textarea,html[data-skin=neolight] .msg{transition:box-shadow .3s ease,transform .25s cubic-bezier(.3,1.4,.5,1),background-color .3s,color .3s}
@media (hover:hover){
  html[data-skin=neolight] .cta:hover,html[data-skin=neolight] .video:hover{box-shadow:var(--out-hover);transform:translateY(-2px)}
  html[data-skin=neolight] .round:hover,html[data-skin=neolight] .pill:hover{transform:translateY(-1px)}
  html[data-skin=neolight] details:hover{transform:translateY(-1px)}
  html[data-skin=neolight] .round.avatar:hover{transform:rotate(-6deg) scale(1.05)}
}
html[data-skin=neolight] .cta:active,html[data-skin=neolight] .round:active,html[data-skin=neolight] .pill:active,html[data-skin=neolight] .video:active{box-shadow:var(--in);transform:translateY(0) scale(.99)}
html[data-skin=neolight] textarea:focus{box-shadow:var(--in),0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);outline:none}
/* Play-Knopf atmet sanft */
html[data-skin=neolight] .video .play{animation:nl-ring 2.8s ease-out infinite}
html[data-skin=neolight] .video:hover .play{transform:translate(-50%,-50%) scale(1.06)}
/* "Schreib mir": feiner Lichtreflex wandert */
html[data-skin=neolight] .cta{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);background-size:220% 100%;background-repeat:no-repeat;animation:nl-shine 5.5s ease-in-out 1.5s infinite}
html[data-skin=neolight] .cta svg{animation:nl-float 2.4s ease-in-out infinite}
/* Senden-Knopf ploppt auf, sobald man tippt */
html[data-skin=neolight] #conv .send:not(:disabled){animation:nl-pop .35s cubic-bezier(.3,1.5,.5,1)}
html[data-skin=neolight] #conv .send:not(:disabled):active{transform:scale(.9)}
/* Chat-Kopf & Avatar */
html[data-skin=neolight] #conv .chat-head{animation:nl-rise .5s cubic-bezier(.2,.8,.2,1) both}
html[data-skin=neolight] #conv .chat > div:last-child{animation:nl-rise .5s .1s cubic-bezier(.2,.8,.2,1) both}
html[data-skin=neolight] .kicker{animation:nl-rise .7s .05s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){
  html[data-skin=neolight] *,html[data-skin=neolight] *::before,html[data-skin=neolight] *::after{animation:none!important}
  html[data-skin=neolight] .nl-rv{opacity:1;transform:none;transition:none}
}
html[data-skin=neolight] #conv .back{font-size:12px;font-weight:500;color:var(--faint);text-decoration:none;letter-spacing:.02em;padding:6px 4px}
html[data-skin=neolight] #conv .back::before{content:"‹ ";font-size:14px}
html[data-skin=neolight] #conv .head-actions{display:flex;gap:10px;align-items:center}
html[data-skin=neolight] #conv .head-actions .round{width:40px;height:40px}
html[data-skin=neolight] #theme2 svg.spin{animation:spin .45s cubic-bezier(.4,0,.2,1)}
/* ===== Anleitung als gezeichnete Handy-Animation (passt sich dem Seiten-Design an) ===== */
.g-media .pp-host{width:min(62vw,236px,calc((100dvh - 300px) * 300 / 640));aspect-ratio:300/640;position:relative;margin:0 auto}
.g-media .pp-host[hidden]{display:none}
.pp-phone{position:absolute;left:0;top:0;width:300px;height:640px;transform-origin:0 0;border-radius:46px;background:#16161A;padding:9px;box-shadow:0 18px 40px rgba(0,0,0,.18),inset 0 0 0 1.5px #2C2C33}
.pp-screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:12px;line-height:1.35}
.pp-os{font-family:-apple-system,"SF Pro Text",system-ui,sans-serif}
.pp-and .pp-os,.pp-and.pp-os{font-family:Roboto,"Google Sans",system-ui,sans-serif}
.pp-scene{position:absolute;inset:0;display:none}
.pp-scene.on{display:block}
.pp-status{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 28px;font:600 12px -apple-system,system-ui,sans-serif;z-index:5;color:inherit}
.pp-island{position:absolute;top:9px;left:50%;width:88px;height:24px;margin-left:-44px;border-radius:14px;background:#000;z-index:6}
.pp-and .pp-island{width:10px;height:10px;margin-left:-5px;top:12px;border-radius:50%}
.pp-bat{width:20px;height:10px;border:1.5px solid currentColor;border-radius:3px;position:relative;opacity:.9}
.pp-bat::after{content:"";position:absolute;inset:1.5px;right:4px;background:currentColor;border-radius:1px}
/* Mini-Website */
.pp-page{position:absolute;left:0;right:0;top:34px;bottom:0;padding:10px 16px;overflow:hidden}
.pp-row{display:flex;align-items:center;justify-content:space-between}
.pp-logo{font-weight:700;font-size:12.5px;letter-spacing:-.02em}
.pp-av{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:var(--out-s)}
.pp-kick{display:inline-block;margin:16px 0 8px;padding:5px 10px;border-radius:999px;font-size:7.5px;font-weight:700;letter-spacing:.12em;color:var(--accent);box-shadow:var(--out-s)}
.pp-h1{font-weight:800;font-size:23px;line-height:1.04;letter-spacing:-.04em;margin:0 0 8px}
.pp-p{font-size:9.5px;color:var(--muted);margin:0 0 10px}
.pp-vid{border-radius:16px;padding:5px;box-shadow:var(--out)}
.pp-vid .th{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:12px;overflow:hidden;aspect-ratio:16/9;position:relative}
.pp-vid .th img{width:100%;height:100%;object-fit:cover;object-position:top}
.pp-vid .pl{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--bg);display:grid;place-items:center}
.pp-vid .pl::after{content:"";border-left:8px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.pp-vid b{display:block;font-size:10.5px;margin:6px 4px 1px}
.pp-vid span{display:block;font-size:8px;color:var(--muted);margin:0 4px 3px}
.pp-cta{margin-top:12px;border-radius:12px;padding:10px 12px;font-weight:700;font-size:11px;color:var(--accent);box-shadow:var(--out);display:flex;justify-content:space-between}
/* Safari-Leiste unten */
.pp-safari{position:absolute;left:0;right:0;bottom:0;height:86px;background:color-mix(in srgb,var(--bg) 88%,#888 12%);border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent);z-index:4}
.pp-addr{margin:8px 14px 0;height:30px;border-radius:12px;background:color-mix(in srgb,var(--bg) 70%,#fff 30%);box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:11px;gap:5px}
.pp-tools{display:flex;justify-content:space-around;align-items:center;height:36px;margin-top:4px;color:#2F7BF6}
.pp-tools i{display:block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pp-homebar{position:absolute;bottom:6px;left:50%;width:100px;height:4px;margin-left:-50px;border-radius:3px;background:currentColor;opacity:.75;z-index:7}
/* Chrome-Leiste oben */
.pp-chrome{position:absolute;left:0;right:0;top:34px;height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;background:color-mix(in srgb,var(--bg) 90%,#888 10%);z-index:4}
.pp-chrome .ad{flex:1;height:30px;border-radius:15px;background:color-mix(in srgb,var(--bg) 60%,#fff 40%);display:flex;align-items:center;gap:6px;padding:0 12px;font-size:11px}
.pp-chrome .tb{width:18px;height:18px;border:1.6px solid currentColor;border-radius:4px;font-size:9px;display:grid;place-items:center;font-weight:700}
.pp-chrome .dots{width:20px;text-align:center;font-size:16px;font-weight:700;line-height:1}
.pp-and .pp-page{top:78px}
/* Abdunkelung + Sheets */
.pp-dim{position:absolute;inset:0;background:rgba(0,0,0,.32);z-index:8;animation:pp-fade .3s both}
.pp-sheet{position:absolute;left:6px;right:6px;bottom:6px;border-radius:24px;background:color-mix(in srgb,var(--bg) 92%,#fff 8%);z-index:9;padding:10px 0 6px;animation:pp-up .45s cubic-bezier(.2,.9,.25,1) both;box-shadow:0 -8px 30px rgba(0,0,0,.15)}
.pp-sheet .hd{display:flex;align-items:center;gap:10px;padding:4px 16px 10px;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.pp-icon{width:36px;height:36px;border-radius:9px;object-fit:cover}
.pp-sheet .hd b{display:block;font-size:12px}.pp-sheet .hd span{font-size:10px;color:var(--muted)}
.pp-list{margin:8px 10px 0;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pp-list div{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:11.5px;border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.pp-list div:last-child{border-bottom:0}
.pp-list .hl{background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:600}
.pp-add{position:absolute;inset:34px 0 0;z-index:9;background:color-mix(in srgb,var(--bg) 94%,#888 6%);animation:pp-up .45s cubic-bezier(.2,.9,.25,1) both}
.pp-add .nav{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:11.5px}
.pp-add .nav span{color:#2F7BF6}.pp-add .nav b{font-size:12px}.pp-add .nav .ok{font-weight:700}
.pp-add .card{margin:6px 12px;border-radius:12px;background:var(--bg);display:flex;gap:10px;align-items:center;padding:10px}
.pp-add .card b{font-size:12px;display:block}.pp-add .card span{font-size:9.5px;color:var(--muted)}
.pp-add .tg{margin:10px 12px;border-radius:12px;background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:11px 12px;font-size:11.5px}
.pp-sw{width:36px;height:22px;border-radius:11px;background:#34C759;position:relative}
.pp-sw::after{content:"";position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.pp-add p{margin:4px 18px;font-size:9px;color:var(--muted)}
/* Home-Bildschirm */
.pp-home{position:absolute;inset:0;background:linear-gradient(160deg,#E8D9E4,#C9B7D3 45%,#A99BC4);color:#fff}
[data-theme=dark] .pp-home,.pp-dark .pp-home{background:linear-gradient(160deg,#4A3D58,#2B2438 55%,#1A1622)}
.pp-grid{position:absolute;top:56px;left:18px;right:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 14px}
.pp-grid i{display:block;aspect-ratio:1;border-radius:13px;background:rgba(255,255,255,.28)}
.pp-and .pp-grid i{border-radius:50%}
.pp-grid .me{position:relative;background:none;animation:pp-pop .5s .25s cubic-bezier(.3,1.6,.5,1) both}
.pp-grid .me img{width:100%;height:100%;border-radius:13px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pp-and .pp-grid .me img{border-radius:50%}
.pp-grid .me em{position:absolute;left:-10px;right:-10px;top:104%;text-align:center;font-style:normal;font-size:8.5px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.pp-dock{position:absolute;left:12px;right:12px;bottom:16px;height:62px;border-radius:24px;background:rgba(255,255,255,.22);display:flex;justify-content:space-around;align-items:center}
.pp-dock i{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.3)}
.pp-and .pp-dock{border-radius:31px;height:46px;bottom:24px}.pp-and .pp-dock i{width:30px;height:30px;border-radius:50%}
/* App (Vollbild-Chat) */
.pp-app{position:absolute;inset:34px 0 0;display:flex;flex-direction:column;animation:pp-zoom .45s cubic-bezier(.2,.9,.25,1) both}
.pp-app .top{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line)}
.pp-app .top .pp-logo{margin-right:auto}
.pp-app .rd{width:22px;height:22px;border-radius:50%;box-shadow:var(--out-s)}
.pp-app .ch{display:flex;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line)}
.pp-app .ch b{display:block;font-size:11.5px}.pp-app .ch span{font-size:9px;color:var(--online)}
.pp-app .body{flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.pp-b{max-width:84%;padding:7px 10px;border-radius:12px;font-size:9.5px}
.pp-b.her{align-self:flex-start;box-shadow:var(--out-s);border-bottom-left-radius:4px}
.pp-b.me{align-self:flex-end;background:var(--aubergine);color:#fff;border-bottom-right-radius:4px}
.pp-auto{border-radius:12px;padding:8px 10px;box-shadow:var(--out-s);font-size:9px;color:var(--muted)}
.pp-auto b{display:block;color:var(--ink);font-size:9.5px;margin-bottom:3px}
.pp-auto .bt{display:inline-block;margin:6px 4px 0 0;padding:5px 8px;border-radius:999px;box-shadow:var(--out-s);color:var(--ink);font-size:8.5px}
.pp-auto .bt.hl{box-shadow:var(--in);color:var(--accent);font-weight:700}
.pp-app .inp{display:flex;gap:6px;padding:8px 12px 18px;border-top:1px solid var(--line)}
.pp-app .inp div{flex:1;height:26px;border-radius:13px;box-shadow:var(--in);font-size:9px;color:var(--faint);display:flex;align-items:center;padding:0 10px}
.pp-app .inp i{width:26px;height:26px;border-radius:50%;box-shadow:var(--out-s)}
/* Systemdialoge */
.pp-alert{position:absolute;left:34px;right:34px;top:220px;z-index:9;border-radius:16px;background:rgba(242,242,247,.96);color:#111;text-align:center;overflow:hidden;animation:pp-pop .35s cubic-bezier(.3,1.4,.5,1) both}
.pp-alert b{display:block;padding:16px 14px 4px;font-size:12px}
.pp-alert p{margin:0 14px 12px;font-size:9.5px;color:#444}
.pp-alert div{display:flex;border-top:1px solid #d5d5da}
.pp-alert div span{flex:1;padding:10px 0;color:#0A7AFF;font-size:12px}
.pp-alert div span+span{border-left:1px solid #d5d5da;font-weight:700}
.pp-mdlg{position:absolute;left:22px;right:22px;top:190px;z-index:9;border-radius:24px;background:#F3EDF7;color:#1D1B20;padding:18px 16px 12px;text-align:center;animation:pp-pop .35s cubic-bezier(.3,1.4,.5,1) both}
.pp-mdlg .bell{width:22px;height:22px;margin:0 auto 8px;background:#6750A4;-webkit-mask:var(--bell) center/contain no-repeat;mask:var(--bell) center/contain no-repeat}
.pp-mdlg b{display:block;font-size:12px;font-weight:500;margin-bottom:12px}
.pp-mdlg span{display:block;padding:10px;border-radius:20px;font-size:11px;font-weight:600;margin-top:6px}
.pp-mdlg .y{background:#6750A4;color:#fff}.pp-mdlg .n{color:#6750A4;background:#E8DEF8}
.pp-install{position:absolute;left:22px;right:22px;top:200px;z-index:9;border-radius:24px;background:#F3EDF7;color:#1D1B20;padding:18px;animation:pp-pop .35s cubic-bezier(.3,1.4,.5,1) both}
.pp-install h4{margin:0 0 12px;font-size:14px;font-weight:500}
.pp-install .r{display:flex;gap:10px;align-items:center}
.pp-install .r b{display:block;font-size:12px}.pp-install .r span{font-size:10px;color:#555}
.pp-install .bt{display:flex;justify-content:flex-end;gap:16px;margin-top:16px;font-size:11.5px;font-weight:600;color:#6750A4}
.pp-menu{position:absolute;right:6px;top:40px;width:178px;z-index:9;border-radius:12px;background:color-mix(in srgb,var(--bg) 92%,#fff 8%);box-shadow:0 8px 28px rgba(0,0,0,.22);padding:6px 0;transform-origin:top right;animation:pp-pop .3s cubic-bezier(.3,1.3,.5,1) both}
.pp-menu div{padding:9px 14px;font-size:11px}
.pp-menu .hl{background:color-mix(in srgb,var(--accent) 14%,transparent);font-weight:600}
/* Mitteilung */
.pp-notif{position:absolute;left:10px;right:10px;top:44px;z-index:9;border-radius:18px;background:rgba(255,255,255,.88);color:#111;display:flex;gap:9px;align-items:center;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:pp-drop .55s .2s cubic-bezier(.2,.9,.25,1) both}
.pp-notif b{display:block;font-size:11px}.pp-notif span{font-size:10px;color:#333}
.pp-notif small{margin-left:auto;align-self:flex-start;font-size:9px;color:#777}
.pp-check{position:absolute;left:50%;top:330px;width:62px;height:62px;margin-left:-31px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;z-index:9;animation:pp-pop .5s .7s cubic-bezier(.3,1.6,.5,1) both}
.pp-check::after{content:"";width:26px;height:14px;border-left:3.5px solid #2EAA55;border-bottom:3.5px solid #2EAA55;transform:rotate(-45deg) translate(2px,-3px)}
/* Tipp-Finger */
.pp-tap{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:color-mix(in srgb,var(--accent) 40%,transparent);border:2px solid color-mix(in srgb,var(--accent) 75%,#fff);z-index:20;pointer-events:none;opacity:0;transform:scale(.6);transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1)}
.pp-tap.go{animation:pp-tap .7s ease-out both}
@keyframes pp-tap{0%{opacity:0;transform:scale(1.3)}30%{opacity:1;transform:scale(.85)}55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes pp-up{from{transform:translateY(105%)}}
@keyframes pp-fade{from{opacity:0}}
@keyframes pp-pop{from{opacity:0;transform:scale(.6)}}
@keyframes pp-zoom{from{opacity:0;transform:scale(.4)}}
@keyframes pp-drop{from{opacity:0;transform:translateY(-70px)}}
@media (prefers-reduced-motion:reduce){.pp-phone *{animation-duration:.01s!important;transition:none!important}}
html[data-skin=neolight] .g-media.has-video{background:transparent;box-shadow:none;padding:6px 0 4px}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .pp-home{background:linear-gradient(160deg,#4A3D58,#2B2438 55%,#1A1622)}}
/* ===== Profilkarten (Heidi & Besucher) ===== */
.pc-wrap{position:fixed;inset:0;z-index:28;display:grid;place-items:center;padding:16px;background:rgba(40,30,30,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .25s ease-out}
.pc-wrap[hidden]{display:none}
.pc{position:relative;width:100%;max-width:400px;max-height:calc(100dvh - 32px);overflow:auto;border-radius:30px;background:var(--bg);box-shadow:var(--out),0 30px 60px rgba(60,30,40,.12);padding:30px 22px 22px;text-align:center;color:var(--ink);animation:rise .4s cubic-bezier(.2,.8,.2,1)}
.pc-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--bg);box-shadow:var(--out-s);color:var(--muted);font-size:18px;cursor:pointer}
.pc-ph{position:relative;width:min(52vw,210px);aspect-ratio:1;margin:0 auto 18px;border-radius:50%;padding:7px;background:var(--bg);box-shadow:var(--out),inset 0 0 0 1px var(--line)}
.pc-ph img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.pc-ph .ini{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;font-size:64px;font-weight:700;color:var(--accent);box-shadow:var(--in)}
.pc-badge{position:absolute;right:4%;bottom:6%;width:22%;aspect-ratio:1;border-radius:50%;background:var(--bg);box-shadow:var(--out-s);display:grid;place-items:center;border:0;cursor:default;color:var(--accent)}
.pc-badge svg{width:46%;height:46%}
button.pc-badge{cursor:pointer}
.pc h2{font-size:clamp(34px,10vw,46px);font-weight:800;letter-spacing:-.04em;margin:0;line-height:1}
.pc .tag{display:block;margin:8px 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.32em;color:var(--accent)}
.pc .sub{color:var(--muted);font-size:15px;margin:0 auto;max-width:28ch;line-height:1.45}
.pc .div{display:flex;align-items:center;gap:12px;margin:18px 6px}
.pc .div::before,.pc .div::after{content:"";flex:1;height:1px;background:var(--line)}
.pc .div svg{width:16px;height:16px;color:var(--accent)}
.pc .bio{font-size:15.5px;line-height:1.6;margin:0 2px 18px;color:var(--ink)}
.pc .bio svg{width:16px;height:16px;color:var(--accent);vertical-align:-2px}
.pc .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.pc .tile{border:0;font:inherit;border-radius:16px;padding:12px 4px 10px;background:var(--bg);box-shadow:var(--out-s);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--ink);cursor:default;transition:box-shadow .25s,transform .2s}
button.tile{cursor:pointer}
button.tile:active{box-shadow:var(--in);transform:scale(.97)}
.pc .tile svg{width:26px;height:26px;color:var(--accent)}
.pc-cta{width:100%;border:0;border-radius:999px;padding:16px;background:var(--accent);color:#fff;font:inherit;font-size:17px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:10px;cursor:pointer;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 28%,transparent);transition:transform .2s}
.pc-cta:active{transform:scale(.98)}
.pc-cta svg{width:18px;height:18px}
.pc .fine{font-size:12px;color:var(--faint);margin:10px 0 0}
.pc .name{width:100%;margin:6px 0 0;border:0;background:transparent;text-align:center;font:inherit;font-size:clamp(28px,8vw,38px);font-weight:800;letter-spacing:-.04em;color:var(--ink);padding:6px;border-radius:14px;box-shadow:var(--in)}
.pc .name::placeholder{color:var(--faint);font-weight:700}
.pc .name:focus{outline:none;box-shadow:var(--in),0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.pc .ok{font-size:12px;color:var(--online);min-height:16px;margin-top:6px}
/* Besucher-Avatar oben rechts */
.me-av{border:0;cursor:pointer;padding:0;display:grid;place-items:center;font:inherit;font-weight:800;font-size:16px;color:var(--accent);background:var(--bg)!important;box-shadow:var(--out-s)!important;border-radius:50%!important}
.me-av svg{width:20px;height:20px}
.heidi-open{cursor:pointer}
/* ===== Herz: rund, nur für Heidis Nachrichten ===== */
.heart{position:absolute;bottom:-12px;right:8px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:var(--bg);box-shadow:var(--out-s),0 0 0 1px var(--line);font-size:0;display:grid;place-items:center}
.heart::before{content:"";width:12px;height:12px;background:var(--accent);-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.heart-pop{font-size:0!important;width:56px;height:56px;margin:-28px 0 0 -28px;left:50%!important;top:50%!important;transform:none!important;background:var(--accent);-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat;animation:heartPop2 .7s ease-out!important}
@keyframes heartPop2{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
:root{--heart:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.5-9.2C1 8.4 3 4.5 6.8 4.5c2.2 0 3.7 1.2 5.2 3 1.5-1.8 3-3 5.2-3 3.8 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z' fill='black'/></svg>")}
.mrow.her.liked .msg{margin-bottom:14px}
.msg-menu button[hidden]{display:none!important}
.mrow.her .heart{left:12px;right:auto}
/* ===== "Unser Gespräch" & "Kurz erklärt." nach Vorlage ===== */
html[data-skin=neolight] #landing hr{display:none}
html[data-skin=neolight] .ug,html[data-skin=neolight] .ke{position:relative;margin-top:64px}
html[data-skin=neolight] .ug-kick{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--accent);margin:0 0 8px}
html[data-skin=neolight] .ug-kick i{font-style:normal;margin:0 6px}
html[data-skin=neolight] .ug h2,html[data-skin=neolight] .ke h2{font-size:clamp(40px,11vw,62px);font-weight:800;letter-spacing:-.05em;line-height:1;margin:0 0 12px;max-width:70%}
html[data-skin=neolight] .ug .section-lede,html[data-skin=neolight] .ke .section-lede{font-size:16px;color:var(--muted);max-width:72%;margin:0 0 24px}
html[data-skin=neolight] .hf{width:16px;height:16px;color:var(--accent);vertical-align:-2px}
/* Deko oben rechts */
html[data-skin=neolight] .ug-deco{position:absolute;right:-8px;top:-24px;width:42%;height:230px;pointer-events:none}
html[data-skin=neolight] .ug-blob{position:absolute;right:-60px;top:-30px;width:260px;height:300px;border-radius:50% 40% 45% 55%;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
html[data-skin=neolight] .ug-bubble{position:absolute;right:4px;top:10px;width:96px;height:72px;border-radius:30px;background:var(--bg);box-shadow:var(--out),inset 0 -6px 12px color-mix(in srgb,var(--accent) 8%,transparent);display:flex;align-items:center;justify-content:center;gap:9px;animation:nl-float 3.2s ease-in-out infinite}
html[data-skin=neolight] .ug-bubble::after{content:"";position:absolute;left:24px;bottom:-11px;width:22px;height:22px;background:var(--bg);transform:rotate(45deg) skew(10deg,10deg);border-radius:4px;box-shadow:4px 4px 8px var(--lo)}
html[data-skin=neolight] .ug-bubble i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--accent) 75%,#fff);animation:blink 1.4s infinite}
html[data-skin=neolight] .ug-bubble i:nth-child(2){animation-delay:.2s}html[data-skin=neolight] .ug-bubble i:nth-child(3){animation-delay:.4s}
html[data-skin=neolight] .hw{position:absolute;font-family:var(--script);color:var(--muted);font-size:22px;line-height:1.05;transform:rotate(-6deg)}
html[data-skin=neolight] .hw1{right:0;top:108px;text-align:left}
html[data-skin=neolight] .hwh,html[data-skin=neolight] .hwh2{color:var(--accent)}
html[data-skin=neolight] .hw-arrow{position:absolute;width:26px;height:40px;color:var(--accent)}
html[data-skin=neolight] .ug-deco .hw-arrow{right:118px;top:96px}
/* Karte */
html[data-skin=neolight] .ug-card{border-radius:30px;padding:6px 4px 2px;box-shadow:var(--out)}
html[data-skin=neolight] .ug-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 4px;flex-wrap:wrap}
html[data-skin=neolight] .ug-top .chat-head{border:0;padding:0}
html[data-skin=neolight] .ug-av{position:relative;width:54px!important;height:54px!important;box-shadow:var(--out-s)}
html[data-skin=neolight] .ug-dot{position:absolute;right:-1px;bottom:1px;width:14px;height:14px;border-radius:50%;background:var(--online);border:2.5px solid var(--bg)}
html[data-skin=neolight] .ug-top .chat-head b{font-size:20px;font-weight:700;letter-spacing:-.02em}
html[data-skin=neolight] .ug-pill{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--bg));color:var(--accent);font-size:11.5px;line-height:1.3}
html[data-skin=neolight] .ug-pill svg{width:20px;height:20px;flex:none}
html[data-skin=neolight] .ug-pill b{display:block;font-size:13px}
html[data-skin=neolight] .ug-pill span{color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
html[data-skin=neolight] .ug-card .chat-body{padding:10px 14px}
html[data-skin=neolight] .ug-card .msg.her{background:color-mix(in srgb,var(--ink) 4%,var(--bg));box-shadow:none;border-radius:22px;max-width:86%}
html[data-skin=neolight] .ug-comp{position:relative;margin:4px 12px 0;border-radius:24px;box-shadow:var(--in);padding:14px 14px 10px}
html[data-skin=neolight] .ug-comp textarea{width:100%;min-height:56px;border:0;background:transparent;box-shadow:none!important;padding:2px 4px;resize:none;font:inherit;font-size:16px;color:var(--ink);outline:none}
html[data-skin=neolight] .ug-bar{display:flex;align-items:center;gap:10px}
html[data-skin=neolight] .ug-emo{border:0;background:transparent;color:var(--muted);padding:2px;cursor:pointer;border-radius:50%;transition:transform .2s}
html[data-skin=neolight] .ug-emo:hover{transform:rotate(-10deg) scale(1.08)}
html[data-skin=neolight] .ug-emo-pop{position:absolute;left:10px;bottom:62px;display:flex;gap:2px;padding:6px;border-radius:16px;background:var(--bg);box-shadow:var(--out);z-index:5;animation:menuIn .16s ease-out}
html[data-skin=neolight] .ug-emo-pop[hidden]{display:none}
html[data-skin=neolight] .ug-emo-pop button{border:0;background:transparent;font-size:20px;padding:4px 5px;border-radius:10px;cursor:pointer}
html[data-skin=neolight] .ug-emo-pop button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
html[data-skin=neolight] .ug-comp .send{width:52px;height:52px;border-radius:50%;padding:0;margin:0 0 0 auto;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 70%,#fff);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 28%,transparent);flex:none}
html[data-skin=neolight] .ug-comp .send:not(:disabled){background:var(--accent);animation:nl-pop .35s cubic-bezier(.3,1.5,.5,1)}
html[data-skin=neolight] .ug-comp .send:disabled{opacity:1;background:color-mix(in srgb,var(--accent) 55%,var(--bg))}
html[data-skin=neolight] .ug-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:18px 12px 16px}
html[data-skin=neolight] .ug-trust>div{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);line-height:1.3}
html[data-skin=neolight] .ug-trust b{display:block;font-size:12px;color:var(--ink)}
html[data-skin=neolight] .ti{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--bg))}
html[data-skin=neolight] .ti svg{width:18px;height:18px}
@media (max-width:480px){html[data-skin=neolight] .ug-trust{grid-template-columns:1fr;gap:12px}html[data-skin=neolight] .ug-deco{width:46%}html[data-skin=neolight] .ug-bubble{width:76px;height:58px;gap:7px}html[data-skin=neolight] .ug-bubble i{width:8px;height:8px}html[data-skin=neolight] .hw{font-size:18px}html[data-skin=neolight] .hw1{top:86px}html[data-skin=neolight] .ug-deco .hw-arrow{right:92px;top:78px}}
/* Kurz erklärt */
html[data-skin=neolight] .ke-deco{position:absolute;right:0;top:-6px;width:44%;height:130px;pointer-events:none}
html[data-skin=neolight] .hw2{right:0;top:0;color:var(--accent);font-size:22px}
html[data-skin=neolight] .ke-deco .hw-arrow{left:0;top:40px}
html[data-skin=neolight] .hwh2{position:absolute;left:44px;top:96px;font-size:18px}
html[data-skin=neolight] details.fq{border:0;border-radius:22px;padding:0;margin:0 0 12px;box-shadow:var(--out-s);background:var(--bg)}
html[data-skin=neolight] details.fq:last-of-type{border:0}
html[data-skin=neolight] details.fq summary{display:flex;align-items:center;gap:14px;padding:14px 16px;font-size:inherit}
html[data-skin=neolight] details.fq summary::after{display:none}
html[data-skin=neolight] .fq-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
html[data-skin=neolight] .fq-t{flex:1;min-width:0}
html[data-skin=neolight] .fq-t b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
html[data-skin=neolight] .fq-t span{display:block;font-size:13.5px;font-weight:400;color:var(--muted);margin-top:2px}
html[data-skin=neolight] .chev{flex:none;color:var(--ink);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
html[data-skin=neolight] details.fq[open] .chev{transform:rotate(180deg)}
html[data-skin=neolight] details.fq p{margin:0;padding:0 18px 16px 78px;color:var(--muted);font-size:14.5px}
html[data-skin=neolight] .ke-strip{display:flex;align-items:center;gap:12px;margin-top:20px;padding:14px 18px;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--bg))}
html[data-skin=neolight] .ks-h{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 70%,#fff);color:#fff}
html[data-skin=neolight] .ks-h .hf{color:#fff;width:18px;height:18px}
html[data-skin=neolight] .ks-t{font-size:13.5px;color:var(--ink)}
html[data-skin=neolight] .ks-r{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
@media (max-width:420px){html[data-skin=neolight] .ks-r{display:none}}
@media (max-width:560px){
  html[data-skin=neolight] .ke h2,html[data-skin=neolight] .ke .section-lede{max-width:none}
  html[data-skin=neolight] .ke-deco{position:relative;right:auto;top:auto;width:auto;height:auto;display:flex;align-items:center;gap:8px;margin:-4px 0 16px}
  html[data-skin=neolight] .ke-deco .hw2{position:static;transform:rotate(-3deg);font-size:19px}
  html[data-skin=neolight] .ke-deco .hw-arrow,html[data-skin=neolight] .ke-deco .hwh2{position:static}
  html[data-skin=neolight] .ke-deco .hw-arrow{display:none}
  html[data-skin=neolight] .ke{display:flex;flex-direction:column}
  html[data-skin=neolight] .ke .ke-deco{order:3}
  html[data-skin=neolight] .ke h2{order:1}html[data-skin=neolight] .ke .section-lede{order:2;margin-bottom:6px}
  html[data-skin=neolight] .ke details,html[data-skin=neolight] .ke .ke-strip{order:4}
}
@media (min-width:561px){html[data-skin=neolight] .ke-deco .hw-arrow{display:none}html[data-skin=neolight] .ke-deco{width:230px}}
/* ---- Pill: direkt aufs Handy ---- */
html[data-skin=neolight] .ug-ph{position:relative;flex:none;display:grid;place-items:center;animation:ph-buzz 3.2s ease-in-out infinite}
html[data-skin=neolight] .ug-ph i{position:absolute;right:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 9%,var(--bg));animation:pulse 2.4s ease-out infinite}
@keyframes ph-buzz{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(-10deg)}88%{transform:rotate(9deg)}91%{transform:rotate(-7deg)}94%{transform:rotate(5deg)}}
/* ---- Fokus überall dezent ---- */
html[data-skin=neolight] :focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
html[data-skin=neolight] input:focus,html[data-skin=neolight] textarea:focus{outline:none}
html[data-skin=neolight] .mail-form input:focus{box-shadow:var(--in),0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
/* ---- Besucher-Karte ---- */
.mc .mc-ph{width:min(34vw,128px);margin-bottom:12px}
.mc .mc-ph .ini svg{width:44%;height:44%}
.mc .mc-ph .ini.has{font-size:48px}
.mc .tag{margin:0 0 14px}
.mc-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;box-shadow:var(--in);margin:0 0 14px}
.mc-seg button{position:relative;z-index:1;border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);padding:10px;border-radius:999px;cursor:pointer;transition:color .25s}
.mc-seg button[aria-selected=true]{color:var(--accent)}
.mc-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--bg);box-shadow:var(--out-s);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.mc-seg[data-mode=login] .mc-thumb{transform:translateX(100%)}
.mc-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border:0;border-radius:999px;background:var(--bg);box-shadow:var(--out-s);font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:box-shadow .25s,transform .2s}
.mc-google:active{box-shadow:var(--in);transform:scale(.99)}
.mc-or{display:flex;align-items:center;gap:12px;margin:14px 4px;color:var(--faint);font-size:12.5px}
.mc-or::before,.mc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.mc-form{display:flex;flex-direction:column;gap:10px;text-align:left}
.mc-f{position:relative;display:block}
.mc-f[hidden]{display:none}
.mc-f>span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 5px 14px}
.mc-f input{width:100%;border:0;border-radius:16px;background:var(--bg);box-shadow:var(--in);padding:13px 16px;font:inherit;font-size:16px;color:var(--ink);transition:box-shadow .25s}
.mc-f input::placeholder{color:var(--faint)}
.mc-f input:focus{outline:none;box-shadow:var(--in),0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.mc-pw input{padding-right:46px}
.mc-eye{position:absolute;right:8px;bottom:6px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--faint);display:grid;place-items:center;cursor:pointer}
.mc-eye svg{width:19px;height:19px}.mc-eye.on{color:var(--accent)}
.mc-link{align-self:flex-end;border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--accent);cursor:pointer;padding:2px 4px}
.mc-link[hidden]{display:none}
.mc-err{min-height:18px;margin:0 4px;font-size:13px;color:#B3261E;text-align:center}
.mc .pc-cta{margin-top:2px}
.mc .fine{line-height:1.5}
#mc-in{animation:none}#mc-in.pop{animation:rise .45s cubic-bezier(.2,.8,.2,1)}
#mc-in h2{font-size:clamp(28px,8vw,36px);margin:2px 0 4px}
.mc-okline{font-size:13px;color:var(--online);margin:8px 0 4px}
#mc-logout{align-self:center;margin:0 auto;display:block}
.me-av.in{color:#fff!important;background:var(--accent)!important}
.mc .tiles{margin-bottom:4px}
.mc-f.later{max-height:0;opacity:0;overflow:hidden;margin:-10px 0 0;transform:translateY(-8px) scale(.98);
  transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,transform .45s cubic-bezier(.3,1.3,.5,1),margin .45s cubic-bezier(.2,.8,.2,1)}
.mc-f.later.show{max-height:120px;opacity:1;margin:0;transform:none;overflow:visible}
.mc-f.later input{box-shadow:var(--in)}
@media (prefers-reduced-motion:reduce){.mc-f.later{transition:none}}
#meCard .tiles{grid-template-columns:repeat(4,1fr)}
html[data-skin=neolight] .hwh-s{width:.72em;height:.72em;color:var(--accent);vertical-align:-.04em;margin-left:.08em}
/* Heidis Avatar: Ring + kleiner Online-Punkt */
html[data-skin=neolight] .ug-av,html[data-skin=neolight] .chat-head .avatar{padding:2.5px;background:var(--bg)!important;box-shadow:var(--out-s),0 0 0 1px var(--line)!important;border-radius:50%}
html[data-skin=neolight] .ug-av img,html[data-skin=neolight] .chat-head .avatar img{border-radius:50%;width:100%;height:100%;object-fit:cover;object-position:center 20%}
html[data-skin=neolight] .ug-dot{right:1px;bottom:2px;width:12px;height:12px;border-width:2px}
html[data-skin=neolight] .ug-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--online);animation:pulse 2.4s ease-out infinite;z-index:-1}
html[data-skin=neolight] .ug-top .status i{display:none}
html[data-skin=neolight] .ug-top .status{font-size:14px}
.snd-ic{display:grid}.snd-ic svg{width:26px;height:26px}
.tile[data-me=sound] .mute{display:none}
.tile[data-me=sound][aria-pressed=false] .mute{display:inline}
.tile[data-me=sound][aria-pressed=false] .sw1,.tile[data-me=sound][aria-pressed=false] .sw2{display:none}
.tile[data-me=sound][aria-pressed=false]{color:var(--muted)}
html[data-skin=neolight] .ug-av{overflow:visible!important}
html[data-skin=neolight] .ug-dot{z-index:2}
/* Initialen im Avatar */
.me-av{font-size:14px!important;letter-spacing:.02em}
.me-av.in{font-size:13.5px!important}
.mc .mc-ph .ini.has{font-size:42px;letter-spacing:.02em}
/* Heidi in der Akzentfarbe */
html[data-skin=neolight] .chat-head b,html[data-skin=neolight] .ug-top .chat-head b,#heidiCard h2{color:var(--accent)}
/* Heidis Avatar wie Vorlage: Beine, großer Online-Punkt mit weißem Ring */
html[data-skin=neolight] .ug-av,html[data-skin=neolight] .chat-head .avatar{padding:4px}
html[data-skin=neolight] .ug-av img,html[data-skin=neolight] .chat-head .avatar img{object-position:center}
html[data-skin=neolight] .ug-av{width:60px!important;height:60px!important}
html[data-skin=neolight] .ug-dot{right:-3px;bottom:-1px;width:18px;height:18px;border:3.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
html[data-skin=neolight][data-theme=dark] .ug-dot{border-color:var(--bg)}
html[data-skin=neolight] .ug-dot::after{inset:-3.5px}
html[data-skin=neolight] .ug-top .status i{display:inline-block;width:8px;height:8px}
html[data-skin=neolight] .ug-top .status{font-size:15px}
.logo .lh,.pp-logo .lh{color:var(--accent)}
html[data-skin=neolight] .status i,html[data-skin=neolight] .ug-top .status i{display:none!important}
/* ================= Markenpalette (final) ================= */
html[data-skin=neolight][data-skin]{
  --bg:#F9F4F5;--surface:#F9F4F5;--paper:#FFFFFF;
  --ink:#2F2A2A;--muted:#6F6A6A;--faint:#A29C9C;--line:#EDE5E7;
  --accent:#9E3A49;--aubergine:#9E3A49;--secondary:#C97B86;
  --online:#5E9F73;--online-text:#3F7A54;--error:#B3261E;
  --hi:#FFFFFF;--lo:#E8DFE1}
@media (prefers-color-scheme:dark){html[data-skin=neolight][data-skin]:not([data-theme=light]){
  --bg:#26282C;--surface:#26282C;--paper:#2E3035;--ink:#F1ECE6;--muted:#B5AEAA;--faint:#857F7B;--line:#33363B;
  --accent:#D08A94;--aubergine:#A84452;--secondary:#B9727D;--online:#7DBB8F;--online-text:#8CC79D;--error:#F2B8B5;--hi:#2E3136;--lo:#1E2023}}
html[data-skin=neolight][data-skin][data-theme=dark]{
  --bg:#26282C;--surface:#26282C;--paper:#2E3035;--ink:#F1ECE6;--muted:#B5AEAA;--faint:#857F7B;--line:#33363B;
  --accent:#D08A94;--aubergine:#A84452;--secondary:#B9727D;--online:#7DBB8F;--online-text:#8CC79D;--error:#F2B8B5;--hi:#2E3136;--lo:#1E2023}
html[data-skin=neolight]{background:var(--bg)}
/* Erfolg: Punkt hell, Text dunkler (lesbar) */
html[data-skin=neolight] .status[data-online="true"],html[data-skin=neolight] .mc-okline,html[data-skin=neolight] .pc .ok{color:var(--online-text)}
/* Fehler klar vom Bordeaux getrennt */
html[data-skin=neolight] .mc-err,html[data-skin=neolight] .mail-err{color:var(--error)}
/* Secondary nur für Flächen, Icons, Hover – nie für Text */
html[data-skin=neolight] #conv .send:disabled,html[data-skin=neolight] .ug-comp .send:disabled{background:color-mix(in srgb,var(--secondary) 55%,var(--bg));color:#fff}
html[data-skin=neolight] .g-dots button{background:color-mix(in srgb,var(--secondary) 35%,transparent)!important}
html[data-skin=neolight] .g-dots button.on{background:var(--accent)!important}
html[data-skin=neolight] .ti,html[data-skin=neolight] .fq-ic,html[data-skin=neolight] .ug-pill,html[data-skin=neolight] .ke-strip{background:color-mix(in srgb,var(--secondary) 14%,var(--bg))}
html[data-skin=neolight] .ks-h{background:var(--secondary)}
html[data-skin=neolight] .mc-eye.on,html[data-skin=neolight] .ug-emo:hover{color:var(--secondary)}
/* Weiß nur für Eingabefelder & kleine Abzeichen (Karten bleiben in Hintergrundfarbe) */
html[data-skin=neolight] .mc-f input,html[data-skin=neolight] .mail-form input,html[data-skin=neolight] #conv textarea,html[data-skin=neolight] .ug-comp{background:var(--paper)}
html[data-skin=neolight] .pc-badge,html[data-skin=neolight] .heart{background:var(--paper)}
html[data-skin=neolight] .ug-dot{background:var(--online);border-color:var(--paper)}
@font-face{font-family:'Sacramento';font-weight:400;font-display:swap;src:url(/assets/fonts/sacramento.woff2) format('woff2')}
/* ===== Handschrift: Sacramento (nur für persönliche Akzente) ===== */
html[data-skin=neolight]{--hand:"Sacramento","Snell Roundhand",cursive}
html[data-skin=neolight] .sig{font-family:var(--hand)!important;font-weight:400!important;font-size:30px!important;line-height:1!important;color:var(--accent)!important;margin-top:6px;letter-spacing:0}
html[data-skin=neolight] .hw{font-family:var(--hand)!important;font-size:30px!important;line-height:.95!important;color:var(--muted);transform:rotate(-5deg)}
html[data-skin=neolight] .hw1{top:104px}
html[data-skin=neolight] .hwh-s{width:.55em;height:.55em;vertical-align:.02em}
html[data-skin=neolight] .farewell span{font-family:var(--hand)!important;font-weight:400!important;font-size:clamp(44px,12vw,58px)!important;letter-spacing:0!important;color:var(--ink)}
@media (max-width:480px){html[data-skin=neolight] .hw{font-size:25px!important}html[data-skin=neolight] .hw1{top:84px}}
html[data-skin=neolight] .hw{font-size:34px!important;color:var(--ink)!important;opacity:.82}
html[data-skin=neolight] .farewell span{font-size:clamp(40px,10.5vw,56px)!important;white-space:nowrap}
@media (max-width:480px){html[data-skin=neolight] .hw{font-size:31px!important}html[data-skin=neolight] .hw1{top:80px;right:-6px}}
@media (max-width:480px){
  html[data-skin=neolight] .ug-deco .hw-arrow{display:none}
  html[data-skin=neolight] .ug-deco{top:18px}
  html[data-skin=neolight] .ug-bubble{top:22px}
  html[data-skin=neolight] .hw1{top:96px!important}
  html[data-skin=neolight] .ug .section-lede{max-width:58%}
}
html[data-skin=neolight] .ug-deco .hw-arrow{right:150px}
/* Online-Punkt am Avatar: grün = da, grau = abwesend */
html[data-skin=neolight] .chat-head .avatar{position:relative;overflow:visible!important}
html[data-skin=neolight] .chat-head .avatar .ug-dot{position:absolute;right:-3px;bottom:-1px;width:16px;height:16px;border-radius:50%;background:var(--online);border:3px solid var(--paper);box-shadow:0 2px 6px rgba(0,0,0,.12);z-index:2;transition:background .35s ease}
html[data-skin=neolight] #conv .chat-head .avatar .ug-dot{width:13px;height:13px;border-width:2.5px;right:-2px;bottom:-1px}
html[data-skin=neolight] .ug-av .ug-dot{width:18px;height:18px;border-width:3.5px}
html[data-skin=neolight] .ug-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--online);animation:pulse 2.4s ease-out infinite;z-index:-1}
html.hh-away[data-skin=neolight] .ug-dot{background:#A9A3A3!important}
html.hh-away[data-skin=neolight] .ug-dot::after{display:none}
/* ================= Warmes Weiß (Zielgruppe Männer 35+) ================= */
html[data-skin=neolight][data-skin]{--bg:#F7F6F4;--surface:#F7F6F4;--paper:#FFFFFF;--line:#E9E6E2;--hi:#FFFFFF;--lo:#E3DFDA;
  --neutral-fill:color-mix(in srgb,#2F2A2A 5%,#F7F6F4)}
@media (prefers-color-scheme:dark){html[data-skin=neolight][data-skin]:not([data-theme=light]){--neutral-fill:color-mix(in srgb,#fff 6%,#26282C)}}
html[data-skin=neolight][data-skin][data-theme=dark]{--neutral-fill:color-mix(in srgb,#fff 6%,#26282C)}
html[data-skin=neolight] .ti,html[data-skin=neolight] .fq-ic,html[data-skin=neolight] .ug-pill,html[data-skin=neolight] .ke-strip,html[data-skin=neolight] .ny-facts div{background:var(--neutral-fill)!important}
html[data-skin=neolight] .ug-pill span{color:var(--muted)}
html[data-skin=neolight] .ug-pill b{color:var(--accent)}
html[data-skin=neolight] .ks-h{background:var(--accent)}
html[data-skin=neolight] .ug-blob{background:radial-gradient(circle at 40% 40%,color-mix(in srgb,#2F2A2A 4%,transparent),transparent 70%)}
html[data-skin=neolight] .ug-bubble{box-shadow:var(--out)}
html[data-skin=neolight] .ug-card .msg.her{background:var(--neutral-fill)}
html[data-skin=neolight] #conv .send:disabled,html[data-skin=neolight] .ug-comp .send:disabled{background:color-mix(in srgb,var(--accent) 35%,var(--bg))}
html[data-skin=neolight] .g-dots button{background:color-mix(in srgb,var(--ink) 15%,transparent)!important}
html[data-skin=neolight] .ug-bubble i{background:color-mix(in srgb,var(--accent) 70%,#fff)}

/* ===== Zurueck ins Gespraech (A-20261002-13) ===== */
html.hh-lade #landing{visibility:hidden}
html.hh-lade body::after{content:"";position:fixed;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--accent,#9E3A49);box-shadow:var(--out,0 0 0 transparent);animation:hhLade 1s ease-in-out infinite}
@keyframes hhLade{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.hh-weiter{animation:hhRein .45s cubic-bezier(.2,.8,.2,1)}
@keyframes hhRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hh-weiter .hh-vorschau{padding:6px 20px 4px}
.hh-weiter .hh-vorschau .msg{max-width:100%;white-space:normal}
.hh-weiter .hh-vorschau small{display:block;margin-top:6px;color:var(--faint,#A29C9C);font-size:12.5px}
.hh-badge{display:inline-flex;align-items:center;gap:6px;margin:10px 20px 0;padding:6px 12px;border-radius:999px;background:var(--accent,#9E3A49);color:#fff;font-size:13px;font-weight:800;animation:hhPlopp .5s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes hhPlopp{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.hh-weiter .cta{display:flex;justify-content:space-between;align-items:center;margin:18px 20px 8px;text-decoration:none;cursor:pointer}
.hh-neu-beginnen,.hh-wiederfinden{display:block;margin:6px auto 18px;padding:6px 10px;border:0;background:none;color:var(--muted,#6F6A6A);font:inherit;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hh-wiederfinden{margin:12px auto 0}
#findCard .hh-find-form{display:flex;gap:10px;margin:14px 0 6px}
#findCard .hh-find-form input{flex:1;min-width:0;border:0;border-radius:16px;background:var(--surface,#fff);box-shadow:var(--in,inset 0 0 0 1px #ddd);padding:13px 14px;font:inherit;color:var(--ink,#2F2A2A)}
#findCard .hh-find-ok{color:var(--online,#3F7A54);font-weight:600;font-size:14px;min-height:1.2em}
[data-open-me].hh-ungelesen{position:relative}
[data-open-me].hh-ungelesen::after{content:"";position:absolute;right:1px;top:1px;width:10px;height:10px;border-radius:50%;background:var(--accent,#9E3A49);box-shadow:0 0 0 2px var(--bg,#F7F6F4)}
@media (prefers-reduced-motion:reduce){.hh-weiter,.hh-badge,html.hh-lade body::after{animation:none}}
.hh-weiter .cta{width:auto;box-sizing:border-box}
.hh-weiter .hh-vorschau .msg.me small{color:rgba(255,255,255,.78)}

/* ===== neu5 (A-20261002-17): Zurueck in den Chat, Benachrichtigung, Hinweis im Chat ===== */
/* ===== „Wie kommst du zurück in unseren Chat?“ ===== */
html[data-skin=neolight] .hw-sec{margin-top:56px}
html[data-skin=neolight] .hw-sec h2{font-size:clamp(32px,8.6vw,50px);font-weight:800;letter-spacing:-.05em;line-height:1.04;margin:0 0 12px}
html[data-skin=neolight] .hw-sec .section-lede{color:var(--muted);margin:0 0 20px;max-width:36em}
.sg-card{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:22px;align-items:center;padding:18px;border-radius:30px;background:var(--bg);box-shadow:var(--out)}
@media (max-width:560px){.sg-card{grid-template-columns:1fr}}
.sg-phone{display:flex;flex-direction:column;align-items:center;gap:10px}
.sg-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;box-shadow:var(--in);width:200px}
.sg-tabs button{position:relative;z-index:1;border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:7px;border-radius:999px;cursor:pointer;transition:color .25s}
.sg-tabs button[aria-selected=true]{color:var(--accent)}
.sg-tabs .th{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--bg);box-shadow:var(--out-s);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.sg-tabs[data-d=android] .th{transform:translateX(100%)}
.sg-host{position:relative;width:min(52vw,190px);aspect-ratio:300/640;margin:0 auto}
.sg-host[hidden]{display:none}
.sg-cap{min-height:40px;margin:0;text-align:center;font-size:13px;line-height:1.4;color:var(--ink);max-width:24ch}
.sg-cap b{color:var(--accent)}
.sg-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sg-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--bg);box-shadow:var(--out-s);transition:box-shadow .35s,transform .35s}
.sg-steps li.act{box-shadow:var(--in);transform:translateX(4px)}
.sg-steps .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:#fff;background:var(--accent)}
.sg-steps .i{flex:none;color:var(--accent);display:grid}
.sg-steps b{display:block;font-size:14.5px;letter-spacing:-.01em}
.sg-steps li span:not(.n):not(.i){display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.sg-steps li.ok{background:var(--neutral-fill);box-shadow:none}
.sg-steps li.ok .n{background:var(--online)}
.sg-alt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}
.sg-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--neutral-fill);color:var(--ink);font-weight:600;font-size:12.5px}
.sg-chip svg{color:var(--accent)}
/* ===== Hinweis im Chat ===== */
.push-hint{position:relative;display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:14px 40px 14px 14px;border-radius:20px;background:var(--bg);box-shadow:var(--out-s);animation:rise .5s cubic-bezier(.2,.8,.2,1)}
.push-hint[hidden]{display:none}
.ph-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--neutral-fill)}
.ph-ic svg{animation:bellRing 3.5s ease-in-out 1s infinite;transform-origin:50% 10%}
@keyframes bellRing{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(14deg)}91%{transform:rotate(-12deg)}94%{transform:rotate(8deg)}97%{transform:rotate(-5deg)}}
.ph-tx b{display:block;font-size:14.5px;margin-bottom:2px}
.ph-tx span{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.ph-bt{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ph-go{border:0;border-radius:999px;padding:9px 14px;background:var(--accent);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .2s}
.ph-go:active{transform:scale(.97)}
.ph-later{border:0;border-radius:999px;padding:9px 12px;background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.ph-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--faint);font-size:17px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.ph-ic svg{animation:none}}
/* ===== Wie werde ich benachrichtigt? ===== */
.nb{margin-top:26px}
.nb-h{font-size:clamp(22px,6vw,28px);font-weight:800;letter-spacing:-.035em;margin:0 0 6px}
.nb-l{color:var(--muted);margin:0 0 16px;font-size:15px}
.nb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.nb-grid{grid-template-columns:1fr}}
.nb-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:26px;background:var(--bg);box-shadow:var(--out)}
.nb-card.rec{box-shadow:var(--out),inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 35%,transparent)}
.nb-tag{position:absolute;top:-10px;left:18px;padding:4px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.nb-hd{display:flex;align-items:center;gap:10px}
.nb-hd b{font-size:18px;letter-spacing:-.02em}
.nb-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--neutral-fill)}
.nb-demo{border-radius:16px;padding:10px 12px;font-size:12.5px}
.nb-push{display:flex;align-items:center;gap:10px;background:var(--paper);box-shadow:0 6px 16px rgba(40,30,30,.10);animation:nbDrop 4s ease-in-out infinite}
.nb-push img{width:34px;height:34px;border-radius:9px;object-fit:cover}
.nb-push b{display:block;font-size:12.5px}.nb-push span{color:var(--muted)}
.nb-push small{margin-left:auto;align-self:flex-start;color:var(--faint);font-size:11px}
@keyframes nbDrop{0%{transform:translateY(-8px);opacity:0}10%,85%{transform:none;opacity:1}100%{transform:translateY(-8px);opacity:0}}
.nb-mail{background:var(--paper);box-shadow:var(--in)}
.nb-mail .r{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}
.nb-mail .r span{width:52px;color:var(--faint)}
.nb-mbtn{display:inline-block;margin-top:8px;padding:6px 12px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:11.5px}
.nb-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.nb-card li{display:flex;gap:8px;font-size:13.5px;line-height:1.4;color:var(--ink)}
.nb-card li svg{flex:none;margin-top:1px;color:var(--online)}
.nb-btn{margin-top:auto;border:0;border-radius:999px;padding:13px 16px;font:inherit;font-weight:700;font-size:14px;background:var(--accent);color:#fff;cursor:pointer;transition:transform .2s;box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 25%,transparent)}
.nb-btn.sec{background:var(--bg);color:var(--accent);box-shadow:var(--out-s)}
.nb-btn:active{transform:scale(.98)}
.nb-disc{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:18px;background:var(--neutral-fill);font-size:13px;color:var(--muted);line-height:1.45}
.nb-disc svg{flex:none;color:var(--accent);margin-top:1px}
.nb-disc b{color:var(--ink)}
.fq-more{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.nb-push{animation:none}}
/* ===== Aufklappbar ===== */
.sg-toggle{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;font:inherit;color:var(--ink);background:var(--bg);box-shadow:var(--out);border-radius:26px;padding:18px 18px 18px 20px;cursor:pointer;transition:box-shadow .3s,transform .2s}
.sg-toggle:active{transform:scale(.99)}
.sg-toggle[aria-expanded=true]{box-shadow:var(--in)}
.sg-tx{flex:1;min-width:0}
.sg-tx .ug-kick{display:block;margin:0 0 4px}
.sg-q{display:block;font-size:clamp(21px,5.8vw,28px);font-weight:800;letter-spacing:-.04em;line-height:1.12}
.sg-sub{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.sg-cb{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--bg);box-shadow:var(--out-s);color:var(--accent)}
.sg-chev{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.sg-toggle[aria-expanded=true] .sg-chev{transform:rotate(180deg)}
.sg-body{padding-top:18px}
.sg-body:not([hidden]){animation:rise .45s cubic-bezier(.2,.8,.2,1)}
html[data-skin=neolight] .hw-sec{margin-top:40px}
/* ===== Fortsetzen-Karte ===== */
.resume{margin:4px 12px 0;padding:16px;border-radius:22px;background:var(--bg);box-shadow:var(--in);animation:rise .5s cubic-bezier(.2,.8,.2,1)}
.resume[hidden]{display:none}
.rs-top{display:flex;align-items:center;gap:8px}
.rs-top b{font-size:15.5px}
.rs-badge{padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:800}
.rs-last{margin:10px 0 14px;padding:10px 12px;border-radius:14px;background:var(--paper);font-size:14px}
.rs-last span{display:block;font-size:11.5px;color:var(--faint);margin-bottom:2px}
.rs-last em{font-style:normal;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-last small{display:block;font-size:11.5px;color:var(--faint);margin-top:3px}
.rs-go{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:15px;background:var(--accent);color:#fff;font:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 26%,transparent);transition:transform .2s}
.rs-go:active{transform:scale(.98)}
.rs-new{display:block;margin:10px auto 0;border:0;background:transparent;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ug-card.has-conv .ug-comp{display:none}

/* ===== update6 (A-20261002-27): Eingabeleiste - Feld und Senden-Knopf immer nebeneinander ===== */
#conv .composer{display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:10px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
#conv .composer .reply-bar{flex:1 1 100%}
#conv .composer textarea{flex:1 1 0;min-width:0;width:auto!important;margin:0!important}
#conv .composer .send{flex:0 0 50px;margin:0!important;align-self:flex-end}

/* ===== Medienschutz (A-20261002-26): Abzeichen unter Bildern/Videos ===== */
.hh-geprueft{display:flex;align-items:center;gap:4px;margin:-2px 0 8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;
  color:#2f7a52;background:rgba(47,122,82,.09);cursor:help;user-select:none;width:max-content;position:relative}
.hh-geprueft svg{flex:0 0 auto}
.hh-geprueft.offen::after{content:'Standort- und Gerätedaten wurden entfernt';position:absolute;left:0;top:calc(100% + 4px);white-space:nowrap;padding:6px 10px;border-radius:10px;
  background:var(--paper,#fff);color:var(--ink,#222);box-shadow:0 6px 18px rgba(0,0,0,.14);font-weight:500;z-index:5}
:root[data-theme="dark"] .hh-geprueft{color:#7fd1a3;background:rgba(127,209,163,.12)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hh-geprueft{color:#7fd1a3;background:rgba(127,209,163,.12)}}

/* ===== Links in Nachrichten (A-20261002-29): Akzentfarbe; in der eigenen (Akzent-)Blase hell ===== */
.msg .hh-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;overflow-wrap:anywhere;font-weight:600}
.msg .hh-link:hover{text-decoration-thickness:2px}
.msg.me .hh-link{color:#fff;text-decoration-color:rgba(255,255,255,.75)}
.msg .meta .edited{font-size:11px;opacity:.75;margin-right:4px;font-style:italic}
/* ===== Bearbeiten in der Sprechblase (A-20261002-28) ===== */
.hh-edit{display:grid;gap:8px;min-width:min(260px,70vw)}
.hh-edit textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.4;padding:8px 10px;border-radius:12px;border:0;resize:vertical;
  background:var(--bg)!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink);caret-color:var(--accent);box-shadow:var(--in,inset 0 0 0 1px rgba(0,0,0,.08))!important}
.hh-edit-knoepfe{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.hh-edit-knoepfe button{font:inherit;font-size:14px;font-weight:700;border:0;border-radius:999px;padding:6px 14px;cursor:pointer}
.hh-edit-ab{background:rgba(255,255,255,.18);color:inherit}
.hh-edit-ok{background:#fff;color:var(--accent)}
.msg.her .hh-edit-ab{background:var(--line)}
.msg.her .hh-edit-ok{background:var(--accent);color:#fff}
.hh-edit-hinweis{flex:1 1 100%;font-size:12px}

/* Mensch-Pruefung: nach der Bestaetigung wieder ausblenden */
.hh-ts{transition:opacity .3s ease,max-height .35s ease;max-height:120px;overflow:hidden}
.hh-ts.hh-ts-weg{opacity:0;max-height:0;margin-top:0!important}

/* ===== Installierte Web-App: Mitteilungen erlauben (A-20261002-31) ===== */
.hh-app-push{position:fixed;inset:0;z-index:80;display:grid;place-items:end center;padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:rgba(30,20,25,.38);animation:hapRein .3s ease}
.hap-karte{width:min(420px,100%);box-sizing:border-box;padding:24px 22px 18px;border-radius:26px;background:var(--bg,#F7F6F4);color:var(--ink,#2F2A2A);text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.25);animation:hapHoch .35s cubic-bezier(.2,.8,.2,1)}
.hap-glocke{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;color:var(--accent,#9E3A49);background:var(--bg,#F7F6F4);box-shadow:4px 4px 12px var(--lo,#E3DFDA),-4px -4px 12px var(--hi,#fff)}
.hap-titel{display:block;font-size:21px;margin:0 0 6px}
.hap-text{margin:0 0 18px;font-size:15.5px;line-height:1.5;color:var(--muted,#6F6A6A)}
.hap-ja{display:block;width:100%;border:0;border-radius:999px;padding:16px 18px;font:inherit;font-size:17px;font-weight:800;background:var(--accent,#9E3A49);color:#fff;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--accent,#9E3A49) 35%,transparent)}
.hap-ja:disabled{opacity:.7}
.hap-spaeter{display:block;margin:10px auto 0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--muted,#6F6A6A);padding:8px 14px;cursor:pointer}
@keyframes hapRein{from{opacity:0}to{opacity:1}}
@keyframes hapHoch{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hh-app-push,.hap-karte{animation:none}}

/* ===== Erklaer-Videos: Pfeile links/rechts + Wischen (A-20261003-02) ===== */
.hh-schritte{position:relative;user-select:none;-webkit-user-select:none}
.hh-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  color:var(--accent,#9E3A49);background:color-mix(in srgb,var(--bg,#F7F6F4) 88%,transparent);box-shadow:0 4px 14px rgba(0,0,0,.16);transition:transform .15s,background .2s}
.hh-pfeil:active{transform:translateY(-50%) scale(.92)}
.hh-pfeil-l{left:-22px}.hh-pfeil-r{right:-22px}
.hh-pfeil:focus-visible{outline:3px solid color-mix(in srgb,var(--accent,#9E3A49) 45%,transparent);outline-offset:2px}
.hh-schritte img,.hh-schritte svg{-webkit-user-drag:none;user-drag:none}

/* ===== Knopf "Stories" im Gespraech (A-20261003-03) ===== */
#conv .chat{position:relative}
/* Stories + Glocke rechts im Kopf (A-20261004-04): eine Gruppe, 8 px Abstand */
.hh-kopf-rechts{position:absolute;top:14px;right:14px;z-index:3;display:flex;align-items:center;gap:8px}
.hh-stories-knopf{height:44px;padding:0 14px 0 12px;display:flex;align-items:center;gap:6px;border-radius:22px;border:0;
  background:var(--bg);box-shadow:var(--out-s);color:var(--accent);font:800 13px var(--sans,'Manrope',sans-serif);cursor:pointer}
.hh-stories-knopf[hidden]{display:none}
.hh-stories-knopf em{display:none!important}   /* ohne Zaehler (Vorlage Glocke) */
.hh-stories-knopf em{font-style:normal;min-width:28px;height:28px;padding:0 7px;border-radius:14px;background:var(--aubergine,var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.hh-stories-knopf .hh-stories-schloss{display:none;margin-left:-2px;margin-right:4px}
.hh-stories-knopf.gesperrt em{display:none}
.hh-stories-knopf.gesperrt .hh-stories-schloss{display:block}
.hh-stories-knopf:active{box-shadow:var(--in)}
.hh-stories-knopf:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:2px}
/* Platz fuer die Knoepfe rechts - eng wird nur "Gerade da" gekuerzt, nie die Knoepfe */
html[data-skin] #conv .chat-head,#conv .chat-head{padding-right:max(calc(14px + var(--hh-rechts,52px) + 8px),calc((100vw - 680px)/2))}
/* Schmale Handys: Bildpaar kompakt (leicht ueberlappend, ohne das zweite "&" - es steht schon im Titel), damit "Heidi & du"
   neben Stories und Glocke ganz in die Zeile passt; gekuerzt wird nur "Gerade da" (A-20261004-04). */
@media (max-width:440px){
  html[data-skin] #conv .chat-head,#conv .chat-head{gap:8px;padding-left:12px}
  #conv .chat-head .hh-av-paar{gap:0}
  #conv .chat-head .hh-av-und{display:none}
  #conv .chat-head .hh-av-paar .avatar,#conv .chat-head .hh-av-paar .hh-av-platz{width:40px;height:40px}
  #conv .chat-head .hh-av-paar .hh-av-platz{margin-left:-9px;box-shadow:0 0 0 2.5px var(--bg)}
  #conv .chat-head .hh-av-titel{font-size:16px;white-space:nowrap}
  .hh-kopf-rechts{right:12px}
  .hh-stories-knopf{padding:0 12px 0 10px;gap:5px}
}
#conv .chat-head > div{min-width:0}
#conv .chat-head .status{display:flex;min-width:0;max-width:100%}
#conv .chat-head .status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ===== Glocke: Push an/aus, fuehrt zur Erklaerung (A-20261004-04, Vorlage glocke-push-hinweis) ===== */
.hh-glocke{--hh-glocke-voll:#4A4545;--hh-haken:#4E7957;--hh-tip-ok:#4E7957;--hh-tip-flaeche:#FFFFFF;
  position:relative;width:44px;height:44px;flex:none;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
  background:var(--bg);box-shadow:var(--out-s);color:var(--accent);-webkit-tap-highlight-color:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hh-glocke{--hh-glocke-voll:#D9D3CC;--hh-haken:#4F8A5E;--hh-tip-ok:#8FC49B;--hh-tip-flaeche:#33363B}}
:root[data-theme="dark"] .hh-glocke{--hh-glocke-voll:#D9D3CC;--hh-haken:#4F8A5E;--hh-tip-ok:#8FC49B;--hh-tip-flaeche:#33363B}
.hh-glocke:active{box-shadow:var(--in)}
.hh-glocke:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:2px}
.hh-glocke svg{grid-area:1/1;width:23px;height:23px;overflow:visible}
.hh-glocke .hh-glocke-voll{display:none;color:var(--hh-glocke-voll)}
.hh-glocke.an .hh-glocke-leer{display:none}
.hh-glocke.an .hh-glocke-voll{display:block}
.hh-glocke-haken{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:var(--hh-haken);color:#fff;display:none;place-items:center;
  box-shadow:0 0 0 2.5px var(--bg)}
.hh-glocke-haken svg{width:11px;height:11px}
.hh-glocke.an .hh-glocke-haken{display:grid}
.hh-wave{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);opacity:0;pointer-events:none}
.hh-glocke-tip{position:absolute;top:calc(100% + 10px);right:0;width:max-content;max-width:min(260px,calc(100vw - 32px));padding:12px 14px;border-radius:16px;
  background:var(--hh-tip-flaeche,#fff);box-shadow:0 12px 30px rgba(0,0,0,.14);text-align:left;font-family:var(--sans,'Manrope',sans-serif)}
.hh-glocke-tip[hidden]{display:none}
.hh-glocke-tip b{display:block;font-size:14px;font-weight:800;color:var(--hh-tip-ok,#4E7957)}
.hh-glocke-tip span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
:root[data-theme="dark"] .hh-glocke-tip{background:#33363B}:root[data-theme="dark"] .hh-glocke-tip b{color:#8FC49B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hh-glocke-tip{background:#33363B}:root:not([data-theme="light"]) .hh-glocke-tip b{color:#8FC49B}}
/* Handschriftlicher Hinweis unter der Glocke - liegt ueber dem Chat, verschiebt nichts */
.hh-glocke-hinweis{position:absolute;z-index:3;top:68px;right:21px;margin:0;display:flex;align-items:flex-start;gap:4px;pointer-events:none;
  font-family:"Sacramento",cursive;font-size:30px;line-height:1.02;color:var(--ink);text-align:right;white-space:nowrap;opacity:0;transition:opacity .6s ease}
.hh-glocke-hinweis[hidden]{display:none}
.hh-glocke-hinweis span{margin-top:16px;padding:4px 6px 6px 12px;border-radius:18px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 0 14px 10px color-mix(in srgb,var(--bg) 92%,transparent)}
.hh-glocke-hinweis svg{flex:none;color:var(--accent);margin-top:-10px}
/* Bewegungen 1:1 aus glocke.css */
@keyframes hhBody{0%{transform:rotate(0deg)}9.6%{transform:rotate(-14deg)}20.5%{transform:rotate(12deg)}31.3%{transform:rotate(-10deg)}42.2%{transform:rotate(8deg)}53%{transform:rotate(-5deg)}63.8%{transform:rotate(3deg)}74.7%{transform:rotate(-1deg)}89.2%,100%{transform:rotate(0deg)}}
@keyframes hhClap{0%{transform:rotate(0deg)}14.7%{transform:rotate(-25deg)}25.5%{transform:rotate(22deg)}36.4%{transform:rotate(-18deg)}47.2%{transform:rotate(14deg)}58.1%{transform:rotate(-9deg)}68.9%{transform:rotate(5deg)}79.8%{transform:rotate(-2deg)}92.8%,100%{transform:rotate(0deg)}}
@keyframes hhGrow{0%{transform:scale(1)}13.2%{transform:scale(1.24)}71.1%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes hhWave{0%{opacity:0;transform:scale(1)}3.8%{opacity:.5;transform:scale(1)}60.2%,100%{opacity:0;transform:scale(1.75)}}
@keyframes hhNoteIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes hhPop{0%{transform:scale(.7)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes hhTip{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}
.hh-glocke .hh-grow{overflow:visible}
.hh-glocke .hh-body,.hh-glocke .hh-clap{transform-box:view-box;transform-origin:12px 3.5px}
.hh-glocke.is-ringing .hh-grow{animation:hhGrow 1.66s ease-in-out both}
.hh-glocke.is-ringing .hh-body{animation:hhBody 1.66s ease-in-out both}
.hh-glocke.is-ringing .hh-clap{animation:hhClap 1.66s ease-in-out both}
.hh-glocke.is-ringing .hh-wave{animation:hhWave 1.66s ease-out both}
.hh-glocke-hinweis.is-in{animation:hhNoteIn .65s ease-out both}
.hh-glocke-hinweis.is-out{animation:none;opacity:0}
.hh-glocke .hh-pop{animation:hhPop .7s cubic-bezier(.2,.8,.2,1) both}
.hh-glocke .hh-check{animation:hhPop .6s cubic-bezier(.2,.8,.2,1) .45s both}
.hh-glocke-tip.hh-tip{animation:hhTip .35s ease-out both}
@media (prefers-reduced-motion:reduce){
  .hh-glocke.is-ringing .hh-grow,.hh-glocke.is-ringing .hh-body,.hh-glocke.is-ringing .hh-clap,.hh-glocke.is-ringing .hh-wave,
  .hh-glocke .hh-pop,.hh-glocke .hh-check,.hh-glocke-tip.hh-tip{animation:none!important}
  .hh-glocke-hinweis.is-in{animation:none!important;opacity:1}
}

/* ===== Vollbild fuer Bilder von Heidi (A-20261003-12) ===== */
.msg img.hh-zoombar{cursor:zoom-in}
.hh-vollbild{position:fixed;inset:0;z-index:2000;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.hh-vollbild.an{opacity:1}
.hh-vollbild[hidden]{display:none}
.hh-vollbild img{max-width:100vw;max-height:100vh;max-height:100dvh;width:auto;height:auto;object-fit:contain;display:block}
.hh-vb-zu{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
@media (prefers-reduced-motion:reduce){.hh-vollbild{transition:none}}

/* ===== Sprachwahl in der Profilkarte (A-20261002-22, aus dem Sprach-Paket) ===== */
.lang-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 2px 2px;font-size:13px;color:var(--muted)}
.lang-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;box-shadow:var(--in);min-width:180px}
.lang-seg button{position:relative;z-index:1;border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:7px 10px;border-radius:999px;cursor:pointer;transition:color .25s}
.lang-seg button[aria-checked=true]{color:var(--accent)}
.lang-seg .th{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--bg);box-shadow:var(--out-s);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.lang-seg[data-l=en] .th{transform:translateX(100%)}
@media (prefers-reduced-motion:reduce){.lang-seg .th,.lang-seg button{transition:none}}
/* Abwesenheitsnachricht passend zum Besucher (A-20261003-16): Einstieg + Hinweis, gruene Statuszeilen */
.auto .ab-einstieg{margin-bottom:8px}
.auto .ab-status:empty{display:none}
.auto .ab-status{display:grid;gap:4px;margin:-4px 0 4px}
.auto .ab-status .ab-ok{margin:0;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--online)}
.auto .auto-actions[hidden]{display:none}
/* "Bis zu meiner naechsten Nachricht." (A-20261003-27): laenger als die alte Zeile - darf ausgewogen
   auf zwei Zeilen umbrechen, statt seitlich aus dem Bild zu ragen. */
html[data-skin=neolight] .farewell span{white-space:normal;text-wrap:balance;line-height:1.08;padding:0 12px;font-size:clamp(34px,10.5vw,56px)!important}

/* Speicherschutz (A-20261003-32, R-20261003-02): kein "Bild sichern" beim langen Druecken, nicht ziehen,
   nicht markieren; im Hintergrund weichgezeichnet; beim Drucken/als PDF leer. */
img,video,canvas,picture{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
html.hh-verdeckt img,html.hh-verdeckt video,html.hh-verdeckt canvas,html.hh-verdeckt picture{filter:blur(28px)!important;transition:none!important}
@media print{img,video,canvas,picture,svg image{visibility:hidden!important}}

/* Rundnachricht mit Layout im Chat (A-20261003-11) - Sprechblasen und Bild-Blasen in Heidis Nachricht */
.msg.hh-rund{background:transparent!important;box-shadow:none!important;padding:0!important;border:0!important;max-width:min(86vw,440px);width:min(78vw,440px);flex:0 1 auto}
.msg.hh-rund .mtext{display:block}
.hh-rund-blatt{display:grid;gap:8px;justify-items:start}
.hh-rb-bub{background:var(--surface);color:var(--ink);border-radius:6px 20px 20px 20px;padding:11px 14px;display:grid;gap:6px;overflow-wrap:anywhere;box-shadow:3px 3px 8px rgba(166,155,142,.28);white-space:normal}
.hh-rb-bub p{margin:0}.hh-rb-bub strong{font-weight:800;font-size:16.5px;line-height:1.3}
.hh-rb-hand{font-family:"Sacramento","Snell Roundhand",cursive;font-size:27px;line-height:1.15;color:var(--accent)}
.hh-rb-ctr{text-align:center;justify-self:stretch}
.hh-rb-med{margin:0;max-width:100%;border-radius:6px 20px 20px 20px;overflow:hidden;background:var(--surface);box-shadow:3px 3px 8px rgba(166,155,142,.28)}
.hh-rb-med.hh-rb-mittel{max-width:68%}
.hh-rb-med img,.hh-rb-med video{display:block;width:100%;height:auto}
.hh-rb-reihe{display:grid;gap:3px}.hh-rb-reihe img{aspect-ratio:4/5;object-fit:cover;height:100%}
.hh-rb-med figcaption{padding:8px 13px 10px;font-size:14px;color:var(--muted)}
.msg.hh-rund .meta{display:block;margin-top:4px}

/* Interessen & Besuche im Konto-Fenster (A-20261003-44) */
/* eine leise Zeile, kein Kasten (die FAQ-Optik fuer details/summary gilt hier nicht) */
html[data-skin] details.akt-karte,details.akt-karte{margin:8px 0 0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;text-align:left;font-size:12px;color:var(--muted)}
html[data-skin] details.akt-karte > summary,details.akt-karte > summary{list-style:none;cursor:pointer;display:flex;gap:5px;align-items:center;justify-content:center;
  padding:4px 2px;font-family:var(--sans);font-size:12px;font-weight:500;line-height:1.4;color:var(--faint,var(--muted))}
details.akt-karte > summary::-webkit-details-marker{display:none}
html[data-skin] details.akt-karte > summary::after,details.akt-karte > summary::after{content:"›";width:auto;height:auto;background:none;font-size:13px;line-height:1;transition:transform .2s}
details.akt-karte[open] > summary::after{transform:rotate(90deg)}
.akt-kurz::before{content:"· "}
html[data-skin] details.akt-karte[open],details.akt-karte[open]{padding:2px 14px 12px;border-radius:16px;background:var(--bg);box-shadow:var(--out-s,0 2px 8px rgba(0,0,0,.08))}
.akt-satz{margin:2px 0 8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.akt-stand{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--ink)}
.akt-karte[data-stand=an] .akt-stand{color:var(--online,#5E8A62)}
.akt-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.akt-knoepfe .pill{font-size:13px;padding:8px 14px;min-height:38px}

/* Selbsthilfe "E-Mail kommt nicht an?" im Profil (A-20261006-17) */
.hh-mailhilfe{margin:14px 0 6px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);text-align:left;font-size:14px;line-height:1.45}
.hh-mailhilfe[hidden]{display:none}
.hh-mailhilfe h3{margin:0 0 6px;font-size:15px}
.hh-mh-status{margin:0 0 8px}
.hh-mh-tipps{margin:0 0 10px;padding-left:18px;color:var(--muted);font-size:13px}
.hh-mh-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.hh-mh-knopf{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--accent);background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.hh-mh-knopf[hidden]{display:none}
.hh-mh-knopf.voll{background:var(--accent);color:#fff}
.hh-mh-knopf:disabled{opacity:.6}
.hh-mh-form{display:flex;gap:8px;margin-top:10px}
.hh-mh-form[hidden]{display:none}
.hh-mh-form input{flex:1;min-width:0;min-height:44px;border-radius:12px;border:1px solid var(--line);padding:0 12px;font:inherit;background:var(--bg);color:var(--ink)}
.hh-mh-info{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--accent)}
.hh-mh-info:empty{display:none}

/* Bilder von Besuchern (A-20261006-22) */
.hh-bild-knopf[hidden]{display:none!important}
.hh-bild-knopf{display:inline-grid;place-items:center}
.hh-bild-vorschau,.hh-bild-gesendet{display:block;max-width:100%;max-height:320px;border-radius:14px;margin:2px 0 4px;object-fit:cover}
.hh-bild-eigen .hh-bild-vorschau{opacity:.7}