/* ==========================================================================
   SENDRIE V16.2 — Feinschliff Entwurf 1 (15.10.2026)
   Live-Animation, Gast-E-Mail-Hinweis, größeres Logo, linksbündige Titel.
   ========================================================================== */

/* ---------- Logo größer (überall) ---------- */
.site-nav .wrap{height:84px}
.site-nav .logo{height:44px!important;width:auto}
.site-footer .logo{height:38px!important;width:auto}
.side .brand .logo{height:30px}
@media (max-width:900px){.site-nav .wrap{height:72px}.site-nav .logo{height:36px!important}}

/* ---------- Live-Animation neben dem Uploader ---------- */
.k-live{position:absolute;top:44px;left:470px;width:300px;padding:20px;border-radius:22px;background:rgba(255,255,255,.82);
  box-shadow:0 0 0 1px var(--line),0 24px 60px -32px rgba(16,40,110,.35);display:flex;flex-direction:column;gap:12px;
  transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.1,1),filter .35s}
.k-stage:has(.mail-open) .k-live{opacity:0;transform:translateX(-12px) scale(.97);filter:blur(6px);pointer-events:none}
.kl-row{display:flex;align-items:center;gap:12px;min-width:0}
.kl-t{display:flex;flex-direction:column;min-width:0}
.kl-t b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-t small{color:var(--ink-3);font-size:12.5px}
.kl-row .ftype .i{width:16px;height:16px;color:#fff}
.kl-track{position:relative;height:58px;margin-left:16px;border-left:2px dashed #CFD8EA}
.kl-fly{position:absolute;left:-15px;top:0;width:28px;height:28px;border-radius:8px;background:var(--ribbon);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 18px -6px rgba(22,96,255,.7);animation:klFly 4s cubic-bezier(.6,0,.4,1) infinite}
.kl-fly .i{width:15px;height:15px}
@keyframes klFly{0%{top:-6px;opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1)}62%{top:34px;opacity:1;transform:scale(1)}72%,100%{top:40px;opacity:0;transform:scale(.6)}}
.kl-bar{height:6px;border-radius:99px;background:var(--sunken);overflow:hidden}
.kl-bar i{display:block;height:100%;border-radius:99px;background:var(--ribbon);animation:klBar 4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes klBar{0%{width:0}65%{width:100%}100%{width:100%}}
.kl-state{position:relative;height:20px;font-size:13px;font-weight:650}
.kl-state span{position:absolute;inset:0;display:flex;align-items:center;gap:6px}
.kl-s1{color:var(--ink-3);animation:klS1 4s infinite}
.kl-s2{color:#0B7A3E;animation:klS2 4s infinite}
.kl-s2 .i{width:15px;height:15px}
@keyframes klS1{0%,62%{opacity:1}68%,100%{opacity:0}}
@keyframes klS2{0%,64%{opacity:0;transform:translateY(4px)}70%,96%{opacity:1;transform:none}100%{opacity:0}}
.kl-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#0B3BE0,#8C8AF6)}
.kl-to{padding-top:12px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.kl-fly,.kl-bar i,.kl-s1,.kl-s2{animation:none}.kl-bar i{width:100%}.kl-s1{opacity:0}.kl-s2{opacity:1}}
@media (max-width:1340px){.k-live{display:none}}

/* ---------- Gäste: E-Mail-Fenster mit Konto-Hinweis ---------- */
.up-mail-guest{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.up-mail-row{display:flex;gap:8px}
.up-mail-row .btn{flex:1}

/* ---------- Titel links statt zentriert ---------- */
.k-head{text-align:left;margin:0 0 40px;max-width:760px}
.k-more{justify-content:flex-start}
.info-hero{text-align:left!important}
.info-hero .info-hero-in{margin:0!important;max-width:880px}
.info-hero .lead{margin:0!important}
.info-hero .hero-cta{justify-content:flex-start!important}
.page-hero{text-align:left!important}
.page-hero .wrap>p{margin-left:0!important}
.billing-toggle{justify-content:flex-start!important}
.sh,.sh.center{text-align:left!important;margin-left:0!important;margin-right:0!important}
@media (max-width:1340px){.k-intro{text-align:left!important}.k-lead{margin:0!important}.k-intro .k-ticks{align-items:flex-start!important}}
@media (max-width:900px){
  .k-pill{align-self:flex-start!important}
  .k-hero h1{text-align:left!important}
  .k-lead{text-align:left!important}
  .k-intro .k-ticks{margin-left:0!important;margin-right:0!important}
}
.page-hero h1,.page-hero p{margin-left:0!important;margin-right:0!important;text-align:left!important}
.page-hero .k{display:inline-block}

/* ---------- Konto Free/Plus/Pro: schlanke Ansicht ohne Seitenleiste ---------- */
.ss{min-height:100vh;background:var(--sunken,#F4F7FC)}
.ss-wrap{width:min(1120px,100% - 32px);margin:0 auto}
.ss-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.ss-top>.ss-wrap{display:flex;align-items:center;gap:20px;height:68px}
.ss-logo .logo{height:36px;width:auto;display:block}
.ss-tabs{display:flex;align-items:center;gap:4px;margin-top:22px;padding-bottom:12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ss-tabs a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:650;color:var(--ink-3);white-space:nowrap;transition:background .15s,color .15s}
.ss-tabs a:hover{background:#EEF2F8;color:var(--ink)}
.ss-tabs a[aria-current=page]{background:var(--brand-50,#EAF1FF);color:var(--brand)}
.ss-tabs.m{display:none}
.ss-r{display:flex;align-items:center;gap:10px}
.ss-me{display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 3px;border-radius:999px;box-shadow:0 0 0 1px var(--line);background:#fff;color:var(--ink-3)}
.ss-me .avatar{width:32px;height:32px;font-size:12px}
.ss-hello{padding:30px 0 6px}
.ss-hello>.ss-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ss-hello h1{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em}
.ss-hello p{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:14px;margin-top:6px}
.ss-plan{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;background:#EEF2F8;color:var(--ink-2)}
.ss-plan.p-normal,.ss-plan.p-plus{background:#E6F6FF;color:#0369A1}.ss-plan.p-pro{background:linear-gradient(135deg,#4FE3F6,#1660FF);color:#fff}
.ss-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ss-store{width:260px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ss-store .l{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-3);margin-bottom:8px}.ss-store b{color:var(--ink)}
.ss-up{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:14px;font-weight:700;font-size:14px;color:var(--brand);background:#fff;box-shadow:0 0 0 1px var(--brand-100,#CFE0FF)}
.ss-up:hover{background:var(--brand-50,#EAF1FF)}
.ss-body{padding:22px 0 80px;outline:none}
.ss-body>.ph:first-child{margin-top:0}
@media (max-width:960px){
  .ss-top>.ss-wrap>.ss-tabs{display:none}
  .ss-tabs.m{display:flex;justify-content:flex-start;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
  .ss-tabs.m::-webkit-scrollbar{display:none}
  .ss-top>.ss-wrap{justify-content:space-between}
  .ss-store{width:100%}.ss-side{width:100%}.ss-up{width:100%;justify-content:center}
}
@media (max-width:560px){.ss-logo .logo{height:30px}.ss-r .btn-brand span{display:none}}
/* Einfache Ansicht: Kennzahlen als schlanke Zeile statt grosser Dashboard-Kacheln */
.ss-body .kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.ss-body .kpi{border-radius:0!important;box-shadow:none!important;padding:14px 18px!important;background:transparent}
.ss-body .kpi+.kpi{border-left:1px solid var(--line)}
.ss-body .kpi .t{font-size:12.5px}.ss-body .kpi .t .ico{display:none}
.ss-body .kpi .v{font-size:20px!important;margin:4px 0 0!important}
.ss-body .kpi .progress{display:none}.ss-body .kpi .d{font-size:12px}
@media (max-width:760px){.ss-body .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ss-body .kpi:nth-child(3){border-left:0}.ss-body .kpi:nth-child(n+3){border-top:1px solid var(--line)}}

/* Business: Firma als schlanker Schalter in der Kopfzeile statt grosser Kachel in der Seitenleiste */
.ws-chip{display:inline-flex;align-items:center;gap:10px;height:44px;max-width:300px;padding:0 12px 0 10px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);text-align:left;flex:none}
.ws-chip[aria-disabled=true]{cursor:default}
.ws-chip:not([aria-disabled=true]):hover{box-shadow:0 0 0 1px var(--brand-100,#CFE0FF)}
.ws-dot{width:10px;height:10px;border-radius:50%;flex:none;background:linear-gradient(135deg,#4FE3F6,#1660FF);box-shadow:0 0 0 3px #EAF1FF}
.ws-chip .tx{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.ws-chip b{font-size:13.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-chip small{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtop .search{flex:1;max-width:460px}
@media (max-width:760px){.ws-chip{max-width:160px;height:40px}.ws-chip small{display:none}}
@media (max-width:480px){.ws-chip{max-width:120px;padding:0 8px}.ws-dot{display:none}}

/* Handy: Kopfzeilen von Karten umbrechen, Umschalter scrollbar, Raster-Spalten nie breiter als der Bildschirm */
@media (max-width:640px){
  .panel-h{flex-wrap:wrap;gap:10px}
  .seg{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .seg::-webkit-scrollbar{display:none}
  .grid-2>*,.grid-eq>*,.mbody>*,.ss-body>*{min-width:0}
  .card .btn{max-width:100%}
  .card .btn span,.card .btn{white-space:normal}
}

@media (max-width:760px){.mbody .grid-2,.ss-body .grid-2{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:640px){.mtop .search{display:none}.mtop .ws-chip{flex:1;max-width:none}}

/* Fokus: kein Rahmen nach Mausklick oder beim Laden einer Seite; bei Tastatur ein sauberer Ring, der die Rundung behält */
:focus:not(:focus-visible){outline:none;box-shadow:none}
:focus-visible{box-shadow:none!important;outline:2px solid rgba(22,96,255,.6)!important;outline-offset:2px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible,#content:focus,main:focus{outline:none!important;box-shadow:none!important}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none!important;box-shadow:var(--focus)!important}

/* Profil oben rechts (Business) */
.top-me{display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 3px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink-3);flex:none}
.top-me:hover{box-shadow:0 0 0 1px var(--brand-100,#CFE0FF)}
.top-me .avatar{width:34px;height:34px;font-size:12px}
@media (max-width:480px){.mtop .btn-brand span{display:none}}