@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ==========================================================================
   Förderverein der Kita Weserwichtel e.V. - Stylesheet & Compiled Tailwind CSS
   Design System: Weserwichtel Warm Botanical (Tactile & Humanist Modernism)
   ========================================================================== */

/* 1. Base Reset & Preflight */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #E6E1D5;
}

html {
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  background-color: #FDFBF7;
}

body {
  margin: 0;
  padding: 0;
  line-height: inherit;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  position: relative;
  background-color: #FDFBF7;
  color: #1F2937;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

img, video {
  height: auto;
}

input::placeholder, textarea::placeholder {
  opacity: 1;
  color: #94a3b8;
}

/* 2. Visibility, Positioning & Display */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.transform { transform: translateZ(0); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.top-2\.5 { top: 0.625rem; }
.top-4 { top: 1rem; }
.-top-2\.5 { top: -0.625rem; }
.right-3\.5 { right: 0.875rem; }
.right-4 { right: 1rem; }
.left-1\/2 { left: 50%; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* 3. Flexbox & Grid */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }

.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-2 { row-gap: 0.5rem; }

.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
.space-y-9 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.25rem; }
.space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.5rem; }

/* 4. Sizing (Width & Height) */
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-7 { width: 1.75rem; }
.w-11 { width: 2.75rem; }
.w-16 { width: 4rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0px; }
.max-w-xs { max-width: 20rem; }
.max-w-lg { max-width: 32rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-full { max-width: 100%; }
.max-w-\[160px\] { max-width: 160px; }
.max-w-\[180px\] { max-width: 180px; }
.max-w-\[210px\] { max-width: 210px; }
.max-w-\[280px\] { max-width: 280px; }

.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-44 { height: 11rem; }
.h-full { height: 100%; }
.min-h-full { min-height: 100%; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[92vh\] { max-height: 92vh; }

/* 5. Spacing (Padding & Margin) */
.p-1\.5 { padding: 0.375rem; }
.p-2 { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3 { padding: 0.75rem; }
.p-3\.5 { padding: 0.875rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pl-3\.5 { padding-left: 0.875rem; }
.pl-5 { padding-left: 1.25rem; }
.pr-8 { padding-right: 2rem; }
.pr-20 { padding-right: 5rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.ml-1 { margin-left: 0.25rem; }
.-ml-1 { margin-left: -0.25rem; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 0.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-auto { margin-top: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }

/* 6. Typography */
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.text-\[10px\] { font-size: 10px; line-height: 14px; }
.text-\[11px\] { font-size: 11px; line-height: 16px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.italic { font-style: italic; }

.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }
.leading-none { line-height: 1; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }

/* Contribution Fee Cards & Inline Custom Input */
.fee-card {
  min-height: 74px;
}
@media (min-width: 640px) {
  .fee-card {
    min-height: 80px;
  }
}
.fee-custom-input {
  -moz-appearance: textfield;
}
.fee-custom-input::-webkit-outer-spin-button,
.fee-custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.underline { text-decoration-line: underline; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.whitespace-nowrap { white-space: nowrap; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-disc { list-style-type: disc; }

/* 7. Text Colors (Weserwichtel Warm Botanical) */
.text-white { color: #ffffff; }
.text-slate-300 { color: #8abda9; }
.text-slate-400 { color: #707974; }
.text-slate-500 { color: #57605b; }
.text-slate-600 { color: #404945; }
.text-slate-700 { color: #2d3732; }
.text-slate-800 { color: #1F2937; }
.text-slate-900 { color: #121c2a; }
.text-wichtel-burgundy { color: #1B4D3E; }
.text-wichtel-cap { color: #D97706; }
.text-wichtel-blue { color: #003629; }
.text-sky-300 { color: #9ed1bd; }
.text-sky-600 { color: #1B4D3E; }
.text-brand-600 { color: #1B4D3E; }
.text-brand-700 { color: #003629; }
.text-brand-800 { color: #002117; }
.text-emerald-600 { color: #1B4D3E; }
.text-emerald-700 { color: #003629; }
.text-emerald-900 { color: #002117; }
.text-amber-600 { color: #D97706; }
.text-rose-600 { color: #ba1a1a; }

/* 8. Backgrounds & Surfaces (Warm Botanical Foundation) */
.bg-white { background-color: #ffffff; }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-slate-50 { background-color: #FDFBF7; }
.bg-slate-50\/60 { background-color: rgba(253, 251, 247, 0.6); }
.bg-slate-50\/80 { background-color: rgba(253, 251, 247, 0.85); }
.bg-slate-100 { background-color: #F7F4EC; }
.bg-slate-900 { background-color: #1B4D3E; }
.bg-slate-900\/60 { background-color: rgba(27, 77, 62, 0.6); }
.bg-wichtel-burgundy { background-color: #1B4D3E; }
.bg-sky-50 { background-color: #F7F4EC; }
.bg-sky-100 { background-color: #E8F5E9; }
.bg-sky-500\/20 { background-color: rgba(27, 77, 62, 0.15); }
.bg-brand-100 { background-color: #E8F5E9; }
.bg-brand-600 { background-color: #1B4D3E; }
.bg-emerald-50 { background-color: #E8F5E9; }
.bg-emerald-100 { background-color: #D1E7DD; }
.bg-amber-50 { background-color: #FEF3C7; }
.bg-amber-50\/70 { background-color: rgba(254, 243, 199, 0.7); }

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, #F7F4EC, #FDFBF7, #FDFBF7);
}

/* 9. Borders & Rounded Corners */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }

.border-slate-200 { border-color: #E6E1D5; }
.border-slate-200\/70 { border-color: rgba(230, 225, 213, 0.7); }
.border-slate-200\/80 { border-color: rgba(230, 225, 213, 0.8); }
.border-slate-200\/90 { border-color: rgba(230, 225, 213, 0.9); }
.border-slate-300 { border-color: #D4CEBE; }
.border-sky-200 { border-color: #D1E7DD; }
.border-sky-400\/30 { border-color: rgba(27, 77, 62, 0.25); }
.border-brand-500 { border-color: #1B4D3E; }
.border-emerald-200 { border-color: #C0C9C3; }
.border-amber-200 { border-color: #FDE68A; }
.border-wichtel-burgundy { border-color: #1B4D3E; }

.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* 10. Effects, Shadows, Overflow & Interactivity */
.shadow-sm { box-shadow: 0 1px 3px 0 rgba(27, 77, 62, 0.04), 0 1px 2px -1px rgba(27, 77, 62, 0.04); }
.shadow-md { box-shadow: 0 4px 12px -2px rgba(27, 77, 62, 0.06), 0 2px 6px -1px rgba(217, 119, 6, 0.03); }
.shadow-lg { box-shadow: 0 10px 24px -4px rgba(27, 77, 62, 0.08), 0 4px 8px -2px rgba(217, 119, 6, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(27, 77, 62, 0.18); }
.shadow-brand-500\/25 { box-shadow: 0 8px 18px -3px rgba(27, 77, 62, 0.28); }

/* Weserwichtel Warm Botanical Tactile Styling */
.sign-card-frame {
  background-color: #FFFFFF;
  border: 1px solid #E6E1D5;
  box-shadow: 0 4px 24px -2px rgba(27, 77, 62, 0.07), 0 2px 8px -1px rgba(217, 119, 6, 0.04);
}

.sign-benefit-card {
  background-color: #FFFFFF;
  border: 1px solid #E6E1D5;
  box-shadow: 0 2px 8px 0 rgba(27, 77, 62, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sign-benefit-card:hover {
  transform: translateY(-2px);
  border-color: #C0C9C3;
  box-shadow: 0 6px 16px -2px rgba(27, 77, 62, 0.08);
}

.hero-sign-logo {
  filter: drop-shadow(0 4px 12px rgba(27, 77, 62, 0.12));
}

.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }

.backdrop-blur, .backdrop-blur-sm {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }

.cursor-pointer { cursor: pointer; }
.select-none { -webkit-user-select: none; user-select: none; }
.pointer-events-none { pointer-events: none; }

.-translate-x-1\/2 { transform: translateX(-50%); }
.transition-all { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.transition-transform { transition: transform 0.15s ease; }

@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* 11. Pseudo-Class States (Hover, Focus, Active, Disabled, Has-Checked) */
.hover\:bg-brand-700:hover { background-color: #14382D; }
.hover\:bg-sky-100:hover { background-color: #E8F5E9; }
.hover\:bg-slate-50:hover { background-color: #F7F4EC; }
.hover\:bg-slate-100:hover { background-color: #eff4ff; }
.hover\:bg-slate-800:hover { background-color: #14382D; }
.hover\:border-brand-500:hover { border-color: #1B4D3E; }
.hover\:text-brand-600:hover { color: #1B4D3E; }
.hover\:text-brand-700:hover { color: #14382D; }
.hover\:text-brand-800:hover { color: #002117; }
.hover\:text-slate-600:hover { color: #2d3732; }
.hover\:text-slate-800:hover { color: #121c2a; }
.hover\:text-slate-900:hover { color: #002117; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

.focus\:border-brand-600:focus { border-color: #1B4D3E; }
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(27, 77, 62, 0.15); }

.active\:bg-brand-800:active { background-color: #002117; }
.active\:scale-\[0\.99\]:active { transform: scale(0.99); }

.disabled\:bg-slate-100:disabled { background-color: #F7F4EC; }
.disabled\:text-slate-400:disabled { color: #707974; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

.has-\[\:checked\]\:border-brand-600:has(:checked) { border-color: #1B4D3E; }
.has-\[\:checked\]\:bg-sky-50:has(:checked) { background-color: #E8F5E9; }
.has-\[\:checked\]\:ring-2:has(:checked) { box-shadow: 0 0 0 2px rgba(27, 77, 62, 0.15); }

.selection\:bg-brand-500 *::selection, .selection\:bg-brand-500::selection {
  background-color: #1B4D3E;
  color: #ffffff;
}

/* 12. Responsive Breakpoints (sm: >=640px, lg: >=1024px) */
@media (min-width: 640px) {
  .sm\:inline { display: inline; }
  .sm\:inline-block { display: inline-block; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:gap-5 { gap: 1.25rem; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:h-12 { height: 3rem; }
  .sm\:h-14 { height: 3.5rem; }
  .sm\:h-20 { height: 5rem; }
  .sm\:h-28 { height: 7rem; }
  .sm\:h-32 { height: 8rem; }
  .sm\:h-48 { height: 12rem; }
  .sm\:w-auto { width: auto; }
  .sm\:max-w-none { max-width: none; }
  .sm\:max-w-\[290px\] { max-width: 290px; }
  .sm\:p-3\.5 { padding: 0.875rem; }
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:p-12 { padding: 3rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .sm\:text-right { text-align: right; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 1024px) {
  .lg\:p-12 { padding: 3rem; }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:text-5xl { font-size: 3rem; line-height: 1; }
}

/* ==========================================================================
   13. Custom Component & Form Styles
   ========================================================================== */

/* Signature Pad Canvas Styling */
.signature-wrapper {
  position: relative;
  width: 100%;
  border: 2px dashed #cbd5e1;
  border-radius: 0.75rem;
  background-color: #ffffff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.signature-wrapper:focus-within,
.signature-wrapper:hover {
  border-color: #1B4D3E;
}

.signature-wrapper.is-invalid {
  border-color: #ef4444;
  background-color: #fef2f2;
}

canvas#signatureCanvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 180px;
  cursor: crosshair;
  touch-action: none;
}

/* Baseline indicator on canvas */
.signature-baseline {
  position: absolute;
  bottom: 35px;
  left: 20px;
  right: 20px;
  border-bottom: 1px dotted #94a3b8;
  pointer-events: none;
}

.signature-baseline::after {
  content: "Unterschrift hier / Sign here";
  position: absolute;
  bottom: 4px;
  right: 0;
  font-size: 0.75rem;
  color: #94a3b8;
  font-style: italic;
  pointer-events: none;
}

/* Form controls polish (Tactile & Humanist Modernism) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  background-color: #FFFFFF;
  border-width: 1.5px;
  border-color: #D4CEBE;
  transition: all 0.2s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #1B4D3E;
  box-shadow: 0 0 0 3px rgba(27, 77, 62, 0.12);
}

input[type="checkbox"] {
  accent-color: #1B4D3E;
  cursor: pointer;
}

/* Prevent iOS Safari & Chrome from auto-zooming on input focus (requires >=16px) */
@media screen and (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

/* Inline validation states */
.input-valid {
  border-color: #10b981 !important;
  background-color: #f0fdf4 !important;
}

.input-invalid {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
}

/* Collapsible expander (<details>) styling */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] > summary .expander-icon {
  transform: rotate(180deg);
}
.expander-icon {
  transition: transform 0.2s ease;
}

/* Modal backdrop & animations */
.modal-overlay {
  transition: opacity 0.3s ease;
}

.modal-content {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Print Stylesheet for Membership Application */
@media print {
  header,
  footer,
  .no-print,
  #clearSignatureBtn,
  #submitBtn,
  .hero-banner {
    display: none !important;
  }

  body {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt;
  }

  .signature-wrapper {
    border: 1px solid #000000;
  }
}