/* ============================================================
   utilities.css — Eigene Mini-Utility-Klassen (kein Tailwind)
   Erstellt 2026-05-21 (CSP-Sprint Phase 3.2c.0 Setup).

   ── Hintergrund ──
   Phase 3.2a hat 883 inline style="..."-Attribute in 34 HTML-Files
   gezaehlt. Diese werden in Phase 3.2c systematisch in Utility-
   Klassen migriert, damit Phase 3.2d die CSP-Direktive
   styleSrc 'unsafe-inline' streichen kann.

   ── Bewusste Entscheidung gegen Tailwind ──
   Der KinaSaen-Stack ist Build-Step-frei (kein npm run build,
   kein PostCSS, kein Watcher). Tailwind waere ein Fremdkoerper.
   Stattdessen: eigene Mini-Utility-Klassen, jede 1:1 abgeleitet
   aus den Top-Werten der Inventur (siehe Phase 3.2a-Report).

   ── Naming-Konvention ──
   Prefix `u-` damit Utility-Klassen klar erkennbar sind und nicht
   mit bestehenden Component-Klassen kollidieren (.btn, .nav, .card).

   Werte sind direkt im Klassennamen kodiert, nicht semantisch:
     u-mb-16       → margin-bottom: 16px
     u-fs-085      → font-size: 0.85rem
     u-p-6-14      → padding: 6px 14px (top/bot, left/right)
     u-color-akzent → color: #830e25 (Marken-Rot)

   Drei-stellige Zahlen fuer rem-Werte (XXX ≈ rem * 100):
     0.85rem → 085      1.1rem → 110      1.6rem → 160

   ── Wichtiger Hinweis zu .u-hidden ──
   .u-hidden hat KEIN !important. Damit funktioniert das uebliche
   JS-Toggle-Muster weiterhin:
     el.style.display = 'flex'   // ueberschreibt .u-hidden (inline-style gewinnt)
     el.style.display = 'none'   // funktioniert weiter
   ABER Vorsicht: `el.style.display = ''` (Reset) wuerde nicht mehr
   "anzeigen" sondern die Klasse wirken lassen — falls die Klasse
   noch dran ist, bliebe das Element versteckt. Bei Migration immer
   pruefen, ob JS-Toggle entweder explizit set-display verwendet
   oder besser auf classList.add/remove('u-hidden') umgestellt wird.

   ── Sektionen ──
     1. Display / Visibility
     2. Flex-/Grid-Alignment + Gap
     3. Text-Alignment + Transform + Decoration + White-Space
     4. Color
     5. Background
     6. Font-Family / Font-Weight / Font-Size / Line-Height / Letter-Spacing
     7. Cursor
     8. Width / Height
     9. Border + Border-Radius
    10. Padding
    11. Margin
   ============================================================ */


/* ═══ 1. DISPLAY / VISIBILITY ═══════════════════════════════════ */

.u-flex          { display: flex; }
.u-inline-flex   { display: inline-flex; }
.u-block         { display: block; }
.u-inline-block  { display: inline-block; }
.u-grid          { display: grid; }
/* OHNE !important — siehe Hinweis im Header */
.u-hidden        { display: none; }
/* Honeypot-Feld (Spam-Schutz): fuer Menschen unsichtbar, fuer Bots ausfuellbar.
   Bewusst off-screen statt display:none — manche Bots ueberspringen hidden Felder.
   CSP-konform (keine Inline-Styles erlaubt). */
.u-honeypot { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }


/* ═══ 1b. GRID PLACEMENT ════════════════════════════════════════ */

.u-grid-col-full   { grid-column: 1 / -1; }      /* gesamte Breite */
.u-grid-col-span-2 { grid-column: span 2; }      /* ueber 2 Spalten */
.u-grid-cols-2     { grid-template-columns: repeat(2, 1fr); }
.u-grid-cols-4     { grid-template-columns: repeat(4, 1fr); }
.u-grid-cols-1-1   { grid-template-columns: 1fr 1fr; }
.u-grid-cols-auto-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.u-grid-cols-3        { grid-template-columns: repeat(3, 1fr); }
.u-grid-cols-2-1      { grid-template-columns: 2fr 1fr; }
.u-grid-cols-120-1-100{ grid-template-columns: 120px 1fr 100px; }

/* Mindestbreite (tabellen scrollable) */
.u-min-w-80        { min-width: 80px; }
.u-min-w-1000      { min-width: 1000px; }
.u-min-w-auto      { min-width: auto; }


/* ═══ 2. FLEX-/GRID-ALIGNMENT + GAP ═════════════════════════════ */

