/*
 * Handgeschriebene Tailwind-CSS-v3-äquivalente Utility-Schicht.
 * Deckt exakt die Utility-Klassen ab, die im ursprünglichen React/Tailwind-
 * Frontend verwendet wurden (Skala, Farben, Breakpoints 1:1 aus
 * tailwind.config.js übernommen) — Ziel: JSX-className-Strings lassen sich
 * fast wörtlich als class="..." in die PHP-Templates übernehmen.
 */

/* ---------- Reset-Ergänzungen ---------- */
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- Farb-Tokens (aus tailwind.config.js theme.extend.colors) ---------- */
:root {
  --tw-cream: #FBF7F1;
  --tw-cream-dark: #F4EFE6;
  --tw-cream-card: #FFFFFF;
  --tw-teal-light: #67C7C2;
  --tw-teal: #48B2AC;
  --tw-teal-deep: #2C6F6B;
  --tw-teal-dark: #1F504D;
  --tw-gold-light: #EFDCA2;
  --tw-gold: #C29A45;
  --tw-gold-dark: #A48033;
  --tw-ink: #2A2622;
  --tw-ink-light: #544E48;
  --tw-ink-muted: #8C857E;
  --tw-white: #ffffff;
  --tw-black: #000000;
}

/* ---------- Container ---------- */
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

.max-w-xs   { max-width: 20rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.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-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Display ---------- */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.table { display: table; }

/* ---------- Flexbox ---------- */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1 1 0%; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }

/* ---------- Grid ---------- */
.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)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-full { grid-column: 1 / -1; }

/* ---------- Gap / Spacing-Skala (0.25rem-Schritte, wie Tailwind-Default) ---------- */
.gap-0 { gap: 0; } .gap-1 { gap: .25rem; } .gap-1\.5 { gap: .375rem; } .gap-2 { gap: .5rem; }
.gap-2\.5 { gap: .625rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; }
.gap-x-2 { column-gap: .5rem; } .gap-x-3 { column-gap: .75rem; } .gap-x-4 { column-gap: 1rem; }
.gap-y-2 { row-gap: .5rem; } .gap-y-3 { row-gap: .75rem; } .gap-y-4 { row-gap: 1rem; }

/* p/m Skala */
.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}
.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}
.p-8{padding:2rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-14{padding:3.5rem}.p-16{padding:4rem}

.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.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-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-12{padding-left:3rem;padding-right:3rem}

.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.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}.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}

.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}
.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-24{padding-top:6rem}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}
.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}
.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}
.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}

.m-0{margin:0}.m-auto{margin:auto}
.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}
.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}
.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}
.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}
.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-auto{margin-right:auto}
.space-y-1 > * + * { margin-top: .25rem; } .space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-2 > * + * { margin-left: .5rem; } .space-x-3 > * + * { margin-left: .75rem; } .space-x-4 > * + * { margin-left: 1rem; }

/* ---------- Sizing ---------- */
.w-full{width:100%}.w-auto{width:auto}.w-fit{width:fit-content}
.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}
.h-full{height:100%}.h-auto{height:auto}.h-screen{height:100vh}.min-h-screen{min-height:100vh}
.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}
.min-w-0{min-width:0}

