/* ALEEY Kalorienrechner – zentriert, ruhig, wie die Essen-Seite */
.cc-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.cc-back { position: absolute; inset: 0; background: #00000000; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease; }
.cc-overlay.open .cc-back { background: #0000002e; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cc-sheet { position: relative; width: min(520px, 100%); height: min(760px, 92vh); border-radius: 30px 30px 0 0; background: #fbf8f4f5; box-shadow: 0 -12px 40px #0000001f;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transform: translateY(100%); transition: transform .42s cubic-bezier(.32,.72,0,1); overflow: hidden; }
.cc-overlay.open .cc-sheet { transform: none; }
.cc-inner { display: flex; flex-direction: column; height: 100%; padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); text-align: center; color: var(--ink); }
.cc-top { position: relative; display: flex; justify-content: center; align-items: center; height: 36px; }
.cc-dots { display: flex; gap: 6px; }
.cc-dots i { width: 6px; height: 6px; border-radius: 3px; background: #0000001a; transition: width .3s ease, background .3s ease; }
.cc-dots i.done { background: #00000047; }
.cc-dots i.on { width: 20px; background: var(--ink); }
.cc-x { position: absolute; right: 0; top: 2px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #0000000d; color: var(--ink); font-size: 18px; }
.cc-step { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 6vh; animation: ccIn .38s cubic-bezier(.32,.72,0,1); min-height: 0; overflow-y: auto; }
@keyframes ccIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cc-step h2 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; max-width: 300px; }
.cc-sub { margin: 8px 0 0; font-size: 14px; color: var(--muted); max-width: 300px; }
.cc-opts { display: grid; gap: 10px; width: 100%; max-width: 360px; margin-top: 28px; }
.cc-opts.grid { grid-template-columns: 1fr 1fr; }
.cc-opt { display: grid; justify-items: center; gap: 3px; padding: 16px 14px; border: 1px solid #ffffffcc; border-radius: 22px; background: #ffffffb3; color: var(--ink); box-shadow: 0 6px 18px #0000000d; transition: transform .15s ease, background .2s ease; }
.cc-opt:active { transform: scale(.97); }
.cc-opt b { font-size: 16px; font-weight: 600; }
.cc-opt small { font-size: 12.5px; color: var(--muted); }
.cc-opt.active { background: var(--ink); color: #fff; border-color: transparent; }
.cc-opt.active small { color: #ffffffa6; }
.cc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; max-width: 260px; margin-top: 26px; padding: 4px; border-radius: 16px; background: #0000000d; }
.cc-seg button { height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 600; }
.cc-seg button.active { background: #fff; color: #141414; box-shadow: 0 2px 8px #00000014; }
.cc-fields { display: grid; gap: 10px; width: 100%; max-width: 300px; margin-top: 16px; }
.cc-field { display: grid; justify-items: center; gap: 4px; padding: 12px 14px; border-radius: 20px; background: #ffffffb3; border: 1px solid #ffffffcc; }
.cc-field span { font-size: 12px; color: var(--muted); }
.cc-field div { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.cc-field input { width: 110px; border: 0; background: none; text-align: center; font-family: 'Outfit', -apple-system, sans-serif; font-weight: 400; font-size: 30px; color: var(--ink); outline: none; padding: 0; }
.cc-field input::placeholder { color: #00000026; }
.cc-field em { font-style: normal; font-size: 13px; color: var(--muted); }
.cc-nav { display: flex; gap: 10px; width: 100%; max-width: 360px; margin-top: auto; padding-top: 22px; }
.cc-next { flex: 1; height: 54px; border: 0; border-radius: 27px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 600; transition: opacity .2s ease; }
.cc-next:disabled { opacity: .3; }
.cc-backbtn { width: 54px; height: 54px; border: 0; border-radius: 50%; background: #0000000d; color: var(--ink); font-size: 26px; line-height: 1; }
.cc-kicker { margin: 0; font-size: 14px; color: var(--muted); }
.cc-big { display: flex; align-items: baseline; justify-content: center; position: relative; margin-top: 6px; }
.cc-big .bignum { font-family: 'Outfit', -apple-system, sans-serif; font-weight: 300; font-size: 76px; letter-spacing: -.03em; line-height: 1; }
.cc-big small { position: absolute; left: 100%; bottom: 10px; margin-left: 6px; font-size: 15px; color: var(--muted); }
.cc-warn { margin: 10px 0 0; font-size: 12.5px; color: #b0562f; }
.cc-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 360px; margin-top: 28px; }
.cc-macro { display: grid; justify-items: center; gap: 4px; padding: 16px 6px 14px; border-radius: 22px; background: #ffffffb3; border: 1px solid #ffffffcc; }
.cc-macro i { width: 8px; height: 8px; border-radius: 50%; }
.cc-macro b { font-family: 'Outfit', -apple-system, sans-serif; font-weight: 400; font-size: 26px; line-height: 1; }
.cc-macro b small { font-size: 13px; color: var(--muted); }
.cc-macro span { font-size: 12px; color: var(--muted); }
.cc-how { width: 100%; max-width: 360px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.cc-how summary { cursor: pointer; list-style: none; font-weight: 550; }
.cc-how summary::-webkit-details-marker { display: none; }
.cc-how p { margin: 8px 0 0; line-height: 1.45; }
.fd-sum .mix-legend b small { font-weight: 400; color: var(--muted); }

body.aleey-dark .cc-sheet { background: #1b1c1ff5; }
body.aleey-dark .cc-opt, body.aleey-dark .cc-field, body.aleey-dark .cc-macro { background: #ffffff0f; border-color: #ffffff14; }
body.aleey-dark .cc-opt.active { background: #f2f2ef; color: #141414; }
body.aleey-dark .cc-opt.active small { color: #14141499; }
body.aleey-dark .cc-seg, body.aleey-dark .cc-x, body.aleey-dark .cc-backbtn { background: #ffffff14; color: var(--ink); }
body.aleey-dark .cc-seg button.active { background: #f2f2ef; }
body.aleey-dark .cc-next { background: #f2f2ef; color: #141414; }
body.aleey-dark .cc-dots i { background: #ffffff26; } body.aleey-dark .cc-dots i.on { background: var(--ink); }
body.aleey-dark .cc-field input::placeholder { color: #ffffff2e; }

.cc-field input::-webkit-outer-spin-button, .cc-field input::-webkit-inner-spin-button, .cc-own-in::-webkit-inner-spin-button, .cc-own-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cc-field input, .cc-own-in { -moz-appearance: textfield; }
.cc-own-in { width: 220px; border: 0; border-bottom: 2px solid #0000001a; background: none; text-align: center; font-family: 'Outfit', -apple-system, sans-serif; font-weight: 300; font-size: 64px; color: var(--ink); outline: none; padding: 0; }
.cc-own { margin-top: 14px; border: 0; background: none; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cc-how { margin-top: 8px; }