/* Rubrik „Selbermachen“ (Michael, 27.10.2026) */
.sm { background: var(--neu-creme, #faf6f1); padding: 48px 0 64px; }
.sm-wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.sm-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--neu-terra, #a24a27); }
.sm h1 { margin: 0 0 12px; font-family: var(--neu-serif, Georgia, serif); font-size: clamp(30px, 4vw, 46px); line-height: 1.1; color: var(--neu-tinte, #2b211c); }
.sm-lead { margin: 0 0 30px; max-width: 700px; font-size: 18px; line-height: 1.65; color: var(--neu-grau, #6b5a50); }
.sm-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
/* Vier Generatoren: nie eine einzelne Kachel allein in der letzten Reihe (03.11.2026) */
@media (min-width: 640px) { .sm-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sm-kachel { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 10px 28px rgba(74, 47, 34, .10); color: var(--neu-tinte, #2b211c); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.sm-kachel:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(74, 47, 34, .16); color: var(--neu-tinte, #2b211c); }
.sm-kachel strong { font-family: var(--neu-serif, Georgia, serif); font-size: 26px; line-height: 1.15; }
.sm-kachel span { font-size: 16.5px; line-height: 1.6; color: var(--neu-grau, #6b5a50); }
.sm-kachel em { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-style: normal; font-weight: 700; color: var(--neu-terra, #a24a27); }
.sm-kachel em svg { width: 18px; height: 18px; }
.sm-kachel-etikett { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; background: var(--neu-terra, #a24a27); color: #fff !important; font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2 !important; }
@media (max-width: 760px) { .sm { padding: 32px 0 48px; } .sm-wrap { padding: 0 16px; } .sm-lead { font-size: 16px; } }
/* Bild je Kachel: Schild, Hundemarke (Pfote aus daten.json), Faltenvase – beim Darüberfahren hebt es sich leicht (Michael, 29.10.2026) */
.sm-bild { display: block; width: calc(100% + 16px); height: auto; aspect-ratio: 240 / 130; margin: -8px -8px 4px; border-radius: 16px; background: var(--neu-creme, #faf6f1); }
.sm-bild-ding { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.sm-kachel:hover .sm-bild-ding, .sm-kachel:focus-visible .sm-bild-ding { transform: translateY(-4px) rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .sm-bild-ding { transition: none; } }
/* Hinweis „Nix gfund’n oder eigene Idee? Her damit!“ unter den Kacheln (Michael, 29.10.2026) */
.sm-idee { display: grid; gap: 8px; margin-top: 22px; padding: 24px 28px; border: 2px dashed rgba(162, 74, 39, .35); border-radius: 24px; color: var(--neu-tinte, #2b211c); text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.sm-idee:hover { background: rgba(162, 74, 39, .05); border-color: rgba(162, 74, 39, .6); color: var(--neu-tinte, #2b211c); }
.sm-idee-hand { font-family: var(--font-script, 'Kaushan Script', cursive); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; color: var(--neu-terra, #a24a27); }
.sm-idee > span:not(.sm-idee-hand) { font-size: 16.5px; line-height: 1.6; color: var(--neu-grau, #6b5a50); }
.sm-idee em { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-weight: 700; color: var(--neu-terra, #a24a27); }
.sm-idee em svg { width: 18px; height: 18px; }