/* CalenSync – Ergänzungen zu site.css (Tailwind v3-kompatible Utilities + eigene Komponenten).
   Wird in index.html nach site.css geladen. Quellen: website-src/*.jsx */

/* Layout & Abstände */
.fixed{position:fixed}.inset-x-4{left:1rem;right:1rem}.bottom-4{bottom:1rem}.z-\[70\]{z-index:70}
.h-px{height:1px}.h-2\.5{height:.625rem}.h-4{height:1rem}.h-11{height:2.75rem}.h-64{height:16rem}.h-full{height:100%}
.w-2\.5{width:.625rem}.w-4{width:1rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}
.max-w-\[85\%\]{max-width:85%}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-1\.5{margin-bottom:.375rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.gap-2\.5{gap:.625rem}.gap-\[2px\]{gap:2px}.gap-x-3{column-gap:.75rem}.gap-y-1{row-gap:.25rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}
.overflow-y-auto{overflow-y:auto}.break-all{word-break:break-all}
.leading-snug{line-height:1.375}.tracking-wider{letter-spacing:.05em}
.rounded-tl-md{border-top-left-radius:.375rem}.rounded-tr-md{border-top-right-radius:.375rem}
.translate-x-\[1px\]{transform:translateX(1px)}

/* Farben */
.bg-amber-100{background-color:#fef3c7}.bg-amber-500{background-color:#f59e0b}.bg-amber-950{background-color:#451a03}
.bg-indigo-700{background-color:#4338ca}.bg-red-50{background-color:#fef2f2}
.bg-slate-200{background-color:#e2e8f0}.bg-slate-300{background-color:#cbd5e1}.bg-slate-500{background-color:#64748b}
.border-amber-300{border-color:#fcd34d}.border-indigo-100{border-color:#e0e7ff}.border-red-200{border-color:#fecaca}.border-red-400{border-color:#f87171}.border-slate-300{border-color:#cbd5e1}
.text-amber-50{color:#fffbeb}.text-amber-900{color:#78350f}.text-amber-950{color:#451a03}
.text-indigo-50{color:#eef2ff}.text-indigo-900{color:#312e81}.text-indigo-950{color:#1e1b4b}
.text-red-700{color:#b91c1c}.text-red-800{color:#991b1b}.text-slate-800{color:#1e293b}
.accent-indigo-700{accent-color:#4338ca}
.placeholder\:text-slate-400::placeholder{color:#94a3b8}
.hover\:bg-indigo-800:hover{background-color:#3730a3}

/* Schatten */
.shadow-\[0_4px_6px_-1px_rgba\(15\2c 23\2c 42\2c 0\.05\)\2c 0_2px_4px_-2px_rgba\(15\2c 23\2c 42\2c 0\.05\)\]{--tw-shadow:0 4px 6px -1px rgba(15,23,42,.05),0 2px 4px -2px rgba(15,23,42,.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

/* Fokus & Zustände */
.focus\:outline-none:focus,.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus,.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
.focus\:ring-indigo-600:focus,.focus-visible\:ring-indigo-600:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity))}
.focus\:ring-offset-1:focus{--tw-ring-offset-width:1px}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:hover\:bg-transparent:hover:disabled{background-color:transparent}

/* Breakpoints */
@media (min-width:640px){.sm\:gap-\[3px\]{gap:3px}.sm\:p-7{padding:1.75rem}}
@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Komponenten */
.sw-press{transition:transform .15s ease-out,box-shadow .15s ease-out}   /* keine Farb-Überblendung beim Auswählen */
.sw-press:not(:disabled):active{transform:scale(.97)}
.sw-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.sw-dialog{margin:auto;max-height:calc(100dvh - 2rem);overflow:auto}
.sw-dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.sw-bar{display:block;min-width:1px;transform-origin:center;transition:background-color .2s}.sw-bar-live{animation:sw-wave 1.1s ease-in-out infinite}
@keyframes sw-wave{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.45)}70%{transform:scaleY(1.15)}}
@media (prefers-reduced-motion:reduce){.sw-bar-live{animation:none}.sw-press,.sw-press:active{transition:none;transform:none}}
/* Animiertes CalenSync-Logo (Vorlage: 1-basis/docs/design/logo/Calensync Logo animiert.html) */
@keyframes csPop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}
@keyframes csSlot{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes csDraw{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes csWord{0%{opacity:0;transform:translateX(-12px);clip-path:inset(-20% 100% -30% 0)}to{opacity:1;transform:none;clip-path:inset(-20% 0 -30% 0)}}
@media (prefers-reduced-motion:reduce){.cs-anim,.cs-anim *{animation-delay:0s!important}}

/* Startseite: Dashboard-Sektion (SwDashboardSection in SitePatches.jsx) */
.absolute{position:absolute}.-top-1{top:-.25rem}.left-1\/3{left:33.333333%}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.-mt-1\.5{margin-top:-.375rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.h-3\.5{height:.875rem}.w-3\.5{width:.875rem}.w-1\/3{width:33.333333%}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[32px_1fr\]{grid-template-columns:32px 1fr}
.border-2{border-width:2px}.border-r{border-right-width:1px}.border-white{border-color:#fff}.border-violet-400{border-color:#a78bfa}.bg-violet-50{background-color:#f5f3ff}.text-violet-800{color:#5b21b6}
.rounded-sm{border-radius:.125rem}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}
.shadow-card-hover{--tw-shadow:0 2px 4px rgba(15,23,42,.04),0 12px 24px -12px rgba(15,23,42,.1);--tw-shadow-colored:0 2px 4px var(--tw-shadow-color),0 12px 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.sw-dash-grid{background-image:linear-gradient(to right,#f1f5f9 1px,transparent 1px),linear-gradient(to bottom,#f1f5f9 1px,transparent 1px);background-size:20% 100%,100% 16.6667%;border-left:1px solid #f1f5f9;border-top:1px solid #f1f5f9}
.sw-dash-ev{box-sizing:border-box;overflow:hidden}
@media (min-width:640px){.sm\:inline{display:inline}.sm\:p-5{padding:1.25rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}}
@media (min-width:768px){.md\:block{display:block}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[150px_1fr\]{grid-template-columns:150px 1fr}}
@media (min-width:1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[1\.6fr_1fr\]{grid-template-columns:1.6fr 1fr}}