@font-face{font-family:'Gloock';src:url('fonts/Gloock-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gloock';src:url('fonts/Gloock-400-latin-ext.woff2') format('woff2');font-weight:400;unicode-range:U+0100-02BA,U+1E00-1E9F;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-600-latin.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --rose:#F2A7C6; --rose-soft:#F8D3E2; --bubblegum:#E8619E;
  --cream:#FBF1EA; --paper:#fff8f3; --mulberry:#5C0F2E; --mulberry-deep:#45091F;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;font-style:normal}
html,body{background:var(--cream);height:100%}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--mulberry);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body.dark{background:var(--mulberry)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:inherit}
.mono{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:2px;font-size:10.5px}
.serif{font-family:'Gloock',Georgia,serif;font-weight:400}
.hidden{display:none!important}

.screen{min-height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:calc(18px + var(--safe-top)) 24px 0;position:relative}
.screen.dark{background:var(--mulberry);color:var(--cream)}
.topbar{display:flex;justify-content:space-between;align-items:center;min-height:30px}
.beta{display:inline-block;border:1px solid currentColor;border-radius:50px;padding:4px 10px}
.iconbtn{font-size:24px;line-height:1;padding:6px 4px;opacity:.85}
.ai-badge{display:inline-flex;align-items:center;gap:6px}
.ai-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--bubblegum)}

h1.big{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:46px;line-height:1;letter-spacing:-.5px;margin-top:30px}
h1.mid{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:38px;line-height:1.05;margin-top:22px}
.by{margin-top:10px;opacity:.7}
.lead{margin-top:22px;font-size:18px;line-height:1.4}
.lead b{font-weight:600}
.small{font-size:14px;line-height:1.5;opacity:.8}
.text{font-size:16px;line-height:1.55}
.text p+p{margin-top:12px}

/* Karten auf der Startseite */
.card{border-radius:22px;padding:20px 20px 19px;margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;width:100%}
.card h2{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:24px;line-height:1.1}
.card p{font-size:13.5px;line-height:1.4;margin-top:6px;opacity:.85}
.card .arrow{font-size:22px;flex:none}
.card.sos{background:var(--mulberry);color:var(--cream);margin-top:26px}
.card.sos .mono{color:var(--rose);margin-bottom:8px;display:block}
.card.ask{background:var(--rose-soft)}
.card.mine{background:transparent;border:1.5px solid var(--rose)}
.card:active{transform:scale(.99)}

.usage{margin-top:18px;opacity:.6}

/* Mikro-Leiste */
.micbar{margin-top:auto;padding:16px 0 calc(22px + var(--safe-bottom));display:flex;align-items:center;gap:14px}
.mic{width:58px;height:58px;border-radius:50%;background:var(--bubblegum);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 8px rgba(232,97,158,.18);transition:transform .15s, box-shadow .15s;touch-action:none;user-select:none;-webkit-user-select:none}
.mic svg{width:24px;height:24px;pointer-events:none}
.mic.rec{transform:scale(1.08);box-shadow:0 0 0 14px rgba(232,97,158,.28);animation:pulse 1.2s ease-in-out infinite}
.mic.busy{opacity:.6}
@keyframes pulse{50%{box-shadow:0 0 0 20px rgba(232,97,158,.12)}}
.micbar .hint{font-size:14px;line-height:1.35;opacity:.8}

/* Tabbar */
.tabbar{position:sticky;bottom:0;margin:auto -24px 0;display:flex;justify-content:space-around;padding:14px 10px calc(14px + var(--safe-bottom));border-top:1px solid rgba(92,15,46,.12);background:var(--cream)}
.tabbar button{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;opacity:.5;padding:6px}
.tabbar button.on{opacity:1;color:var(--bubblegum);font-weight:500}

/* Buttons & Formulare */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:50px;padding:15px 24px;font-size:16px;font-weight:500;background:var(--mulberry);color:var(--cream);width:100%;text-align:center}
.btn.rose{background:var(--rose);color:var(--mulberry-deep)}
.btn.ghost{background:transparent;border:1.5px solid currentColor;color:inherit}
.btn.link{background:none;padding:10px;width:auto;text-decoration:underline;text-underline-offset:3px;font-weight:400;opacity:.8}
.btn[disabled]{opacity:.45;pointer-events:none}
.btns{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.field{width:100%;border:1.5px solid rgba(92,15,46,.25);background:var(--paper);border-radius:16px;padding:14px 16px;font-size:16px;line-height:1.45;outline:none}
.field:focus{border-color:var(--bubblegum)}
.screen.dark .field{background:rgba(251,241,234,.08);border-color:rgba(251,241,234,.3);color:var(--cream)}
.screen.dark .field::placeholder{color:rgba(251,241,234,.55)}
textarea.field{resize:none;min-height:96px}
label.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;margin-top:18px}
label.check input{width:22px;height:22px;flex:none;accent-color:var(--bubblegum);margin-top:1px}

