/* ==========================================================================
   helpers.css — Utility-Klassen fuer Inline-Style-Refactoring (BUG-HUNT-14)
   ==========================================================================

   Stand: 2026-05-04 — Iteration 1 von Block 6 (CSP unsafe-inline entfernen)

   ZWECK: Ersatz fuer haeufige Inline-Style-Attribute. Wird in alle Layouts
   eingebunden (base.html, tenant/base.html, landing.html), damit dieselben
   Klassen ueberall verfuegbar sind.

   KONVENTIONEN:
   - Naming wie Bootstrap (.text-muted, .mt-16) wo moeglich
   - Boese Spacing-Werte (z.B. mt-14 statt mt-16) sind beibehalten weil sie
     im aktuellen Design vorkommen — Refactor in Design-System-Sweep spaeter
   - Color-Klassen nutzen die etablierten CSS-Variablen aus admin.css/tenant.css
   - !important wird vermieden — Klassen sollen mit existing Selektoren spielen
   ========================================================================== */

/* ── Text-Farben ──────────────────────────────────────────── */
.text-muted        { color: var(--text-muted); }
.text-secondary    { color: var(--text-secondary); }
.text-primary      { color: var(--primary); }
.text-success      { color: var(--success); }
.text-danger       { color: var(--danger); }
.text-warning      { color: var(--warning); }
.text-info         { color: var(--info); }
.text-white        { color: var(--text-on-accent); }

/* ── Text-Alignment ─────────────────────────────────────────── */
.text-left         { text-align: left; }
.text-center       { text-align: center; }
.text-right        { text-align: right; }

/* ── Text-Decoration ────────────────────────────────────────── */
.no-underline      { text-decoration: none; }
.underline         { text-decoration: underline; }

/* ── Font-Size (Pixel-Werte aus aktuellem Bestand) ──────────── */
.fs-10             { font-size: 10px; }
.fs-11             { font-size: 11px; }
.fs-12             { font-size: 12px; }
.fs-13             { font-size: 13px; }
.fs-14             { font-size: 14px; }
.fs-15             { font-size: 15px; }
.fs-16             { font-size: var(--space-md); }
.fs-18             { font-size: 18px; }

/* ── Font-Weight ────────────────────────────────────────────── */
.fw-400            { font-weight: 400; }
.fw-500            { font-weight: 500; }
.fw-600            { font-weight: 600; }
.fw-700            { font-weight: 700; }

/* ── Display ────────────────────────────────────────────────── */
.d-none            { display: none; }
.d-block           { display: block; }
.d-inline          { display: inline; }
.d-inline-block    { display: inline-block; }
.d-flex            { display: flex; }
.d-inline-flex     { display: inline-flex; }
.d-grid            { display: grid; }

/* ── Flex-Utilities ─────────────────────────────────────────── */
.flex-1            { flex: 1; }
.flex-row          { flex-direction: row; }
.flex-col          { flex-direction: column; }
.flex-wrap         { flex-wrap: wrap; }
.items-center      { align-items: center; }
.items-start       { align-items: flex-start; }
.items-end         { align-items: flex-end; }
.justify-center    { justify-content: center; }
.justify-between   { justify-content: space-between; }
.justify-end       { justify-content: flex-end; }
.gap-4             { gap: var(--space-xs); }
.gap-6             { gap: 6px; }
.gap-8             { gap: var(--space-sm); }
.gap-12            { gap: 12px; }
.gap-16            { gap: var(--space-md); }

/* ── Width / Height ─────────────────────────────────────────── */
.w-100             { width: 100%; }
.w-auto            { width: auto; }
.h-100             { height: 100%; }
.max-w-100         { max-width: 100%; }

