/* Die Luckys: verbindliches Designsystem "Planer im Fokus", Stand 2026-10-18.
   Gemeinsame Tokens für alle Laravel- und React-Module. Bestehende Fachlogik bleibt unverändert. */
:root{
 --lk-bg:#f4f6fb;--lk-bg-app:#f4f6fb;--lk-surface:#fff;--lk-surface-strong:#fff;
 --lk-text:#20314e;--lk-muted:#73819a;--lk-line:#e2e8f1;
 --lk-green:#3b79a6;--lk-green-dark:#375fac;--lk-green-soft:#eaf0fb;
 --lk-sage:#607ba4;--lk-sage-soft:#edf3fa;--lk-orange:#c58a4f;--lk-orange-soft:#fff2e8;
 --lk-blue:#416ab5;--lk-blue-soft:#eaf0fd;--lk-rose:#c37081;--lk-rose-soft:#fff0f2;
 --lk-violet:#7c70b5;--lk-violet-soft:#f1eefa;
 --lk-shadow:0 4px 22px rgba(28,48,83,.035);--lk-shadow-soft:0 2px 12px rgba(28,48,83,.025);
 --lk-radius:11px;--lk-sidebar:88px;--lk-topbar:68px;
 --fh-bg:#f4f6fb;--fh-surface:#fff;--fh-surface-soft:#f6f8fc;
 --fh-text:#20314e;--fh-muted:#73819a;--fh-line:#e2e8f1;
 --fh-brand:#416ab5;--fh-brand-deep:#315aa5;--fh-brand-soft:#eaf1fc;
 --fh-shadow:0 4px 18px rgba(32,50,82,.035);--fh-shadow-soft:0 2px 12px rgba(32,50,82,.025);
 --fh-radius:11px;--fh-radius-sm:8px;
 color-scheme:light;
}
html{background:#f4f6fb!important}
body.luckys-app{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:14px!important;background:#f4f6fb!important;color:#20314e!important}
body.luckys-app .luckys-shell{background:#f4f6fb!important;box-shadow:none!important;border:0!important;border-radius:0!important;margin:0!important;overflow:visible!important;min-height:100vh!important}
body.luckys-app .luckys-sidebar{background:#1b2d4b!important;border-right:0!important;color:#d9e4f5!important;box-shadow:none!important;backdrop-filter:none!important;z-index:61}
body.luckys-app .luckys-brand-desktop{width:100%;display:flex!important;justify-content:center!important;margin:0 0 20px!important;padding:4px 0 15px!important}
body.luckys-app .luckys-brand-heart{color:#f4f8ff!important;width:44px;height:44px;display:grid;place-items:center;border-radius:11px;background:#2a4268}
body.luckys-app .luckys-brand-heart svg{display:none}
body.luckys-app .luckys-brand-desktop .luckys-brand-heart::after{content:"L";color:#fff;font-size:28px;font-weight:760;letter-spacing:-.05em}
body.luckys-app .luckys-brand-desktop .luckys-brand-copy{display:none}
body.luckys-app .luckys-side-nav{display:flex!important;flex-direction:column!important;align-items:stretch;gap:7px!important}
body.luckys-app .luckys-side-nav a{
 display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:6px!important;
 min-height:63px!important;padding:9px 3px!important;border-radius:9px!important;
 color:#afc0d9!important;background:transparent!important;font-weight:550!important;
 font-size:10.5px!important;line-height:1.25!important;text-align:center;white-space:nowrap;
 box-shadow:none!important;transform:none!important;text-decoration:none;
}
body.luckys-app .luckys-side-nav a:hover{background:#273e60!important;color:#fff!important}
body.luckys-app .luckys-side-nav a.active{background:#314b73!important;color:#fff!important;font-weight:700!important}
body.luckys-app .luckys-side-nav a svg{width:21px!important;height:21px!important;stroke-width:1.8!important}
body.luckys-app .luckys-sidebar-story{display:none!important}
body.luckys-app .luckys-stage{background:#f4f6fb!important;min-width:0}
body.luckys-app .luckys-topbar{
 height:68px!important;min-height:68px!important;border-bottom:1px solid #e3e9f2!important;
 background:rgba(255,255,255,.98)!important;box-shadow:none!important;
 padding:10px 23px!important;backdrop-filter:none!important;
}
body.luckys-app .luckys-content{width:min(1550px,calc(100% - 46px))!important;margin:0 auto!important;padding:24px 0 75px!important;min-width:0}
body.luckys-app .family-search>input{background:#f4f6fa!important;border:1px solid #e5eaf2!important;border-radius:9px!important;height:39px!important;color:#233651!important;box-shadow:none!important}
body.luckys-app .family-search>input:focus{outline:2px solid #bad0f3!important}
body.luckys-app .luckys-profile-menu summary{border-radius:8px!important;color:#2b4267!important}
body.luckys-app .luckys-profile-menu summary:hover,body.luckys-app .luckys-profile-menu[open] summary{background:#f3f6fb!important}
body.luckys-app .luckys-icon-button{color:#536b8e!important}
body.luckys-app .luckys-page-head h1,body.luckys-app .family-module-head h1,body.luckys-app .calendar-page-head h1{color:#192b49!important;font-size:27px!important;font-weight:740!important;letter-spacing:-.035em!important}
body.luckys-app .luckys-page-head p,body.luckys-app .family-module-head p,body.luckys-app .calendar-page-head p{color:#79869b!important;font-size:13px!important}
body.luckys-app .luckys-welcome{margin:0!important}
body.luckys-app .luckys-welcome h1{font-size:27px!important;color:#1d3051!important;letter-spacing:-.04em}
body.luckys-app .luckys-welcome p{font-size:13px!important;color:#8090a8!important}
body.luckys-app .luckys-hero{display:none!important}
body.luckys-app .luckys-card,body.luckys-app .luckys-list-card,
body.luckys-app .family-panel,body.luckys-app .family-wide-panel,body.luckys-app .f-card,
body.luckys-app .luckys-member-card,body.luckys-app .luckys-member-add-card,
body.luckys-app .more-section-card,body.luckys-app .more-mobile-primary,
body.luckys-app .calendar-week-ref,body.luckys-app .calendar-day-ref,
body.luckys-app .calendar-month-ref,body.luckys-app .calendar-list-ref,body.luckys-app .calendar-side-card,
body.luckys-app .luckys-weather-card{
 background:#fff!important;border:1px solid #e2e8f1!important;border-radius:11px!important;
 box-shadow:0 4px 18px rgba(24,43,75,.026)!important;
}
body.luckys-app .luckys-card,body.luckys-app .family-panel,body.luckys-app .family-wide-panel{padding:18px!important}
body.luckys-app .luckys-home{gap:17px!important}
body.luckys-app .luckys-home-grid{gap:14px!important}
body.luckys-app .luckys-home-grid-top{grid-template-columns:1.1fr 1fr 1fr!important}
body.luckys-app .luckys-home-grid-bottom{grid-template-columns:1.1fr 1fr 1fr!important}
body.luckys-app .luckys-card-head strong,body.luckys-app .family-panel h2{color:#243a5b!important;font-size:14px!important;font-weight:690!important}
body.luckys-app .luckys-card-icon{border-radius:8px!important;width:32px!important;height:32px!important;color:#4269a6!important;background:#eef3fb!important}
body.luckys-app .luckys-button,body.luckys-app .luckys-primary-action,body.luckys-app .calendar-primary,
body.luckys-app .family-form button[type=submit],body.luckys-app .family-panel .family-form > button{
 background:#375fac!important;color:#fff!important;border:1px solid #375fac!important;
 border-radius:8px!important;box-shadow:none!important;
}
body.luckys-app .luckys-button:hover,body.luckys-app .luckys-primary-action:hover,body.luckys-app .calendar-primary:hover{background:#294e93!important}
body.luckys-app .luckys-text-link{color:#3963a9!important}
body.luckys-app .luckys-check-row:hover{background:#f6f8fc!important}
body.luckys-app .luckys-checkbox.checked{background:#416ab5!important}
body.luckys-app .luckys-event-time{color:#567cba!important}
body.luckys-app .luckys-mini-week a.today{background:#e9f0fd!important;color:#3560ae!important}
body.luckys-app .luckys-family-card blockquote{background:#f6f8fc!important;color:#7a87a1!important;border-radius:9px}
body.luckys-app .luckys-family-person .luckys-avatar{border-color:#e4ebf4!important}
body.luckys-app input:not([type=checkbox]):not([type=radio]):not([type=color]),body.luckys-app textarea,body.luckys-app select{
 border-color:#dde5ef;
}
body.luckys-app input:focus-visible,body.luckys-app textarea:focus-visible,body.luckys-app select:focus-visible{outline:2px solid #87a7df;outline-offset:2px}
body.luckys-app .luckys-flash{border-radius:9px!important;box-shadow:none!important}
body.luckys-app .more-section-head h2{font-size:14px!important;color:#2a3f62!important}
body.luckys-app .more-card-icon{border-radius:8px!important}
body.luckys-app .luckys-avatar{background:#e7edf8;color:#36547f}
body.luckys-app .luckys-bottom-nav{background:#1b2d4b!important;border-top:1px solid #294467!important}
body.luckys-app .luckys-bottom-nav a{color:#bfcee4!important}
body.luckys-app .luckys-bottom-nav a.active{color:#fff!important}
@media(min-width:901px){
 body.luckys-app .luckys-shell{width:100%!important;display:grid!important;grid-template-columns:88px minmax(0,1fr)!important}
 body.luckys-app .luckys-sidebar{position:fixed!important;inset:0 auto 0 0!important;width:88px!important;height:100vh!important;padding:19px 7px 15px!important;overflow-y:auto!important}
 body.luckys-app .luckys-stage{grid-column:2!important}
 body.luckys-app .luckys-bottom-nav{display:none!important}
}
@media(max-width:1200px) and (min-width:901px){
 body.luckys-app .luckys-content{width:calc(100% - 34px)!important}
 body.luckys-app .luckys-home-grid-top,body.luckys-app .luckys-home-grid-bottom{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
 body.luckys-app .luckys-shell{display:block!important;width:100%!important}
 body.luckys-app .luckys-sidebar{display:none!important}
 body.luckys-app .luckys-stage{display:block!important}
 body.luckys-app .luckys-topbar{height:61px!important;min-height:61px!important;padding:8px 14px!important}
 body.luckys-app .luckys-brand-mobile{display:flex!important;color:#233a5e}
 body.luckys-app .luckys-brand-mobile .luckys-brand-heart{width:33px;height:33px;border-radius:9px}
 body.luckys-app .luckys-brand-mobile .luckys-brand-heart svg{display:block}
 body.luckys-app .luckys-content{width:calc(100% - 26px)!important;padding:18px 0 105px!important}
 body.luckys-app .luckys-home-grid-top,body.luckys-app .luckys-home-grid-bottom{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
 body.luckys-app .luckys-content{width:calc(100% - 22px)!important}
 body.luckys-app .luckys-home-grid-top,body.luckys-app .luckys-home-grid-bottom{grid-template-columns:minmax(0,1fr)!important}
 body.luckys-app .luckys-card,body.luckys-app .family-panel,body.luckys-app .family-wide-panel{padding:14px!important}
 body.luckys-app .luckys-welcome h1{font-size:24px!important}
 body.luckys-app .luckys-page-head h1,body.luckys-app .family-module-head h1{font-size:23px!important}
}

/* Das Login übernimmt dieselbe helle Fläche und das dunkle Navigationsmotiv. */
body.luckys-auth-page{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px!important;background:linear-gradient(90deg,#1b2d4b 0,#1b2d4b 32%,#f4f6fb 32%,#f4f6fb 100%)!important}
body.luckys-auth-page .luckys-auth-card{background:#fff!important;border:1px solid #e1e8f1!important;border-radius:14px!important;box-shadow:0 20px 60px rgba(9,25,52,.12)!important;max-width:460px!important;width:100%!important}
body.luckys-auth-page .luckys-auth-brand{color:#1e3555}
body.luckys-auth-page .luckys-auth-brand > span{background:#eaf1fd!important;color:#4269b6!important;border-radius:9px!important}
body.luckys-auth-page h1{color:#1b2f4e!important;font-size:27px!important;font-weight:720!important}
body.luckys-auth-page p{color:#7e8ca2!important}
body.luckys-auth-page .luckys-form input:not([type=checkbox]){background:#fbfcff!important;border-radius:8px!important;border:1px solid #dfe6f1!important}
@media(max-width:700px){body.luckys-auth-page{background:linear-gradient(180deg,#1b2d4b 0,#1b2d4b 90px,#f4f6fb 90px,#f4f6fb 100%)!important;padding:16px!important}}