*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#182230}body{margin:0}.app-body,.auth-body{min-height:100vh;background:#edf2f7;background-image:linear-gradient(rgba(14,26,40,.74),rgba(14,26,40,.74)),var(--custom-bg,linear-gradient(135deg,#193a57,#6c8ca5));background-size:cover;background-position:center;background-attachment:fixed}.app-shell{min-height:100vh;display:grid;grid-template-columns:245px 1fr}.sidebar{background:rgba(18,31,46,.92);backdrop-filter:blur(18px);color:white;padding:24px 18px;display:flex;flex-direction:column;border-right:1px solid #ffffff12}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:white;margin-bottom:32px}.brand small{display:block;color:#aec0cf;margin-top:2px}.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#65b6e8,#7c6fe8);display:grid;place-items:center;color:white;font-weight:900;box-shadow:0 8px 22px #0002}.logo.big{width:58px;height:58px;font-size:20px;margin:auto}.sidebar nav{display:grid;gap:7px}.sidebar nav a{color:#d8e2eb;text-decoration:none;padding:11px 12px;border-radius:10px;font-weight:650}.sidebar nav a:hover,.sidebar nav a.active{background:#ffffff16;color:white}.sidebar-user{margin-top:auto;display:grid;gap:5px;font-size:14px}.sidebar-user a{color:#a9c7de;text-decoration:none}.main-content{padding:34px;max-width:1500px;width:100%;background:rgba(244,247,251,.94);min-height:100vh}.page-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}.page-head h1{margin:2px 0 5px;font-size:30px}.page-head p,.muted{margin:0;color:#657386}.eyebrow{text-transform:uppercase;letter-spacing:.07em;font-size:11px;color:#62809a;font-weight:800}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #cdd8e2;background:white;color:#193a57;border-radius:10px;padding:10px 14px;text-decoration:none;font-weight:750;cursor:pointer}.btn.primary{border:0;background:linear-gradient(135deg,#297bb8,#6d69d8);color:white;box-shadow:0 8px 20px #386aa125}.btn.secondary{background:white}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px}.stats article,.panel,.howto-card{background:rgba(255,255,255,.96);border:1px solid #dfe7ef;border-radius:16px;box-shadow:0 8px 30px rgba(24,40,60,.06)}.stats article{padding:19px}.stats span{display:block;color:#6d7b8c;font-size:13px}.stats strong{display:block;font-size:29px;margin-top:5px}.progress{height:5px;background:#e8edf3;border-radius:5px;margin-top:9px;overflow:hidden}.progress i{display:block;height:100%;background:#5d74d8}.panel{padding:20px;margin-bottom:20px}.panel.narrow{max-width:800px}.panel h2{margin:0 0 7px}.panel p{color:#667487;line-height:1.5}.task-cards{display:grid;gap:9px}.task-card{display:grid;grid-template-columns:130px 1fr auto;gap:15px;align-items:center;padding:13px;border:1px solid #e4eaf0;border-radius:12px;background:white}.task-card.late{border-left:4px solid #d95858}.due small{display:block;color:#718093}.due b{display:block;margin-top:3px}.task-info h3{margin:0 0 4px;font-size:16px}.task-info p{margin:0;color:#718093;font-size:13px}.status,.pill{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:800}.status.open{background:#fff1cc;color:#7c5b00}.status.doing{background:#e7f0fb;color:#245989}.status.done{background:#e2f2df;color:#316532}.month-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.month-tabs a{padding:8px 10px;border-radius:9px;text-decoration:none;color:#4e6072;background:#fff;border:1px solid #dce4ec;font-size:13px}.month-tabs a.active{background:#193a57;color:#fff}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid .wide{grid-column:1/-1}.stack{display:grid;gap:13px}label{display:grid;gap:6px;font-size:14px;font-weight:700}input,select,textarea{width:100%;border:1px solid #cbd6e0;border-radius:9px;background:white;padding:10px 11px;font:inherit;color:#182230}textarea{resize:vertical}.form-actions{display:flex;gap:9px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px 9px;border-bottom:1px solid #e8edf2;vertical-align:top}th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#718093}.completed{opacity:.6}.check{width:25px;height:25px;border:2px solid #bcc9d5;border-radius:7px;display:grid;place-items:center;text-decoration:none;font-weight:900;color:white}.check.checked{background:#54a45b;border-color:#54a45b}.howto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.howto-card{padding:19px}.howto-card h3{margin:7px 0}.howto-card p{color:#536475;line-height:1.55}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.note{margin-top:16px;padding:12px;border-radius:10px;background:#edf4fa;color:#46647f}.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px}.alert.success{background:#e5f4e5;color:#2e6634}.alert.error{background:#fdeaea;color:#9a2f2f}.empty{padding:20px;color:#708093}.auth-body{display:grid;place-items:center;padding:24px}.auth-card{width:min(430px,94vw);padding:30px;background:rgba(255,255,255,.95);border:1px solid #ffffff88;border-radius:22px;box-shadow:0 25px 80px rgba(0,0,0,.24);backdrop-filter:blur(18px)}.auth-card h1{text-align:center;margin:18px 0 5px}.auth-card>.muted{text-align:center}.auth-card .stack{margin-top:22px}.install-card{width:min(760px,96vw)}.install-card h1{text-align:left}.install-card>.muted{text-align:left}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:static}.sidebar nav{grid-template-columns:repeat(3,1fr)}.sidebar-user{margin-top:16px}.main-content{padding:20px}.stats{grid-template-columns:1fr 1fr}.howto-grid,.choice-grid{grid-template-columns:1fr}.task-card{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.page-head{align-items:flex-start}.table-wrap{font-size:13px}}
.logo-new{background:linear-gradient(135deg,#2c8ac9,#6d69d8);font-size:22px;font-weight:900}.logo-new span{transform:translateY(-1px)}
.switch-year-form{display:flex;gap:10px;align-items:center;max-width:520px}.switch-year-form select{flex:1}
.login-page{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px;margin:0}
.login-card{width:min(440px,100%);margin:auto;padding:34px 30px;text-align:left}
.login-logo{width:58px;height:58px;margin:0 auto 18px;font-size:25px}
.login-card h1{text-align:center;margin:0 0 8px;font-size:34px}
.login-tagline{margin:0;text-align:center;font-weight:800;font-size:16px;color:#27384a}
.login-access{margin:7px 0 24px;text-align:center;color:#6a7888;line-height:1.45}
.login-form{margin-top:0!important}.login-form .btn{width:100%;min-height:46px}
@media(max-width:700px){.switch-year-form{display:grid}}
@media(max-width:600px){.login-page{min-height:100svh;padding:18px;align-items:center;justify-content:center}.login-card{width:100%;max-width:390px;margin:auto;padding:28px 22px;border-radius:18px}.login-card h1{font-size:30px}.login-tagline{font-size:15px}}
.login-tagline{font-weight:400!important}
.login-page{
background-image:
linear-gradient(rgba(10,25,40,.45),rgba(10,25,40,.45)),
var(--custom-bg,url('login-background.jpg'))!important;
background-size:cover!important;
background-position:center!important;
}
.site-footer{
margin-top:auto;
padding:24px 18px 18px;
text-align:center;
font-size:12px;
line-height:1.6;
color:#7b8794;
}
.site-footer a{
color:inherit;
text-decoration:none;
}
.site-footer a:hover{text-decoration:underline;}
.login-footer{
position:fixed;
left:0; right:0; bottom:12px;
text-align:center;
font-size:12px;
line-height:1.6;
color:rgba(255,255,255,.82);
z-index:5;
}
.login-footer a{color:inherit;text-decoration:none}
.login-footer a:hover{text-decoration:underline}
@media(max-width:700px){
.login-footer{position:static;margin:18px auto 12px;color:#667788}
}
.login-card h1,.brand b{
font-family:Arial,Helvetica,sans-serif!important;
font-style:normal!important;
font-weight:700!important;
letter-spacing:.02em!important;
}
.login-logo-image{
object-fit:contain;
}
@media(max-width:600px){
.login-page{
min-height:100svh!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 56px)!important;
background-position:center center!important;
background-attachment:scroll!important;
}
.login-card{
width:min(100%,390px)!important;
margin:0!important;
padding:20px 20px 22px!important;
border-radius:20px!important;
}
.login-logo-image{
width:100px!important;
max-height:86px!important;
margin:0 auto 2px!important;
}
.login-card h1{
font-size:30px!important;
margin:0 0 6px!important;
}
.login-tagline{
font-size:15px!important;
font-weight:400!important;
margin:0 0 5px!important;
}
.login-access{
font-size:15px!important;
margin:0 0 17px!important;
}
.login-footer{
position:fixed!important;
left:0!important;
right:0!important;
bottom:calc(env(safe-area-inset-bottom) + 7px)!important;
margin:0!important;
color:rgba(255,255,255,.92)!important;
text-align:center!important;
}
}
/* PENDENZO 5.5.1 · mobile App Navigation und Schnellerfassung */
.mobile-appbar,.mobile-bottom-nav{display:none}
.quick-task-form{display:grid;gap:16px}
.quick-task-form fieldset{margin:0;padding:0;border:0}
.quick-task-form legend{margin-bottom:7px;font-size:14px;font-weight:700}
.quick-date-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:9px}
.quick-date-button{min-height:43px;border:1px solid #cbd6e0;border-radius:10px;background:#fff;color:#20384d;font:inherit;font-weight:700;cursor:pointer}
.quick-date-button.active{background:#e6f0f8;border-color:#4d86ae;color:#1d5378}
.quick-task-save{min-height:50px;width:100%;font-size:15px}
.quick-task-details{border-top:1px solid #e1e7ec;padding-top:14px}
.quick-task-details>summary{cursor:pointer;color:#20384d;font-weight:700}
.quick-task-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:14px}
.quick-task-details-grid .wide{grid-column:1/-1}
.quick-task-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:13px}
.quick-task-links a{color:#365e7b}
@media(max-width:900px){
.app-body{background:#edf2f7;background-image:none}
.app-shell{display:block!important;min-height:0!important}
.app-body .sidebar{display:none!important}
.mobile-appbar{display:flex;position:sticky;top:0;z-index:90;align-items:center;justify-content:space-between;min-height:64px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));background:#20384d;color:#fff;box-shadow:0 4px 18px rgba(15,34,49,.16)}
.mobile-brand,.mobile-profile{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;min-width:0}
.mobile-brand img{width:40px;height:40px;border-radius:11px;background:#fff}
.mobile-brand span{font-size:15px;font-weight:800;letter-spacing:.035em}
.mobile-profile>span:first-child{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650}
.mobile-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#fff;color:#20384d;font-size:13px;font-weight:800}
.mobile-avatar img{width:100%;height:100%;object-fit:cover}
.mobile-bottom-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;z-index:100;left:0;right:0;bottom:0;min-height:68px;padding:6px max(5px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));background:rgba(255,255,255,.98);border-top:1px solid #dce4eb;box-shadow:0 -7px 24px rgba(23,52,75,.1)}
.mobile-nav-link{min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#6c7c89;text-decoration:none;font-size:10px;font-weight:700;line-height:1.1}
.mobile-nav-link .nav-icon{width:21px;height:21px;flex:0 0 21px}
.mobile-nav-link.active{color:#20384d}
.mobile-create-link{color:#20384d}
.mobile-create-icon{width:45px;height:45px;margin-top:-18px;border-radius:50%;display:grid;place-items:center;background:#20384d;color:#fff;box-shadow:0 7px 18px rgba(20,48,68,.24);font-size:28px;font-weight:500;line-height:1}
.mobile-more{min-width:0}
.mobile-more>summary{list-style:none;cursor:pointer}
.mobile-more>summary::-webkit-details-marker{display:none}
.mobile-more-menu{position:fixed;z-index:101;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));display:grid;padding:10px;background:#fff;border:1px solid #dce4eb;border-radius:17px;box-shadow:0 18px 55px rgba(19,42,59,.25)}
.mobile-more-menu a{display:flex;align-items:center;gap:11px;min-height:48px;padding:10px 12px;border-radius:10px;color:#20384d;text-decoration:none;font-size:14px;font-weight:650}
.mobile-more-menu a:hover,.mobile-more-menu a:focus-visible{background:#eef3f7}
.mobile-more-menu .nav-icon{width:21px;height:21px;flex-basis:21px}
.main-content{padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
.app-userbar{display:none!important}
.page-head{margin-bottom:17px!important}
.page-head h1{font-size:29px!important;line-height:1.12!important}
.welcome-head h1{font-size:31px!important}
.page-head p{line-height:1.4!important}
.mobile-redundant-create{display:none!important}
.app-body .site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
}
@media(max-width:700px){
.quick-task-panel{padding:16px!important}
.quick-task-details-grid{grid-template-columns:1fr}
.quick-task-details-grid .wide{grid-column:auto}
.quick-task-form input,.quick-task-form select,.quick-task-form textarea{font-size:16px!important;min-height:47px}
.quick-task-form textarea{min-height:94px}
.tasks-table,.recurring-table{display:block!important;width:100%!important;min-width:0!important}
.tasks-table thead,.recurring-table thead{display:none!important}
.tasks-table tbody,.recurring-table tbody{display:grid!important;gap:11px!important;width:100%!important}
.tasks-table tr,.recurring-table tr{display:grid!important;width:100%!important;min-width:0!important;padding:14px!important;border:1px solid #dfe7ee!important;border-radius:14px!important;background:#fff!important;box-shadow:0 5px 16px rgba(24,40,60,.045)!important}
.tasks-table td,.recurring-table td{display:block!important;width:100%!important;min-width:0!important;padding:7px 0!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
.tasks-table td::before,.recurring-table td::before{content:attr(data-label);display:block;margin-bottom:3px;color:#718093;font-size:10px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.tasks-table .task-cell-title,.recurring-table .recurring-cell-title{order:-2;padding-top:0!important;font-size:15px!important}
.tasks-table .task-cell-date,.recurring-table .recurring-cell-rhythm{order:-1}
.tasks-table .task-cell-actions,.recurring-table .recurring-cell-actions{padding-bottom:0!important}
.tasks-table .task-actions,.recurring-table .task-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.tasks-table .task-actions .btn,.recurring-table .task-actions .btn{width:auto!important;min-height:40px!important;padding:8px 11px!important}
.tasks-table .task-actions form,.recurring-table .task-actions form{margin:0!important}
.tasks-table .check{width:40px!important;height:40px!important}
.task-status-section>.table-wrap,.completed-tasks-content,.recurring-table-wrap,.recurring-table{overflow:visible!important}
.task-status-section{padding:16px!important}
.completed-tasks-content{padding:12px!important}
}
@media(max-width:370px){
.mobile-brand span{display:none}
.mobile-profile>span:first-child{max-width:105px}
.mobile-nav-link{font-size:9px}
.quick-date-buttons{grid-template-columns:1fr}
}
.task-edit-hint{
padding:12px 14px;
border-radius:10px;
background:#eef5fb;
color:#42566a;
line-height:1.5;
font-size:13px;
}
.brand b,.login-card h1{
font-family:Arial,Helvetica,sans-serif!important;
font-style:normal!important;
text-transform:none!important;
}
/* Update 8: actual custom drawing + task editing */
.sartodo-drawn-logo{display:block;object-fit:contain}
.sidebar-drawn-logo{width:48px;height:48px;border-radius:14px;background:#fff;padding:2px}
.login-drawn-logo{width:150px;height:150px;margin:0 auto 8px;border-radius:24px}
.task-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}
.task-edit-btn{padding:7px 10px;font-size:12px}
@media(max-width:600px){
.login-drawn-logo{width:118px;height:118px}
.task-actions{flex-direction:column;align-items:flex-start}
}
/* UPDATE 9 */
.sort-link{color:inherit;text-decoration:none;font-weight:800}
.sort-link:hover{text-decoration:underline}
.btn.danger{background:#fff;color:#a52d2d;border-color:#e6b8b8}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.user-cards{display:grid;gap:14px}
.user-card{border:1px solid #e0e7ee;border-radius:14px;padding:16px;background:#fbfdff}
.user-edit-card{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;align-items:end}
.user-role-row{display:grid;grid-template-columns:minmax(100px,.7fr) 1.4fr auto;gap:10px;align-items:end;margin-top:12px;padding-top:12px;border-top:1px solid #e8edf2}
.user-role-row small{display:block;color:#718093;margin-bottom:3px}
.user-role-row strong{display:block}
.mail-day-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.mail-day-card{border:1px solid #e0e7ee;border-radius:12px;padding:12px}
.test-mail-form{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #e8edf2}
.test-mail-form small{color:#718093}
.recurring-table td,.tasks-table td{vertical-align:middle}
@media(max-width:800px){
.user-edit-card,.user-role-row{grid-template-columns:1fr}
.user-card input,.user-card select,.user-card .btn{width:100%}
.mail-day-grid{grid-template-columns:1fr 1fr}
.test-mail-form{align-items:stretch;flex-direction:column}
}
@media(max-width:600px){
.mail-day-grid{grid-template-columns:1fr}
.tasks-table,.recurring-table{min-width:760px}
.table-wrap{-webkit-overflow-scrolling:touch}
}
/* UPDATE 10: Kalender */
.calendar-toolbar{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:10px;margin-bottom:14px;text-align:center}.calendar-toolbar h2{margin:0}.calendar-toolbar>div:last-child{text-align:right}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.calendar-head{margin-bottom:7px;font-size:12px;font-weight:800;color:#6b7b8c;text-align:center}.calendar-day{min-height:128px;border:1px solid #dfe7ee;border-radius:12px;padding:9px;background:#fff;min-width:0}.empty-day{background:#f6f8fa;border-style:dashed}.calendar-day.today{outline:2px solid #367fc0;outline-offset:-2px}.calendar-date{font-size:13px;font-weight:800;margin-bottom:7px}.calendar-items{display:grid;gap:5px}.calendar-task{display:block;padding:7px 8px;border-radius:8px;background:#eef3f7;color:#17324d;text-decoration:none;border-left:4px solid #8aa0b4;min-width:0}.calendar-task strong,.calendar-task small{display:block;overflow:hidden;text-overflow:ellipsis}.calendar-task strong{font-size:12px;white-space:normal;line-height:1.25}.calendar-task small{font-size:10px;color:#6d7c8a;margin-top:2px;white-space:nowrap}.calendar-task.status-doing{border-left-color:#d49b33}.calendar-task.status-done{border-left-color:#5d9b75;opacity:.7;text-decoration:none}.calendar-task.status-done strong{text-decoration:line-through}
@media(max-width:700px){.calendar-panel{overflow:hidden}.calendar-head{display:none}.calendar-grid:not(.calendar-head){grid-template-columns:1fr}.empty-day{display:none}.calendar-day{min-height:0;padding:12px}.calendar-day:not(:has(.calendar-task)){display:none}.calendar-date:before{content:'Tag ';font-weight:400}.calendar-task strong{font-size:14px}.calendar-task small{font-size:12px}.calendar-toolbar{grid-template-columns:48px 1fr 48px}}
.smtp-status{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:600px){.smtp-status{align-items:stretch;flex-direction:column}}
/* Update 11 final typography */
html,body,input,select,textarea,button{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Arial,Helvetica,sans-serif!important;font-weight:400}
p,span,small,label,input,select,textarea,td{font-weight:400!important}
h1,h2,h3,h4,h5,h6,.page-head h1,.panel h2,.task-info h3,th,.brand b,.btn,strong{font-weight:700}
/* Update 11.1 welcome polish */
.welcome-head h1{margin-bottom:10px}
.greeting-accent{
width:118px;
height:4px;
border-radius:999px;
background:linear-gradient(90deg,#2c87c9,#7466df);
margin:4px 0 16px;
}
.welcome-copy{
margin:0!important;
color:#647386!important;
font-size:16px;
line-height:1.55;
font-weight:400!important;
}
@media(max-width:600px){
.greeting-accent{width:82px;height:3px;margin-bottom:12px}
.welcome-copy{font-size:15px}
}
/* UPDATE 11.3: softer frame + compact uppercase navigation + consistent typography */
/* Warm beige outer frame/background instead of the dark/black-looking edges */
html{
background:#e9e1d6!important;
}
body,
.app-body,
.auth-body{
background-color:#e9e1d6;
}
/* Keep the actual SARTODO content clean */
.main-content{
background:rgba(244,247,251,.97);
}
/* Navigation: uppercase, smaller and lighter */
.sidebar nav a{
text-transform:uppercase!important;
letter-spacing:.055em!important;
font-size:12px!important;
line-height:1.25!important;
font-weight:500!important;
}
/* Consistent Apple-like system typography */
html,body,input,select,textarea,button{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif!important;
}
body,p,span,small,label,input,select,textarea,td,.sidebar-user,.sidebar nav a{
font-weight:400;
}
h1,h2,h3,h4,h5,h6,.page-head h1,.panel h2,.task-info h3,.brand b,th{
font-weight:700;
}
.btn{
font-weight:600;
}
strong{
font-weight:600;
}
/* Do not make ordinary form labels unnecessarily heavy */
label{
font-weight:500!important;
}
/* Mobile navigation stays compact despite uppercase text */
@media(max-width:900px){
.sidebar nav a{
font-size:11px!important;
letter-spacing:.045em!important;
padding:10px 9px!important;
}
}
@media(max-width:600px){
.sidebar nav{
gap:5px;
}
.sidebar nav a{
font-size:10.5px!important;
padding:9px 7px!important;
}
}
/* =========================================================
SARTODO UPDATE 11.5 – definitive live-design overrides
========================================================= */
:root{
--sartodo-beige:#e9e1d6;
--sartodo-beige-deep:#ded2c2;
--sartodo-beige-active:#d5c7b6;
--sartodo-ink:#202a34;
--sartodo-muted:#6d7580;
--sartodo-main:#f1f4f7;
}
/* typography */
html,body,input,select,textarea,button{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif!important;
}
body,p,span,small,label,input,select,textarea,td,a{
font-weight:400!important;
}
h1,h2,h3,h4,h5,h6,.page-head h1,.panel h2,th{
font-weight:700!important;
}
.brand b{
font-weight:700!important;
}
.btn{
font-weight:500!important;
}
.task-info h3,.task-card strong,.due b,.status,.pill{
font-weight:500!important;
}
/* actual beige left navigation */
.app-body{
background:var(--sartodo-beige)!important;
background-image:none!important;
}
.sidebar{
background:var(--sartodo-beige)!important;
color:var(--sartodo-ink)!important;
border-right:1px solid #d5c9ba!important;
backdrop-filter:none!important;
}
.brand{
color:var(--sartodo-ink)!important;
}
.brand small{
color:#776f66!important;
font-weight:400!important;
}
.sidebar-user,
.sidebar-user span{
color:var(--sartodo-ink)!important;
}
.sidebar-user a{
color:#675f57!important;
}
/* navigation uppercase, smaller, calm */
.sidebar nav a{
color:#4d4a46!important;
text-transform:uppercase!important;
letter-spacing:.075em!important;
font-size:11px!important;
line-height:1.25!important;
font-weight:500!important;
padding:10px 12px!important;
}
.sidebar nav a:hover{
background:rgba(255,255,255,.42)!important;
color:var(--sartodo-ink)!important;
}
.sidebar nav a.active{
background:var(--sartodo-beige-active)!important;
color:var(--sartodo-ink)!important;
}
/* main area */
.main-content{
background:var(--sartodo-main)!important;
}
/* beige bottom footer */
.site-footer{
grid-column:1/-1!important;
background:var(--sartodo-beige)!important;
color:#6b645c!important;
border-top:1px solid #d5c9ba!important;
padding:18px!important;
}
.site-footer a{
color:#6b645c!important;
}
/* exact supplied new logo */
.sidebar-drawn-logo{
width:46px!important;
height:46px!important;
padding:3px!important;
object-fit:contain!important;
border-radius:12px!important;
background:rgba(255,255,255,.52)!important;
box-shadow:none!important;
}
.login-drawn-logo{
width:112px!important;
height:112px!important;
object-fit:contain!important;
border-radius:0!important;
background:transparent!important;
margin:0 auto 8px!important;
}
/* warnings on Excel import */
.alert.warning{
background:#fff5d9!important;
color:#735c1c!important;
}
.alert.warning ul{
margin:8px 0 0 20px;
padding:0;
}
/* mobile */
@media(max-width:900px){
.sidebar{
background:var(--sartodo-beige)!important;
}
.sidebar nav a{
font-size:10.5px!important;
padding:9px 8px!important;
}
}
@media(max-width:600px){
.sidebar nav a{
font-size:10px!important;
letter-spacing:.055em!important;
}
.login-drawn-logo{
width:92px!important;
height:92px!important;
}
}
/* =========================================================
SARTODO UPDATE 11.6 – Buttons & typography refinement
========================================================= */
:root{
--sartodo-beige:#e9e1d6;
--sartodo-beige-soft:#f4efe8;
--sartodo-beige-active:#d5c7b6;
--sartodo-ink:#202a34;
--sartodo-navy:#20384d;
--sartodo-navy-hover:#172c3e;
--sartodo-border:#d6dde4;
--sartodo-green:#a8cfa7;
--sartodo-green-deep:#5f8a62;
--sartodo-yellow:#f7e7b8;
}
/* One calm type system everywhere */
html,body,
input,select,textarea,button,
.btn,.status,.pill,
.month-tabs a,
table,th,td,
.sidebar,.sidebar nav a,
.page-head,.panel,
.auth-card{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif!important;
}
/* Body copy stays calm and light */
body,p,span,small,label,input,select,textarea,td,a{
font-weight:400!important;
letter-spacing:0!important;
}
/* Headings are the only strong typographic anchors */
h1,h2,h3,h4,h5,h6,
.page-head h1,.panel h2,th,.brand b{
font-weight:700!important;
}
/* Buttons: remove blue-purple SaaS gradient, use one elegant SARTODO system */
.btn,
button.btn{
border-radius:11px!important;
min-height:40px;
padding:9px 15px!important;
font-size:13px!important;
line-height:1.15!important;
font-weight:600!important;
letter-spacing:.01em!important;
box-shadow:none!important;
transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}
.btn.primary,
button.btn.primary{
background:var(--sartodo-navy)!important;
border:1px solid var(--sartodo-navy)!important;
color:#fff!important;
}
.btn.primary:hover,
button.btn.primary:hover{
background:var(--sartodo-navy-hover)!important;
border-color:var(--sartodo-navy-hover)!important;
transform:translateY(-1px);
}
.btn.secondary,
button.btn.secondary{
background:#fff!important;
border:1px solid #cfd7de!important;
color:var(--sartodo-navy)!important;
}
.btn.secondary:hover,
button.btn.secondary:hover{
background:var(--sartodo-beige-soft)!important;
border-color:#c6b9aa!important;
}
.btn.danger,
button.btn.danger{
background:#fff7f5!important;
border:1px solid #e5c7c0!important;
color:#8d4940!important;
}
.btn.danger:hover,
button.btn.danger:hover{
background:#f9ece8!important;
}
/* Edit buttons: light, quiet, visually secondary */
.task-edit-btn{
background:#fff!important;
border:1px solid #cdd6dd!important;
color:var(--sartodo-navy)!important;
font-size:12px!important;
font-weight:500!important;
}
.task-edit-btn:hover{
background:var(--sartodo-beige-soft)!important;
border-color:#c7b9a8!important;
}
/* Completion control: softer and more integrated */
.check{
width:30px!important;
height:30px!important;
border-radius:9px!important;
border:1px solid #c3cdd5!important;
background:#f8fafb!important;
color:#fff!important;
box-shadow:none!important;
}
.check:hover{
background:var(--sartodo-beige-soft)!important;
border-color:#b9ac9c!important;
}
.check.checked{
background:var(--sartodo-green)!important;
border-color:var(--sartodo-green)!important;
color:#fff!important;
}
/* Status pills: softer, less toy-like */
.status,.pill{
border-radius:999px!important;
padding:6px 10px!important;
font-size:11px!important;
font-weight:600!important;
}
.status.open{
background:var(--sartodo-yellow)!important;
color:#785b18!important;
}
.status.doing{
background:#dfe9f2!important;
color:#34566f!important;
}
.status.done{
background:#e5f0e3!important;
color:#58775a!important;
}
/* Month tabs use the same warm visual language */
.month-tabs a{
border-radius:10px!important;
border:1px solid #d6dde4!important;
background:#fff!important;
color:#536577!important;
font-size:12px!important;
font-weight:500!important;
padding:8px 12px!important;
}
.month-tabs a:hover{
background:var(--sartodo-beige-soft)!important;
border-color:#c9bcad!important;
}
.month-tabs a.active{
background:var(--sartodo-navy)!important;
border-color:var(--sartodo-navy)!important;
color:#fff!important;
}
/* Form controls slightly calmer */
input,select,textarea{
border-radius:10px!important;
border:1px solid #ccd6de!important;
background:#fff!important;
color:var(--sartodo-ink)!important;
font-size:14px!important;
box-shadow:none!important;
}
input:focus,select:focus,textarea:focus{
outline:2px solid rgba(32,56,77,.12)!important;
border-color:#8ea0ae!important;
}
/* Tables: use same typography as navigation without uppercase body text */
th{
color:#708091!important;
font-size:10.5px!important;
letter-spacing:.07em!important;
font-weight:600!important;
}
td{
color:#313b45!important;
font-size:13px!important;
}
/* Keep task titles readable but not excessively bold */
.task-info h3,
.tasks-table td strong,
.recurring-table td strong{
font-weight:600!important;
}
/* Top + Aufgabe button a little more compact */
.page-head>.btn.primary{
min-height:42px!important;
padding:10px 16px!important;
font-size:13px!important;
}
/* Mobile: same visual system, slightly tighter */
@media(max-width:600px){
.btn,button.btn{
min-height:38px;
padding:8px 12px!important;
font-size:12px!important;
}
.month-tabs a{
font-size:11px!important;
padding:7px 10px!important;
}
}
/* Update 11.7: Dashboard polish */
.greeting-accent{display:none!important}
.welcome-head h1{margin-bottom:5px!important}
.task-card-link{color:inherit;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.task-card-link:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(24,40,60,.08);border-color:#cfd8df}
.task-card-link:focus-visible{outline:2px solid #20384d;outline-offset:2px}
/* =========================================================
SARTODO UPDATE 11.8 – Suche & Navigation
========================================================= */
.task-search-form{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
align-items:center;
}
.task-search-form input[type="search"]{
min-height:46px;
font-size:15px!important;
}
.search-hint{
margin-top:12px;
color:#777067;
font-size:13px;
}
.search-results{
display:grid;
gap:8px;
}
.search-results-head h2{
margin-bottom:14px;
}
.search-result-card{
display:grid;
grid-template-columns:130px minmax(0,1fr) auto;
gap:16px;
align-items:center;
padding:14px 16px;
border:1px solid #e1e5e8;
border-radius:12px;
background:#fff;
color:inherit!important;
text-decoration:none!important;
transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.search-result-card:hover{
background:#f8f5f0;
border-color:#d5c8b9;
transform:translateY(-1px);
}
.search-result-date small{
display:block;
color:#7b8690;
font-size:11px;
margin-bottom:3px;
}
.search-result-date strong{
font-weight:600!important;
}
.search-result-main h3{
margin:0 0 4px;
font-size:15px;
font-weight:600!important;
}
.search-result-main p{
margin:0!important;
color:#707b85!important;
font-size:12px;
}
.settings-schoolyear-card .panel-head{
margin-bottom:0!important;
}
.settings-schoolyear-card .panel-head p{
margin:5px 0 0!important;
}
@media(max-width:700px){
.task-search-form{
grid-template-columns:1fr;
}
.search-result-card{
grid-template-columns:1fr;
gap:8px;
}
.search-result-card .status{
width:max-content;
}
}
.danger-zone{border:1px solid #ead6d0!important;background:#fffaf8!important}.danger-zone h2{color:#7f463f!important}.trash-list{display:grid;gap:10px}.trash-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid #e1e5e8;border-radius:12px;background:#fff}.trash-card p{margin:4px 0 0!important;color:#737d86!important;font-size:12px}@media(max-width:700px){.trash-card{align-items:flex-start;flex-direction:column}.trash-card .task-actions{width:100%;flex-wrap:wrap}}
/* =========================================================
UPDATE 12.1 – Mobile + übersichtliche Einstellungen
========================================================= */
/* iOS date controls must never push the task form wider than the viewport */
.form-grid > label,
.stack > label{
min-width:0;
}
input[type="date"]{
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
-webkit-appearance:none;
appearance:none;
}
/* Settings accordions */
.settings-accordion{
display:grid;
gap:12px;
}
.settings-group{
background:#fff;
border:1px solid #dfe5e9;
border-radius:15px;
overflow:hidden;
box-shadow:0 6px 24px rgba(30,43,54,.035);
}
.settings-group > summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:17px 19px;
color:#202a34;
user-select:none;
}
.settings-group > summary::-webkit-details-marker{display:none}
.settings-group > summary span:first-child{
display:grid;
gap:3px;
min-width:0;
}
.settings-group > summary strong{
font-size:16px;
font-weight:600!important;
}
.settings-group > summary small{
color:#7a7e7d;
font-size:12px;
line-height:1.35;
}
.settings-chevron{
font-size:21px;
line-height:1;
color:#756c62;
transition:transform .18s ease;
}
.settings-group[open] .settings-chevron{
transform:rotate(180deg);
}
.settings-group-content{
padding:0 19px 19px;
border-top:1px solid #eef0f1;
}
.settings-group-content > p:first-child{
margin-top:16px!important;
}
.settings-link-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
padding-top:16px;
}
.settings-link-card{
display:grid;
gap:4px;
padding:14px;
border:1px solid #e1e5e8;
border-radius:11px;
color:#202a34!important;
text-decoration:none!important;
background:#fbfbfa;
}
.settings-link-card:hover{
background:#f4efe8;
border-color:#d4c6b5;
}
.settings-link-card strong{
font-weight:600!important;
}
.settings-link-card span{
color:#737b81;
font-size:12px;
line-height:1.4;
}
.settings-top-action{
display:flex;
justify-content:flex-end;
padding-top:16px;
}
/* Mobile navigation is always the same fixed two-column layout.
No links can drift outside the viewport between pages. */
@media(max-width:900px){
.app-shell{
grid-template-columns:minmax(0,1fr)!important;
width:100%!important;
overflow-x:hidden!important;
}
.sidebar{
width:100%!important;
max-width:100vw!important;
padding:20px 18px!important;
overflow:hidden!important;
}
.sidebar nav{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:6px 10px!important;
width:100%!important;
}
.sidebar nav a{
width:100%!important;
min-width:0!important;
max-width:100%!important;
padding:10px 10px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.sidebar-user{
margin-top:18px!important;
}
.main-content{
width:100%!important;
max-width:100%!important;
overflow-x:hidden!important;
}
}
@media(max-width:600px){
.main-content{
padding:18px!important;
}
.sidebar{
padding:18px 16px!important;
}
.sidebar nav{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.sidebar nav a{
font-size:10px!important;
letter-spacing:.055em!important;
padding:10px 8px!important;
}
.form-grid{
width:100%!important;
min-width:0!important;
}
.form-grid input,
.form-grid select,
.form-grid textarea,
.stack input,
.stack select,
.stack textarea{
max-width:100%!important;
min-width:0!important;
}
input[type="date"]{
font-size:16px!important;
}
.settings-link-grid{
grid-template-columns:1fr;
}
.settings-group > summary{
padding:15px 16px;
}
.settings-group-content{
padding:0 16px 16px;
}
}
/* UPDATE 12.2 FINAL - Kalendertermine */
.calendar-event-day{background:#f7f2ec!important;border-color:#d8ccbd!important}
.calendar-events{display:grid;gap:3px;margin:-1px -1px 7px}
.calendar-event-label{background:#e9e1d6;color:#514a43;border-radius:7px;padding:5px 7px;font-size:10px;font-weight:600!important;line-height:1.25}
.calendar-head-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){.calendar-head-actions{width:100%}.calendar-head-actions .btn{flex:1}.calendar-day:not(:has(.calendar-task)):has(.calendar-event-label){display:block!important}}
/* =========================================================
12.2 FINAL v2 – Mobile Benutzer / Abmelden
========================================================= */
/* Account typography uses the same calm system font as the navigation */
.sidebar-user,
.sidebar-user span,
.sidebar-user a{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif!important;
}
.sidebar-user span{
font-size:13px!important;
font-weight:500!important;
color:#32312f!important;
}
.sidebar-user a{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:32px;
padding:6px 10px;
border:1px solid #cec2b3;
border-radius:9px;
background:rgba(255,255,255,.42);
color:#5e574f!important;
font-size:11px!important;
font-weight:500!important;
letter-spacing:.025em!important;
text-decoration:none!important;
}
.sidebar-user a:hover{
background:#f6f1ea!important;
border-color:#bcad9b!important;
}
/* On phones, place the account directly below SARTODO / Einfach erledigt.
This keeps it visually connected to the brand instead of floating below the menu. */
@media(max-width:900px){
.sidebar{
display:flex!important;
flex-direction:column!important;
}
.brand{
order:1;
margin-bottom:10px!important;
}
.brand div{
min-width:0;
}
.brand b{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif!important;
font-size:17px!important;
font-weight:700!important;
letter-spacing:.01em!important;
}
.brand small{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif!important;
font-size:11px!important;
font-weight:400!important;
letter-spacing:.015em!important;
color:#766f67!important;
}
.sidebar-user{
order:2;
margin:0 0 15px 58px!important;
display:flex!important;
align-items:center!important;
gap:9px!important;
min-width:0!important;
}
.sidebar-user span{
min-width:0;
max-width:55vw;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.sidebar nav{
order:3;
}
}
@media(max-width:420px){
.sidebar-user{
margin-left:0!important;
padding-left:58px;
padding-right:2px;
}
.sidebar-user span{
font-size:12px!important;
}
.sidebar-user a{
min-height:30px;
padding:5px 9px;
font-size:10.5px!important;
}
}
/* SARTODO Version 2.0 footer */
.site-footer{
padding:18px 24px 22px;
text-align:center;
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
font-size:11px;
font-weight:400;
color:#81786e;
letter-spacing:.015em;
}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
@media(max-width:600px){.site-footer{padding:15px 16px 20px;font-size:10.5px}}
/* =========================================================
SARTODO 2.0.4 – Geburtstagskalender
========================================================= */
.calendar-birthdays{display:grid;gap:4px;margin:0 0 6px}
.calendar-birthday-label{
padding:5px 7px;
border-radius:7px;
background:#e9e1d6;
border:1px solid #d7cabb;
color:#514b45;
font-size:10px;
font-weight:600!important;
line-height:1.3;
}
.birthday-year-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.birthday-month{margin-bottom:0!important}
.birthday-month h2{font-size:18px}
.birthday-list{display:grid;gap:7px;margin-top:12px}
.birthday-row{
display:grid;
grid-template-columns:68px minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:10px 11px;
border:1px solid #e7e0d8;
border-radius:10px;
background:#fbfaf8;
}
.birthday-date{font-size:12px;color:#736b63}
.birthday-row strong{font-size:13px;font-weight:600!important}
.birthday-age{
font-size:11px;
color:#60584f;
background:#e9e1d6;
padding:4px 7px;
border-radius:999px;
}
@media(max-width:900px){.birthday-year-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
.birthday-year-grid{grid-template-columns:1fr}
.birthday-row{grid-template-columns:62px minmax(0,1fr) auto}
/* Event-only and birthday-only days must also remain visible on phones. */
.calendar-day:has(.calendar-event-label),
.calendar-day:has(.calendar-birthday-label){display:block!important}
}
/* =========================================================
SARTODO 2.0.5 – Kalender Design
Tage bleiben neutral. Nur Ereignisbalken erhalten Farbe.
========================================================= */
.calendar-day.calendar-event-day,
.calendar-day:has(.calendar-event-label),
.calendar-day:has(.calendar-birthday-label){
background:#fff !important;
}
.calendar-event-label{
background:#e8f2f8 !important;
border:1px solid #d2e4ee !important;
color:#314b5c !important;
border-radius:7px !important;
}
.calendar-birthday-label{
background:#fff3c9 !important;
border:1px solid #f0dfa6 !important;
color:#665522 !important;
border-radius:7px !important;
}
/* =========================================================
SARTODO 2.0.6 – kompakter, einheitlicher Kalender
========================================================= */
/* Einheitliche Tagesfelder auf Desktop */
@media(min-width:701px){
.calendar-grid:not(.calendar-head){
align-items:start;
}
.calendar-day{
height:152px !important;
min-height:152px !important;
max-height:152px !important;
overflow:hidden !important;
display:flex;
flex-direction:column;
}
.calendar-day.calendar-day-expanded{
height:auto !important;
min-height:152px !important;
max-height:none !important;
overflow:visible !important;
}
}
/* Kompaktere Typografie, damit mehr Inhalt sichtbar bleibt */
.calendar-day{
padding:7px !important;
}
.calendar-date{
margin-bottom:5px !important;
font-size:12px !important;
}
.calendar-events,
.calendar-birthdays,
.calendar-items{
gap:3px !important;
}
.calendar-event-label,
.calendar-birthday-label,
.calendar-task{
min-height:0 !important;
}
.calendar-event-label,
.calendar-birthday-label{
padding:4px 6px !important;
font-size:9px !important;
line-height:1.22 !important;
}
.calendar-task{
padding:5px 6px !important;
}
.calendar-task strong{
font-size:10px !important;
line-height:1.18 !important;
display:-webkit-box !important;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden !important;
}
.calendar-task small{
margin-top:1px !important;
font-size:8.5px !important;
line-height:1.1 !important;
}
/* Geburtstage: zartes Rosé, klar von blauem Kalenderereignis getrennt */
.calendar-birthday-label{
background:#f8e7e5 !important;
border:1px solid #edcfcb !important;
color:#684846 !important;
}
/* Hellblau bleibt für Ferien / unterrichtsfreie Tage / Weiterbildung etc. */
.calendar-event-label{
background:#e8f2f8 !important;
border:1px solid #d2e4ee !important;
color:#314b5c !important;
}
/* Verdeckte Einträge und kompakter +N-Button */
.calendar-entry-hidden{
display:none !important;
}
.calendar-more-btn{
margin-top:auto;
align-self:flex-start;
border:0;
background:transparent;
padding:4px 2px 1px;
color:#5f6a73;
font:inherit;
font-size:9px;
font-weight:600;
cursor:pointer;
text-decoration:underline;
text-underline-offset:2px;
}
.calendar-more-btn:hover{
color:#20384d;
}
/* Auf dem Handy dürfen Tage wieder natürlich wachsen */
@media(max-width:700px){
.calendar-day{
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
.calendar-event-label,
.calendar-birthday-label{
font-size:11px !important;
}
.calendar-task strong{
font-size:13px !important;
-webkit-line-clamp:2;
}
.calendar-task small{
font-size:11px !important;
}
.calendar-more-btn{
font-size:11px;
margin-top:5px;
}
}
/* =========================================================
SARTODO 2.0.8 – Verknüpfungen einheitliche Karten
========================================================= */
.howto-grid{
align-items:stretch;
}
.howto-card{
min-height:300px;
height:300px;
display:flex;
flex-direction:column;
padding:18px!important;
overflow:hidden;
}
.howto-card-main{
min-height:0;
display:flex;
flex-direction:column;
flex:1 1 auto;
}
.howto-card h3{
margin:7px 0 10px!important;
font-size:17px;
line-height:1.25;
}
.howto-text{
color:#536475;
line-height:1.5;
font-size:13px;
overflow:hidden;
}
.howto-text.is-collapsed{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:6;
}
.howto-text.is-expanded{
display:block;
overflow:visible;
}
.howto-card:has(.howto-text.is-expanded){
height:auto;
min-height:300px;
}
.howto-more-btn{
align-self:flex-start;
border:0;
background:transparent;
color:#536475;
font:inherit;
font-size:12px;
font-weight:600;
padding:7px 0 0;
cursor:pointer;
text-decoration:underline;
text-underline-offset:2px;
}
.howto-card-actions{
min-height:42px;
margin-top:auto;
padding-top:12px;
display:flex;
align-items:flex-end;
}
.howto-card-actions .btn{
min-width:92px;
}
.howto-link-placeholder{
display:block;
min-height:38px;
}
@media(max-width:900px){
.howto-card{
min-height:260px;
height:260px;
}
.howto-card:has(.howto-text.is-expanded){
min-height:260px;
}
}
@media(max-width:600px){
.howto-card{
min-height:240px;
height:240px;
}
.howto-card:has(.howto-text.is-expanded){
min-height:240px;
}
}
/* 2.0.8 FINAL – wiederkehrende Vorschau auf Startseite */
.recurring-preview-card{
background:#fbfcfc!important;
border-left:4px solid #9bb3c3!important;
}
/* =========================================================
SARTODO 2.1 – Dringend + Kalenderabo
========================================================= */
.urgent-bell{color:#c64d43!important;font-size:.95em;filter:none}
.urgent-toggle{align-content:start}
.urgent-checkline{
min-height:42px;
display:flex;
align-items:center;
gap:8px;
border:1px solid #d8dfe4;
border-radius:9px;
padding:8px 11px;
background:#fff;
font-weight:500!important;
}
.urgent-checkline input{width:18px!important;height:18px!important;margin:0}
.task-card:has(.urgent-bell),.search-result-card:has(.urgent-bell){
border-left:4px solid #c95a52!important;
}
.calendar-task:has(.urgent-bell){border-left-color:#c95a52!important}
.calendar-sub-actions{margin-top:12px;align-items:center;flex-wrap:wrap}
.calendar-sub-actions form{margin:0}
/* =========================================================
SARTODO 2.2 – Geburtstage bearbeiten + sortieren
========================================================= */
.birthday-sort-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}
.birthday-sort-actions .active-sort{
background:#e9e1d6!important;
border-color:#d2c4b3!important;
}
.birthday-edit-list{
display:grid;
gap:10px;
}
.birthday-edit-card{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
align-items:end;
padding:14px;
border:1px solid #e4e6e7;
border-radius:12px;
background:#fbfbfa;
}
.birthday-edit-form{
display:grid;
grid-template-columns:minmax(220px,1.4fr) minmax(170px,.8fr) auto;
gap:10px;
align-items:end;
}
.birthday-edit-actions{
display:flex;
align-items:flex-end;
}
@media(max-width:800px){
.birthday-edit-card{
grid-template-columns:1fr;
}
.birthday-edit-form{
grid-template-columns:1fr;
}
.birthday-edit-card .btn{
width:100%;
}
.birthday-sort-actions{
width:100%;
}
.birthday-sort-actions .btn{
flex:1 1 auto;
}
}
/* SARTODO 2.2 FINAL – kompakte Geburtstagsliste */
.birthday-compact-table{width:100%;table-layout:fixed}
.birthday-compact-table th:nth-child(1){width:auto}
.birthday-compact-table th:nth-child(2){width:220px}
.birthday-compact-table th:nth-child(3){width:210px}
.birthday-sort-link{color:inherit;text-decoration:none;font-weight:700}
.birthday-inline-row{display:flex;align-items:center;gap:10px;width:100%}
.birthday-inline-edit{display:grid;grid-template-columns:minmax(220px,1fr) 210px auto;gap:10px;align-items:center;flex:1;margin:0}
.birthday-inline-edit input{margin:0!important;min-height:42px!important;padding:8px 11px!important}
.birthday-name-input{width:100%}
.birthday-date-input{width:100%}
.birthday-delete-form{margin:0}
.birthday-save-btn,.birthday-delete-btn{min-height:42px;white-space:nowrap}
.birthday-row td{padding:8px 10px!important}
@media(max-width:760px){
.birthday-compact-table thead{display:none}
.birthday-inline-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.birthday-inline-edit{grid-template-columns:1fr 145px auto;gap:7px}
.birthday-inline-edit input{min-width:0;font-size:14px!important}
.birthday-save-btn,.birthday-delete-btn{padding:9px 11px!important;font-size:13px!important}
}
@media(max-width:560px){
.birthday-inline-row{grid-template-columns:1fr}
.birthday-inline-edit{grid-template-columns:minmax(0,1fr) 138px auto}
.birthday-delete-form{justify-self:end}
}
/* =========================================================
SARTODO 2.3 – Profil, Kalender, Footer, Uhrzeit
========================================================= */
.app-userbar{
display:flex;
justify-content:flex-end;
min-height:44px;
margin:-10px 0 8px;
}
.app-user-pill{
display:flex;
align-items:center;
gap:9px;
}
.app-user-avatar,.profile-preview{
width:38px;height:38px;border-radius:50%;
overflow:hidden;background:#e9e1d6;border:1px solid #d5c9ba;
display:grid;place-items:center;color:#20384d;font-weight:700;
flex:0 0 auto;
}
.app-user-avatar img,.profile-preview img{width:100%;height:100%;object-fit:cover;display:block}
.app-user-name{font-size:13px;font-weight:600;color:#27323c}
.app-logout{
padding:7px 10px;border:1px solid #d2c7b9;border-radius:9px;
background:#f8f5f0;color:#665f58!important;text-decoration:none;font-size:11px;font-weight:500;
}
.profile-settings-row{display:flex;align-items:end;gap:14px;flex-wrap:wrap;padding-top:16px}
.profile-preview{width:64px;height:64px;font-size:20px}
.profile-upload-form{display:flex;align-items:end;gap:10px;flex:1;min-width:280px}
.profile-upload-form label{flex:1}
.site-footer{
border-top:0!important;
box-shadow:none!important;
margin-top:0!important;
}
.task-time{font-size:10px!important;font-weight:500!important;color:#6d7780!important}
.calendar-task-time{font-weight:700;color:#465d6c}
/* Kalender: jedes Kästchen identisch, Inhalt kompakt, Rest aufklappbar */
@media(min-width:701px){
.calendar-grid:not(.calendar-head){align-items:start}
.calendar-day{
height:156px!important;min-height:156px!important;max-height:156px!important;
overflow:hidden!important;display:flex!important;flex-direction:column!important;
}
.calendar-day.calendar-day-expanded{
height:auto!important;min-height:156px!important;max-height:none!important;overflow:visible!important;
}
}
.calendar-day{padding:7px!important}
.calendar-date{font-size:12px!important;margin-bottom:4px!important}
.calendar-events,.calendar-birthdays,.calendar-items{gap:3px!important}
.calendar-event-label,.calendar-birthday-label{
padding:4px 6px!important;font-size:9px!important;line-height:1.18!important;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.calendar-task{padding:4px 6px!important}
.calendar-task strong{font-size:9.5px!important;line-height:1.15!important}
.calendar-task small{font-size:8.5px!important;line-height:1.1!important}
.calendar-entry-hidden{display:none!important}
.calendar-more-btn{
margin-top:auto;align-self:flex-start;border:0;background:transparent;
padding:4px 1px 0;color:#58656e;font:inherit;font-size:9px;font-weight:600;
cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
/* Ereignisse blau, Geburtstage zart rosé */
.calendar-event-label{background:#e8f2f8!important;border:1px solid #d2e4ee!important;color:#314b5c!important}
.calendar-birthday-label{background:#f8e7e5!important;border:1px solid #edcfcb!important;color:#684846!important}
.calendar-day.calendar-event-day,.calendar-day:has(.calendar-event-label),.calendar-day:has(.calendar-birthday-label){background:#fff!important}
@media(max-width:700px){
.app-userbar{margin:0 0 12px}
.app-user-name{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-upload-form{display:grid;grid-template-columns:1fr}
.calendar-day{height:auto!important;max-height:none!important;overflow:visible!important}
.calendar-event-label,.calendar-birthday-label{font-size:11px!important}
.calendar-task strong{font-size:12px!important}
.calendar-task small{font-size:10px!important}
.calendar-more-btn{font-size:11px}
}
/* =========================================================
SARTODO 3.0 – Teamarbeit & Alltag
========================================================= */
.status.waiting{background:#f4eadf;color:#7a5e3f}
.multi-assignee-select{min-height:118px}
.checklist-editor{border-top:1px solid #ece8e2;padding-top:16px}
.checklist-edit-row,.template-item-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:8px}
.checklist-edit-row input[type="checkbox"]{width:18px!important;height:18px!important}
.check-remove{width:32px;height:32px;border:1px solid #d9d4cd;border-radius:8px;background:#fff;color:#7b6b62;cursor:pointer}
.check-progress,.calendar-check-progress{display:inline-block;margin-top:3px;color:#7a746d;font-size:10px}
.calendar-check-progress{margin-left:5px}
.today-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.today-chip{padding:8px 11px;border-radius:999px;font-size:12px;font-weight:600}
.today-chip.event{background:#e8f2f8;border:1px solid #d2e4ee;color:#314b5c}
.today-chip.birthday{background:#f8e7e5;border:1px solid #edcfcb;color:#684846}
.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.template-card{border:1px solid #e5e1da;border-radius:13px;padding:15px;background:#fbfaf8;display:flex;justify-content:space-between;gap:14px;align-items:flex-end}
.template-card h3{margin:5px 0}
.template-card p{margin:0}
.template-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.template-actions form{margin:0}
.recurring-holiday-toggle{align-content:start}
.page-head-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){
.template-grid{grid-template-columns:1fr}
.template-card{display:block}
.template-actions{margin-top:12px}
.multi-assignee-select{min-height:135px}
}
/* =========================================================
SARTODO 3.0.1 – Stabilität, Suche & Login
========================================================= */
/* iPhone / Safari: Zeitfeld bleibt sicher innerhalb der Karte */
.form-grid label{min-width:0}
.form-grid input[type="time"]{
display:block;
width:100%;
max-width:100%;
min-width:0;
box-sizing:border-box;
}
@media(max-width:700px){
.form-grid input[type="time"]{
width:100%!important;
max-width:100%!important;
min-width:0!important;
-webkit-appearance:none;
appearance:none;
}
}
/* Suche direkt bei Aufgaben */
.tasks-search-panel{padding:14px 16px!important}
.tasks-search-form{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
gap:8px;
align-items:center;
}
.tasks-search-form input[type="search"]{
width:100%;
min-width:0;
margin:0;
}
.tasks-search-panel p{margin:8px 0 0;font-size:12px}
@media(max-width:650px){
.tasks-search-form{grid-template-columns:minmax(0,1fr) auto}
.tasks-search-form .secondary{grid-column:1/-1;text-align:center}
}
/* Backup Verwaltung */
.backup-status-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.backup-status-grid .panel{margin-bottom:0}
.backup-restore-form{margin:0}
.backup-warning{border-left:4px solid #d0a55b}
@media(max-width:700px){.backup-status-grid{grid-template-columns:1fr}}
/* Dezente Login Animation */
.login-page{
overflow-x:hidden;
position:relative;
}
.login-page::before{
content:"";
position:fixed;
inset:-12%;
pointer-events:none;
background:
radial-gradient(circle at 25% 30%,rgba(255,255,255,.45),transparent 30%),
radial-gradient(circle at 75% 65%,rgba(224,215,202,.28),transparent 35%);
animation:sartodo-login-bg 16s ease-in-out infinite alternate;
}
.login-card{
position:relative;
z-index:1;
animation:sartodo-login-card .65s cubic-bezier(.2,.8,.2,1) both;
}
.login-drawn-logo{
animation:sartodo-login-logo .75s .12s cubic-bezier(.2,.8,.2,1) both;
}
.login-card h1,
.login-card .login-tagline,
.login-card .login-access,
.login-card .login-form{
animation:sartodo-login-content .55s .18s ease-out both;
}
.login-footer{position:relative;z-index:1;animation:sartodo-login-content .55s .3s ease-out both}
@keyframes sartodo-login-card{
from{opacity:0;transform:translateY(18px) scale(.985)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes sartodo-login-logo{
from{opacity:0;transform:translateY(-8px) scale(.88) rotate(-4deg)}
to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
@keyframes sartodo-login-content{
from{opacity:0;transform:translateY(7px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes sartodo-login-bg{
from{transform:translate3d(-1.5%,-1%,0) scale(1)}
to{transform:translate3d(1.5%,1%,0) scale(1.035)}
}
@media(prefers-reduced-motion:reduce){
.login-page::before,.login-card,.login-drawn-logo,.login-card h1,
.login-card .login-tagline,.login-card .login-access,.login-card .login-form,.login-footer{
animation:none!important;
}
}
/* SARTODO 3.0.2 – Backup Re-Login */
.backup-login-panel{max-width:520px}
.backup-login-panel .stack{gap:12px}
/* =========================================================
SARTODO 3.0.3 – Ocean Login
========================================================= */
.ocean-login{
min-height:100svh;
background:#1d3342;
overflow:hidden;
position:relative;
}
.ocean-login-bg{
position:fixed;
inset:-7%;
z-index:0;
background:
linear-gradient(rgba(20,34,44,.13),rgba(20,34,44,.23)),
url('login-ocean.jpg') center center / cover no-repeat;
transform:scale(1.04);
animation:oceanDrift 18s ease-in-out infinite alternate;
will-change:transform;
}
.ocean-login::after{
content:"";
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(12,24,33,.03),rgba(12,24,33,.18));
}
.ocean-login-card{
position:relative;
z-index:2;
width:min(92vw,510px)!important;
padding:34px 38px 36px!important;
border-radius:24px!important;
background:rgba(255,252,247,.96)!important;
border:1px solid rgba(255,255,255,.55)!important;
box-shadow:0 24px 65px rgba(8,22,32,.28)!important;
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
animation:loginCardIn .65s cubic-bezier(.2,.8,.2,1) both;
}
.ocean-login-card .login-drawn-logo{
width:90px!important;
height:auto!important;
margin:0 auto 13px!important;
display:block;
animation:loginLogoIn .75s .08s cubic-bezier(.2,.8,.2,1) both;
}
.ocean-login-card h1{
margin:0!important;
text-align:center;
font-size:32px!important;
letter-spacing:.05em;
}
.ocean-login-card .login-tagline{
margin:7px 0 30px!important;
text-align:center;
color:#64717d!important;
font-size:16px!important;
}
.ocean-login-form{
gap:16px!important;
}
.ocean-login-form label{
display:grid;
gap:7px;
font-weight:600;
color:#25313b;
}
.login-input-wrap{
position:relative;
display:block;
}
.login-input-wrap input{
width:100%!important;
min-height:52px!important;
padding:11px 48px 11px 44px!important;
margin:0!important;
border:1px solid #d8d4ce!important;
border-radius:11px!important;
background:rgba(255,255,255,.72)!important;
box-shadow:none!important;
}
.login-input-wrap input:focus{
outline:none!important;
border-color:#b9aa96!important;
box-shadow:0 0 0 3px rgba(205,190,170,.18)!important;
background:#fff!important;
}
.login-field-icon{
position:absolute;
left:15px;
top:50%;
transform:translateY(-50%);
z-index:1;
color:#7b7c7b;
font-size:17px;
pointer-events:none;
}
.password-toggle{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
border:0;
background:transparent;
color:#5b6267;
cursor:pointer;
font-size:16px;
}
.login-submit{
min-height:52px!important;
margin-top:2px;
border-radius:11px!important;
font-size:16px!important;
}
.ocean-login-footer{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:26px!important;
transform:translateX(-50%)!important;
z-index:2!important;
width:auto!important;
text-align:center!important;
color:rgba(255,255,255,.88)!important;
text-shadow:0 1px 8px rgba(0,0,0,.35);
font-size:12px!important;
line-height:1.55;
}
.ocean-login-footer a{color:inherit!important}
@keyframes oceanDrift{
0%{transform:translate3d(-1.5%,-1%,0) scale(1.055)}
50%{transform:translate3d(1%,.4%,0) scale(1.075)}
100%{transform:translate3d(2%,-.7%,0) scale(1.06)}
}
@keyframes loginCardIn{
from{opacity:0;transform:translateY(18px) scale(.985)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes loginLogoIn{
from{opacity:0;transform:translateY(-8px) scale(.9)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:650px){
.ocean-login-card{
width:calc(100vw - 28px)!important;
padding:28px 22px 30px!important;
border-radius:20px!important;
}
.ocean-login-card .login-drawn-logo{width:78px!important}
.ocean-login-card h1{font-size:28px!important}
.ocean-login-card .login-tagline{margin-bottom:24px!important}
.ocean-login-footer{
bottom:14px!important;
width:calc(100vw - 28px)!important;
}
}
@media(prefers-reduced-motion:reduce){
.ocean-login-bg,.ocean-login-card,.ocean-login-card .login-drawn-logo{
animation:none!important;
}
}
/* =========================================================
SARTODO 4.0.0 – Ocean Navigation
========================================================= */
/* Desktop: Meer in Navigation */
.sidebar{
position:relative;
overflow:hidden;
background:
linear-gradient(rgba(8,31,48,.56),rgba(8,31,48,.70)),
url('login-ocean.jpg') center center / cover no-repeat!important;
color:#fff!important;
border-right:1px solid rgba(255,255,255,.20)!important;
box-shadow:8px 0 28px rgba(18,38,52,.08);
}
.sidebar::before{
content:"";
position:absolute;
inset:-6%;
z-index:0;
background:url('login-ocean.jpg') center center / cover no-repeat;
opacity:.16;
animation:sartodoSidebarOcean 22s ease-in-out infinite alternate;
pointer-events:none;
}
.sidebar > *{position:relative;z-index:1}
.brand{
color:#fff!important;
margin-bottom:34px!important;
}
.brand b{
color:#fff!important;
font-size:17px!important;
letter-spacing:.035em!important;
}
.brand small{
color:rgba(255,255,255,.82)!important;
}
.sidebar-drawn-logo{
background:rgba(255,252,247,.94)!important;
box-shadow:0 8px 24px rgba(5,24,37,.18);
}
.sidebar nav{
gap:9px!important;
}
.sidebar nav a{
color:rgba(255,255,255,.92)!important;
border:1px solid transparent;
text-shadow:0 1px 8px rgba(0,0,0,.18);
transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.sidebar nav a:hover{
background:rgba(255,255,255,.14)!important;
border-color:rgba(255,255,255,.16);
transform:translateX(2px);
}
.sidebar nav a.active{
background:rgba(255,250,242,.94)!important;
color:#193a57!important;
border-color:rgba(255,255,255,.55);
text-shadow:none;
box-shadow:0 8px 24px rgba(4,25,39,.13);
}
/* Hauptbereich bleibt ruhig und hell */
.main-content{
background:rgba(244,247,251,.975)!important;
}
/* Ocean Footer */
.site-footer{
margin:0!important;
min-height:96px;
padding:28px 20px!important;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
color:rgba(255,255,255,.94)!important;
background:
linear-gradient(rgba(8,31,48,.60),rgba(8,31,48,.72)),
url('login-ocean.jpg') center 68% / cover no-repeat!important;
text-shadow:0 1px 8px rgba(0,0,0,.28);
border:0!important;
}
.site-footer::before{
content:"";
position:absolute;
inset:-15%;
background:url('login-ocean.jpg') center 68% / cover no-repeat;
opacity:.14;
animation:sartodoFooterOcean 24s ease-in-out infinite alternate;
pointer-events:none;
}
.site-footer span{position:relative;z-index:1}
.site-footer a{color:inherit!important}
/* Login kompakter */
.ocean-login-card{
width:min(90vw,430px)!important;
padding:26px 30px 28px!important;
border-radius:22px!important;
}
.ocean-login-card .login-drawn-logo{
width:72px!important;
margin-bottom:9px!important;
}
.ocean-login-card h1{
font-size:29px!important;
}
.ocean-login-card .login-tagline{
margin:5px 0 22px!important;
font-size:15px!important;
}
.ocean-login-form{gap:13px!important}
.login-input-wrap input{
min-height:47px!important;
}
.login-submit{
min-height:48px!important;
}
/* dezente Wasserbewegung */
@keyframes sartodoSidebarOcean{
from{transform:translate3d(-1.5%,-1%,0) scale(1.035)}
to{transform:translate3d(1.5%,1%,0) scale(1.065)}
}
@keyframes sartodoFooterOcean{
from{transform:translate3d(-1%,0,0) scale(1.04)}
to{transform:translate3d(1%,1%,0) scale(1.07)}
}
@media(max-width:900px){
.sidebar{
background:
linear-gradient(rgba(8,31,48,.60),rgba(8,31,48,.72)),
url('login-ocean.jpg') center 48% / cover no-repeat!important;
}
.sidebar nav a:hover{transform:none}
.site-footer{min-height:82px}
}
@media(max-width:650px){
.ocean-login-card{
width:calc(100vw - 28px)!important;
padding:23px 20px 25px!important;
}
.ocean-login-card .login-drawn-logo{width:66px!important}
.ocean-login-card h1{font-size:27px!important}
}
@media(prefers-reduced-motion:reduce){
.sidebar::before,.site-footer::before{animation:none!important}
}
/* =========================================================
SARTODO 4.0.1 – durchgehender Ocean Hintergrund
========================================================= */
/* Ein einziges, fixes Bild für die gesamte App.
Dadurch bleibt das Meer auf allen Seiten an exakt derselben Position. */
.app-body{
position:relative;
min-height:100vh;
background:#173246!important;
}
.app-body::before{
content:"";
position:fixed;
inset:0;
z-index:-2;
background:
linear-gradient(rgba(8,31,48,.23),rgba(8,31,48,.38)),
url('login-ocean.jpg') center center / cover no-repeat;
pointer-events:none;
}
.app-body::after{
content:"";
position:fixed;
inset:0;
z-index:-1;
background:rgba(13,35,50,.08);
pointer-events:none;
}
/* Sidebar und Footer verwenden NICHT mehr je ihr eigenes Bild.
So gibt es keine sichtbare Kante und kein Springen beim Seitenwechsel. */
.sidebar{
background:rgba(9,31,46,.57)!important;
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
min-height:100vh;
}
.sidebar::before{
display:none!important;
animation:none!important;
}
.site-footer{
background:rgba(9,31,46,.56)!important;
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
}
.site-footer::before{
display:none!important;
animation:none!important;
}
/* Der Inhaltsbereich liegt sauber über dem durchgehenden Meer. */
.app-shell{
background:transparent!important;
min-height:100vh;
}
.main-content{
position:relative;
z-index:1;
background:rgba(244,247,251,.975)!important;
}
/* Verhindert je nach Seitenhöhe einen sichtbaren hellen Streifen unten. */
body.app-body{
margin:0;
min-height:100vh;
}
body.app-body .app-shell{
min-height:100vh;
}
/* Auch mobil bleibt das Hintergrundbild fix und stabil. */
@media(max-width:900px){
.app-body::before{
background:
linear-gradient(rgba(8,31,48,.25),rgba(8,31,48,.40)),
url('login-ocean.jpg') center center / cover no-repeat;
}
.sidebar{
background:rgba(9,31,46,.62)!important;
}
}
/* Keine Hintergrundbewegung in der eingeloggten App.
Die Loginseite darf weiterhin ihre eigene dezente Animation behalten. */
@media(prefers-reduced-motion:no-preference){
.app-body .sidebar,
.app-body .site-footer{
animation:none!important;
}
}
/* =========================================================
SARTODO 4.0.2 – kompakte Benutzerverwaltung
========================================================= */
.user-admin-list{
display:grid!important;
gap:10px!important;
}
.user-admin-row{
padding:14px 16px!important;
border-radius:14px!important;
min-height:0!important;
box-shadow:none!important;
}
.user-admin-row .settings-list-item-head{
margin-bottom:10px!important;
}
.user-admin-row form{
margin:0!important;
}
.user-admin-row .form-grid,
.user-admin-row .grid{
gap:10px 14px!important;
}
.user-admin-row label{
margin:0!important;
font-size:12px!important;
color:#6c7c90!important;
}
.user-admin-row input,
.user-admin-row select{
min-height:40px!important;
padding:7px 11px!important;
font-size:14px!important;
border-radius:9px!important;
}
.user-admin-row .btn,
.user-admin-row button{
min-height:38px!important;
padding:8px 13px!important;
font-size:13px!important;
border-radius:9px!important;
}
.user-admin-row hr{
margin:10px 0!important;
}
.user-admin-row p,
.user-admin-row .muted{
margin:3px 0!important;
font-size:12px!important;
line-height:1.35!important;
}
.user-admin-row strong{
font-size:14px!important;
}
/* Desktop: deutlich kompaktere Formulare in einer Zeile */
@media(min-width:901px){
.user-admin-row{
display:block!important;
}
.user-admin-row form:first-of-type{
display:grid!important;
grid-template-columns:minmax(150px,.8fr) minmax(250px,1.15fr) auto!important;
align-items:end!important;
gap:12px!important;
}
.user-admin-row form:first-of-type .btn,
.user-admin-row form:first-of-type button{
white-space:nowrap!important;
}
.user-admin-row .user-permission-row,
.user-admin-row .role-row{
margin-top:8px!important;
}
}
/* Bestehende Settings-Formulare innerhalb der Benutzerzeile generell verdichten */
.user-admin-row > div{
margin-top:6px!important;
}
.user-admin-row .settings-actions{
gap:8px!important;
margin-top:8px!important;
}
/* Mobile: kompakte Karten statt breiter Tabellen */
@media(max-width:900px){
.user-admin-row{
padding:13px!important;
}
.user-admin-row form{
gap:8px!important;
}
.user-admin-row input,
.user-admin-row select{
min-height:42px!important;
}
.user-admin-row .btn,
.user-admin-row button{
width:auto!important;
max-width:100%!important;
}
}
/* =========================================================
SARTODO 4.0.3 – Navigation / Ocean Fix
========================================================= */
/* Das Meer liegt direkt und fix auf dem Body.
Dadurch ist es sichtbar UND springt beim Seitenwechsel nicht. */
body.app-body{
background:
linear-gradient(rgba(8,31,48,.20),rgba(8,31,48,.30)),
url('login-ocean.jpg') center center / cover fixed no-repeat!important;
background-color:#173246!important;
}
/* Die alten Pseudo-Hintergründe ausschalten */
body.app-body::before,
body.app-body::after{
display:none!important;
}
/* Sidebar transparenter, damit das Meer sichtbar bleibt */
.sidebar{
background:rgba(7,29,44,.34)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
border-right:1px solid rgba(255,255,255,.18)!important;
}
/* Navigation: immer klare Lesbarkeit */
.sidebar nav a{
color:rgba(255,255,255,.96)!important;
background:transparent!important;
text-shadow:0 1px 8px rgba(0,0,0,.30)!important;
}
.sidebar nav a:not(.active):hover,
.sidebar nav a:not(.active):focus-visible{
color:#ffffff!important;
background:rgba(255,255,255,.16)!important;
border-color:rgba(255,255,255,.22)!important;
text-shadow:0 1px 8px rgba(0,0,0,.34)!important;
}
.sidebar nav a.active{
color:#193a57!important;
background:rgba(255,250,242,.95)!important;
border-color:rgba(255,255,255,.62)!important;
text-shadow:none!important;
}
/* Footer zeigt denselben fixen Ocean-Hintergrund durch */
.site-footer{
background:rgba(7,29,44,.38)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* Inhalt bleibt hell, aber der Randbereich lässt das Meer sichtbar */
.app-shell{
background:transparent!important;
}
.main-content{
background:rgba(244,247,251,.975)!important;
}
/* Mobile: etwas dunkler für gute Lesbarkeit */
@media(max-width:900px){
body.app-body{
background:
linear-gradient(rgba(8,31,48,.26),rgba(8,31,48,.36)),
url('login-ocean.jpg') center center / cover fixed no-repeat!important;
}
.sidebar{
background:rgba(7,29,44,.42)!important;
}
.sidebar nav a:not(.active):hover,
.sidebar nav a:not(.active):focus-visible{
color:#fff!important;
background:rgba(255,255,255,.16)!important;
}
}
.login-helper{text-align:right;margin-top:-6px}.login-helper a,.login-footer a,.legal-wrap a{color:inherit}.settings-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-tile{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #dfe7ef;border-radius:16px;padding:20px;text-decoration:none;color:#182230;box-shadow:0 8px 30px rgba(24,40,60,.05)}.settings-tile:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(24,40,60,.09)}.settings-tile strong{font-size:17px}.settings-tile small{color:#6b7785}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:16px 0}.permission-grid.compact{grid-template-columns:1fr}.user-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.user-admin-card{border:1px solid #e2e8ee;border-radius:14px;padding:16px}.qrcode-box{display:inline-block;background:#fff;padding:14px;border-radius:12px;border:1px solid #e1e5e9}.secret-code{display:inline-block;padding:8px 10px;background:#f3f5f7;border-radius:8px;letter-spacing:.08em;word-break:break-all}.crop-stage{width:320px;height:320px;max-width:100%;margin:18px 0;border-radius:18px;overflow:hidden;background:#dfe5ea;touch-action:none}.crop-stage canvas{width:100%;height:auto;display:block;touch-action:none}.app-footer{margin-top:34px;padding:20px 0;color:#6b7785;font-size:12px}.app-footer a{color:inherit}.legal-public{background:#f3f5f7;margin:0;padding:32px 16px;font-family:Inter,Arial,sans-serif;color:#182230}.legal-wrap{max-width:850px;margin:auto}.alert.success{background:#eaf7ef;border:1px solid #bce4ca;color:#245d39}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:760px){.settings-hub,.user-admin-grid,.permission-grid,.form-grid{grid-template-columns:1fr}.crop-stage{width:280px;height:280px}.main-content{padding:20px 14px}}
/* =========================================================
PENDENZO 4.1.1 – Responsive, Kalender, Geburtstage, Benutzer
========================================================= */
html,body{max-width:100%;overflow-x:hidden}
.main-content{min-width:0!important}
.page-head>div:first-child{min-width:0}
.page-head h1,.page-head p{overflow-wrap:anywhere}
/* Auf Tablet und Smartphone endet die Ocean Navigation nach dem Menü. */
@media(max-width:900px){
.sidebar{min-height:auto!important;height:auto!important;max-height:none!important;background:rgba(9,31,46,.62)!important}
.app-shell{min-height:100svh!important}
.main-content{min-height:0!important}
}
@media(max-width:600px){
.page-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
.page-head h1{font-size:clamp(26px,9vw,34px)!important;line-height:1.08!important}
.page-head p{font-size:15px!important;line-height:1.35!important}
.page-head .btn{width:100%}
.panel{padding:16px!important}
}
/* Desktop Kalender: lesbar statt mikroskopisch. Unter 1050 px darf horizontal
gescrollt werden, damit sieben echte Wochentage nicht gequetscht werden. */
@media(min-width:701px){
.calendar-panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.calendar-toolbar,.calendar-panel>.calendar-grid{min-width:820px}
.calendar-day{height:184px!important;min-height:184px!important;max-height:184px!important;padding:8px!important}
.calendar-day.calendar-day-expanded{height:auto!important;min-height:184px!important;max-height:none!important}
.calendar-date{font-size:14px!important;margin-bottom:6px!important}
.calendar-event-label,.calendar-birthday-label{font-size:11px!important;line-height:1.25!important;padding:5px 7px!important;-webkit-line-clamp:2!important}
.calendar-task{padding:6px 7px!important}
.calendar-task strong{font-size:11px!important;line-height:1.22!important;-webkit-line-clamp:2!important}
.calendar-task small{font-size:9.5px!important;line-height:1.2!important}
.calendar-more-btn{font-size:10px!important}
}
/* Geburtstagsübersicht: flexible Karten ohne Überlagerungen. */
.birthday-year-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important}
.birthday-row{grid-template-columns:58px minmax(0,1fr)!important;align-items:start!important}
.birthday-person{min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.birthday-person strong{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.birthday-age{white-space:nowrap;flex:0 0 auto}
@media(max-width:420px){.birthday-year-grid{grid-template-columns:minmax(0,1fr)!important}.birthday-row{grid-template-columns:52px minmax(0,1fr)!important;gap:7px!important}.birthday-age{font-size:10px!important}}
/* Geburtstage verwalten */
.birthday-admin-head{align-items:flex-end}
.birthday-search-form{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:9px;align-items:end;margin:14px 0 18px}
.birthday-search-form label{margin:0}
.birthday-inline-row,.birthday-inline-edit{min-width:0}
@media(max-width:900px){
.birthday-inline-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
.birthday-inline-edit{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(150px,.55fr) auto!important}
.birthday-delete-form{justify-self:start!important}
}
@media(max-width:650px){
.birthday-search-form{grid-template-columns:1fr 1fr!important}.birthday-search-form label{grid-column:1/-1}.birthday-search-form .btn{width:100%}
.birthday-inline-edit{grid-template-columns:1fr!important}.birthday-inline-edit .btn{width:100%}
.birthday-delete-form,.birthday-delete-form .btn{width:100%!important}
}
/* Benutzerkarten */
.user-admin-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important}
.user-admin-card{min-width:0;background:#fff}
.user-admin-identity{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid #edf0f2}
.user-admin-identity>div{min-width:0}
.user-admin-identity h3{margin:0 0 5px;font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.user-admin-email{font-size:13px;color:#687686;overflow-wrap:anywhere}
.user-role-badge{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:#edf2f6;color:#29455b;font-size:11px;font-weight:700}
.user-master-note{margin:15px 0 0!important}
.user-admin-actions{margin-top:12px}
.user-deactivate-form{margin-top:8px}
@media(max-width:420px){.user-admin-grid{grid-template-columns:minmax(0,1fr)!important}.user-admin-identity{display:grid}.user-role-badge{justify-self:start}.user-admin-card .btn{width:100%}}
/* Kalenderabo Hilfe */
.calendar-sub-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 18px}
.calendar-sub-help article{padding:13px;border:1px solid #e2e8ed;border-radius:12px;background:#fafbfc;display:grid;gap:5px}
.calendar-sub-help strong{font-size:13px}.calendar-sub-help span{font-size:12px;line-height:1.45;color:#667487}
.calendar-sub-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.calendar-sub-actions form{margin:0}
@media(max-width:760px){.calendar-sub-help{grid-template-columns:1fr}.calendar-sub-actions>*{flex:1 1 100%}.calendar-sub-actions .btn{width:100%}}
/* Lizenz */
.license-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.license-summary-card{margin:0!important;display:grid;gap:7px}
.license-summary-card span{font-size:12px;color:#6b7785}.license-summary-card strong{font-size:18px;line-height:1.25}
@media(max-width:1000px){.license-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.license-summary-grid{grid-template-columns:1fr}}
/* PENDENZO 4.1.2 – Kalender lesbarer und Footer bereinigt */
@media (min-width: 701px){
.calendar-panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.calendar-toolbar,.calendar-panel>.calendar-grid{min-width:1050px!important}
.calendar-day{
height:auto!important;
min-height:190px!important;
max-height:none!important;
overflow:visible!important;
padding:9px!important;
}
.calendar-day.calendar-day-expanded{height:auto!important;max-height:none!important}
.calendar-date{font-size:14px!important;margin-bottom:7px!important}
.calendar-events,.calendar-birthdays,.calendar-items{gap:5px!important}
.calendar-event-label,.calendar-birthday-label{
font-size:12px!important;
line-height:1.3!important;
padding:6px 8px!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
display:block!important;
-webkit-line-clamp:unset!important;
-webkit-box-orient:unset!important;
overflow-wrap:anywhere!important;
}
.calendar-task{padding:6px 8px!important}
.calendar-task strong{
font-size:12px!important;
line-height:1.3!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
display:block!important;
-webkit-line-clamp:unset!important;
-webkit-box-orient:unset!important;
overflow-wrap:anywhere!important;
}
.calendar-task small{font-size:10px!important;line-height:1.25!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.calendar-more-btn{font-size:11px!important;margin-top:5px!important}
}
.app-body .site-footer{
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:14px 18px 18px!important;
font-size:11px!important;
}
.app-body .site-footer a{color:inherit!important;text-decoration:none!important}
.app-body .site-footer a:hover{text-decoration:underline!important}
\n\n/* PENDENZO 4.1.3 – Kalender responsiv ohne gequetschte Zwischenansicht */
@media (min-width: 701px) and (max-width: 1250px){
.calendar-panel{overflow-x:visible!important}
.calendar-toolbar,.calendar-panel>.calendar-grid{min-width:0!important;width:100%!important}
.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important}
.calendar-day{min-width:0!important;min-height:150px!important;padding:6px!important}
.calendar-event-label,.calendar-birthday-label,.calendar-task strong,.calendar-task small{
overflow-wrap:anywhere!important;word-break:normal!important
}
.calendar-event-label,.calendar-birthday-label{font-size:10.5px!important;padding:5px 6px!important}
.calendar-task{padding:5px 6px!important}
.calendar-task strong{font-size:10.5px!important}
.calendar-task small{font-size:9px!important}
}
@media (min-width: 701px) and (max-width: 980px){
.calendar-panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.calendar-toolbar,.calendar-panel>.calendar-grid{min-width:760px!important}
}
.calendar-birthday-label{font-weight:700!important}
.calendar-absence-label{background:#eef3e8;border:1px solid #d9e4cf;color:#40523b;border-radius:7px;padding:5px 7px;font-size:10.5px;font-weight:700;line-height:1.25}
.calendar-absence-label small{display:block;font-weight:500;margin-top:2px}
.attachment-list{display:grid;gap:8px;padding:14px;border:1px solid #e1e7ec;border-radius:11px;background:#fafbfc}
.attachment-list>div,.attachment-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.attachment-list a,.attachment-row a{font-weight:700;color:#254e6b;overflow-wrap:anywhere}
.attachment-list small{color:#74808a}
.attachment-list form,.attachment-row form{margin-left:auto}
.attachment-event-list{display:grid;gap:10px;margin-top:14px}
.attachment-event-list>article{border:1px solid #e3e8ec;border-radius:11px;padding:13px;display:grid;gap:9px}
.attachment-upload-form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px;align-items:center}
.calendar-attachment{text-decoration:none!important;font-size:11px}
@media(max-width:650px){.attachment-upload-form{grid-template-columns:1fr}.attachment-upload-form .btn{width:100%}}
/* PENDENZO 5.2.2 · offene und erledigte Monatsaufgaben */
.task-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.task-section-head h2{margin:0 0 3px!important;font-size:19px}
.task-section-head p{margin:0!important;font-size:12px}
.completed-tasks-panel{padding:0!important;overflow:hidden}
.completed-tasks-panel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;color:#20384d}
.completed-tasks-panel>summary::-webkit-details-marker{display:none}
.completed-tasks-panel>summary span:first-child{display:grid;gap:3px}
.completed-tasks-panel>summary strong{font-size:17px}
.completed-tasks-panel>summary small{font-size:12px;color:#718093}
.completed-toggle-label{font-size:12px;font-weight:700!important;padding:7px 10px;border:1px solid #d7e0e7;border-radius:8px;background:#fff}
.completed-tasks-panel[open] .completed-toggle-label{font-size:0}
.completed-tasks-panel[open] .completed-toggle-label:after{content:'Ausblenden';font-size:12px}
.completed-tasks-content{border-top:1px solid #e8edf2;padding:0 20px 16px}
@media(max-width:700px){.completed-tasks-panel>summary{padding:15px 16px}.completed-tasks-content{padding:0 0 12px}.task-section-head h2{font-size:17px}}
/* PENDENZO 5.2.1 · kompakter Desktop Kalender ohne Abschneiden */
@media (min-width:981px){
.calendar-panel{overflow-x:hidden!important;padding:20px!important}
.calendar-toolbar,.calendar-panel>.calendar-grid{min-width:0!important;width:100%!important}
.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:5px!important}
.calendar-day{min-width:0!important;min-height:138px!important;padding:6px!important;border-radius:10px!important}
.calendar-date{font-size:12px!important;margin-bottom:4px!important}
.calendar-events,.calendar-birthdays,.calendar-absences,.calendar-items{gap:3px!important}
.calendar-event-label,.calendar-birthday-label,.calendar-absence-label{
font-size:9.5px!important;line-height:1.18!important;padding:4px 5px!important;
white-space:normal!important;overflow-wrap:anywhere!important
}
.calendar-task{padding:4px 5px!important}
.calendar-task strong{font-size:9.5px!important;line-height:1.18!important}
.calendar-task small{font-size:8.5px!important;line-height:1.15!important}
.calendar-toolbar{margin-bottom:10px!important}
.calendar-toolbar h2{font-size:24px!important}
}
/* PENDENZO 4.1.5 · Team assignment */
.user-team-picker,.user-team-form{margin-top:16px;padding-top:14px;border-top:1px solid rgba(31,41,55,.12)}
.user-team-picker>strong,.user-team-form>strong{display:block;margin-bottom:8px}
@media (max-width:760px){.user-team-picker,.user-team-form{margin-top:12px;padding-top:12px}}
/* PENDENZO 4.1.7 · compact editable imports */
.page-head-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.birthday-row{grid-template-columns:58px minmax(0,1fr) auto!important;align-items:center!important}
.birthday-person-name{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.birthday-age{justify-self:end;text-align:right!important;white-space:nowrap}
.birthday-admin-list{display:grid;gap:7px}
.birthday-admin-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid #e3e8ec;border-radius:13px;background:#fff}
.birthday-admin-edit-form{display:grid;grid-template-columns:minmax(180px,1fr) 165px auto;gap:8px;align-items:center;margin:0;min-width:0}
.birthday-admin-edit-form input{min-height:38px!important;padding:7px 10px!important;margin:0!important;font-size:14px!important}
.birthday-admin-item .btn{min-height:38px!important;padding:8px 12px!important;font-size:13px!important}
.birthday-delete-form{margin:0!important}
.birthday-empty{padding:18px!important}
.calendar-event-admin-list{display:grid;gap:8px}
.calendar-event-admin-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;padding:10px;border:1px solid #e2e8ed;border-radius:14px;background:#fff}
.calendar-event-edit-form{display:grid;grid-template-columns:135px 135px minmax(230px,1.5fr) minmax(130px,.65fr) minmax(170px,.8fr) auto;gap:8px;align-items:end;margin:0;min-width:0}
.calendar-event-edit-form label,.calendar-event-team-field{margin:0;min-width:0;font-size:12px;color:#667789}
.calendar-event-edit-form input{min-height:38px!important;padding:7px 9px!important;margin-top:4px!important;font-size:13px!important}
.calendar-event-team-field .permission-grid{margin-top:4px;gap:4px!important}
.calendar-event-team-field .checkline{font-size:12px!important}
.calendar-event-save,.calendar-event-delete-form .btn{min-height:38px!important;padding:8px 11px!important;font-size:13px!important}
.calendar-event-delete-form{margin:0!important}
.field-label{display:block;font-weight:600;color:#4d5f70}
@media(max-width:1180px){
.calendar-event-admin-item{grid-template-columns:1fr}
.calendar-event-edit-form{grid-template-columns:135px 135px minmax(220px,1fr) minmax(130px,.6fr)}
.calendar-event-team-field{grid-column:1/4}.calendar-event-save{grid-column:4}
.calendar-event-delete-form{justify-self:end}
}
@media(max-width:760px){
.page-head-actions{display:grid;width:100%}.page-head-actions .btn{width:100%}
.birthday-admin-item{grid-template-columns:1fr}
.birthday-admin-edit-form{grid-template-columns:minmax(0,1fr) 145px auto}
.birthday-delete-form{justify-self:end}
.calendar-event-edit-form{grid-template-columns:1fr 1fr}
.calendar-event-title-field,.calendar-event-team-field{grid-column:1/-1}
.calendar-event-save{grid-column:1/-1;width:100%}
.calendar-event-delete-form,.calendar-event-delete-form .btn{width:100%}
}
@media(max-width:520px){
.birthday-admin-edit-form{grid-template-columns:1fr}
.birthday-admin-edit-form .btn,.birthday-delete-form,.birthday-delete-form .btn{width:100%!important}
.calendar-event-edit-form{grid-template-columns:1fr}.calendar-event-title-field,.calendar-event-team-field,.calendar-event-save{grid-column:1}
}
/* PENDENZO 4.1.7 · bulk calendar event editing */
.calendar-event-bulk-actions{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid #e7edf2;flex-wrap:wrap}
.calendar-event-delete-button{align-self:center}
@media(max-width:700px){.calendar-event-bulk-actions{justify-content:stretch}.calendar-event-bulk-actions .btn{width:100%}.calendar-event-bulk-actions .muted{width:100%;text-align:center}}
/* PENDENZO 5.4.2 · stabiler Monatskalender und anklickbare Termine */
.calendar-event-trigger{cursor:pointer;width:100%;text-align:left}
.calendar-event-trigger:hover,.calendar-event-trigger:focus-visible{border-color:#8db4cc!important;box-shadow:0 0 0 2px rgba(76,137,177,.12);outline:0}
.calendar-dialog{width:min(620px,calc(100vw - 28px));max-height:min(760px,calc(100vh - 28px));border:0;border-radius:18px;padding:0;background:#fff;color:#182230;box-shadow:0 28px 90px rgba(18,34,48,.28)}
.calendar-dialog::backdrop{background:rgba(13,28,41,.52);backdrop-filter:blur(3px)}
.calendar-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 15px;border-bottom:1px solid #e4eaf0}
.calendar-dialog-head h2{margin:4px 0 0;font-size:22px}
.calendar-dialog-close{border:0;background:#eef2f5;color:#263b4b;width:36px;height:36px;padding:0;border-radius:10px;font-size:25px;line-height:1;cursor:pointer}
.calendar-dialog-list{display:grid;gap:8px;padding:18px 22px 22px;overflow:auto;max-height:65vh}
.calendar-dialog-list .calendar-event-label,.calendar-dialog-list .calendar-birthday-label,.calendar-dialog-list .calendar-absence-label,.calendar-dialog-list .calendar-task{font-size:13px!important;line-height:1.3!important;padding:10px 11px!important;display:block!important;white-space:normal!important;overflow:visible!important}
.calendar-dialog-list .calendar-task strong{font-size:13px!important;white-space:normal!important;display:block!important;overflow:visible!important}
.calendar-dialog-list .calendar-task small{font-size:11px!important;white-space:normal!important;overflow:visible!important}
.calendar-event-details{margin:18px 22px 0;padding:12px 14px;border-radius:10px;background:#eef5f9;color:#425c6d;font-size:13px}
.calendar-event-modal-form{display:grid;gap:13px;padding:18px 22px 22px}
.calendar-event-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calendar-event-modal-form .actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:3px}
@media(min-width:701px){
.calendar-panel{overflow-x:hidden!important}
.calendar-toolbar,.calendar-panel>.calendar-grid{min-width:0!important;width:100%!important}
.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px!important;align-items:stretch!important}
.calendar-day,.calendar-day.calendar-day-expanded{height:164px!important;min-height:164px!important;max-height:164px!important;overflow:hidden!important;padding:7px!important;display:flex!important;flex-direction:column!important}
.calendar-events,.calendar-birthdays,.calendar-absences,.calendar-items{gap:3px!important;margin:0!important}
.calendar-event-label,.calendar-birthday-label,.calendar-absence-label,.calendar-task{flex:0 0 auto;max-height:42px!important;overflow:hidden!important}
.calendar-event-label,.calendar-birthday-label,.calendar-absence-label{font-size:10px!important;line-height:1.2!important;padding:5px 6px!important;display:block!important;white-space:normal!important}
.calendar-event-label span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.calendar-task{padding:5px 6px!important}
.calendar-task strong{font-size:10px!important;line-height:1.18!important;display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.calendar-task small{font-size:8.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important}
.calendar-more-btn{margin-top:auto!important;padding:4px 2px 0!important;font-size:10px!important;flex:0 0 auto}
}
@media(min-width:701px) and (max-width:980px){.calendar-panel{overflow-x:auto!important}.calendar-toolbar,.calendar-panel>.calendar-grid{min-width:760px!important}}
@media(max-width:700px){
.calendar-day{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
.calendar-entry-hidden{display:block!important}
.calendar-event-trigger{cursor:pointer}
.calendar-event-modal-grid{grid-template-columns:1fr}
.calendar-event-modal-form .actions .btn{width:100%}
}
.app-user-name small.tenant-name{display:block;font-size:9px;font-weight:500;opacity:.65;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* PENDENZO 5.0.11 · Paket- und Lizenzkennzeichnung */
.app-user-name small.tenant-license{display:block;margin-top:2px;font-size:9px;font-weight:700;letter-spacing:.02em;color:#506a7d;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* PENDENZO 5.4.6 · Checkboxen in der Benutzerverwaltung */
.user-checkbox-grid .checkline{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:9px;margin:0;line-height:1.35}
.user-checkbox-grid .checkline input[type="checkbox"]{width:18px!important;height:18px!important;min-height:18px!important;padding:0!important;margin:0;align-self:start}
/* PENDENZO 5.4.8 · Dashboard Symbole und nächste Termine */
.sidebar nav a{display:flex!important;align-items:center;gap:12px}
.nav-icon{width:24px;height:24px;display:grid;place-items:center;flex:0 0 24px}
.nav-icon svg,.stat-icon svg,.event-calendar-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dashboard-stat{display:flex;align-items:center;gap:16px;min-width:0}
.dashboard-stat>div{min-width:0;flex:1}
.dashboard-stat .stat-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:0 0 50px}
.dashboard-stat .stat-icon svg{width:27px;height:27px;stroke-width:2.3}
.dashboard-stat small{display:block;margin-top:1px;color:#718093;font-size:12px}
.dashboard-stat .progress{margin-top:8px}
.stat-total .stat-icon{color:#229e87;background:#dff4ee}
.stat-done .stat-icon{color:#1f72c5;background:#dcecff}
.stat-done .progress i{background:#3379db}
.stat-open .stat-icon{color:#df8b00;background:#fff0d5}
.stat-overdue .stat-icon{color:#c82f38;background:#fde4e6}
.dashboard-status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;white-space:nowrap;color:#506070;background:#f0f3f6}
.dashboard-status i{width:14px;height:14px;border:2px solid currentColor;border-radius:50%;display:inline-grid;place-items:center;font-size:9px;line-height:1;font-style:normal;font-weight:700}
.dashboard-status.done{color:#1f72c5;background:#e4f0fc}
.dashboard-status.open{color:#b76d00;background:#fff1d8}
.dashboard-status.doing{color:#2570b8;background:#e4effa}
.dashboard-status.waiting{color:#76579a;background:#f0e9f7}
.dashboard-status.overdue{color:#bd2832;background:#fde7e8}
.dashboard-lower-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.dashboard-lower-panel{margin-bottom:20px!important;min-width:0;display:flex;flex-direction:column}
.dashboard-lower-panel>.task-cards,.dashboard-lower-panel>.dashboard-event-list{flex:1}
.dashboard-compact-list{gap:0}
.dashboard-compact-list .task-card{grid-template-columns:110px minmax(0,1fr) auto;border:0;border-top:1px solid #e4eaf0;border-radius:0;padding:12px 2px}
.dashboard-compact-list .task-card:first-of-type{border-top:0}
.dashboard-compact-list .task-info h3{font-size:14px}
.dashboard-compact-list .due{font-size:12px}
.dashboard-event-list{display:grid;align-content:start;border:1px solid #e2e9ef;border-radius:12px;overflow:hidden;background:#fff}
.dashboard-event-list>.empty{border:0}
.dashboard-event-row{display:grid;grid-template-columns:92px 28px minmax(0,1fr) 14px;gap:12px;align-items:center;min-height:66px;padding:10px 13px;color:#182230;text-decoration:none;border-top:1px solid #e4eaf0}
.dashboard-event-row:first-child{border-top:0}
.dashboard-event-row:hover{background:#f7fafc}
.event-date strong,.event-date small,.event-info strong,.event-info small{display:block}
.event-date strong{font-size:13px}.event-date small,.event-info small{margin-top:3px;color:#718093;font-size:12px}
.event-info{min-width:0}.event-info strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-info small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-calendar-icon{width:25px;height:25px;color:#2d70d5}
.event-chevron{color:#91a2b3;font-size:22px;text-align:right}
@media(max-width:1100px){
.dashboard-stat{gap:11px}.dashboard-stat .stat-icon{width:42px;height:42px;flex-basis:42px}.dashboard-stat .stat-icon svg{width:23px;height:23px}
.dashboard-compact-list .task-card{grid-template-columns:95px minmax(0,1fr) auto}
}
@media(max-width:900px){
.sidebar nav a{justify-content:flex-start!important;gap:8px!important}
.nav-icon{width:20px;height:20px;flex-basis:20px}
.dashboard-lower-grid{grid-template-columns:1fr}
.dashboard-lower-panel{min-height:0}
}
@media(max-width:600px){
.sidebar nav a{flex-direction:column;justify-content:center!important;gap:5px!important;text-align:center}
.dashboard-stat{padding:15px!important}.dashboard-stat .stat-icon{width:40px;height:40px;flex-basis:40px}
.dashboard-stat strong{font-size:25px}.dashboard-stat small{font-size:11px}
.dashboard-lower-panel .panel-head{align-items:center}.dashboard-lower-panel .panel-head h2{font-size:19px}
.dashboard-lower-panel .panel-head .btn{width:auto!important;padding:8px 10px;font-size:12px}
.dashboard-compact-list .task-card{grid-template-columns:1fr!important;gap:7px;padding:12px 0}
.dashboard-compact-list .dashboard-status{justify-self:start}
.dashboard-event-row{grid-template-columns:78px 24px minmax(0,1fr) 10px;gap:8px;padding:10px 8px}
.event-calendar-icon{width:22px;height:22px}.event-info strong{font-size:13px}.event-date strong,.event-date small,.event-info small{font-size:11px}
}
/* PENDENZO 5.5.1 · abschliessende mobile Vorrangregeln */
@media(max-width:900px){
.app-body .site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
}
@media(max-width:700px){
.tasks-table .task-actions,.recurring-table .task-actions{flex-direction:row!important;align-items:center!important}
}
@media(max-width:600px){
.main-content .page-head h1{font-size:29px!important;line-height:1.12!important}
.main-content .welcome-head h1{font-size:31px!important}
}
/* PENDENZO 5.5.2 · kompakte mobile Listen, Branding und Footer */
.app-body .site-footer{display:grid!important;justify-items:center!important;gap:4px!important;text-align:center!important}
.footer-brand-line{display:block!important;font-weight:600!important;letter-spacing:.02em}
@media(max-width:900px){
.mobile-brand{gap:10px!important}
.mobile-brand img{width:43px!important;height:43px!important;border-radius:12px!important}
.mobile-brand-copy{display:grid;gap:1px;line-height:1.05}
.mobile-brand-copy strong{font-size:15px;font-weight:800!important;letter-spacing:.035em}
.mobile-brand-copy small{font-size:10px;color:rgba(255,255,255,.78);letter-spacing:.015em}
}
@media(max-width:700px){
.month-tabs{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:6px!important;width:100%!important}
.month-tabs a{display:grid!important;place-items:center!important;min-width:0!important;padding:8px 3px!important;text-align:center!important}
.task-status-section{padding:13px!important}
.tasks-table tbody,.recurring-table tbody{gap:8px!important}
.tasks-table tr,.recurring-table tr{grid-template-columns:minmax(0,1fr) auto!important;gap:3px 10px!important;padding:12px!important;border-radius:13px!important}
.tasks-table td,.recurring-table td{padding:2px 0!important;font-size:13px!important;line-height:1.35!important}
.tasks-table td::before,.recurring-table td::before{display:inline!important;margin:0 5px 0 0!important;font-size:10px!important}
.tasks-table .task-cell-title,.recurring-table .recurring-cell-title{grid-column:1!important;grid-row:1!important;padding:0 0 5px!important;font-size:15px!important;line-height:1.3!important}
.tasks-table .task-cell-title::before,.recurring-table .recurring-cell-title::before,.tasks-table .task-cell-status::before,.recurring-table .recurring-cell-status::before,.tasks-table .task-cell-actions::before,.recurring-table .recurring-cell-actions::before{display:none!important}
.tasks-table .task-cell-status,.recurring-table .recurring-cell-status{grid-column:2!important;grid-row:1!important;align-self:start!important;padding:0!important}
.tasks-table .task-cell-date,.tasks-table .task-cell-area,.tasks-table .task-cell-assigned,.recurring-table .recurring-cell-area,.recurring-table .recurring-cell-rhythm,.recurring-table .recurring-cell-time,.recurring-table .recurring-cell-assigned{grid-column:1/-1!important}
.tasks-table .task-cell-actions,.recurring-table .recurring-cell-actions{grid-column:1/-1!important;padding-top:7px!important;margin-top:4px!important;border-top:1px solid #e8edf2!important}
.tasks-table .task-actions .btn,.recurring-table .task-actions .btn{min-height:36px!important;padding:7px 10px!important;font-size:12px!important}
.tasks-table .check{width:36px!important;height:36px!important}
.series-search-panel{padding:13px!important}
}
@media(max-width:360px){
.mobile-brand .mobile-brand-copy{display:grid!important}
.mobile-profile>span:first-child{display:none!important}
.mobile-brand-copy strong{font-size:14px}
.mobile-brand-copy small{font-size:9px}
.month-tabs{gap:4px!important}
.month-tabs a{font-size:11px!important;padding-inline:2px!important}
}
/* PENDENZO 5.5.3 · schnelle Aufgabenerfassung auch am Desktop */
@media(min-width:701px){
.quick-task-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.quick-task-title,.quick-task-details,.quick-task-links{grid-column:1/-1}
.quick-task-save{align-self:end}
}
/* PENDENZO 5.6.0 · persönliche Schnellnotizen */
.new-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.new-choice-card{display:grid;gap:8px;min-height:150px;padding:24px;border:1px solid #dce5ec;border-radius:18px;background:#fff;color:#182230;text-decoration:none;box-shadow:0 8px 24px rgba(27,51,70,.05)}
.new-choice-card:hover,.new-choice-card:focus-visible{border-color:#8eafc5;box-shadow:0 12px 30px rgba(27,51,70,.1);outline:0}
.new-choice-card>span:not(.new-choice-icon){display:grid;gap:4px}.new-choice-card strong{font-size:21px;color:#182230}.new-choice-card small{color:#718093;line-height:1.45}
.new-choice-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#e7f1f7;color:#20384d;font-size:25px;font-weight:700}
.notes-capture-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.notes-capture-form label{margin:0}.notes-capture-form input{margin:0!important}
.notes-list{display:grid;gap:9px}
.note-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 14px;border:1px solid #e0e8ee;border-radius:13px;background:#fff}
.note-row.completed{background:#f7f9fb;color:#637282}
.note-copy{display:grid;gap:4px;min-width:0}.note-copy strong{font-size:14px;line-height:1.4;overflow-wrap:anywhere}.note-copy small{color:#718093;font-size:11px}
.note-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.note-actions form{margin:0}
.notes-completed-panel>summary div{display:grid;gap:3px}.notes-completed-panel>summary h2,.notes-completed-panel>summary p{margin:0}
.notes-completed-panel>.notes-list{padding:0 20px 18px}
.dashboard-notes-capture{margin-bottom:13px}.dashboard-notes-list{gap:7px}
.dashboard-notes-list .note-row{padding:10px 12px}.compact-alert{padding:10px 12px;margin-bottom:12px}
@media(max-width:700px){
.new-choice-grid{grid-template-columns:1fr;gap:10px}.new-choice-card{min-height:0;padding:18px}
.notes-capture-form{grid-template-columns:1fr}.notes-capture-form .btn{width:100%}
.note-row{grid-template-columns:1fr;gap:10px;padding:12px}.note-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.note-actions .btn,.note-actions form,.note-actions form .btn{width:100%}
.notes-completed-panel>.notes-list{padding:0 12px 14px}
.dashboard-notes-panel .panel-head{align-items:center}.dashboard-notes-panel .panel-head .btn{width:auto!important;padding:8px 10px;font-size:12px}
}
/* PENDENZO 5.6.1 · Dashboard Kacheln und heutige Termine */
.dashboard-focus-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:"today notes" "week events";
gap:18px;
align-items:stretch;
margin-bottom:20px;
}
.dashboard-focus-grid.without-notes{grid-template-areas:"today today" "week events"}
.dashboard-focus-grid>.panel{min-width:0;margin-bottom:0!important;display:flex;flex-direction:column}
.dashboard-focus-grid>.panel>.task-cards,.dashboard-focus-grid>.panel>.dashboard-event-list,.dashboard-focus-grid>.panel>.dashboard-notes-list{flex:1}
.dashboard-focus-today{grid-area:today}
.dashboard-focus-notes{grid-area:notes}
.dashboard-focus-week{grid-area:week}
.dashboard-focus-events{grid-area:events}
.dashboard-focus-grid .dashboard-lower-panel{min-height:0}
.dashboard-today-list .task-card{grid-template-columns:110px minmax(0,1fr) auto}
.dashboard-focus-today .today-strip{display:grid;gap:7px;margin:0 0 13px;padding:0 0 13px;border-bottom:1px solid #e4eaf0}
.dashboard-focus-today .today-chip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:11px}
.dashboard-focus-today .today-chip strong{min-width:0;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.dashboard-focus-today .today-chip small{flex:0 0 auto;font-size:11px;font-weight:600;white-space:nowrap;opacity:.8}
@media(max-width:900px){
.dashboard-focus-grid{display:block;margin-bottom:0}
.dashboard-focus-grid>.panel{margin-bottom:20px!important}
}
@media(max-width:600px){
.dashboard-today-list .task-card{grid-template-columns:1fr!important}
.dashboard-focus-today .today-chip{align-items:flex-start}
}
/* PENDENZO 5.6.2 · kompakte Notizen, Termine und Sortierung */
.dashboard-notes-panel{--note-done-width:94px}
.dashboard-notes-panel .panel-head{align-items:flex-start}
.dashboard-notes-panel .panel-head>.btn{margin-top:0}
.dashboard-notes-capture{grid-template-columns:minmax(0,1fr) var(--note-done-width);align-items:stretch}
.dashboard-notes-capture input,.dashboard-notes-capture>.btn{min-height:42px;height:42px}
.dashboard-notes-capture>.btn{width:var(--note-done-width);padding:7px 9px;font-size:12px;border-radius:10px}
.dashboard-notes-list .note-row{padding:9px 10px}
.dashboard-notes-list .note-actions{gap:6px;flex-wrap:nowrap}
.dashboard-notes-list .note-actions .btn{min-height:34px;padding:6px 9px;border-radius:9px;font-size:12px;line-height:1.2;white-space:nowrap}
.dashboard-notes-list .note-task-btn{background:#fff}
.dashboard-notes-list .note-done-btn{width:var(--note-done-width);border:1px solid #b9ddc7;background:#e7f5ec;color:#22613b}
.dashboard-notes-list .note-done-btn:hover,.dashboard-notes-list .note-done-btn:focus-visible{border-color:#88c69f;background:#d9efdf;color:#174c2c}
.calendar-date-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.calendar-range-group{min-width:0;margin:0;padding:12px;border:1px solid #dfe7ee;border-radius:13px;background:#f8fafb;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(120px,.7fr);gap:10px}
.calendar-range-group legend{padding:0 5px;color:#25384b;font-size:13px;font-weight:800}
.calendar-range-group label{min-width:0;margin:0;font-size:12px;color:#68798a}
.calendar-range-group input{margin-top:5px!important;background:#fff}
.calendar-event-admin-list{gap:11px}
.calendar-event-admin-item{grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;padding:14px!important;border-radius:14px!important;box-shadow:0 6px 18px rgba(31,55,74,.04)}
.calendar-event-admin-item:hover{border-color:#c6d5e0;box-shadow:0 9px 24px rgba(31,55,74,.07)}
.calendar-event-edit-form{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(180px,.6fr)!important;gap:10px 12px!important;align-items:end!important}
.calendar-event-title-field,.calendar-event-category-field{grid-column:auto!important}
.calendar-event-date-range{grid-column:1/-1}
.calendar-event-team-field{grid-column:1/-1!important}
.calendar-event-admin-item .permission-grid{margin:5px 0!important}
.calendar-event-delete-button{align-self:center!important;min-height:36px!important;padding:7px 11px!important;font-size:12px!important}
.areas-sort-table .area-sort-column{width:54px;text-align:center}
.area-drag-handle{width:38px;height:38px;display:grid;place-items:center;border:1px solid #d3dee7;border-radius:10px;background:#f7f9fb;color:#51677a;font-size:22px;line-height:1;cursor:grab;touch-action:none}
.area-drag-handle:hover,.area-drag-handle:focus-visible{border-color:#8faabd;background:#edf3f7;color:#20384d;outline:0}
.area-drag-handle:active{cursor:grabbing}
.area-sort-row{transition:opacity .15s,box-shadow .15s,background .15s}
.area-sort-row.is-dragging{opacity:.58;background:#edf4f8;box-shadow:0 10px 24px rgba(31,55,74,.12)}
.area-rename-form{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:8px;align-items:center;margin:0}
.area-rename-form input{margin:0!important}
.area-actions{display:flex;gap:6px;flex-wrap:wrap}
.area-actions form{margin:0}
@media(max-width:900px){
.calendar-event-edit-form{grid-template-columns:1fr!important}
.calendar-event-title-field,.calendar-event-category-field,.calendar-event-date-range,.calendar-event-team-field{grid-column:1!important}
}
@media(max-width:700px){
.dashboard-notes-capture{grid-template-columns:minmax(0,1fr) var(--note-done-width)}
.dashboard-notes-capture>.btn{width:var(--note-done-width)!important}
.dashboard-notes-list .note-actions{display:flex;grid-template-columns:none;width:100%}
.dashboard-notes-list .note-actions .btn,.dashboard-notes-list .note-actions form,.dashboard-notes-list .note-actions form .btn{width:auto}
.dashboard-notes-list .note-actions form{margin-left:auto}
.dashboard-notes-list .note-done-btn{width:var(--note-done-width)!important}
.calendar-date-range{grid-template-columns:1fr}
.calendar-range-group{grid-template-columns:minmax(0,1.3fr) minmax(105px,.7fr)}
.calendar-event-admin-item{grid-template-columns:1fr!important;align-items:stretch!important}
.calendar-event-delete-button{justify-self:end}
}
@media(max-width:760px){
.areas-sort-table thead{display:none}
.areas-sort-table tbody{display:grid;gap:9px}
.areas-sort-table .area-sort-row{display:grid!important;grid-template-columns:42px minmax(0,1fr);gap:8px 10px;padding:11px;border:1px solid #e0e7ed;border-radius:13px;background:#fff}
.areas-sort-table td{display:block!important;padding:0!important;border:0!important}
.areas-sort-table .area-sort-column{grid-column:1;grid-row:1;width:auto;align-self:center}
.areas-sort-table .area-sort-row>td:nth-child(2){grid-column:2;grid-row:1}
.areas-sort-table .area-sort-row>td:nth-child(3){grid-column:2;grid-row:2}
.areas-sort-table .area-sort-row>td:nth-child(4){grid-column:2;grid-row:3}
.area-rename-form{grid-template-columns:1fr}
.area-rename-form .btn{width:100%}
}
/* PENDENZO 5.6.3 · anklickbare Notizkacheln */
.note-click-form{display:grid;grid-template-columns:minmax(0,1fr);gap:0!important;padding:0!important;overflow:hidden}
.note-click-form.has-convert{grid-template-columns:minmax(0,1fr) auto}
.note-complete-card{min-width:0;width:100%;height:100%;margin:0;padding:13px 14px;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:12px;align-items:center;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.note-complete-card:hover,.note-complete-card:focus-visible{background:#f4f8fa;outline:0}
.note-complete-card:hover .note-copy strong,.note-complete-card:focus-visible .note-copy strong{color:#163f5b}
.note-complete-icon{width:26px;height:26px;display:grid;place-items:center;border:2px solid #aebfcb;border-radius:50%;color:transparent;font-size:13px;font-weight:800;transition:border-color .15s,background .15s,color .15s}
.note-complete-card:hover .note-complete-icon,.note-complete-card:focus-visible .note-complete-icon{border-color:#668aa3;background:#e9f1f5;color:#315c78}
.note-click-form>.note-task-btn{align-self:center;margin:0 12px 0 0;min-height:34px;padding:6px 10px;border-radius:9px;font-size:12px;white-space:nowrap}
.dashboard-notes-list .note-click-form{padding:0!important}
.dashboard-notes-list .note-complete-card{padding:9px 10px}
@media(max-width:700px){
.note-click-form,.note-click-form.has-convert{grid-template-columns:minmax(0,1fr) auto!important;gap:0!important;padding:0!important}
.note-click-form>.note-task-btn{width:auto!important;margin-right:9px}
}
@media(max-width:460px){
.note-click-form,.note-click-form.has-convert{grid-template-columns:1fr!important}
.note-click-form>.note-task-btn{justify-self:end;margin:0 10px 10px}
}
/* PENDENZO 5.6.4 · kein automatischer Formularzoom auf iPhone */
@media(max-width:700px){
input,select,textarea{font-size:16px!important}
}
/* PENDENZO 5.7.0 · Dashboard, Support und Neuigkeiten */
.dashboard-task-card{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;padding:0!important;overflow:hidden}
.dashboard-task-main{min-width:0;display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;padding:11px 0 11px 12px;color:inherit;text-decoration:none}
.dashboard-task-main:hover .task-info h3,.dashboard-task-main:focus-visible .task-info h3{color:#184d6e}
.dashboard-compact-list .dashboard-task-card.late{border-left:4px solid #d95858}
.dashboard-task-card.late .due small,.dashboard-task-card.late .due b{color:#b33939}
.dashboard-task-card:hover,.dashboard-task-card:focus-within{background:#f4f8fa}
.dashboard-task-complete{align-self:stretch;display:flex;margin:0;padding:0}
.dashboard-task-complete button{width:58px;min-height:58px;display:grid;place-items:center;border:0;border-left:1px solid #e4eaf0;background:transparent;color:#315c78;font:inherit;cursor:pointer}
.dashboard-task-complete button:hover,.dashboard-task-complete button:focus-visible{background:#f4f8fa;outline:0}
.dashboard-task-card:hover .note-complete-icon,.dashboard-task-card:focus-within .note-complete-icon,.dashboard-task-complete button:hover .note-complete-icon,.dashboard-task-complete button:focus-visible .note-complete-icon{border-color:#668aa3;background:#e9f1f5;color:#315c78}
.support-form{display:grid;gap:13px}.support-optional{font-weight:500;color:#718093}.support-privacy{margin:0!important;padding:11px 13px;border-radius:10px;background:#edf4f7;color:#526a79!important;font-size:12px;line-height:1.5}
.news-dialog{width:min(780px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 28px);padding:0;border:0;border-radius:20px;background:#fff;box-shadow:0 24px 80px rgba(13,35,51,.3);overflow:hidden}
.news-dialog::backdrop{background:rgba(18,35,49,.52);backdrop-filter:blur(3px)}
.news-dialog-scroll{max-height:calc(100dvh - 28px);overflow:auto;padding:34px 38px 32px}
.news-dialog-close{position:absolute;z-index:2;top:13px;right:13px;width:40px;height:40px;border:0;border-radius:12px;background:#e9eef2;color:#20384d;font-size:27px;line-height:1;cursor:pointer}
.news-dialog-kicker,.news-card-date{margin:0 52px 15px 0;color:#687b89;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.news-dialog h2,.news-card h2{margin:16px 0 12px;color:#182230;font-size:28px;line-height:1.18}
.news-copy{color:#4d5e6d;font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.news-dialog-image,.news-card-image{display:block;width:100%;max-height:360px;object-fit:contain;border:1px solid #e0e7ec;border-radius:14px;background:#f7f9fa}
.news-dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.news-dismiss-error{color:#9a2f2f;font-size:13px}.news-archive{display:grid;gap:16px}.news-card{max-width:900px}.news-card .btn{margin-top:18px}
@media(max-width:700px){
.dashboard-task-main{grid-template-columns:72px minmax(0,1fr);gap:9px;padding:10px 0 10px 10px}
.dashboard-task-complete button{width:54px;min-height:54px}
.news-dialog-scroll{padding:28px 18px 22px}.news-dialog h2,.news-card h2{font-size:23px}.news-dialog-actions .btn{width:100%}.news-dialog-image,.news-card-image{max-height:260px}
}
@media(max-width:420px){
.dashboard-task-card{grid-template-columns:minmax(0,1fr) 50px!important}.dashboard-task-main{grid-template-columns:1fr;padding:10px}.dashboard-task-complete button{width:50px}
}
/* PENDENZO 5.6.1 · Erfassung im Dialog */
.create-dialog{width:min(760px,calc(100vw - 28px));max-width:none;height:min(760px,calc(100dvh - 28px));max-height:none;margin:auto;padding:0;border:0;border-radius:20px;background:#f5f8fa;box-shadow:0 24px 80px rgba(13,35,51,.28);overflow:hidden}
.create-dialog::backdrop{background:rgba(18,35,49,.48);backdrop-filter:blur(3px)}
.create-dialog-close{position:absolute;z-index:2;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:11px;background:#e7edf2;color:#20384d;font-size:25px;line-height:1;cursor:pointer}
.create-dialog iframe{display:block;width:100%;height:100%;border:0;background:#f5f8fa}
.create-dialog-open{overflow:hidden}
.create-success-toast{position:fixed;z-index:3000;right:22px;bottom:22px;padding:13px 17px;border-radius:12px;background:#245d39;color:#fff;box-shadow:0 12px 30px rgba(22,56,39,.25);font-weight:700}
.embed-create-body{min-height:100dvh;margin:0;background:#f5f8fa!important;background-image:none!important;color:#182230}
.embed-create-main{width:min(700px,100%);margin:0 auto;padding:30px 24px 36px}
.embed-create-main>h1{margin:0 48px 22px 0;font-size:28px;line-height:1.15}
.embed-create-alert{margin-bottom:14px}
.embed-create-main .panel{box-shadow:none;margin:0}
.embed-create-main .quick-task-panel{padding:0;border:0;background:transparent}
.embed-create-main .quick-task-form{gap:13px}
.embed-note-form{grid-template-columns:1fr;align-items:stretch}
.embed-note-form .btn{width:100%}
.new-choice-card{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-height:96px}
.new-choice-card>strong{font-size:19px;color:#182230}
.embed-choice-grid{grid-template-columns:1fr}
@media(max-width:700px){
.create-dialog{width:100vw;height:100dvh;border-radius:0}
.embed-create-main{padding:24px 16px 30px}
.embed-create-main>h1{font-size:25px}
.create-success-toast{right:14px;bottom:76px;left:14px;text-align:center}
}