/* Hinweis-Boxen */
.note{background:var(--rose-soft);border-radius:18px;padding:16px 18px;font-size:14.5px;line-height:1.5;margin-top:16px}
.note b{font-weight:600}
.note ul{margin:8px 0 0 18px}
.note li+li{margin-top:6px}
.note.sos{background:rgba(251,241,234,.08);color:var(--cream)}
.disclaimer{font-size:12.5px;line-height:1.45;opacity:.65;margin-top:18px}

/* SOS */
.progress{display:flex;gap:6px;margin-top:18px}
.progress i{flex:1;height:4px;border-radius:4px;background:rgba(251,241,234,.22)}
.progress i.on{background:var(--rose)}
.step{color:var(--rose);margin-top:26px}
.quote{margin-top:22px;background:rgba(251,241,234,.08);border-left:3px solid var(--bubblegum);border-radius:4px 18px 18px 4px;padding:16px 18px}
.quote .mono{opacity:.65;font-size:9.5px}
.quote p{font-family:'Gloock',Georgia,serif;font-size:22px;line-height:1.2;margin-top:8px}
.guide{margin-top:22px;font-size:16.5px;line-height:1.5;opacity:.95}
.chips{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.chip{border:1.5px solid rgba(251,241,234,.5);border-radius:50px;padding:10px 16px;font-size:14.5px}
.chip.sel{background:var(--rose);border-color:var(--rose);color:var(--mulberry-deep);font-weight:600}
.qlabel{margin-top:24px;font-size:15px;opacity:.9}
.slider{margin-top:14px}
.slider input{width:100%;accent-color:var(--bubblegum);height:28px}
.slider .row{display:flex;justify-content:space-between;opacity:.65}
.slider .val{font-family:'Gloock',Georgia,serif;font-size:44px;line-height:1;margin-top:6px}
.breath{margin:28px auto 0;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,var(--rose) 0%,rgba(242,167,198,.35) 55%,rgba(242,167,198,0) 72%);display:flex;align-items:center;justify-content:center;transform:scale(.62);transition:transform 4s cubic-bezier(.45,0,.55,1)}
.breath.in{transform:scale(1);transition-duration:4s}
.breath.out{transform:scale(.62);transition-duration:6s}
.breath span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mulberry-deep)}
.footer-actions{margin-top:auto;padding:18px 0 calc(22px + var(--safe-bottom))}
.inputrow{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.inputrow .field{flex:1}
.mic.sm{width:48px;height:48px;box-shadow:0 0 0 5px rgba(232,97,158,.18)}
.mic.sm svg{width:20px;height:20px}

/* Chat */
.chat{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 0 12px}
.bubble{max-width:88%;padding:13px 16px;border-radius:20px;font-size:16px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.bubble.user{align-self:flex-end;background:var(--mulberry);color:var(--cream);border-bottom-right-radius:6px}
.bubble.ai{align-self:flex-start;background:var(--paper);border:1px solid rgba(92,15,46,.1);border-bottom-left-radius:6px}
.screen.dark .bubble.ai{background:rgba(251,241,234,.08);border-color:rgba(251,241,234,.12);color:var(--cream)}
.screen.dark .bubble.user{background:var(--rose);color:var(--mulberry-deep)}
.bubble .who{display:block;margin-bottom:6px;opacity:.55;font-size:9px}
.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;margin-right:4px;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:1}}
.composer{position:sticky;bottom:0;background:var(--cream);padding:10px 0 calc(14px + var(--safe-bottom));display:flex;gap:10px;align-items:flex-end;border-top:1px solid rgba(92,15,46,.08);margin:0 -24px;padding-left:24px;padding-right:24px}
.screen.dark .composer{background:var(--mulberry);border-color:rgba(251,241,234,.12)}
.composer textarea{flex:1;min-height:48px;max-height:160px;border-radius:24px;padding:12px 16px}
.send{width:48px;height:48px;border-radius:50%;background:var(--mulberry);color:var(--cream);font-size:20px;flex:none}
.screen.dark .send{background:var(--rose);color:var(--mulberry-deep)}
.send[disabled]{opacity:.35}
.satzcard{align-self:stretch;border-radius:20px;overflow:hidden;border:1.5px solid var(--rose)}
.satzcard .mine{padding:14px 16px;background:var(--mulberry);color:var(--cream)}
.satzcard .mine .mono{color:var(--rose);font-size:9px}
.satzcard .mine p{font-family:'Gloock',Georgia,serif;font-size:20px;line-height:1.2;margin-top:6px}
.satzcard .act{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--cream);color:var(--bubblegum);font-weight:500;font-size:14.5px}
.screen.dark .satzcard .act{background:var(--mulberry-deep)}