/* ── Margin (kompakt + einzeln) ─────────────────────────────── */
.m-0               { margin: 0; }
.mt-0              { margin-top: 0; }
.mt-4              { margin-top: var(--space-xs); }
.mt-6              { margin-top: 6px; }
.mt-8              { margin-top: var(--space-sm); }
.mt-10             { margin-top: 10px; }
.mt-12             { margin-top: 12px; }
.mt-14             { margin-top: 14px; }
.mt-16             { margin-top: var(--space-md); }
.mt-20             { margin-top: 20px; }
.mt-24             { margin-top: var(--space-lg); }
.mb-0              { margin-bottom: 0; }
.mb-4              { margin-bottom: var(--space-xs); }
.mb-6              { margin-bottom: 6px; }
.mb-8              { margin-bottom: var(--space-sm); }
.mb-10             { margin-bottom: 10px; }
.mb-12             { margin-bottom: 12px; }
.mb-16             { margin-bottom: var(--space-md); }
.mb-20             { margin-bottom: 20px; }
.mb-24             { margin-bottom: var(--space-lg); }
.ml-auto           { margin-left: auto; }
.mr-auto           { margin-right: auto; }
.mx-auto           { margin-left: auto; margin-right: auto; }

/* ── Padding ────────────────────────────────────────────────── */
.p-0               { padding: 0; }
.p-8               { padding: var(--space-sm); }
.p-12              { padding: 12px; }
.p-16              { padding: var(--space-md); }
.p-20              { padding: 20px; }

/* ── Composite-Klassen fuer haeufige Pattern-Kombinationen ──── */
/* font-size:11px;color:var(--text-muted) — 41x */
.text-muted-sm     { font-size: 11px; color: var(--text-muted); }
/* font-size:12px;color:var(--text-muted) — 27x */
.text-muted-md     { font-size: 12px; color: var(--text-muted); }
/* display:inline-flex;align-items:center;gap:4px — 29x */
.inline-flex-center { display: inline-flex; align-items: center; gap: var(--space-xs); }
/* display:block;font-weight:600;margin-bottom:4px — 30x */
.label-block       { display: block; font-weight: 600; margin-bottom: var(--space-xs); }

/* ── Sichtbarkeit ───────────────────────────────────────────── */
.hidden            { display: none !important; }  /* hidden uebersteuert */
.invisible         { visibility: hidden; }

/* ── Cursor ─────────────────────────────────────────────────── */
.cursor-pointer    { cursor: pointer; }
.cursor-default    { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── Border-Radius (klein, fuer Inline-Buttons) ──────────────── */
.rounded-4         { border-radius: var(--space-xs); }
.rounded-6         { border-radius: 6px; }
.rounded-8         { border-radius: var(--space-sm); }
.rounded-12        { border-radius: 12px; }
.rounded-full      { border-radius: 9999px; }

/* ── Overflow ───────────────────────────────────────────────── */
.overflow-hidden   { overflow: hidden; }
.overflow-auto     { overflow: auto; }

/* ── Position ───────────────────────────────────────────────── */
.relative          { position: relative; }
.absolute          { position: absolute; }

/* ── Erweiterungen Iter 5 (Admin/Einstellungen) ─────────────── */
.text-muted-normal { color: var(--text-muted); font-weight: normal; }  /* 7× */
.flex-between      { display: flex; justify-content: space-between; align-items: center; }  /* 5+ */
.flex-between-gap-12 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }  /* 6× */
.flex-row-gap-6    { display: flex; align-items: center; gap: 6px; }  /* 6× */
.bg-surface-2      { background: var(--bg-surface-2); }
.mt-4              { margin-top: var(--space-xs); }                                /* falls nicht da */
.mb-8              { margin-bottom: var(--space-sm); }
.mb-10             { margin-bottom: 10px; }
.mr-6              { margin-right: 6px; }
.ml-6              { margin-left: 6px; }
.no-wrap           { white-space: nowrap; }

