/* Handschrift-Generator (/text-in-handschrift/) – Schriften selbst gehostet, kein Google-Fonts-Abruf */
@font-face { font-family: "HS Caveat"; src: url("/assets/fonts/caveat.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "HS Kalam"; src: url("/assets/fonts/kalam.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "HS Indie Flower"; src: url("/assets/fonts/indieflower.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "HS Homemade Apple"; src: url("/assets/fonts/homemadeapple.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "HS Shadows Into Light"; src: url("/assets/fonts/shadowsintolight.woff2") format("woff2"); font-display: swap; }

.hs-tool { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.hs-tool textarea { width: 100%; min-height: 150px; padding: 14px 16px; border: 2px solid var(--border, #e2e8f0); border-radius: 14px;
  font: inherit; font-size: 1rem; line-height: 1.5; background: var(--bg-card, #fff); color: inherit; resize: vertical; box-sizing: border-box; }
.hs-tool textarea:focus { outline: none; border-color: var(--accent, #6d28d9); }
.hs-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.hs-controls label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; }
.hs-controls select, .hs-controls input[type=range] { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; background: var(--bg-card, #fff); color: inherit; }
.hs-controls input[type=range] { padding: 8px 0; border: 0; background: none; }
.hs-check { flex-direction: row !important; align-items: center; font-weight: 400 !important; }
.hs-pages { display: grid; gap: 22px; margin: 18px 0 8px; }
.hs-page { background: #fff; border-radius: 6px; box-shadow: 0 6px 24px rgba(15, 23, 42, .14); overflow: hidden; }
.hs-page canvas { display: block; width: 100%; height: auto; }
.hs-page-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc;
  border-top: 1px solid #e2e8f0; font-size: .9rem; color: #334155; }
.hs-dl { background: var(--accent, #6d28d9); color: #fff; border: 0; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.hs-dl:hover { filter: brightness(1.1); }
.hs-note { font-size: .85rem; opacity: .75; margin: 6px 0 0; }
html.dark .hs-page-bar { background: #0f172a; border-color: #1e293b; color: #cbd5e1; }