/* Kopf und Fuß der Website (wie landing.css) plus Anmeldung oben rechts: Knopf „Sign in“, Konto-Chip mit Menü,
   Anmeldedialog (Google oder E-Mail-Link). Läuft auf jeder Seite, auch ohne landing.css (pricing.html, jelly.css):
   deshalb bringen Kopf, Fuß und Dialog ihre Tokens selbst mit. Logik: mc/header.js. */
.top, footer.site-foot, .sdlg, .acct-menu, .toast {
  --c-bg:#F7F5F0; --c-panel:#fff; --c-panel-2:#F3F0E9; --c-panel-3:#E8E4DB;
  --c-line:rgb(43 33 16 / .09); --c-line-2:rgb(43 33 16 / .15); --c-ink:#1D1913; --c-soft:#5E584E; --c-faint:#7F796E; --c-tang:#F26B1D;
  --c-display:"Bricolage Grotesque",system-ui,sans-serif; --c-sans:"Manrope",system-ui,sans-serif;
  --c-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.1 27.9%,1.049 33.6%,1.003 40.7%,.988 46%,.995 59%,1);
  font-family:var(--c-sans); letter-spacing:-.011em; color:var(--c-ink);
}

/* ---------- Kopf (gleiche Werte wie landing.css) ---------- */
.top { position:sticky; top:0; z-index:50; background:color-mix(in oklab,var(--c-bg) 86%,transparent); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); }
.top > .wrap { width:min(1200px,100% - 40px); margin:0 auto; display:flex; align-items:center; gap:24px; height:68px; }
.top .logo, footer.site-foot .logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--c-ink); font:800 24px/1 var(--c-display); letter-spacing:-.05em; font-variation-settings:"wdth" 92; }
.top .logo i, footer.site-foot .logo i { width:24px; height:24px; border-radius:8px; background:var(--c-tang); box-shadow:inset 0 -3px 0 rgb(0 0 0 / .2), inset 0 2px 0 rgb(255 255 255 / .35); rotate:-6deg; transition:rotate .6s var(--c-spring); }
.top .logo:hover i { rotate:8deg; }
.top .logo b, footer.site-foot .logo b { font-weight:inherit; }
.top nav { display:flex; gap:2px; margin:0 auto; }
.top nav a { padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:650; font-size:14.5px; color:var(--c-soft); transition:color .2s, background .2s; }
.top nav a:hover { color:var(--c-ink); background:var(--c-panel-2); }
.top nav a[aria-current="page"] { color:var(--c-ink); background:var(--c-panel); box-shadow:inset 0 0 0 1px var(--c-line-2), 0 2px 0 var(--c-line-2); }
.top .r { display:flex; gap:8px; align-items:center; }
.top .btn, .sdlg .btn, .acct-menu .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:12px; border:1px solid var(--c-line-2);
  background:var(--c-panel); color:var(--c-ink); font:700 15px/1 var(--c-sans); letter-spacing:-.011em; text-decoration:none; cursor:pointer; white-space:nowrap;
  box-shadow:0 2px 0 var(--c-line-2); transition:transform .45s var(--c-spring), box-shadow .2s, background .2s; }
.top .btn:hover, .sdlg .btn:hover { transform:translateY(-1px); }
.top .btn:active, .sdlg .btn:active { transform:translateY(2px); box-shadow:0 0 0 var(--c-line-2); transition-duration:.08s; }
.top .btn-primary, .sdlg .btn-primary { background:var(--c-tang); color:#fff; border:0; text-shadow:0 1px 0 rgb(120 40 0 / .35);
  box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .35), 0 4px 0 #A9430B, 0 12px 24px -12px rgb(242 107 29 / .6); }