/* ── Erweiterungen Iter 6 (Buchhaltung/Migration) ───────────── */
.label-block-6         { display: block; font-weight: 600; margin-bottom: 6px; }  /* 7× */
.cell-pad-right        { padding: var(--space-sm); text-align: right; }                       /* 6× */
.cell-pad-left         { padding: var(--space-sm); text-align: left; }                        /* 6× */
.heading-secondary     { margin: 16px 0 8px 0; font-size: 15px; color: var(--text-secondary); }  /* 6× */
.text-muted-fs-13      { color: var(--text-muted); font-size: 13px; }             /* 6× */
.tab-link              { padding: 12px 20px; text-decoration: none; color: var(--text-muted); }  /* 5× */
.text-right-bold       { text-align: right; font-weight: 700; }                   /* 4× */
.text-right-semibold   { text-align: right; font-weight: 600; }                   /* 4× */
.center-pad-16         { text-align: center; padding: var(--space-md); }                     /* 4× */
.value-large-primary   { font-size: 22px; font-weight: 700; color: var(--primary); }  /* 4× */
.label-muted-sm        { font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-xs); }  /* 4× */
.row-padding-muted     { padding: 4px 0; color: var(--text-muted); }              /* 9× */

/* ── Erweiterungen Iter 7 (Platform/Includes/Tenant/Kasse) ──── */
.my-20-8               { margin: 20px 0 8px; }                                     /* 44× */
.label-form            { display: block; font-size: 13px; font-weight: 500; margin-bottom: var(--space-xs); }  /* 14× */
.btn-reset             { background: none; border: none; cursor: pointer; padding: 0; font: inherit; color: inherit; }  /* 13× */
.text-muted-label      { font-size: 12px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: var(--space-xs); }  /* 8× */
.icon-rotate-trans     { font-size: 20px; transition: transform 0.3s; }            /* 18× */
.danger-border         { border-color: var(--danger); }                            /* 8× */
.fs-11-muted-mt-2      { font-size: 11px; color: var(--text-muted); margin-top: 2px; }  /* 5× */
.error-banner          { background: #fee2e2; border: 1px solid #ef4444; border-radius: 6px; padding: 12px 14px; font-size: 13px; color: #991b1b; }  /* 6× */
.inline-flex-gap-8     { display: inline-flex; align-items: center; gap: var(--space-sm); }    /* 6× */
.max-w-700             { max-width: 700px; }                                       /* 6× */
.fs-11                 { font-size: 11px; }                                        /* 7× */
.padding-8-6           { padding: 8px 6px; }                                       /* 5× */
.padding-2-8-2-0       { padding: 2px 8px 2px 0; font-weight: 500; }                /* 7× */

/* ── Erweiterungen Iter 8 (Handwerker-Vertical) ─────────────── */
.link-reset            { text-decoration: none; color: inherit; }                  /* 21× */
.fs-10-muted           { font-size: 10px; color: var(--text-muted); }              /* 15× */
.fs-11-muted-uppercase { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }  /* 13× */
.muted-uppercase       { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }  /* 10× */
.padding-20            { padding: 20px; }                                          /* 16× */
.padding-16-20         { padding: 16px 20px; }                                     /* 11× */
.margin-0-fs-15        { margin: 0; font-size: 15px; }                             /* 16× */
.margin-0-0-8          { margin: 0 0 8px; }                                        /* 16× */
.col-span-2            { grid-column: span 2; }                                    /* 16× */
.w-14p                 { width: 14%; }                                             /* 18× */
.w-12p                 { width: 12%; }                                             /* 14× */
.w-15p                 { width: 15%; }                                             /* 8× */
.w-100p                { width: 100%; }
.w-100px               { width: 100px; }                                           /* 18× */
.w-120px               { width: 120px; }                                           /* 9× */
.w-80px                { width: 80px; }                                            /* 9× */
.w-44px                { width: 44px; }                                            /* 12× */
.fs-15                 { font-size: 15px; }
.flex-wrap-gap-8       { flex-wrap: wrap; gap: var(--space-sm); align-items: center; }         /* 9× */
.padding-2-0           { padding: 2px 0; }                                         /* 8× */
.mt-24                 { margin-top: var(--space-lg); }                                       /* 10× */

/* ── Erweiterungen Iter 9 (verbleibende globale Patterns) ───── */
.w-140px               { width: 140px; }                                           /* 16× */
.w-160px               { width: 160px; }                                           /* 14× */
.w-90px                { width: 90px; }                                            /* 10× */
.w-70px                { width: 70px; }                                            /* 8× */
.w-10p                 { width: 10%; }                                             /* 9× */
.w-18p                 { width: 18%; }                                             /* 8× */
.flex-2                { flex: 2; }                                                /* 15× */
.flex-1-min            { flex: 1; min-width: 0; }                                  /* 12× */
.flex-row-gap-8-wrap   { display: flex; gap: var(--space-sm); flex-wrap: wrap; }                /* 10× */
.flex-row-gap-8        { display: flex; gap: var(--space-sm); }                                /* 10× */
.flex-wrap-gap-8-only  { flex-wrap: wrap; gap: var(--space-sm); }                              /* 12× */
.ml-auto-no-underline  { margin-left: auto; text-decoration: none; }               /* 10× */
.no-wrap-only          { white-space: nowrap; }                                    /* 16× */
.cell-pad-left-10      { padding: 10px; text-align: left; }                        /* 11× */
.muted-fs-13           { color: var(--text-muted); font-size: 13px; }              /* 11× */
.muted-fs-11           { color: var(--text-muted); font-size: 11px; }              /* 9× */
.muted-fs-12           { color: var(--text-muted); font-size: 12px; }              /* 10× */
.fs-12-secondary       { font-size: 12px; color: var(--text-secondary); }          /* 9× */
.mt-6                  { margin-top: 6px; }                                        /* 9× */
.mb-14                 { margin-bottom: 14px; }                                    /* 10× */
.text-center-no-underline { text-decoration: none; text-align: center; }           /* 8× */
.row-divider-padding   { padding: 8px 0; border-bottom: 1px solid #E8E6E1; }       /* 12× */
.inline-flex-gap-6     { display: inline-flex; align-items: center; gap: 6px; }    /* 12× */

/* ── Erweiterungen Iter 10 (verbleibende globale Patterns) ──── */
.w-200px               { width: 200px; }                                           /* 7× */
.w-150px               { width: 150px; }                                           /* 6× */
.w-130px               { width: 130px; }                                           /* 7× */
.w-50p                 { width: 50%; }                                             /* 6× */
.w-25p                 { width: 25%; }                                             /* 6× */
.w-20p                 { width: 20%; }                                             /* 7× */
.w-11p                 { width: 11%; }                                             /* 7× */
.w-100-right           { width: 100px; text-align: right; }                        /* 6× */
.pad-6-0               { padding: 6px 0; }                                         /* 7× */
.pad-14-16             { padding: 14px 16px; }                                     /* 7× */
.pad-10                { padding: 10px; }                                          /* 7× */
.pad-8-0               { padding: 8px 0; }                                         /* 8× */
.mt-20                 { margin-top: 20px; }                                       /* 7× */
.mb-6                  { margin-bottom: 6px; }                                     /* 7× */
.mb-0-only             { margin-bottom: 0; }                                       /* 7× */
.fs-mono               { font-family: monospace; }                                 /* 8× */
.flex-1-min-200        { flex: 1; min-width: 200px; }                              /* 8× */
.label-block-fs-13     { display: block; font-weight: 600; margin-bottom: var(--space-xs); font-size: 13px; }  /* 8× */
.label-block-fs-12     { display: block; font-size: 12px; font-weight: 600; margin-bottom: 2px; }  /* 7× */
.muted-fs-11-mt-2      { font-size: 11px; color: var(--text-muted); margin-top: 2px; }  /* 8× */
.muted-fs-12-mt-4      { font-size: 12px; color: var(--text-muted); margin-top: var(--space-xs); }  /* 7× */
.muted-fs-11-mb-2      { color: var(--text-muted); font-size: 11px; margin-bottom: 2px; }  /* 8× */
.muted-fs-11-fw-400    { font-size: 11px; color: var(--text-muted); font-weight: 400; }  /* 7× */
.signup-meta           { font-size: 13px; color: var(--text-muted); margin-top: var(--space-sm); }       /* 8× signup */
.signup-bg             { background: var(--bg-base); }                                       /* 8× signup */
.color-888             { color: var(--text-muted); }                                          /* 8× — close to #888 */
.tabular-right         { text-align: right; font-variant-numeric: tabular-nums; }  /* 6× */
.flex-row-gap-8-ml-auto { margin-left: auto; display: flex; gap: var(--space-sm); flex-wrap: wrap; }  /* 8× */
.cell-right-bold-muted { text-align: right; padding: 6px 4px; font-weight: 600; font-size: 11px; color: var(--text-muted); }  /* 8× */
.text-secondary-only   { color: var(--text-secondary); }                           /* 7× */
.muted-pad-13          { padding: 6px 0; color: var(--text-muted); font-size: 13px; }  /* 7× */

/* ── Erweiterungen Iter 11 (weitere globale Patterns) ───────── */
.w-9p                  { width: 9%; }                                              /* 5× */
.w-60px                { width: 60px; }                                            /* 5× */
.w-130-right           { width: 130px; text-align: right; }                        /* 5× */
.pad-16                { padding: var(--space-md); }                                          /* 6× */
.pad-16-0              { padding: 16px 0; }                                        /* 6× */
.pad-16-20-mb-16       { padding: 16px 20px; margin-bottom: var(--space-md); }                /* 6× */
.pad-10-right          { padding: 10px; text-align: right; }                       /* 5× */
.cell-mono-right       { padding: 6px 4px; text-align: right; font-family: monospace; }  /* 6× */
.max-w-500             { max-width: 500px; }                                       /* 6× */
.max-w-800             { max-width: 800px; }                                       /* 5× */
.max-w-400             { max-width: 400px; }                                       /* 5× */
.max-w-200             { max-width: 200px; }                                       /* 5× */
.max-w-880             { max-width: 880px; }                                       /* Iter 14 C.2: avv.html */
.flex-shrink-0         { flex-shrink: 0; }                                         /* Iter 14 C.2: AVV-Banner-Icon */
.overflow-hidden       { overflow: hidden; }
.position-relative     { position: relative; }
.whitespace-pre-wrap   { white-space: pre-wrap; }                                  /* 5× */
.fs-14                 { font-size: 14px; }                                        /* 5× */
.fw-700                { font-weight: 700; }                                       /* 5× */
.fs-12-fw-600          { font-size: 12px; font-weight: 600; }                      /* 5× */
.muted-fw-400          { color: var(--text-muted); font-weight: 400; }             /* 6× */
.muted-fs-13-mt-4      { font-size: 13px; color: var(--text-muted); margin-top: var(--space-xs); }  /* 5× */
.muted-fs-11-uppercase-tracking { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }  /* 6× */
.muted-fs-11-mt-4      { font-size: 11px; color: var(--text-muted); margin-top: var(--space-xs); }  /* 6× */
.muted-fs-10-mono      { font-size: 10px; color: var(--text-muted); font-family: monospace; }  /* 6× */
.lead-text             { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }  /* 6× */
.margin-0-0-10         { margin: 0 0 10px; }                                       /* 6× */
.flex-row-gap-6-only   { display: flex; gap: 6px; }                                /* 6× */
.flex-1-min-180        { flex: 1; min-width: 180px; }                              /* 6× */
.flex-grid-2col        { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }  /* 6× */
.justify-between-only  { justify-content: space-between; }                         /* 6× */
.grid-row-divider      { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }  /* 6× */
.flex-between-wrap     { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }  /* 6× */
.flex-row-gap-8-pointer { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }  /* 6× */
.label-block-mt-4-muted { display: block; margin-top: var(--space-xs); font-size: 11px; color: var(--text-muted); }  /* 6× */
.link-primary          { color: var(--primary); text-decoration: none; }           /* 6× */
.border-bottom-subtle  { border-bottom: 1px solid var(--border-subtle); }          /* 6× */
.border-bottom-dashed  { border-bottom: 1px dashed var(--border-subtle); }         /* 6× */
.badge-success-pill    { background: var(--success); color: var(--text-on-accent); padding: 2px 8px; border-radius: 999px; font-size: 11px; }  /* 6× */
.bg-success-light      { background: #E8F5E9; color: var(--success); }             /* 6× */
.ml-auto-flex-gap-8    { margin-left: auto; display: flex; gap: var(--space-sm); }             /* 6× */
.video-thumb           { width: 100%; height: 80px; object-fit: cover; opacity: 0.8; }  /* 6× */
.video-thumb-wrap      { margin-bottom: 10px; border-radius: 6px; overflow: hidden; height: 80px; background: #111; }  /* 6× */

/* ── Erweiterungen Iter 12 (verbleibende mid-frequency Patterns) */
.input-mono-d1d5db     { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-family: monospace; font-size: 13px; }  /* 11× */
.input-border-14       { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }  /* 8× */
.input-border-8        { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--space-sm); font-family: inherit; font-size: 13px; background: var(--bg-surface); color: var(--text); }  /* 7× */
.flex-divider          { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }  /* 6× */
.lead-large            { margin: 0 0 22px; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }  /* 5× — close to #444 */
.mt-3                  { margin-top: 3px; }                                        /* 5× */
.mt-12-pt-12-border    { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }  /* 5× */
.muted-fs-12-mt-2      { font-size: 12px; color: var(--text-muted); margin-top: 2px; }  /* 5× */
.warm-gray-fs-11       { font-size: 11px; color: var(--warm-gray); }                /* 5× */
.fs-mono-11            { font-family: monospace; font-size: 11px; }                /* 5× */
.flex-1-min-240        { flex: 1; min-width: 240px; }                              /* 5× */
.flex-row-gap-14-start { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }  /* 5× */
.label-block-bold      { display: block; margin-bottom: var(--space-xs); font-weight: 600; }   /* 5× */
.label-block-fs-12-mb-4 { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-xs); }  /* 5× */
.muted-pad-vertical    { color: var(--text-muted); padding: 8px 0; }               /* 5× */
.muted-fs-13-mb-12     { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; }  /* 5× */
.muted-fs-13-mb-16     { color: var(--text-muted); font-size: 13px; margin-bottom: var(--space-md); }  /* 5× */
.muted-fs-10           { color: var(--text-muted); font-size: 10px; }              /* 5× */
.text-info             { color: var(--info); }                                     /* 5× */
.badge-muted-pill      { background: var(--text-muted); color: var(--text-on-accent); padding: 2px 8px; border-radius: 999px; font-size: 11px; }  /* 5× */
.badge-success-mix     { background: color-mix(in srgb, var(--success) 14%, var(--bg-surface)); color: var(--success); font-size: 10px; }  /* 5× */
.badge-primary-mix     { background: color-mix(in srgb, var(--primary) 12%, var(--bg-surface)); color: var(--primary); }  /* 5× */
.bg-mac-yellow         { background: #FFBD2E; }                                    /* 5× */
.bg-mac-red            { background: #FF5F56; }                                    /* 5× */
.bg-mac-green          { background: #27C93F; }                                    /* 5× */
.w-8p                  { width: 8%; }                                              /* 4× */
.w-12p-only            { width: 12%; }                                             /* 4× */
.btn-fullwidth         { width: 100%; justify-content: center; padding: 12px; }     /* 4× */
.input-fullwidth-13    { width: 100%; font-size: 13px; }                           /* 4× */
.no-wrap-bold          { white-space: nowrap; font-weight: 600; }                  /* 4× */
.no-wrap-muted         { white-space: nowrap; color: var(--text-muted); }          /* 4× */
.cell-left-bold-muted  { text-align: left; padding: 6px 4px; font-weight: 600; font-size: 11px; color: var(--text-muted); }  /* 4× */
.empty-state           { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 13px; }  /* 4× */
.empty-large           { text-align: center; padding: 60px 20px; }                 /* 4× */
.pad-8                 { padding: var(--space-sm); }
.cell-mono-bold        { padding: 6px 4px; text-align: right; font-family: monospace; font-weight: 500; }  /* 4× */
.cell-pad-6-4          { padding: 6px 4px; }                                       /* 4× */
.pad-pt-8pt            { padding: 5pt 8pt; font-size: 9pt; border: 1pt solid #C4C4C4; }  /* 4× pdf */
.pad-4-8               { padding: 4px 8px; }                                       /* 4× */
.pad-4-0               { padding: 4px 0; }                                         /* 4× */
.pad-16-18             { padding: 16px 18px; }                                     /* 4× */
.pad-14-16             { padding: 14px 16px; }                                     /* 4× */
.pad-12-bg-surface     { padding: 12px; background: var(--bg-surface-2); border-radius: var(--space-sm); text-align: center; }  /* 4× */
.pad-10-6              { padding: 10px 6px; }                                      /* 4× */
.pad-0-overflow        { padding: 0; overflow: hidden; }                           /* 4× */

/* ═══ Phase A.2 (2026-05-05): Auth-Form-Helpers (cross-template) ═══
   Diese 2 Klassen sind hier (statt admin.css), damit auch einladung.html
   sie nutzen kann — einladung.html laedt admin.css nicht. */
.label-hint   { font-weight: 400; color: var(--text-muted); }
.notice-info  { background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
                border-radius: var(--space-sm); padding: 14px 16px; margin-bottom: 18px;
                font-size: 13.5px; color: var(--brand-blue-dark); line-height: 1.55; }

/* ═══ Phase A.4 (2026-05-05): Dynamic-Section-Helpers (cross-template) ═══
   includes/dynamic_section.html wird in tenant/index.html und allen
   Vertical-public_index.html eingebunden — diese laden tenant.css, nicht
   admin.css. Helpers.css wird VON ALLEN geladen → hier ist der richtige Ort. */
.ds-bewertungen-section { background: var(--secondary, var(--bg-base, #F0EDE8)); }
.ds-rating-row { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.ds-rating-num { font-size: 28px; font-weight: 700; color: var(--primary); }
.ds-rating-count { color: var(--text-muted, #7A7B8A); font-size: 14px; }
.ds-bewertungen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.ds-bewertung-card { background: var(--bg-surface, #fff); border-radius: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.ds-stars-row { display: flex; gap: 2px; margin-bottom: var(--space-sm); }
.ds-bewertung-text { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--text-secondary, var(--warm-gray, #4A4A5E)); }
.ds-bewertung-author { font-size: 13px; font-weight: 500; color: var(--primary); }
.ds-empty-padded { text-align: center; padding: 40px 20px; }
.ds-image-opacity { opacity: var(--ds-opacity, 1); }
.ds-section-bg-image { background-image: var(--ds-bg-image); min-height: var(--ds-min-height, 400px); }
.ds-divider-min-height { min-height: var(--ds-min-height, 200px); }
.dyn-section-mt-24 { text-align: center; margin-top: var(--space-lg); }
.dyn-section-link { color: var(--primary); font-size: 14px; text-decoration: none; font-weight: 500; }
.dyn-section-empty { text-align: center; padding: 40px 20px; }