/* ---------- Typografie ---------- */
.font-display { font-family: var(--font-fraunces), "Fraunces", Georgia, serif; }
.font-sans { font-family: var(--font-hanken), "Hanken Grotesk", system-ui, sans-serif; }
.italic { font-style: italic; }
.not-italic { font-style: normal; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .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; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1.1; }
.text-6xl { font-size: 3.75rem; line-height: 1.1; }
.font-light { font-weight: 300; } .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; }
.leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; } .leading-relaxed { line-height: 1.625; } .leading-loose { line-height: 2; }
.tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; }
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
.uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; }
.underline { text-decoration: underline; } .no-underline { text-decoration: none; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Farben (Text/Hintergrund/Border) — Custom-Palette + Basics ---------- */
.text-cream { color: var(--tw-cream); } .text-cream-dark { color: var(--tw-cream-dark); }
.text-teal-light { color: var(--tw-teal-light); } .text-teal { color: var(--tw-teal); }
.text-teal-deep { color: var(--tw-teal-deep); } .text-teal-dark { color: var(--tw-teal-dark); }
.text-gold-light { color: var(--tw-gold-light); } .text-gold { color: var(--tw-gold); } .text-gold-dark { color: var(--tw-gold-dark); }
.text-ink { color: var(--tw-ink); } .text-ink-light { color: var(--tw-ink-light); } .text-ink-muted { color: var(--tw-ink-muted); }
.text-white { color: #fff; } .text-black { color: #000; }
.text-red-500 { color: #ef4444; } .text-red-600 { color: #dc2626; } .text-red-700 { color: #b91c1c; }
.text-amber-600 { color: #d97706; } .text-amber-700 { color: #b45309; }
.text-green-600 { color: #16a34a; } .text-green-700 { color: #15803d; }

.bg-cream { background-color: var(--tw-cream); } .bg-cream-dark { background-color: var(--tw-cream-dark); } .bg-cream-card { background-color: var(--tw-cream-card); }
.bg-teal-light { background-color: var(--tw-teal-light); } .bg-teal { background-color: var(--tw-teal); }
.bg-teal-deep { background-color: var(--tw-teal-deep); } .bg-teal-dark { background-color: var(--tw-teal-dark); }
.bg-gold-light { background-color: var(--tw-gold-light); } .bg-gold { background-color: var(--tw-gold); } .bg-gold-dark { background-color: var(--tw-gold-dark); }
.bg-ink { background-color: var(--tw-ink); } .bg-white { background-color: #fff; } .bg-transparent { background-color: transparent; }
.bg-red-50 { background-color: #fef2f2; } .bg-amber-50 { background-color: #fffbeb; } .bg-green-50 { background-color: #f0fdf4; }

.border-cream-dark { border-color: var(--tw-cream-dark); } .border-teal { border-color: var(--tw-teal); }
.border-gold { border-color: var(--tw-gold); } .border-gold-light { border-color: var(--tw-gold-light); }
.border-ink { border-color: var(--tw-ink); } .border-white { border-color: #fff; }
.border-red-200 { border-color: #fecaca; } .border-amber-200 { border-color: #fde68a; } .border-green-200 { border-color: #bbf7d0; }

/* ---------- Gradients ---------- */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.from-gold { --tw-gradient-stops: var(--tw-gold), var(--tw-gradient-to, transparent); }
.via-gold { --tw-gradient-stops: var(--tw-gradient-from, var(--tw-gold)), var(--tw-gold), var(--tw-gradient-to, transparent); }
.to-gold-dark { --tw-gradient-to: var(--tw-gold-dark); }
.from-teal { --tw-gradient-stops: var(--tw-teal), var(--tw-gradient-to, transparent); }
.to-teal-deep { --tw-gradient-to: var(--tw-teal-deep); }
.from-teal-deep { --tw-gradient-stops: var(--tw-teal-deep), var(--tw-gradient-to, transparent); }
.to-teal-dark { --tw-gradient-to: var(--tw-teal-dark); }

/* ---------- Borders / Radius / Shadow ---------- */
.border { border-width: 1px; border-style: solid; border-color: currentColor; }
.border-0 { border-width: 0; } .border-2 { border-width: 2px; } .border-b { border-bottom-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-style: solid; }
.rounded { border-radius: .25rem; } .rounded-md { border-radius: .375rem; } .rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.shadow-none { box-shadow: none; }
.shadow-gold { box-shadow: 0 4px 20px -2px rgba(194, 154, 69, 0.25); }
.shadow-gold-glow { box-shadow: 0 0 25px rgba(239, 220, 162, 0.45); }
.shadow-teal { box-shadow: 0 4px 20px -2px rgba(72, 178, 172, 0.2); }
.shadow-teal-glow { box-shadow: 0 0 25px rgba(72, 178, 172, 0.3); }
.shadow-card { box-shadow: 0 10px 30px -5px rgba(42, 38, 34, 0.05), 0 4px 6px -2px rgba(42, 38, 34, 0.02); }

/* ---------- Position ---------- */
.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; }
.z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; }

/* ---------- Effekte / Sonstiges ---------- */
.opacity-0 { opacity: 0; } .opacity-50 { opacity: .5; } .opacity-60 { opacity: .6; } .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; }
.overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; }
.select-none { user-select: none; }
.transition { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: .5s; transition-timing-function: cubic-bezier(.16,1,.3,1); }
.transition-all { transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(.16,1,.3,1); }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: .5s; transition-timing-function: cubic-bezier(.16,1,.3,1); }
.transition-transform { transition-property: transform; transition-duration: .5s; transition-timing-function: cubic-bezier(.16,1,.3,1); }
.duration-150 { transition-duration: .15s; } .duration-200 { transition-duration: .2s; } .duration-300 { transition-duration: .3s; } .duration-500 { transition-duration: .5s; }
.grayscale { filter: grayscale(1); }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- Interaktion (hover/focus/disabled) ---------- */
button:disabled, .disabled { opacity: .6; cursor: not-allowed; }
a[aria-disabled="true"] { pointer-events: none; }

/* ---------- Responsive Breakpoints (mobile-first, wie Tailwind-Default) ---------- */
@media (min-width: 640px) {
  .sm\:flex { display: flex; } .sm\:hidden { display: none; } .sm\:block { display: block; } .sm\:grid { display: grid; }
  .sm\:flex-row { flex-direction: row; } .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\: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-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .sm\:text-5xl { font-size: 3rem; line-height: 1.1; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; } .sm\:gap-6 { gap: 1.5rem; } .sm\:gap-8 { gap: 2rem; }
  .sm\:w-auto { width: auto; }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:block { display: block; } .md\:grid { display: grid; }
  .md\:flex-row { flex-direction: row; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .md\:text-5xl { font-size: 3rem; line-height: 1.1; } .md\:text-6xl { font-size: 3.75rem; line-height: 1.1; }
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; } .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:block { display: block; } .lg\:grid { display: grid; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:text-5xl { font-size: 3rem; line-height: 1.1; } .lg\:text-6xl { font-size: 3.75rem; line-height: 1.1; }
}

/* ---------- Custom Keyframe-Animationen (aus tailwind.config.js theme.extend) ---------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn .9s cubic-bezier(.16,1,.3,1) both; }
.animate-slide-up { animation: slideUp .85s cubic-bezier(.16,1,.3,1) both; }
.animate-pulse-slow { animation: pulse 3s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade-out counterparts, used for smooth exit transitions (e.g. closing modals) */
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(16px); } }
.animate-fade-out { animation: fadeOut .32s cubic-bezier(.4,0,1,1) both; }
.animate-slide-down { animation: slideDown .32s cubic-bezier(.4,0,1,1) both; }