/* =========================================================
   utilities.css — Layout-Hilfsklassen (ersetzt das Tailwind-CDN).
   Wird NACH shared-ui.css eingebunden und überstimmt bei gleicher
   Spezifität die Komponenten (z.B. .w-32 auf .input).
   Nur Klassen, die die Templates tatsächlich nutzen. Neue Klasse
   im Markup? Hier ergänzen. Farben nur über var(--color-*).
   ========================================================= */

.absolute{position:absolute}
.block{display:block}
.border-t{border-top:1px solid var(--color-border)}
.cursor-pointer{cursor:pointer}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-x-6{column-gap:1.5rem}
.gap-y-3{row-gap:0.75rem}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.h-3{height:0.75rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.inline{display:inline}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.left-0{left:0}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.list-decimal{list-style-type:decimal}
.list-disc{list-style-type:disc}
.list-inside{list-style-position:inside}
.max-w-5xl{max-width:64rem}
.max-w-md{max-width:28rem}
.max-w-sm{max-width:24rem}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.min-h-screen{min-height:100vh}
.min-w-\[200px\]{min-width:200px}
.min-w-\[240px\]{min-width:240px}
.ml-2{margin-left:0.5rem}
.ml-auto{margin-left:auto}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mx-auto{margin-left:auto;margin-right:auto}
.opacity-60{opacity:.6}
.opacity-70{opacity:.7}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.p-0{padding:0}
.p-3{padding:0.75rem}
.p-8{padding:2rem}
.pb-2{padding-bottom:0.5rem}
.pl-6{padding-left:1.5rem}
.pr-4{padding-right:1rem}
.pt-2{padding-top:0.5rem}
.pt-4{padding-top:1rem}
.pt-6{padding-top:1.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.relative{position:relative}
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}
.shrink-0{flex-shrink:0}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-center{text-align:center}
.text-left{text-align:left}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-right{text-align:right}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:.75rem;line-height:1rem}
.leading-relaxed{line-height:1.625}
.top-full{top:100%}
.tracking-wide{letter-spacing:.025em}
.underline{text-decoration-line:underline}
.uppercase{text-transform:uppercase}
.w-24{width:6rem}
.w-28{width:7rem}
.w-3{width:0.75rem}
.w-32{width:8rem}
.w-4{width:1rem}
.w-40{width:10rem}
.w-44{width:11rem}
.w-48{width:12rem}
.w-5{width:1.25rem}
.w-56{width:14rem}
.w-full{width:100%}
.whitespace-nowrap{white-space:nowrap}
.z-20{z-index:20}
.border-gray-100{border-color:var(--color-border-muted)}
.border-gray-200{border-color:var(--color-border)}
.divide-gray-100>:not([hidden])~:not([hidden]){border-color:var(--color-border-muted)}
.divide-gray-50>:not([hidden])~:not([hidden]){border-color:var(--color-surface-muted)}
.divide-y>:not([hidden])~:not([hidden]){border-top:1px solid var(--color-border)}
.hover\:bg-gray-50:hover{background-color:var(--color-surface-muted)}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:0.25rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:0.5rem}

@media (min-width:640px){
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:items-start{align-items:flex-start}
  .sm\:justify-between{justify-content:space-between}
  .sm\:shrink-0{flex-shrink:0}
  .sm\:text-right{text-align:right}
}

@media (min-width:768px){
  .md\:col-span-1{grid-column:span 1 / span 1}
  .md\:col-span-2{grid-column:span 2 / span 2}
  .md\:col-span-3{grid-column:span 3 / span 3}
  .md\:col-span-4{grid-column:span 4 / span 4}
  .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:justify-end{justify-content:flex-end}
}

@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}