/*
 * Ergänzende Stile für esch-consult.de
 * Die Seiten nutzen seit Juni Tailwind-Klassen, die im alten CSS-Build
 * (_next/static/css) nicht enthalten sind. Hier stehen sie nach.
 */

/* Layout */
.gap-16 { gap: 4rem; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }
.h-11 { height: 2.75rem; }
.w-11 { width: 2.75rem; }
.max-w-xl { max-width: 36rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-7 { padding: 1.75rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.text-left { text-align: left; }
@media (min-width: 768px) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Farben mit Transparenz */
.bg-primary-500\/10 { background-color: rgb(16 185 129 / 0.1); }
.bg-primary-500\/15 { background-color: rgb(16 185 129 / 0.15); }
.bg-surface-900\/30 { background-color: rgb(24 24 27 / 0.3); }
.bg-surface-900\/60 { background-color: rgb(24 24 27 / 0.6); }
.bg-surface-950\/50 { background-color: rgb(9 9 11 / 0.5); }
.bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
.hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.1); }
.border-primary-500\/30 { border-color: rgb(16 185 129 / 0.3); }
.border-zinc-800\/60 { border-color: rgb(39 39 42 / 0.6); }
.text-zinc-200 { color: rgb(228 228 231); }

/* Rahmen, Trennlinien, Typografie-Helfer */
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-bottom-width: 0; }
.divide-zinc-800 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(39 39 42); }
.object-contain { object-fit: contain; }
.opacity-90 { opacity: 0.9; }
.hover\:opacity-100:hover { opacity: 1; }
.rounded-full { border-radius: 9999px; }
.tracking-widest { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }

/* Hero-Raster (Klassen mit freien Werten) */
[class~="bg-[linear-gradient(to_right,#27272a_1px,transparent_1px),linear-gradient(to_bottom,#27272a_1px,transparent_1px)]"] {
  background-image: linear-gradient(to right, #27272a 1px, transparent 1px), linear-gradient(to bottom, #27272a 1px, transparent 1px);
}
[class~="[mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"] {
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}

/* Fließtext in Blog, Impressum und Datenschutz (ersetzt das Tailwind-Typography-Plugin) */
.prose { max-width: 65ch; font-size: 1rem; line-height: 1.75; }
.prose.max-w-none { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 1.25em 0; }
.prose h1 { font-size: 2.25em; font-weight: 800; line-height: 1.15; margin: 0 0 0.9em; }
.prose h2 { font-size: 1.5em; font-weight: 700; line-height: 1.35; margin: 2em 0 0.9em; }
.prose h3 { font-size: 1.25em; font-weight: 600; line-height: 1.6; margin: 1.6em 0 0.6em; }
.prose h4 { font-weight: 600; margin: 1.5em 0 0.5em; }
.prose ul { list-style: disc; padding-left: 1.625em; margin: 1.25em 0; }
.prose ol { list-style: decimal; padding-left: 1.625em; margin: 1.25em 0; }
.prose li { margin: 0.5em 0; padding-left: 0.375em; }
.prose a { text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.prose strong { font-weight: 600; }
.prose blockquote { border-left: 3px solid rgb(39 39 42); padding-left: 1em; font-style: italic; margin: 1.6em 0; }
.prose hr { border-color: rgb(39 39 42); margin: 3em 0; }
.prose table { width: 100%; font-size: 0.875em; margin: 2em 0; }
.prose th, .prose td { padding: 0.5em 0.75em; border-bottom: 1px solid rgb(39 39 42); text-align: left; }
.prose-invert { color: rgb(212 212 216); }
.prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4, .prose-invert strong { color: rgb(244 244 245); }
.prose-headings\:text-zinc-100 :is(h1, h2, h3, h4) { color: rgb(244 244 245); }
.prose-p\:text-zinc-400 p { color: rgb(161 161 170); }
.prose-li\:text-zinc-400 li { color: rgb(161 161 170); }
.prose-a\:text-primary-400 a { color: rgb(52 211 153); }