@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Inter-Medium.woff) format('woff')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Inter-SemiBold.woff) format('woff')}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Inter-Bold.woff) format('woff')}
@font-face{font-family:'Inter';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/Inter-ExtraBold.woff) format('woff')}
body{margin:0}
*{-webkit-tap-highlight-color:transparent}
button{font-family:inherit;transition:transform .4s cubic-bezier(.34,1.56,.64,1),background-color .3s ease,box-shadow .3s ease,opacity .2s ease,border-color .3s ease,color .3s ease}
button:active{transform:scale(.94);transition-duration:.12s}
@keyframes screenIn{from{opacity:0;transform:translateY(20px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes avatarIn{from{opacity:0;transform:scale(.3) translateY(10px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes toastIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes bannerIn{from{opacity:0;transform:translateY(-8px);max-height:0}to{opacity:1;transform:none;max-height:72px}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes popA{from{transform:scale(.78)}to{transform:scale(1)}}
@keyframes popB{from{transform:scale(.78)}to{transform:scale(1)}}
@keyframes shakeA{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes shakeB{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes nextA{from{opacity:0;transform:translateX(32px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes nextB{from{opacity:0;transform:translateX(32px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes prevA{from{opacity:0;transform:translateX(-32px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes prevB{from{opacity:0;transform:translateX(-32px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-28px,24px) scale(1.2)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(32px,-20px) scale(.9)}}
@keyframes ring{0%{box-shadow:0 0 0 0 var(--accentA)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes wiggle{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}30%{transform:rotate(12deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(4deg)}}
.screen{animation:screenIn .6s cubic-bezier(.16,1,.3,1) backwards}
.rise{animation:rise .65s cubic-bezier(.16,1,.3,1) backwards}
.avatarIn{animation:avatarIn .8s cubic-bezier(.34,1.56,.64,1) backwards;animation:avatarIn .9s linear(0, 0.2 6%, 0.6 13%, 0.92 20%, 1.08 28%, 1.1 33%, 1.04 42%, 0.99 52%, 1.004 66%, 1) backwards}
.sheetUp{animation:sheetUp .6s cubic-bezier(.16,1,.3,1) backwards}
.sheetUp>*{animation:rise .6s cubic-bezier(.16,1,.3,1) backwards}
.sheetUp>*:nth-child(1){animation:none}
.sheetUp>*:nth-child(2){animation-delay:80ms}
.sheetUp>*:nth-child(3){animation-delay:130ms}
.sheetUp>*:nth-child(4){animation-delay:180ms}
.sheetUp>*:nth-child(5){animation-delay:230ms}
.sheetUp>*:nth-child(6){animation-delay:280ms}
.sheetUp>*:nth-child(n+7){animation-delay:330ms}
.fadeIn{animation:fadeIn .35s ease backwards}
.toastIn{animation:toastIn .55s cubic-bezier(.34,1.5,.5,1) backwards;animation:toastIn .8s linear(0, 0.2 6%, 0.6 13%, 0.92 20%, 1.08 28%, 1.1 33%, 1.04 42%, 0.99 52%, 1.004 66%, 1) backwards}
.bannerIn{animation:bannerIn .5s cubic-bezier(.16,1,.3,1) backwards}
.grow{transform-origin:left center;animation:grow .8s cubic-bezier(.16,1,.3,1) backwards}
.popA{animation:popA .6s cubic-bezier(.34,1.56,.64,1);animation:popA .7s linear(0, 0.2 6%, 0.6 13%, 0.92 20%, 1.08 28%, 1.1 33%, 1.04 42%, 0.99 52%, 1.004 66%, 1)}
.popB{animation:popB .6s cubic-bezier(.34,1.56,.64,1);animation:popB .7s linear(0, 0.2 6%, 0.6 13%, 0.92 20%, 1.08 28%, 1.1 33%, 1.04 42%, 0.99 52%, 1.004 66%, 1)}
.shakeA{animation:shakeA .42s ease}
.shakeB{animation:shakeB .42s ease}
.nextA{animation:nextA .5s cubic-bezier(.16,1,.3,1) backwards}
.nextB{animation:nextB .5s cubic-bezier(.16,1,.3,1) backwards}
.prevA{animation:prevA .5s cubic-bezier(.16,1,.3,1) backwards}
.prevB{animation:prevB .5s cubic-bezier(.16,1,.3,1) backwards}
.ringPulse{animation:ring 2.6s ease-out infinite}
input:focus{outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accentA)}
.gradText{background:linear-gradient(100deg,var(--ink) 35%,var(--accent) 135%);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--glassBd);box-shadow:var(--shadow)}
.aur{position:absolute;border-radius:50%;pointer-events:none;filter:blur(30px);z-index:-1}
.a1{left:-130px;top:250px;width:320px;height:320px;background:radial-gradient(circle,var(--accentA),transparent 68%);animation:drift1 15s ease-in-out infinite}
.a2{right:-150px;top:540px;width:340px;height:340px;opacity:.65;background:radial-gradient(circle,var(--accentA),transparent 70%);animation:drift2 18s ease-in-out infinite}
@keyframes loginOut{to{opacity:0;transform:scale(1.07);filter:blur(12px)}}
.loginOut{animation:loginOut .46s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ringFill{from{stroke-dashoffset:100}}
.ringFill{animation:ringFill 1.5s cubic-bezier(.16,1,.3,1) .35s backwards}
@keyframes sheen{0%{left:-45%}40%,100%{left:135%}}
.sheenBar{position:absolute;top:-25%;bottom:-25%;left:-45%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-18deg);pointer-events:none;animation:sheen 6.5s ease-in-out 1.4s infinite}
@keyframes draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.drawCheck{stroke-dasharray:24;stroke-dashoffset:0;animation:draw .5s ease .25s backwards}
@supports (animation-timeline: view()){
@keyframes reveal{from{opacity:0;transform:translateY(34px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition-duration:.01ms !important}}

html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-size-adjust:100%;-webkit-text-size-adjust:100%}
[hidden]{display:none !important}
button,input,textarea{font-family:inherit}
input,textarea{font-size:16px}
#print{display:none}
#print,#print *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box}
@media print{
  @page{size:A4 landscape;margin:10mm}
  html,body{height:auto;overflow:visible;background:#fff !important}
  #app{display:none !important}
  #print{display:block !important}
  *{animation:none !important;transition:none !important}
}

/* ===== Anpassung an Bildschirmgröße ===== */
.dkcols,.dkside,.dkmain{display:contents}
.dk-brand{display:none}
.gw-t{display:none}
@keyframes dialogIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@media (hover:hover){
  .gw-cell:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(0,0,0,.45)}
  .dk-nav button:hover{background:var(--soft) !important}
}

/* Tablet und größer: mitwachsende Wochentabelle, Dialoge statt Bottom-Sheets */
@media (min-width:700px){
  .dk-root{max-width:none !important;margin:0 !important;width:100% !important;height:100vh !important;height:100dvh !important;border-radius:0 !important}
  .dk-head{padding-left:max(20px,calc((100% - 780px)/2)) !important;padding-right:max(20px,calc((100% - 780px)/2)) !important}
  .dk-bar{padding-left:max(20px,calc((100% - 780px)/2)) !important;padding-right:max(8px,calc((100% - 780px)/2 - 8px)) !important}
  .bannerIn{margin-left:max(16px,calc((100% - 780px)/2)) !important;margin-right:max(16px,calc((100% - 780px)/2)) !important}
  .dk-main{padding-left:max(16px,calc((100% - 780px)/2)) !important;padding-right:max(16px,calc((100% - 780px)/2)) !important}
  .dk-nav{left:0 !important;right:0 !important;margin:0 auto;width:min(520px,calc(100% - 32px))}
  .toastIn{left:0 !important;right:0 !important;margin:0 auto;width:min(440px,calc(100% - 32px))}
  .gw-head{width:auto !important;flex:1 1 0 !important;min-width:0 !important}
  .gw-cell{width:auto !important;flex:1 1 0 !important;min-width:0 !important;height:62px !important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:16px !important;font-size:16px !important}
  .gw-sp,.gw-name{width:96px !important;font-size:15px !important}
  .gw-t{display:block;white-space:nowrap;font-size:10.5px;font-weight:700;opacity:.8;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .sheetUp{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;margin:auto !important;height:fit-content;width:min(580px,calc(100% - 48px)) !important;max-height:90% !important;overflow-y:auto !important;border-radius:30px !important;padding:22px 28px 26px !important;animation-name:dialogIn !important;animation-duration:.5s !important}
  .sheetUp>div[style*="width: 40px; height: 4px"]{display:none}
  .dk-login{max-width:480px;width:100%;margin:0 auto;padding-top:12vh !important}
  .dk-exp{max-width:640px;margin:0 auto}
}

/* Desktop: Seitenleiste links, Inhalt in zwei Spalten */
@media (min-width:1100px){
  .dk-root{display:grid !important;grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr)}
  .dk-head{grid-column:2;grid-row:1;padding:26px 36px 4px !important}
  .dk-head h1{display:none}
  .dk-head .fadeIn{font-size:24px !important;font-weight:800 !important;color:var(--ink) !important;letter-spacing:-.02em}
  .dk-bar{grid-column:2;grid-row:2;padding:10px 28px 14px 36px !important}
  .bannerIn{grid-column:2;grid-row:3;margin:0 36px 10px !important}
  .dk-main{grid-column:2;grid-row:4;padding:6px 36px 40px !important}
  .dk-main>.screen{max-width:1560px;margin:0 auto}
  .dk-nav{grid-column:1;grid-row:1 / 5;position:static !important;width:auto;margin:0;height:auto !important;padding:26px 16px !important;flex-direction:column;align-items:stretch;gap:6px !important;border-radius:0 !important;border:0 !important;border-right:1px solid var(--hair) !important;box-shadow:none !important;background:var(--navbg) !important}
  .dk-nav button{flex:none !important;width:100%;height:54px !important;justify-content:flex-start !important;padding:0 18px !important;gap:14px !important;border-radius:18px !important}
  .dk-nav button span{max-width:none !important;opacity:1 !important}
  .dk-brand{display:flex;align-items:center;gap:12px;padding:2px 10px 26px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
  .dk-brand i{width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000))}
  .toastIn{bottom:32px !important}
  .dkcols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;align-items:start}
  .dkmain{display:block;grid-column:1;grid-row:1;min-width:0}
  .dkside{display:block;grid-column:2;grid-row:1;min-width:0}
  .dkmain>section:first-child{margin-top:0 !important}
  .dk-day{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:26px;align-items:start}
  .dk-day>*{grid-column:1;min-width:0}
  .dk-day>div:first-child{grid-column:1 / -1}
  .dk-day>section.reveal{grid-column:2;grid-row:2 / span 8;margin-top:0 !important}
  .dk-main>.dk-exp{max-width:720px}
  .gw-cell{height:68px !important}
}