/* Snapjam Design-System — „Soft Structuralism“: kühles Silber, weiße Kerne in Doppelrahmen, eine Akzentfarbe (Blitz-Koralle). Bewusst nur hell. */
:root{
  --bg:#F2F3F5;
  --card:#FFFFFF;
  --ink:#0D0E12;
  --ink2:#5C6170;
  --ink3:#9096A3;
  --hair:rgba(13,14,18,.07);
  --shell:rgba(13,14,18,.035);
  --accent:#FF4A2B;
  --accent-soft:#FFE9E4;
  --sun:#FFB800;
  --sun-soft:#FFF4D6;
  --ok:#17A35B; --ok-soft:#E3F6EC;
  --warn:#C77700; --warn-soft:#FFF1D9;
  --bad:#D93338; --bad-soft:#FDE6E7;
  --info:#2F6BFF; --info-soft:#E6EEFF;
  --font:"Geist",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-shell:30px; --r-core:24px; --r-md:18px; --r-sm:12px;
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-drawer:cubic-bezier(.32,.72,0,1);
  --e-io:cubic-bezier(.77,0,.175,1);
  --shadow:0 1px 2px rgba(13,14,18,.04),0 28px 56px -32px rgba(13,14,18,.22);
  --shadow-lg:0 2px 4px rgba(13,14,18,.04),0 40px 80px -40px rgba(13,14,18,.30);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.035em;font-weight:600}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
::selection{background:var(--accent);color:#fff}
.mono{font-family:var(--mono);letter-spacing:0}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--ink2)}

/* Doppelrahmen: äußere Schale + innerer Kern */
.shell{background:var(--shell);border-radius:var(--r-shell);padding:6px;box-shadow:inset 0 0 0 1px var(--hair)}
.core{background:var(--card);border-radius:var(--r-core);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(13,14,18,.05);position:relative;overflow:hidden}

