/* Hundemarken-Generator /hundemarke (Michael, 29.10.2026) – baut auf css/schild.css auf, hier nur das Eigene. */
.hm-logo { position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px; }
.hm-logo img { display: block; width: clamp(180px, 26vw, 270px); height: auto; }
/* Pfote zeichnet sich Ballen für Ballen, danach kommen die Striche (wie das Herz auf der Startseite) */
.hm-pfote { flex: none; width: 74px; height: 74px; transform: rotate(14deg); margin-top: -26px; }
.hm-pfote svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-pfote path { fill: none; stroke: var(--neu-terra, #a24a27); stroke-linecap: round; stroke-linejoin: round; }
.hm-pfote-linie { stroke-width: 4.2; stroke-dasharray: 100; stroke-dashoffset: 100; animation: hm-zeichnen .55s cubic-bezier(.6, .1, .3, 1) forwards; }
.hm-p1 { animation-delay: .3s; } .hm-p2 { animation-delay: .8s; } .hm-p3 { animation-delay: 1.05s; } .hm-p4 { animation-delay: 1.3s; } .hm-p5 { animation-delay: 1.55s; }
.hm-pfote-glanz { stroke-width: 3.2; opacity: 0; animation: hm-glanz .5s ease 2.15s forwards; }
@keyframes hm-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes hm-glanz { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hm-pfote-linie { animation: none; stroke-dashoffset: 0; } .hm-pfote-glanz { animation: none; opacity: 1; } }

.hm-kopf-bild svg { max-width: 300px; transform: rotate(-6deg); }
.hm-formwahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-formwahl .sg-formknopf svg { width: 54px; height: 50px; }
.hm-abstand-oben { margin-top: 16px; }
#hm-groessen .sg-effekt span { font-variant-numeric: tabular-nums; }

.hm-schriften { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.hm-schrift { display: grid; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--neu-linie, #e6dacd); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; color: var(--neu-tinte, #2b211c); }
.hm-schrift strong { font-size: 15px; }
.hm-schrift span { font-size: 12px; color: var(--neu-grau, #6b5a50); }
.hm-schrift[aria-pressed=true] { border-color: var(--neu-terra, #a24a27); background: var(--neu-creme, #faf6f1); }
.hm-schrift svg { display: block; width: 100%; height: 26px; margin-bottom: 2px; }

.hm-status { margin: -4px 0 0; min-height: 1.2em; font-size: 14px; font-weight: 600; color: var(--neu-grau, #6b5a50); }
.hm-status:empty { display: none; }
.hm-ok { color: #2d6a27; }
.hm-fehler { color: #a01818; }
.hm-schrift:disabled { opacity: .4; cursor: not-allowed; }
.hm-sym-pos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.hm-sym-pos [hidden] { display: none; }
.hm-sym-pos .sg-effekt:disabled { opacity: .4; cursor: not-allowed; }
#hm-sym-pos-feld[hidden] { display: none; }
@media (max-width: 480px) { .hm-sym-pos { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hm-keins { display: grid; place-items: center; width: 38px; height: 38px; font-size: 22px; color: var(--neu-grau, #6b5a50); }
.sg-symbolknopf[aria-pressed=true] { border-color: var(--neu-terra, #a24a27); background: var(--neu-creme, #faf6f1); }
.sg-symbolknopf svg { color: var(--neu-tinte, #2b211c); }
.hm-vorschau svg { max-height: 56vh; }
.hm-mass { font-weight: 600; font-family: var(--font-body, sans-serif); fill: #7a675b; }

@media (max-width: 960px) { .hm-vorschau svg { max-height: 30vh; } }
@media (max-width: 760px) {
  .hm-pfote { width: 52px; height: 52px; margin-top: -18px; }
  .hm-formwahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-schriften { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#hm-groessen { grid-template-columns: repeat(2, minmax(0, 1fr)); }