/* machsleicht.de — Utility-Klassen (ersetzt wiederkehrende Inline-Styles)
   Generiert aus Analyse von ~20.000 Inline-Styles, 31.03.2026 */

/* === Text & Links === */
.u-link      { text-decoration:none; color:var(--d) }
.u-clr-d     { color:var(--d) }
.u-clr-m     { color:var(--m) }
.u-clr-a     { color:var(--a) }

/* === Typografie === */
.u-fs12      { font-size:12px }
.u-fs13      { font-size:13px }
.u-fs14      { font-size:14px }
.u-fs15      { font-size:15px }
.u-fs20      { font-size:20px }
.u-fs22      { font-size:22px }
.u-fs28      { font-size:28px }
.u-fw7       { font-weight:700 }
.u-fw6       { font-weight:600 }

/* === Spacing === */
.u-mb0       { margin-bottom:0 }
.u-mb4       { margin-bottom:4px }
.u-mb6       { margin-bottom:6px }
.u-mb8       { margin-bottom:8px }
.u-mb12      { margin-bottom:12px }
.u-mb16      { margin-bottom:16px }
.u-mt8       { margin-top:8px }
.u-mt32      { margin-top:32px }

/* === Layout === */
.u-tac       { text-align:center }
.u-flex      { display:flex }
.u-flex-wrap { flex-wrap:wrap }
.u-flex1     { flex:1 }
.u-gap4      { gap:4px }
.u-gap8      { gap:8px }
.u-gap12     { gap:12px }
.u-ai-c      { align-items:center }

/* === Karten-Patterns (Motto-Seiten) === */

/* Spielekarten-Grid */
.u-grid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px }

/* Standardkarte */
.u-card      { background:var(--bg); border:1px solid var(--l); border-radius:12px; padding:16px }

/* Kompakte Karte (Spiele-Liste) */
.u-card-sm   { padding:16px; margin-bottom:12px; background:var(--bg); border:1px solid var(--l); border-radius:10px }

/* Zitat-Block */
.u-quote     { border-left:4px solid var(--a); padding:0 0 0 16px; margin:24px 0 }

/* === Kombinierte Patterns (häufigste) === */

/* Spiel-Titel in Karte */
.u-card-label  { font-size:13px; font-weight:700; color:var(--a); margin-bottom:4px }
.u-card-title  { font-weight:700; color:var(--d); margin-bottom:6px }
.u-card-text   { font-size:14px; margin-bottom:0 }

/* Produkt-Übersicht */
.u-prod-title  { font-size:15px; font-weight:700; margin:0 0 6px; color:var(--d) }
.u-prod-desc   { font-size:14px; color:var(--m); margin:0 0 8px; line-height:1.6 }
.u-prod-action { font-size:12px; font-weight:700; color:var(--a); cursor:pointer }

/* Emoji-Zelle */
.u-emoji-cell  { text-align:center; padding:14px }
.u-emoji-label { font-weight:700; margin:4px 0 2px; color:var(--d) }
.u-emoji-sub   { font-size:12px; color:var(--m) }

/* Link-Karte */
.u-link-card { display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--l); border-radius:10px; padding:12px 14px; text-decoration:none; transition:border-color .2s }

/* Beschreibungstext */
.u-desc-text { font-size:12px; color:var(--m); margin:6px 0 0; line-height:1.6; white-space:pre-wrap }
.u-desc-text-sm { font-size:12px; color:var(--m); margin:6px 0 0; line-height:1.5 }

/* Section-Heading */
.u-sec-heading { font-family:var(--fd); color:var(--a); font-size:18px; margin-bottom:4px }

/* Body-Text */
.u-body       { font-size:16px; color:var(--d); line-height:1.7 }
.u-body-sm    { font-size:14px; color:var(--m); line-height:1.6; margin-bottom:16px }

/* Intro/Label */
.u-intro-label { font-size:13px; color:var(--a); font-weight:600; margin-bottom:4px }
.u-intro-sub   { font-size:13px; color:var(--a); font-weight:600; margin-bottom:16px }

/* Tag-Row */
.u-tags       { display:flex; flex-wrap:wrap; gap:4px }

/* Button-Styles */
.u-btn-filter { padding:10px 20px; font-size:13px; margin:4px }

/* Footer-Seiten */
.u-page-footer { font-size:12px; color:#6B5D52; margin-top:24px; padding-top:12px; border-top:1px solid #EDE6DE; text-align:center; max-width:660px; margin-left:auto; margin-right:auto }
.u-page-title  { font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:800; margin-bottom:8px }

/* Sticky CTA Bar */
.u-sticky-cta { position:fixed; bottom:0; left:0; right:0; background:rgba(255,248,240,0.97); backdrop-filter:blur(8px); padding:8px 12px; text-align:center; border-top:1px solid #EDE6DE; z-index:100; display:none }
@media(max-width:768px){ .u-sticky-cta { display:block } }
.u-sticky-bar { display:flex; gap:6px; max-width:420px; margin:0 auto; justify-content:center }
.u-sticky-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:10px 8px; border-radius:10px; text-decoration:none; font-weight:700; font-size:12px; border:none; cursor:pointer; transition:all .15s }
.u-sticky-btn--primary { background:#E8873D; color:#fff }
.u-sticky-btn--primary:hover { background:#C46A1D; text-decoration:none }
.u-sticky-btn--secondary { background:#FFFAF5; color:#2D2319; border:1px solid #EDE6DE }
.u-sticky-btn--secondary:hover { border-color:#E8873D; text-decoration:none }

/* Leer-State */
.u-empty-state { text-align:center; padding:32px 0; max-width:400px; margin:0 auto }
.u-empty-text  { font-size:14px; color:#6B5D52; line-height:1.6; margin-bottom:12px }
@media(max-width:768px){ body { padding-bottom:56px } }