/* Augenbrauen-Etikett */
.tag{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink2)}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* Knöpfe: Pille mit eingebettetem Pfeil-Kreis */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;border:0;cursor:pointer;text-decoration:none;border-radius:999px;padding:8px 8px 8px 22px;font-weight:500;font-size:15px;white-space:nowrap;transition:transform .16s var(--e-out),background .25s var(--e-out),box-shadow .25s var(--e-out);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn .bub{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transition:transform .45s var(--e-out)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark .bub{background:rgba(255,255,255,.12)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent .bub{background:rgba(255,255,255,.2)}
.btn-light{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair),0 1px 2px rgba(13,14,18,.05)}
.btn-light .bub{background:var(--bg)}
.btn.plain{padding:12px 22px}
.btn.sm{padding:6px 6px 6px 16px;font-size:14px;gap:10px}
.btn.sm .bub{width:28px;height:28px}
.btn.sm.plain{padding:9px 16px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){
  .btn-dark:hover{background:#22242b}
  .btn-accent:hover{background:#ff5a3d}
  .btn:hover .bub{transform:translate(2px,-1px) scale(1.06)}
  .btn-light:hover{box-shadow:inset 0 0 0 1px rgba(13,14,18,.14),0 1px 2px rgba(13,14,18,.05)}
}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(13,14,18,.25);text-underline-offset:3px;transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--accent)}

/* Formulare */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.lbl{font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:.01em}
.input,.select,.textarea{width:100%;border:0;border-radius:14px;background:var(--bg);padding:13px 15px;font-size:16px;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s var(--e-out),background .2s}
.textarea{min-height:100px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
.field.bad .input,.field.bad .select{box-shadow:inset 0 0 0 1.5px var(--bad)}
.hint{font-size:12px;color:var(--ink3)}

/* Status-Pillen */
.st{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.anfrage{background:var(--info-soft);color:var(--info)}
.st.angebot{background:var(--warn-soft);color:var(--warn)}
.st.bestaetigt{background:var(--ok-soft);color:var(--ok)}
.st.unterwegs{background:var(--sun-soft);color:#9A6A00}
.st.abgeschlossen{background:#ECEDF0;color:var(--ink2)}
.st.storniert{background:var(--bad-soft);color:var(--bad)}
.demo-chip{display:inline-flex;font-size:10px;text-transform:uppercase;letter-spacing:.14em;padding:2px 7px;border-radius:999px;background:var(--bg);color:var(--ink3);font-weight:500}

/* Hinweisleiste & Toast */
.demo-bar{font-size:12px;text-align:center;padding:9px 16px;color:var(--ink2);background:var(--card);box-shadow:inset 0 -1px 0 var(--hair)}
.demo-bar b{color:var(--ink);font-weight:600}
.toasts{position:fixed;z-index:300;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));translate:-50% 0;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;font-size:14px;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow-lg);transition:transform .4s var(--e-drawer),opacity .3s var(--e-out)}
@starting-style{.toast{transform:translateY(16px) scale(.96);opacity:0}}

/* Chat-Widget (Website & Kundenportal) */
.cw-fab{position:fixed;z-index:120;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;border:0;cursor:pointer;border-radius:999px;background:var(--ink);color:#fff;padding:8px 18px 8px 8px;box-shadow:var(--shadow-lg);font-weight:500;font-size:14px;transition:transform .16s var(--e-out)}
.cw-fab:active{transform:scale(.96)}
.cw-fab .av{width:36px;height:36px;border-radius:50%;background:var(--accent);display:grid;place-items:center;position:relative}
.cw-fab .av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#2BD576;box-shadow:0 0 0 2px var(--ink)}
.cw-fab .cnt{min-width:20px;height:20px;border-radius:99px;background:var(--accent);font-size:11px;display:grid;place-items:center;padding:0 6px}
.cw{position:fixed;z-index:130;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 36px));height:min(560px,calc(100dvh - 120px));display:flex;flex-direction:column;transform-origin:bottom right;transition:transform .35s var(--e-drawer),opacity .25s var(--e-out)}
.cw[data-open="false"]{transform:scale(.92) translateY(12px);opacity:0;pointer-events:none}
.cw .core{display:flex;flex-direction:column;height:100%}
.cw-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;box-shadow:inset 0 -1px 0 var(--hair)}
.cw-head .av{width:38px;height:38px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
.cw-head b{display:block;font-size:15px;font-weight:600}
.cw-head span{font-size:12px;color:var(--ok)}
.cw-x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:0;background:var(--bg);cursor:pointer;display:grid;place-items:center}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.msg{max-width:82%;padding:9px 13px;border-radius:18px;font-size:14.5px;line-height:1.45;word-wrap:break-word}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--bg);border-bottom-left-radius:6px}
.msg.sys{align-self:center;background:transparent;color:var(--ink3);font-size:12px;text-align:center;max-width:90%}
.msg time{display:block;font-size:10.5px;opacity:.55;margin-top:3px}
.msg-in{animation:msgIn .35s var(--e-out)}
@keyframes msgIn{from{transform:translateY(8px) scale(.98);opacity:0}}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:18px;background:var(--bg)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.compose{display:flex;gap:8px;padding:12px;box-shadow:inset 0 1px 0 var(--hair)}
.compose input{flex:1;min-width:0;border:0;border-radius:999px;background:var(--bg);padding:11px 16px;font-size:15px}
.compose input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--card)}
.send{width:42px;height:42px;border-radius:50%;border:0;background:var(--accent);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:transform .16s var(--e-out)}
.send:active{transform:scale(.92)}
.quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.quick button{border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* cw-fab-mobile */
@media (max-width:640px){.cw-fab>span:nth-child(2){display:none}.cw-fab{padding:8px}}

/* Seitenübergänge (Cross-Document View Transitions) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .32s cubic-bezier(.23,1,.32,1) both}
::view-transition-new(root){animation:vtIn .55s cubic-bezier(.32,.72,0,1) both}
@keyframes vtOut{to{opacity:0;transform:scale(.985)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}
.vt-logo{view-transition-name:sj-logo}
::view-transition-group(sj-logo){animation-duration:.55s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}