.u-items-center    { align-items: center; }
.u-items-start     { align-items: flex-start; }

.u-justify-center  { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end     { justify-content: flex-end; }

.u-flex-shrink-0   { flex-shrink: 0; }
.u-flex-wrap       { flex-wrap: wrap; }
.u-flex-1          { flex: 1; }
.u-flex-col        { flex-direction: column; }

.u-gap-6           { gap: 6px; }
.u-gap-8           { gap: 8px; }
.u-gap-10          { gap: 10px; }
.u-gap-12          { gap: 12px; }
.u-gap-14          { gap: 14px; }
.u-gap-16          { gap: 16px; }
.u-gap-20          { gap: 20px; }
.u-gap-24          { gap: 24px; }


/* ═══ 3. TEXT-ALIGN / TRANSFORM / DECORATION / WHITE-SPACE ══════ */

.u-text-center     { text-align: center; }
.u-text-right      { text-align: right; }
.u-text-left       { text-align: left; }

.u-uppercase       { text-transform: uppercase; }
.u-tt-none         { text-transform: none; }
.u-tt-capitalize   { text-transform: capitalize; }

.u-italic          { font-style: italic; }

.u-underline       { text-decoration: underline; }
.u-no-underline    { text-decoration: none; }
.u-line-through    { text-decoration: line-through; }

.u-nowrap          { white-space: nowrap; }

.u-overflow-x-auto { overflow-x: auto; }
.u-overflow-y-auto { overflow-y: auto; }

.u-float-right     { float: right; }


/* ═══ 4. COLOR ══════════════════════════════════════════════════ */

/* Marken-Rot — der wichtigste Farb-Token */
.u-color-akzent    { color: #830e25; }

/* Theme-Tokens (Storefront + admin/wws via --border-Alias in
   den jeweiligen Page-CSS-Files) */
.u-color-text      { color: var(--text); }
.u-color-muted     { color: var(--muted); }

/* Konkrete Grauwerte (mehrfach verwendet, nicht Theme-tokenisiert) */
.u-color-white     { color: #fff; }
.u-color-black     { color: #000; }
.u-color-666       { color: #666; }
.u-color-888       { color: #888; }

/* "Neon"-Akzent (Dark-Mode-Glow-Variante des Marken-Rots) */
.u-color-neon      { color: var(--neon); }

/* Semantische Farben */
.u-color-erfolg    { color: #16a34a; }  /* gruen, "OK"/Erfolg */
.u-color-1a5c4c    { color: #1a5c4c; }  /* dunkles Mint-Gruen (Erfolgs-Banner) */
.u-color-1a5033    { color: #1a5033; }  /* dunkles Mint-Gruen (Abo-Hinweis-Box) */
.u-color-398e6f    { color: #398e6f; }  /* Mint-Gruen (Bestaetigungs-Text) */
.u-color-c0392b    { color: #c0392b; }  /* Rot (Fehler-Text dunkler) */
.u-color-15803d    { color: #15803d; }  /* dunkles Gruen (Erfolg-Status) */
.u-color-991b1b    { color: #991b1b; }  /* dunkles Rot (Fehler-Status) */
.u-color-22c55e    { color: #22c55e; }  /* helles Gruen (Mini-Akzent) */
.u-color-999       { color: #999; }     /* Grau (Sekundaer-Text) */
.u-color-1b5e20    { color: #1b5e20; }  /* dunkles Gruen (Rabatt-Text) */
.u-color-b71c1c    { color: #b71c1c; }  /* dunkles Rot (Fehler-Button-Text) */
.u-color-555       { color: #555; }
.u-color-aaa       { color: #aaa; }
.u-color-ccc       { color: #ccc; }
.u-color-e0e0e0    { color: #e0e0e0; }
.u-color-ff8096    { color: #ff8096; }
.u-color-b91c1c    { color: #b91c1c; }
.u-color-dc2626    { color: #dc2626; }
.u-color-1a6b4a    { color: #1a6b4a; }  /* dunkles Mint-Gruen (Listen-Hinweis) */
.u-color-1a1a1a    { color: #1a1a1a; }  /* fast-Schwarz */
.u-color-444       { color: #444; }
.u-color-333       { color: #333; }
.u-color-14532d    { color: #14532d; }  /* dunkles Mint-Gruen (Badge) */
.u-color-text-dim  { color: var(--text-dim); }
.u-color-text-dunkel    { color: var(--text-dunkel, #888); }
.u-color-text-dunkel-mid{ color: var(--text-dunkel, #666); }
.u-color-mint      { color: #9ed2c0; }
.u-color-akzent-var{ color: var(--akzent); }
.u-color-gold      { color: #FFD700; }  /* Sterne-Gold (Rating) */
.u-color-ddd       { color: #ddd; }     /* Sterne-Off (Rating) */
.u-color-9a3412    { color: #9a3412; }  /* orange dunkel (warnung) */
.u-color-e65100    { color: #e65100; }  /* orange */
.u-color-bf360c    { color: #bf360c; }  /* orange-rot dunkel */
.u-color-f39c12    { color: #f39c12; }  /* orange-gelb (status mid) */
.u-color-e67e22    { color: #e67e22; }  /* orange (status low) */
.u-color-muted2    { color: var(--muted2); }


/* ═══ 5. BACKGROUND ═════════════════════════════════════════════ */

.u-bg-akzent       { background: #830e25; }
.u-bg-white        { background: #fff; }
.u-bg-none         { background: none; }
.u-bg-transparent  { background: transparent; }

/* Theme-Backgrounds */
.u-bg-bg           { background: var(--bg); }
.u-bg-karte        { background: var(--karte); }
.u-bg-surface      { background: var(--surface); }

/* Konkrete Background-Werte (mehrfach verwendet, kein Theme-Token) */
.u-bg-f8fafa       { background: #f8fafa; }  /* sehr helles Grau (Breadcrumb-Bar) */
.u-bg-e8f5f1       { background: #e8f5f1; }  /* sehr helles Mint */
.u-bg-fde8e8       { background: #fde8e8; }  /* sehr helles Rot */
.u-bg-akzent-hell  { background: rgba(131, 14, 37, 0.08); }
.u-bg-akzent-06    { background: rgba(131, 14, 37, 0.06); }
.u-bg-card         { background: var(--card); }
.u-bg-neon         { background: var(--neon); }
.u-bg-neon-cyan    { background: var(--neon-cyan); }
.u-bg-surface2     { background: var(--surface2); }

/* Zustands-Tinte (Hinweis/Erfolg/Warnung-Pflanzen) */
.u-bg-FDF0F2       { background: #FDF0F2; }   /* hell rosa (Marken-Akzent-Hint) */
.u-bg-fff7ed       { background: #fff7ed; }   /* cream/orange-hell */
.u-bg-fef2f2       { background: #fef2f2; }   /* sehr helles Rot */
.u-bg-fff3e0       { background: #fff3e0; }   /* sehr helles Orange */
.u-bg-f5f5f5       { background: #f5f5f5; }   /* sehr helles Grau */
.u-bg-1a6b4a       { background: #1a6b4a; }   /* dunkles Mint-Gruen */
.u-bg-b71c1c       { background: #b71c1c; }   /* dunkles Rot */
.u-bg-mint-20      { background: rgba(158, 210, 192, 0.2); }
.u-bg-mint-dark-10 { background: rgba(26, 107, 74, 0.1); }
.u-bg-overlay-50   { background: rgba(0, 0, 0, 0.5); }
.u-bg-overlay-60   { background: rgba(0, 0, 0, 0.6); }
.u-bg-fee2e2       { background: #fee2e2; }  /* sehr helles Rot (Fehler) */
.u-bg-akzent-04    { background: rgba(131, 14, 37, 0.04); }  /* fast-weisse Marken-Tinte */
.u-bg-erfolg       { background: #16a34a; }  /* solides Gruen */
.u-bg-f9fafb       { background: #f9fafb; }  /* fast-weiss (Notiz-Box-Tinte) */
.u-bg-e0e0e0       { background: #e0e0e0; }  /* hellgrau (Progressbar-Rail) */
.u-bg-e8f5e9       { background: #e8f5e9; }  /* sehr helles Mint (Rabatt-Hinweis) */
.u-bg-eee          { background: #eee; }
.u-bg-ccc          { background: #ccc; }
.u-bg-dcfce7       { background: #dcfce7; }
.u-bg-akzent-20    { background: rgba(131, 14, 37, 0.2); }
.u-bg-9ca3af       { background: #9ca3af; }     /* Disable-Grau */
.u-bg-fafafa       { background: #fafafa; }     /* Off-White */
.u-bg-mint         { background: #9ed2c0; }     /* Mint solid */
.u-bg-akzent-var   { background: var(--akzent); }


/* ═══ 6. FONT-FAMILY / -WEIGHT / -SIZE / LINE-HEIGHT / LETTER-SPACING ═══ */

.u-ff-head         { font-family: var(--font-head); }
.u-ff-body         { font-family: var(--font-body); }
.u-ff-inherit      { font-family: inherit; }
.u-ff-mono         { font-family: monospace; }
/* Cleanup 3 (2026-05-21): .u-ff-akzent entfernt. War 'font-family: var(--akzent)',
   wobei --akzent eine Farbe (#830e25) ist, kein Font — Browser ignorierte die
   Direktive und das einzige Use-Site (admin/index.html 'Alle Abonnements') fiel
   stillschweigend auf den Default-Font zurueck. Use-Site jetzt auf u-ff-head
   umgestellt (die wahrscheinlich beabsichtigte Heading-Schrift Barlow Condensed). */

.u-fw-400          { font-weight: 400; }
.u-fw-500          { font-weight: 500; }
.u-fw-600          { font-weight: 600; }
.u-fw-700          { font-weight: 700; }
.u-fw-800          { font-weight: 800; }
.u-fw-900          { font-weight: 900; }

/* Font-Size: 3-stellige Endung ≈ rem * 100. Ausnahme: u-fs-12px */
.u-fs-12px         { font-size: 12px; }
.u-fs-065          { font-size: 0.65rem; }
.u-fs-068          { font-size: 0.68rem; }
.u-fs-070          { font-size: 0.7rem; }
.u-fs-072          { font-size: 0.72rem; }
.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-083          { font-size: 0.83rem; }
.u-fs-085          { font-size: 0.85rem; }
.u-fs-088          { font-size: 0.88rem; }
.u-fs-090          { font-size: 0.9rem; }
.u-fs-092          { font-size: 0.92rem; }
.u-fs-095          { font-size: 0.95rem; }
.u-fs-100          { font-size: 1rem; }
.u-fs-105          { font-size: 1.05rem; }
.u-fs-110          { font-size: 1.1rem; }
.u-fs-120          { font-size: 1.2rem; }
.u-fs-130          { font-size: 1.3rem; }
.u-fs-084          { font-size: 0.84rem; }
.u-fs-140          { font-size: 1.4rem; }
.u-fs-150          { font-size: 1.5rem; }
.u-fs-160          { font-size: 1.6rem; }
.u-fs-180          { font-size: 1.8rem; }
.u-fs-200          { font-size: 2rem; }
.u-fs-220          { font-size: 2.2rem; }
.u-fs-250          { font-size: 2.5rem; }
.u-fs-300          { font-size: 3rem; }
.u-fs-600          { font-size: 6rem; }                        /* extra-grosses Display (Hero/404) */
.u-fs-clamp-hero   { font-size: clamp(2.5rem, 5vw, 4rem); }   /* fluide Hero-Headline */

.u-lh-1            { line-height: 1; }
.u-lh-13           { line-height: 1.3; }
.u-lh-14           { line-height: 1.4; }
.u-lh-15           { line-height: 1.5; }
.u-lh-155          { line-height: 1.55; }
.u-lh-16           { line-height: 1.6; }
.u-lh-17           { line-height: 1.7; }

.u-ls-0            { letter-spacing: 0; }
.u-ls-002          { letter-spacing: 0.02em; }
.u-ls-003          { letter-spacing: 0.03em; }
.u-ls-004          { letter-spacing: 0.04em; }
.u-ls-005          { letter-spacing: 0.05em; }
.u-ls-006          { letter-spacing: 0.06em; }
.u-ls-008          { letter-spacing: 0.08em; }
.u-ls-010          { letter-spacing: 0.1em; }
.u-ls-012          { letter-spacing: 0.12em; }
.u-ls-2px          { letter-spacing: 2px; }    /* px-Wert, Stern-Rating */


/* ═══ 7. CURSOR ═════════════════════════════════════════════════ */

.u-cursor-pointer  { cursor: pointer; }
.u-cursor-na       { cursor: not-allowed; }


/* ═══ 7b. POSITION / Z-INDEX / OFFSETS ══════════════════════════ */

.u-pos-absolute    { position: absolute; }
.u-pos-relative    { position: relative; }
.u-pos-fixed       { position: fixed; }
.u-inset-0         { inset: 0; }
.u-z-1             { z-index: 1; }
.u-z-100           { z-index: 100; }
.u-z-1000          { z-index: 1000; }
.u-z-1200          { z-index: 1200; }
.u-top-3           { top: 3px; }
.u-top-8           { top: 8px; }
.u-top-12          { top: 12px; }
.u-top-24          { top: 24px; }
.u-top-auto        { top: auto; }
.u-right-auto      { right: auto; }
.u-top-30          { top: 30px; }
.u-top-50pct       { top: 50%; }
.u-top-full        { top: 100%; }
.u-right-8         { right: 8px; }
.u-right-16        { right: 16px; }
.u-right-24        { right: 24px; }
.u-right-0         { right: 0; }
.u-left-0          { left: 0; }
.u-left-3          { left: 3px; }


/* ═══ 7c. TRANSITION / OPACITY / BOX-SHADOW / OUTLINE / BOX-SIZING ══ */

.u-trans-opacity      { transition: opacity 0.2s; }
.u-trans-border-color { transition: border-color 0.2s; }
.u-trans-bg           { transition: background 0.2s; }
.u-trans-transform    { transition: transform 0.2s; }
.u-trans-width        { transition: width 0.3s; }
.u-opacity-0          { opacity: 0; }
.u-opacity-50         { opacity: 0.5; }
.u-opacity-70         { opacity: 0.7; }
.u-opacity-80         { opacity: 0.8; }
.u-opacity-85         { opacity: 0.85; }
.u-shadow-neon        { box-shadow: var(--neon-glow); }
.u-shadow-cyan        { box-shadow: var(--cyan-glow); }
.u-shadow-card        { box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12); }
.u-shadow-card-md     { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.u-shadow-card-lg     { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.u-shadow-modal       { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.u-shadow-modal-25    { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.u-shadow-toggle      { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.u-outline-none       { outline: none; }
.u-box-border         { box-sizing: border-box; }
.u-overflow-hidden    { overflow: hidden; }
.u-object-contain     { object-fit: contain; }
.u-border-collapse    { border-collapse: collapse; }
.u-resize-y           { resize: vertical; }
.u-transform-center-y { transform: translateY(-50%); }

/* Accent-Color (Form-Input radio/checkbox) */
.u-accent-akzent      { accent-color: #830e25; }
.u-accent-neon        { accent-color: var(--neon); }


/* ═══ 8. WIDTH / HEIGHT ═════════════════════════════════════════ */

.u-w-full          { width: 100%; }
.u-w-auto          { width: auto; }
.u-w-16            { width: 16px; }
.u-w-18            { width: 18px; }
.u-w-22            { width: 22px; }
.u-w-52            { width: 52px; }
.u-w-56            { width: 56px; }
.u-w-80            { width: 80px; }
.u-w-0             { width: 0; }
.u-w-3             { width: 3px; }
.u-w-12            { width: 12px; }
.u-w-14            { width: 14px; }
.u-w-17            { width: 17px; }
.u-w-48            { width: 48px; }
.u-w-70            { width: 70px; }
.u-w-60            { width: 60px; }
.u-w-220           { width: 220px; }
.u-w-90pct         { width: 90%; }
.u-w-min-760       { width: min(760px, 96vw); }
.u-w-min-480       { width: min(480px, 92vw); }

.u-max-w-280       { max-width: 280px; }
.u-max-w-200       { max-width: 200px; }
.u-max-w-400       { max-width: 400px; }
.u-max-w-440       { max-width: 440px; }
.u-max-w-720       { max-width: 720px; }
.u-min-w-240       { min-width: 240px; }
.u-max-w-460       { max-width: 460px; }
.u-max-w-560       { max-width: 560px; }
.u-max-w-600       { max-width: 600px; }
.u-max-w-640       { max-width: 640px; }
.u-max-w-680       { max-width: 680px; }
.u-max-w-800       { max-width: 800px; }
.u-max-w-900       { max-width: 900px; }

/* Max-Height (Dropdown-Listen + Modals) */
.u-max-h-240       { max-height: 240px; }
.u-max-h-260       { max-height: 260px; }
.u-max-h-80vh      { max-height: 80vh; }
.u-max-h-85vh      { max-height: 85vh; }

.u-h-0             { height: 0; }
.u-h-3             { height: 3px; }
.u-h-12            { height: 12px; }
.u-h-16            { height: 16px; }
.u-h-17            { height: 17px; }
.u-h-18            { height: 18px; }
.u-h-22            { height: 22px; }
.u-h-14            { height: 14px; }
.u-h-28            { height: 28px; }
.u-h-48            { height: 48px; }
.u-h-5             { height: 5px; }
.u-h-8             { height: 8px; }
.u-h-56            { height: 56px; }
.u-h-60            { height: 60px; }
.u-h-80            { height: 80px; }
.u-h-90pct         { height: 90%; }
.u-h-6             { height: 6px; }
.u-h-full          { height: 100%; }

/* Chart-Höhen (mit !important fuer Override von Chart.js inline-styles) */
.u-chart-h-250     { height: 250px !important; }
.u-chart-h-280     { height: 280px !important; }
.u-chart-h-320     { height: 320px !important; }

.u-min-h-60        { min-height: 60px; }
.u-min-h-80        { min-height: 80px; }
.u-min-h-70vh      { min-height: 70vh; }
.u-min-h-80vh      { min-height: 80vh; }


/* ═══ 9. BORDER + BORDER-RADIUS ═════════════════════════════════ */

/* Wichtig: --border ist in den Backoffice-Pages
   (admin-index-page.css, admin-bestellung-page.css,
   admin-login-page.css, wws-login-page.css, wws.css)
   als Alias zu --rand erweitert, damit diese Klasse
   ueberall funktioniert. */
.u-border-base     { border: 1px solid var(--border); }
.u-border-1-ddd    { border: 1px solid #ddd; }
.u-border-none     { border: none; }
/* 1.5px solid Mint — Akzent-Border fuer Erfolgs-/Hinweis-Boxen */
.u-border-mint-15  { border: 1.5px solid #9ed2c0; }
.u-border-mint-1   { border: 1px solid #9ed2c0; }
.u-border-erfolg   { border: 1px solid #16a34a; }
.u-border-fee2e2   { border: 1px solid #fee2e2; }
.u-border-akzent-solid-15 { border: 1.5px solid #830e25; }  /* 1.5px Marken-Rot (vs. u-border-akzent-15 = 1px+15%-Opacity) */
.u-border-fecaca   { border: 1px solid #fecaca; }  /* hellrosa Fehler-Border */
.u-border-e0c0c0-15{ border: 1.5px solid #e0c0c0; }  /* dunkelrosa Fehler-Btn-Border */
.u-border-mint     { border: 1px solid #a3d9c5; }
.u-border-rot      { border: 1px solid #f5b8b8; }
.u-border-base-15  { border: 1.5px solid var(--border); }
.u-border-akzent-15{ border: 1px solid rgba(131, 14, 37, 0.15); }
.u-border-fed7aa   { border: 1px solid #fed7aa; }
.u-border-ffb74d-15{ border: 1.5px solid #ffb74d; }
.u-border-e0       { border: 1px solid #e0e0e0; }
.u-border-eee      { border: 1px solid #eee; }
.u-border-akzent   { border: 1px solid #830e25; }

/* Border-Bottom */
.u-border-b-base   { border-bottom: 1px solid var(--border); }
.u-border-b-e0     { border-bottom: 1px solid #e0e0e0; }
.u-border-b-eee    { border-bottom: 1px solid #eee; }
.u-border-b-rand   { border-bottom: 1px solid var(--rand); }
.u-border-b-rand-2 { border-bottom: 2px solid var(--rand); }

/* Border-Top */
.u-border-t-base   { border-top: 1px solid var(--border); }
.u-border-t-rand   { border-top: 1px solid var(--rand); }
.u-border-t-dashed { border-top: 1px dashed var(--border); }

/* Border-Left (Akzent-Hinweis-Balken) */
.u-border-l-akzent { border-left: 3px solid #830e25; }
.u-border-l-muted  { border-left: 3px solid var(--muted); }

.u-rounded-2       { border-radius: 2px; }
.u-rounded-3       { border-radius: 3px; }
.u-rounded-4       { border-radius: 4px; }
.u-rounded-5       { border-radius: 5px; }
.u-rounded-6       { border-radius: 6px; }
.u-rounded-7       { border-radius: 7px; }
.u-rounded-8       { border-radius: 8px; }
.u-rounded-10      { border-radius: 10px; }
.u-rounded-12      { border-radius: 12px; }
.u-rounded-16      { border-radius: 16px; }
.u-rounded-20      { border-radius: 20px; }
.u-rounded-100     { border-radius: 100px; }   /* Pill-Shape fuer Badges/Progressbar */
.u-rounded-999     { border-radius: 999px; }   /* Voll-Pill */
.u-rounded-28      { border-radius: 28px; }
.u-rounded-full    { border-radius: 50%; }
.u-rounded-var     { border-radius: var(--radius); }
.u-rounded-var-lg  { border-radius: var(--radius-lg, 16px); }
.u-rounded-var-6   { border-radius: var(--radius, 6px); }   /* mit Fallback 6px */


/* ═══ 10. PADDING ══════════════════════════════════════════════ */

/* Eindimensional (uniformes Padding) */
.u-p-0             { padding: 0; }
.u-p-6             { padding: 6px; }
.u-p-8             { padding: 8px; }
.u-p-10            { padding: 10px; }
.u-p-12            { padding: 12px; }
.u-p-13            { padding: 13px; }
.u-p-14            { padding: 14px; }
.u-p-16            { padding: 16px; }
.u-p-20            { padding: 20px; }
.u-p-24            { padding: 24px; }
.u-p-28            { padding: 28px; }
.u-p-32            { padding: 32px; }
.u-p-40            { padding: 40px; }
.u-p-48            { padding: 48px; }
.u-p-60            { padding: 60px; }

/* Mikro-Padding */
.u-p-2             { padding: 2px; }
.u-p-4             { padding: 4px; }

/* Zwei-dimensional: TopBot - LeftRight (z.B. u-p-6-14 = padding:6px 14px) */
.u-p-6-10          { padding: 6px 10px; }
.u-p-6-14          { padding: 6px 14px; }
.u-p-7-10          { padding: 7px 10px; }
.u-p-8-10          { padding: 8px 10px; }
.u-p-8-12          { padding: 8px 12px; }
.u-p-8-14          { padding: 8px 14px; }
.u-p-9-12          { padding: 9px 12px; }
.u-p-10-12         { padding: 10px 12px; }
.u-p-10-14         { padding: 10px 14px; }
.u-p-12-16         { padding: 12px 16px; }
.u-p-4-0           { padding: 4px 0; }
.u-p-4-12          { padding: 4px 12px; }
.u-p-7-14          { padding: 7px 14px; }
.u-p-8-0           { padding: 8px 0; }
.u-p-9-18          { padding: 9px 18px; }
.u-p-14-18         { padding: 14px 18px; }
.u-p-8-20          { padding: 8px 20px; }
.u-p-2-8           { padding: 2px 8px; }
.u-p-2-10          { padding: 2px 10px; }
.u-p-3-8           { padding: 3px 8px; }
.u-p-3-9           { padding: 3px 9px; }
.u-p-3-10          { padding: 3px 10px; }
.u-p-5-10          { padding: 5px 10px; }
.u-p-5-12          { padding: 5px 12px; }
.u-p-6-8           { padding: 6px 8px; }
.u-p-6-12          { padding: 6px 12px; }
.u-p-10-0          { padding: 10px 0; }
.u-p-12-0          { padding: 12px 0; }
.u-p-12-14         { padding: 12px 14px; }
.u-p-13-20         { padding: 13px 20px; }
.u-p-20-0          { padding: 20px 0; }
.u-p-10-14         { padding: 10px 14px; }
.u-p-10-20         { padding: 10px 20px; }
.u-p-10-24         { padding: 10px 24px; }
.u-p-12-28         { padding: 12px 28px; }
.u-p-14-16         { padding: 14px 16px; }
.u-p-14-20         { padding: 14px 20px; }
.u-p-16-0          { padding: 16px 0; }
.u-p-16-18         { padding: 16px 18px; }
.u-p-16-20         { padding: 16px 20px; }
.u-p-16-40         { padding: 16px 40px; }
.u-p-24-28         { padding: 24px 28px; }
.u-p-28-0          { padding: 28px 0; }
.u-p-32-0          { padding: 32px 0; }
.u-p-32-20         { padding: 32px 20px; }
.u-p-32-28         { padding: 32px 28px; }
.u-p-36-44         { padding: 36px 44px; }
.u-p-48-44         { padding: 48px 44px; }
.u-p-60-20         { padding: 60px 20px; }
.u-p-80-0          { padding: 80px 0; }
.u-p-80-20         { padding: 80px 20px; }
.u-p-100-0         { padding: 100px 0; }
.u-p-0-6           { padding: 0 6px; }
.u-p-4-10          { padding: 4px 10px; }
.u-p-8-16          { padding: 8px 16px; }
.u-p-8-18          { padding: 8px 18px; }
.u-p-10-16         { padding: 10px 16px; }
.u-p-10-18         { padding: 10px 18px; }
.u-p-10-22         { padding: 10px 22px; }
.u-p-10-26         { padding: 10px 26px; }
.u-p-20-10         { padding: 20px 10px; }

/* Drei-Wert-Padding (top, left/right, bottom) — Page-Section-Konvention
   mit Top-Padding fuer Fixed-Nav-Pages */
.u-p-60-0-100      { padding: 60px 0 100px; }
.u-p-80-0-100      { padding: 80px 0 100px; }
.u-p-140-0-100     { padding: 140px 0 100px; }


/* ═══ 11. MARGIN ═══════════════════════════════════════════════ */

.u-m-0             { margin: 0; }
.u-m-0-auto        { margin: 0 auto; }
.u-m-0-8           { margin: 0 8px; }     /* horizontal 8px, vertikal 0 */
.u-m-6-0-0         { margin: 6px 0 0; }   /* nur top, kein left/right/bot */
.u-m-10-0-0        { margin: 10px 0 0; }
.u-m-14-0          { margin: 14px 0; }      /* nur vertikal 14px */
.u-m-16-0-0        { margin: 16px 0 0; }
.u-m-20-0-0        { margin: 20px 0 0; }  /* nur top, 20px */
.u-m-0-0-20        { margin: 0 0 20px; }    /* nur bot 20px */
.u-m-24-0-12       { margin: 24px 0 12px; }
.u-m-0-0-6         { margin: 0 0 6px; }   /* nur bot, 6px */
.u-m-0-0-8         { margin: 0 0 8px; }   /* nur bot, 8px */
.u-m-0-0-12        { margin: 0 0 12px; }
.u-m-0-0-14        { margin: 0 0 14px; }
.u-m-0-0-16        { margin: 0 0 16px; }
.u-m-0-0-24        { margin: 0 0 24px; }
.u-m-0-0-30        { margin: 0 0 30px; }
.u-m-10-0-4        { margin: 10px 0 4px; }
.u-m-24-0-20       { margin: 24px 0 20px; }
.u-m-26-auto-0     { margin: 26px auto 0; }    /* top+horizontal-center */
.u-m-0-auto-8      { margin: 0 auto 8px; }     /* horizontal-center + bot 8px */
.u-m-0-auto-28     { margin: 0 auto 28px; }    /* horizontal-center + bot 28px */
.u-m-0-0-4-0       { margin: 0 0 4px 0; }      /* nur bot 4px (4-Wert-Form) */
.u-m-0-0-10        { margin: 0 0 10px; }
.u-m-0-0-18        { margin: 0 0 18px; }
.u-m-4-0-0         { margin: 4px 0 0; }
.u-m-20-0-10       { margin: 20px 0 10px; }
.u-mb-2            { margin-bottom: 2px; }

/* margin-top */
.u-mt-0            { margin-top: 0; }
.u-mt-2            { margin-top: 2px; }
.u-mt-3            { margin-top: 3px; }
.u-mt-4            { margin-top: 4px; }
.u-mt-6            { margin-top: 6px; }
.u-mt-8            { margin-top: 8px; }
.u-mt-10           { margin-top: 10px; }
.u-mt-12           { margin-top: 12px; }
.u-mt-14           { margin-top: 14px; }
.u-mt-16           { margin-top: 16px; }
.u-mt-18           { margin-top: 18px; }
.u-mt-20           { margin-top: 20px; }
.u-mt-24           { margin-top: 24px; }
.u-mt-32           { margin-top: 32px; }
.u-mt-40           { margin-top: 40px; }
.u-mt-48           { margin-top: 48px; }

/* margin-bottom */
.u-mb-0            { margin-bottom: 0; }
.u-mb-3            { margin-bottom: 3px; }
.u-mb-4            { margin-bottom: 4px; }
.u-mb-6            { margin-bottom: 6px; }
.u-mb-8            { margin-bottom: 8px; }
.u-mb-10           { margin-bottom: 10px; }
.u-mb-12           { margin-bottom: 12px; }
.u-mb-14           { margin-bottom: 14px; }
.u-mb-16           { margin-bottom: 16px; }
.u-mb-20           { margin-bottom: 20px; }
.u-mb-24           { margin-bottom: 24px; }
.u-mb-28           { margin-bottom: 28px; }
.u-mb-18           { margin-bottom: 18px; }
.u-mb-32           { margin-bottom: 32px; }
.u-mb-36           { margin-bottom: 36px; }
.u-mb-40           { margin-bottom: 40px; }
.u-mb-48           { margin-bottom: 48px; }

/* margin-right (sehr selten verwendet) */
.u-mr-4            { margin-right: 4px; }
.u-mr-6            { margin-right: 6px; }
.u-mr-auto         { margin-right: auto; }

/* margin-left */
.u-ml-4            { margin-left: 4px; }
.u-ml-6            { margin-left: 6px; }
.u-ml-8            { margin-left: 8px; }
.u-ml-auto         { margin-left: auto; }

/* padding-bottom / padding-top */
.u-pb-6            { padding-bottom: 6px; }
.u-pt-12           { padding-top: 12px; }
.u-pt-14           { padding-top: 14px; }
.u-pt-20           { padding-top: 20px; }
.u-pr-38           { padding-right: 38px; }