/* ============================================================
   KIMSEN — Buttons »Tuschestrich«
   Ruhige Tinten-Pille, ohne Schatten und ohne Schiefstand.
   Beschriftung in Kims Handschrift (Kimsen-Font).
   Drei Stufen: primär (Tinte gefüllt), sekundär (Tinte-Kontur),
   tertiär (Handschrift auf Bleistiftlinie, kein Kasten).
   Markup kommt aus der Komponente <kim-btn> (kimsen-button.js).
   Lädt als letztes Stylesheet auf allen Seiten.
   ============================================================ */

/* Komponenten-Hülle: schrumpft auf den Button, bleibt Flex-tauglich */
kim-btn { display: inline-flex; vertical-align: middle; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-hand); font-weight: 400; font-size: 22px; line-height: 1;
  min-height: 46px; padding: 12px 26px 10px;
  cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Primär: mit Tinte gefüllt */
.btn-primary { background: var(--ink); color: var(--paper-hi, #fdfaf2); border-color: var(--ink); }
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary.is-hover { background: var(--clay); border-color: var(--clay); color: #fff6ee; transform: translateY(-2px); box-shadow: 0 7px 16px rgba(56, 61, 63, .15); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(56, 61, 63, .14); }

/* Sekundär: Tinte-Kontur auf Papier — nur Schrift & Rand färben, kein Flächen-Fill */
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover, .btn-outline:focus-visible, .btn-outline.is-hover { background: transparent; color: var(--clay); border-color: var(--clay); transform: translateY(-2px); box-shadow: 0 7px 16px rgba(56, 61, 63, .12); }
.btn-outline:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(56, 61, 63, .1); }

/* Klein (Header, Shop-Karten) */
.btn-sm { min-height: 38px; padding: 8px 19px 7px; font-size: 17.5px; }

/* ------------------------------------------------------------
   Tertiär: Handschrift & Bleistift — gar kein Kasten.
   Kims Handschrift auf einer Bleistiftlinie, die sich beim
   Hover in Ton-Orange »nachzeichnet«.
   ------------------------------------------------------------ */
.btn-hand {
  border: 0; background: transparent; border-radius: 0;
  font-family: var(--f-hand); font-weight: 400;
  font-size: 22px; line-height: 1.1;
  color: var(--ink);
  min-height: 44px; padding: 3px 2px 12px; gap: 10px;
  position: relative; isolation: isolate;
  transition: color .16s ease, transform .16s ease;
}
.btn-hand::before, .btn-hand::after {
  content: ''; position: absolute; left: 0; bottom: 1px;
  width: 100%; height: 9px; pointer-events: none;
  -webkit-mask: var(--puline) left center / 100% 100% no-repeat;
  mask: var(--puline) left center / 100% 100% no-repeat;
}
.btn-hand::before { background: rgba(64, 55, 42, .32); }
.btn-hand::after { background: var(--accent); clip-path: inset(0 100% 0 0); transition: clip-path .35s ease; }
.btn-hand:hover, .btn-hand:focus-visible { color: var(--accent); transform: translateY(-3px); }
.btn-hand:hover::after, .btn-hand:focus-visible::after { clip-path: inset(0 0 0 0); }
.btn-hand:active { transform: translateY(1px); }
.btn-hand .arr.ki, .btn-hand .arr-l.ki { width: 27px; --ki-stroke: 2.2; margin-block: -9px; }
.btn-hand.btn-sm { font-size: 18px; padding-bottom: 10px; min-height: 40px; }
.btn-hand.btn-sm .arr.ki, .btn-hand.btn-sm .arr-l.ki { width: 22px; }

/* handgezeichneter Pfeil im Button: wandert beim Hover */
.btn .arr, .btn .arr-l { flex: none; transition: transform .25s cubic-bezier(.34, 1.56, .5, 1); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(4px) rotate(3deg); }
.btn:hover .arr-l, .btn:focus-visible .arr-l { transform: translateX(-4px) rotate(-3deg); }

/* Tertiär in Abschnitts-Köpfen (ersetzt die frühere .head-row .tlink Regel) */
.head-row kim-btn { flex: none; margin-bottom: 10px; }

@media (max-width: 640px) {
  .header-actions > kim-btn, .header-actions > .btn-primary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arr, .btn .arr-l, .btn-hand::after { transition: none; }
}

/* Mobil: fingerfreundliche Ziele */
@media (max-width: 640px) {
  .btn { min-height: 48px; padding: 13px 26px 11px; }
  .btn-sm { min-height: 42px; padding: 9px 19px 8px; }
  .btn-hand, .btn-hand.btn-sm { min-height: 46px; }
}