/* Krise */
.crisis{align-self:stretch;background:var(--mulberry-deep);color:var(--cream);border-radius:22px;padding:20px;border:2px solid var(--bubblegum)}
.crisis h3{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:24px;line-height:1.15}
.crisis .tel{display:flex;justify-content:space-between;align-items:center;background:rgba(251,241,234,.1);border-radius:16px;padding:14px 16px;margin-top:12px;text-decoration:none}
.crisis .tel>span{white-space:nowrap;margin-left:10px}
.crisis .tel b{font-size:20px;font-weight:600;letter-spacing:.5px}
.crisis .tel span{font-size:13px;opacity:.8}
.crisis .btn{margin-top:10px}
.crisis .done{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--rose)}

/* meine sätze. */
.stats{display:flex;gap:10px;margin-top:22px}
.stat{flex:1;background:var(--rose-soft);border-radius:18px;padding:14px 14px 12px}
.stat b{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:30px;display:block;line-height:1}
.stat .mono{font-size:9px;letter-spacing:1.5px;margin-top:6px;display:block}
.pair{margin-top:14px;border-radius:20px;overflow:hidden;border:1.5px solid var(--rose)}
.pair .voice{padding:14px 16px 12px;background:var(--paper);display:flex;justify-content:space-between;gap:10px}
.pair .voice .mono{opacity:.55;font-size:9px}
.pair .voice p{font-size:15.5px;line-height:1.35;margin-top:5px;opacity:.85}
.pair.done .voice p{opacity:.7;text-decoration:line-through;text-decoration-color:rgba(232,97,158,.7);text-decoration-thickness:1.5px}
.pair .mine{padding:13px 16px 14px;background:var(--mulberry);color:var(--cream)}
.pair .mine .mono{color:var(--rose);font-size:9px}
.pair .mine p{font-family:'Gloock',Georgia,serif;font-size:19px;line-height:1.2;margin-top:5px}
.pair .open{padding:13px 16px;background:var(--cream);display:flex;justify-content:space-between;align-items:center;font-size:14.5px;font-weight:500;color:var(--bubblegum);width:100%}
.pair .opts{display:flex;border-top:1px solid rgba(92,15,46,.1)}
.pair .opts button{flex:1;padding:11px 8px;font-size:13px;color:var(--bubblegum);font-weight:500}
.pair .opts button+button{border-left:1px solid rgba(92,15,46,.1)}
.more{opacity:.5;font-size:20px;line-height:1;padding:0 4px}
.empty{margin-top:24px;font-size:15px;line-height:1.5;opacity:.75}

/* Sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(69,9,31,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50;animation:fade .2s}
.sheet{background:var(--cream);color:var(--mulberry);width:100%;max-width:520px;border-radius:26px 26px 0 0;padding:24px 24px calc(26px + var(--safe-bottom));max-height:92dvh;overflow:auto;animation:up .25s cubic-bezier(.2,.8,.2,1)}
.sheet h2{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:28px;line-height:1.1}
.sheet .grip{width:40px;height:4px;border-radius:4px;background:rgba(92,15,46,.2);margin:-8px auto 16px}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}
.suggest{border:1.5px solid var(--rose);border-radius:18px;padding:14px 16px;margin-top:12px;display:flex;gap:12px;align-items:flex-start}
.suggest input{width:22px;height:22px;accent-color:var(--bubblegum);flex:none;margin-top:2px}
.suggest .a{font-size:14.5px;opacity:.75}
.suggest .e{font-family:'Gloock',Georgia,serif;font-size:18px;margin-top:4px}

.memory{white-space:pre-wrap;background:var(--paper);border-radius:18px;padding:16px 18px;font-size:14.5px;line-height:1.55;margin-top:16px;border:1px solid rgba(92,15,46,.1)}
.section{margin-top:30px}
.section h3{font-family:'Gloock',Georgia,serif;font-weight:400;font-size:24px}
#toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-bottom));transform:translateX(-50%) translateY(20px);background:var(--mulberry-deep);color:var(--cream);padding:12px 20px;border-radius:50px;font-size:14.5px;opacity:0;pointer-events:none;transition:all .25s;z-index:60;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.spacer{height:24px;flex:none}

.crisis .field{background:rgba(251,241,234,.08);border-color:rgba(251,241,234,.3);color:var(--cream)}
.crisis .field::placeholder{color:rgba(251,241,234,.55)}