/*
 * Utility layer.
 *
 * Replaces the inline style attributes that previously forced
 * Content-Security-Policy: style-src 'unsafe-inline'. Values are intentionally
 * lossless copies of what was inline before, so this refactor carries no visual
 * change. Class names encode their value (u-mt-16 = margin-top: 16px).
 *
 * Generated from scripts/utility_map.php — edit that map, not this file.
 *
 * Must stay the LAST stylesheet in index.html: utilities are deliberately
 * unlayered so they win over the component rules on equal specificity.
 */

/* Layout */
.u-absolute { position: absolute; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-flex-1 { flex: 1; }
.u-flex-2 { flex: 2; }
.u-flex-col { flex-direction: column; }
.u-flex-full { flex: 1 1 100%; }
.u-grid { display: grid; }
.u-grid-1fr-auto { grid-template-columns: 1fr auto; }
.u-items-center { align-items: center; }
.u-items-end { align-items: flex-end; }
.u-items-start { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-none { display: none; }
.u-nowrap-flex { flex-wrap: nowrap; }
.u-relative { position: relative; }
.u-shrink-0 { flex-shrink: 0; }
.u-wrap { flex-wrap: wrap; }

/* Abstand innerhalb (gap) */
.u-gap-1 { gap: 1px; }
.u-gap-10 { gap: 10px; }
.u-gap-15 { gap: 15px; }
.u-gap-2 { gap: 2px; }
.u-gap-4 { gap: 4px; }
.u-gap-5 { gap: 5px; }
.u-gap-6 { gap: 6px; }
.u-gap-6-12 { gap: 6px 12px; }
.u-gap-8 { gap: 8px; }

/* Farbe */
.u-text-black { color: black; }
.u-text-danger { color: var(--danger); }
.u-text-danger-light { color: #ff4d4d; }
.u-text-grey-888 { color: #888; }
.u-text-grey-aaa { color: #aaa; }
.u-text-main { color: var(--text-main); }
.u-text-muted { color: var(--text-muted); }
.u-text-primary { color: var(--primary); }
.u-text-success { color: var(--success); }
.u-text-success-light { color: #22c55e; }
.u-text-warning { color: var(--warning); }
.u-text-white { color: white; }

/* Schriftgroesse */
.u-fs-065 { font-size: 0.65rem; }
.u-fs-070 { font-size: 0.7rem; }
.u-fs-075 { font-size: 0.75rem; }
.u-fs-076 { font-size: 0.76rem; }
.u-fs-078 { font-size: 0.78rem; }
.u-fs-080 { font-size: 0.8rem; }
.u-fs-082 { font-size: 0.82rem; }
.u-fs-085 { font-size: 0.85rem; }
.u-fs-090 { font-size: 0.9rem; }
.u-fs-095 { font-size: 0.95rem; }
.u-fs-100 { font-size: 1rem; }
.u-fs-110 { font-size: 1.1rem; }
.u-fs-120 { font-size: 1.2rem; }
.u-fs-130 { font-size: 1.3rem; }
.u-fs-200 { font-size: 2rem; }
.u-fs-250 { font-size: 2.5rem; }
.u-fs-300 { font-size: 3rem; }
.u-fs-32px { font-size: 32px; }
.u-fs-350 { font-size: 3.5rem; }

/* Schriftschnitt */
.u-fw-500 { font-weight: 500; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-fw-normal { font-weight: normal; }
.u-mono { font-family: monospace; }

/* Textverhalten */
.u-break-all { word-break: break-all; }
.u-ellipsis { text-overflow: ellipsis; }
.u-leading-1 { line-height: 1; }
.u-leading-12 { line-height: 1.2; }
.u-leading-15 { line-height: 1.5; }
.u-nowrap { white-space: nowrap; }
.u-pre-wrap { white-space: pre-wrap; }
.u-select-all { user-select: all; }
.u-text-center { text-align: center; }
.u-text-halo { text-shadow: 0 0 4px white, 0 0 2px white; }
.u-text-left { text-align: left; }
.u-tracking-tight { letter-spacing: 0.02em; }
.u-tracking-wide { letter-spacing: 0.08em; }
.u-uppercase { text-transform: uppercase; }

/* Overflow */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-x-auto { overflow-x: auto; }
.u-overflow-y-auto { overflow-y: auto; }

/* Aussenabstand */
.u-m-0 { margin: 0; }
.u-m-10-0-0 { margin: 10px 0 0; }
.u-m-12-0-0 { margin: 12px 0 0; }
.u-m-14-0-0 { margin: 14px 0 0; }
.u-m-8-0-0 { margin: 8px 0 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-10 { margin: 0 0 10px 0; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-15 { margin-bottom: 15px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-5 { margin-bottom: 5px; }
.u-mb-8 { margin-bottom: 8px; }
.u-ml-10 { margin-left: 10px; }
.u-ml-15 { margin-left: 15px; }
.u-ml-2 { margin-left: 2px; }
.u-ml-4 { margin-left: 4px; }
.u-ml-auto { margin-left: auto; }
.u-mr-10 { margin-right: 10px; }
.u-mr-6 { margin-right: 6px; }
.u-mt-0 { margin-top: 0; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-15 { margin-top: 15px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-2 { margin-top: 2px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-25 { margin-top: 25px; }
.u-mt-4 { margin-top: 4px; }
.u-mt-5 { margin-top: 5px; }
.u-mt-6 { margin-top: 6px; }
.u-mt-7 { margin-top: 7px; }
.u-mt-8 { margin-top: 8px; }
.u-my-10 { margin: 10px 0; }
.u-my-14 { margin: 14px 0; }
.u-my-15 { margin: 15px 0; }
.u-my-20 { margin: 20px 0; }

/* Innenabstand */
.u-p-0 { padding: 0; }
.u-p-0-10 { padding: 0 10px; }
.u-p-10 { padding: 10px; }
.u-p-10-0 { padding: 10px 0; }
.u-p-10-5 { padding: 10px 5px; }
.u-p-100-20 { padding: 100px 20px; }
.u-p-12 { padding: 12px; }
.u-p-12-14 { padding: 12px 14px; }
.u-p-14-0-6 { padding: 14px 0 6px; }
.u-p-15 { padding: 15px; }
.u-p-2-6 { padding: 2px 6px; }
.u-p-2-8 { padding: 2px 8px; }
.u-p-20 { padding: 20px; }
.u-p-20-0 { padding: 20px 0; }
.u-p-3-8 { padding: 3px 8px; }
.u-p-4-0-6 { padding: 4px 0 6px; }
.u-p-40 { padding: 40px; }
.u-p-5-15 { padding: 5px 15px; }
.u-p-8-0 { padding: 8px 0; }
.u-p-8-10 { padding: 8px 10px; }

/* Groesse */
.u-h-120 { height: 120px; }
.u-h-24 { height: 24px; }
.u-h-250 { height: 250px; }
.u-h-28 { height: 28px; }
.u-h-36 { height: 36px; }
.u-h-50 { height: 50px; }
.u-h-60 { height: 60px; }
.u-h-70 { height: 70px; }
.u-max-h-400 { max-height: 400px; }
.u-max-h-80vh { max-height: 80vh; }
.u-max-h-85vh { max-height: 85vh; }
.u-max-h-90vh { max-height: 90vh; }
.u-max-w-300 { max-width: 300px; }
.u-max-w-400 { max-width: 400px; }
.u-max-w-420 { max-width: 420px; }
.u-max-w-450 { max-width: 450px; }
.u-max-w-500 { max-width: 500px; }
.u-max-w-560 { max-width: 560px; }
.u-max-w-600 { max-width: 600px; }
.u-max-w-700 { max-width: 700px; }
.u-max-w-800 { max-width: 800px; }
.u-max-w-full { max-width: 100%; }
.u-min-w-0 { min-width: 0; }
.u-min-w-160 { min-width: 160px; }
.u-min-w-180 { min-width: 180px; }
.u-min-w-200 { min-width: 200px; }
.u-min-w-80 { min-width: 80px; }
.u-object-cover { object-fit: cover; }
.u-w-120 { width: 120px; }
.u-w-140 { width: 140px; }
.u-w-16 { width: 16px; }
.u-w-24 { width: 24px; }
.u-w-28 { width: 28px; }
.u-w-50 { width: 50px; }
.u-w-70 { width: 70px; }
.u-w-80 { width: 80px; }
.u-w-90 { width: 90%; }
.u-w-auto { width: auto; }
.u-w-fit { width: fit-content; }
.u-w-full { width: 100%; }

/* Flaeche und Rahmen */
.u-bg-danger { background: var(--danger); }
.u-bg-danger-08 { background: rgba(239,68,68,0.08); }
.u-bg-danger-10 { background: rgba(239,68,68,0.1); }
.u-bg-danger-15 { background: rgba(239,68,68,0.15); }
.u-bg-hover { background: var(--hover-bg-med); }
.u-bg-input { background: var(--input-bg); }
.u-bg-primary { background: var(--primary); }
.u-bg-raised-5 { background: rgba(255,255,255,0.05); }
.u-bg-success { background: var(--success); }
.u-bg-success-10 { background: rgba(34,197,94,0.1); }
.u-bg-sunken { background: rgba(0,0,0,0.1); }
.u-bg-sunken-16 { background: rgba(0,0,0,0.16); }
.u-bg-sunken-2 { background: rgba(0,0,0,0.02); }
.u-bg-surface { background: var(--surface-color); }
.u-bg-surface-border { background: var(--surface-border); }
.u-border { border: 1px solid var(--surface-border); }
.u-border-0 { border: 0; }
.u-border-b { border-bottom: 1px solid var(--surface-border); }
.u-border-box { box-sizing: border-box; }
.u-border-c-danger { border-color: var(--danger); }
.u-border-c-primary { border-color: var(--primary); }
.u-border-collapse { border-collapse: collapse; }
.u-border-danger-25 { border: 1px solid rgba(239,68,68,0.25); }
.u-border-danger-30 { border: 1px solid rgba(239,68,68,0.3); }
.u-border-dashed { border: 1px dashed var(--surface-border); }
.u-border-raised { border: 1px solid rgba(255,255,255,0.1); }
.u-border-success-30 { border: 1px solid rgba(34,197,94,0.3); }
.u-border-t { border-top: 1px solid var(--surface-border); }
.u-rounded-10 { border-radius: 10px; }
.u-rounded-12 { border-radius: 12px; }
.u-rounded-20 { border-radius: 20px; }
.u-rounded-4 { border-radius: 4px; }
.u-rounded-5 { border-radius: 5px; }
.u-rounded-6 { border-radius: 6px; }
.u-rounded-8 { border-radius: 8px; }
.u-rounded-full { border-radius: 50%; }

/* Interaktion */
.u-pointer { cursor: pointer; }

/* Sonstige */
.u-align-top { vertical-align: top; }
.u-font-inherit { font-family: inherit; }
.u-grow { flex-grow: 1; }
.u-left-0 { left: 0; }
.u-min-h-100 { min-height: 100px; }
.u-min-h-28 { min-height: 28px; }
.u-opacity-70 { opacity: 0.7; }
.u-pb-15 { padding-bottom: 15px; }
.u-pb-5 { padding-bottom: 5px; }
.u-pl-20 { padding-left: 20px; }
.u-pt-15 { padding-top: 15px; }
.u-resize-y { resize: vertical; }
.u-right--8 { right: -8px; }
.u-right-0 { right: 0; }
.u-shadow-md { box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.u-shadow-sm { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.u-text-ms-blue { color: #0078d4; }
.u-text-right { text-align: right; }
.u-top--8 { top: -8px; }
.u-top-50 { top: 50%; }
.u-z-1 { z-index: 1; }
.u-z-9999 { z-index: 9999; }