.top .btn-primary:hover, .sdlg .btn-primary:hover { background:#FF7A2B; }
.top .btn-primary:active, .sdlg .btn-primary:active { box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .3), 0 1px 0 #A9430B; transform:translateY(3px); }
.top .btn-ghost { background:transparent; box-shadow:none; border-color:transparent; }
.top .btn-ghost:hover { background:var(--c-panel-2); }
.top .btn:disabled, .sdlg .btn:disabled { opacity:.6; cursor:wait; }
.top .btn:focus-visible, .sdlg .btn:focus-visible, .top nav a:focus-visible, .auth-chip:focus-visible { outline:2px solid var(--c-tang); outline-offset:3px; }

/* ---------- Fuß ---------- */
footer.site-foot { display:block; margin:0; padding:32px 0 48px; border-top:1px solid var(--c-line); color:var(--c-faint); font-size:14px; background:none; }
footer.site-foot > .wrap { width:min(1200px,100% - 40px); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer.site-foot .logo { font-size:20px; } footer.site-foot .logo i { width:20px; height:20px; }
footer.site-foot .copy { display:flex; align-items:center; gap:16px; }
footer.site-foot nav { display:flex; gap:16px; flex-wrap:wrap; }
footer.site-foot nav a { color:inherit; text-decoration:none; font-weight:600; } footer.site-foot nav a:hover { color:var(--c-ink); }

/* ---------- Anmeldung oben rechts ---------- */
.top-auth { display:flex; align-items:center; min-width:0; }
.top-auth:empty { display:none; }
.auth-chip { display:inline-flex; align-items:center; gap:9px; height:44px; max-width:260px; padding:0 10px 0 5px; border-radius:14px; border:1px solid var(--c-line-2);
  background:var(--c-panel); color:var(--c-ink); font:700 14px/1 var(--c-sans); cursor:pointer; box-shadow:0 2px 0 var(--c-line-2); transition:transform .45s var(--c-spring), background .2s; }
.auth-chip:hover { transform:translateY(-1px); }
.auth-chip[aria-expanded="true"] { background:var(--c-panel-2); transform:translateY(1px); box-shadow:0 1px 0 var(--c-line-2); }
.auth-av { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:10px; color:#fff; font:800 15px/1 var(--c-display); text-transform:uppercase;
  background:radial-gradient(90% 80% at 30% 20%,#FF9A4D,#F26B1D 72%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), inset 0 -3px 0 rgb(0 0 0 / .16); rotate:-6deg; transition:rotate .6s var(--c-spring); }
.auth-chip:hover .auth-av { rotate:5deg; }
.auth-mail { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--c-soft); font-weight:650; }
.auth-chip .caret { width:14px; height:14px; flex:none; stroke:var(--c-faint); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:rotate .45s var(--c-spring); }
.auth-chip[aria-expanded="true"] .caret { rotate:180deg; }
.auth-wrap { position:relative; }

.acct-menu { position:absolute; top:calc(100% + 10px); right:0; z-index:60; width:280px; padding:8px; border-radius:20px; background:var(--c-panel); border:1px solid var(--c-line-2);
  box-shadow:0 3px 0 var(--c-line-2), 0 30px 60px -30px rgb(60 40 10 / .45); transform-origin:top right; animation:acct-pop .4s var(--c-spring); }
.acct-menu[hidden] { display:none; }
@keyframes acct-pop { from { opacity:0; transform:scale(.94) translateY(-4px); } }
.acct-head { display:grid; gap:2px; padding:10px 12px 12px; border-bottom:1px solid var(--c-line); margin-bottom:6px; }
.acct-head small { color:var(--c-faint); font-weight:700; font-size:12px; }
.acct-head b { font:700 14.5px/1.3 var(--c-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-menu a, .acct-menu button.item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:12px; background:none; color:var(--c-ink);
  font:650 14.5px/1.2 var(--c-sans); letter-spacing:-.011em; text-decoration:none; text-align:left; cursor:pointer; transition:background .2s; }
.acct-menu a:hover, .acct-menu button.item:hover, .acct-menu a:focus-visible, .acct-menu button.item:focus-visible { background:var(--c-panel-2); outline:none; }
.acct-menu .ic { width:18px; height:18px; flex:none; color:var(--c-soft); }
.acct-menu .bal { margin-left:auto; padding:4px 8px; border-radius:8px; background:#A2E57F; font:800 12.5px/1 var(--c-display); box-shadow:0 2px 0 color-mix(in oklab,#5CC93B 70%,#000); rotate:-3deg; }
.acct-menu .ext { margin-left:auto; color:var(--c-faint); }
.acct-menu hr { margin:6px 4px; border:0; border-top:1px solid var(--c-line); }

/* ---------- Anmeldedialog ---------- */
.sdlg { width:min(460px,100vw - 32px); max-height:calc(100dvh - 32px); overflow:visible; padding:0; border:0; border-radius:28px; background:var(--c-panel);
  box-shadow:0 4px 0 var(--c-line-2), 0 50px 100px -40px rgb(40 25 5 / .55); }
.sdlg::backdrop { background:rgb(29 25 19 / .5); backdrop-filter:blur(4px); }
.sdlg[open] { animation:sdlg-pop .5s var(--c-spring); }
@keyframes sdlg-pop { from { transform:scale(.94) translateY(8px); opacity:0; } }
.sdlg-in { position:relative; display:grid; gap:16px; padding:32px 28px 26px; }
.sdlg-x { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:12px; background:var(--c-panel-2); cursor:pointer; transition:background .2s, rotate .45s var(--c-spring); }
.sdlg-x:hover { background:var(--c-panel-3); rotate:90deg; }
.sdlg-x svg { width:16px; height:16px; stroke:var(--c-ink); stroke-width:2.5; stroke-linecap:round; fill:none; }
.sdlg .orb { position:absolute; top:-24px; left:26px; width:56px; height:56px; border-radius:18px; display:grid; place-items:center; rotate:-8deg; color:#fff;
  background:radial-gradient(90% 80% at 30% 20%,#FF9A4D,#F26B1D 72%);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .45), inset 0 -8px 14px rgb(0 0 0 / .18), 0 5px 0 #A9430B; }
.sdlg .orb svg { width:26px; height:26px; }
.sdlg h2 { margin:30px 0 0; font:800 38px/.95 var(--c-display); letter-spacing:-.05em; font-variation-settings:"wdth" 92; color:var(--c-ink); }
.sdlg .lead { margin:0; color:var(--c-soft); font-size:16px; line-height:1.5; }

/* Feld im Dialog wie .join der Landingpage (auch auf Seiten ohne landing.css) */
.sdlg .join { display:flex; gap:8px; padding:6px; border-radius:16px; background:var(--c-panel); border:1px solid var(--c-line-2); box-shadow:0 2px 0 var(--c-line-2);
  transition:box-shadow .4s cubic-bezier(.16,1,.3,1), transform .5s var(--c-spring), border-color .2s; }
.sdlg .join:focus-within { border-color:var(--c-tang); box-shadow:6px 6px 0 -1px var(--c-tang); transform:translate(-2px,-2px); }
.sdlg .join input { flex:1; min-width:0; border:0; background:none; padding:0 12px; font:500 16px var(--c-sans); color:var(--c-ink); outline:0; }
.sdlg .join input::placeholder { color:var(--c-faint); }
.sdlg .form-note { font-size:13px; color:var(--c-faint); }
.sdlg .form-note.ok { color:#2f8a14; font-weight:650; } .sdlg .form-note.bad { color:#d02a40; font-weight:650; }
.sdlg .form-note:empty { display:none; }

/* Anmeldefeld (Dialog, Waitlist, Kontobereich): Google, „or“, E-Mail-Link */
.sip { display:grid; gap:12px; }
.sip .btn-google { width:100%; height:50px; border-radius:14px; font-size:15.5px; gap:12px; }
.top .btn-google, .sip .btn-google { background:var(--c-panel, #fff); }
.sip .g-logo { width:20px; height:20px; }
.sip-or { display:flex; align-items:center; gap:12px; color:var(--c-faint, #7F796E); font:700 12.5px/1 var(--c-sans, "Manrope"); text-transform:uppercase; letter-spacing:.06em; }
.sip-or::before, .sip-or::after { content:""; flex:1; height:1px; background:var(--c-line-2, rgb(43 33 16 / .15)); }
.sip .join { max-width:none; }
.sip .form-note { margin:0; min-height:0; }
.sip .fine { margin:0; font-size:12.5px; line-height:1.5; color:var(--c-faint, #7F796E); }
.sip .fine a { color:inherit; font-weight:700; }
.sip-sent { display:grid; gap:6px; padding:16px 18px; border-radius:16px; background:color-mix(in oklab,#A2E57F 40%,#fff); border:1px solid color-mix(in oklab,#5CC93B 35%,transparent); }
.sip-sent b { font:800 18px/1.2 var(--c-display, "Bricolage Grotesque"); letter-spacing:-.02em; }
.sip-sent span { font-size:14.5px; color:var(--c-soft, #5E584E); }
.sip-sent button { justify-self:start; padding:0; border:0; background:none; font:700 14px var(--c-sans, "Manrope"); color:var(--c-ink, #1D1913); text-decoration:underline; cursor:pointer; }

/* Häkchen im Toybox-Stil (Newsletter) */
.tick { display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:14.5px; line-height:1.45; color:var(--c-soft, #5E584E); }
.tick input { appearance:none; -webkit-appearance:none; flex:none; width:24px; height:24px; margin:0; border-radius:8px; border:1.5px solid var(--c-line-2, rgb(43 33 16 / .2)); background:#fff;
  box-shadow:0 2px 0 rgb(43 33 16 / .15); cursor:pointer; display:grid; place-items:center; transition:background .2s, transform .4s var(--c-spring, ease), border-color .2s; }
.tick input::after { content:""; width:11px; height:6px; border-left:3px solid #fff; border-bottom:3px solid #fff; rotate:-45deg; translate:0 -1px; scale:0; transition:scale .35s var(--c-spring, ease); }
.tick input:checked { background:#5CC93B; border-color:#3f9a24; box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), 0 2px 0 #3f9a24; rotate:-4deg; }
.tick input:checked::after { scale:1; }
.tick input:focus-visible { outline:2px solid #F26B1D; outline-offset:2px; }
.tick b { color:var(--c-ink, #1D1913); font-weight:700; }

/* Toast (mc.js) */
.toast { position:fixed; left:50%; bottom:24px; z-index:200; translate:-50% 140%; padding:12px 18px; border-radius:14px; background:#1D1913; color:#fff; font:700 14.5px/1.3 var(--c-sans);
  box-shadow:0 4px 0 #000, 0 20px 40px -20px rgb(0 0 0 / .5); transition:translate .5s var(--c-spring); max-width:calc(100vw - 32px); }
.toast.show { translate:-50% 0; }

@media (max-width:1000px) {
  .top nav { display:none; }
  .top .r { margin-left:auto; }
}
@media (max-width:600px) {
  .top > .wrap { gap:12px; }
  .top .r .btn { height:40px; padding:0 14px; font-size:14px; }
  .auth-chip { height:40px; padding:0 8px 0 4px; }
  .auth-av { width:30px; height:30px; }
  .auth-mail { display:none; }
  .sdlg-in { padding:30px 20px 22px; }
  .sdlg h2 { font-size:32px; }
  .sip .join { flex-direction:column; }
  .sip .join input { height:44px; }
}
@media (max-width:380px) { .top .r .ghost-s { display:none; } }
@media (prefers-reduced-motion:reduce) { .acct-menu, .sdlg[open] { animation:none; } }