/* ============================================
   CSS UTILITY FRAMEWORK – Tailwind-Ersatz
   Nur verwendete Klassen – vollständig lokal
   DSGVO-konform, keine externen Abhängigkeiten
   ============================================ */

/* ---- 1. PREFLIGHT / RESET ---- */
*, *::before, *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #f1f5f9;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; line-height: 1.5; -webkit-text-size-adjust: none; text-size-adjust: none; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, textarea, button, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { cursor: pointer; background: transparent; }
input, textarea { background: transparent; }

/* ---- 2. CSS VARIABLEN ---- */
:root {
    --lime: #BFFF00;
    --navy-dark: #0f172a;
    --slate-text: #64748b;
}

/* ---- 3. BESTEHENDE CUSTOM STILE ---- */
section[id], div#projects-list { scroll-margin-top: 5rem; }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

.organic-shadow { box-shadow: 0 20px 50px -10px rgba(100, 116, 139, 0.12); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 1s ease-out forwards; }

@keyframes animateIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.animate-in.fade-in.zoom-in { animation: animateIn 0.5s ease-out both; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

#footer-cta:hover { box-shadow: 0 0 30px rgba(191, 255, 0, 0.4); }

/* ---- 4. DISPLAY ---- */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.flex         { display: flex; min-width: 0; }
.grid         { display: grid; }
.hidden       { display: none; }

/* ---- 5. POSITION ---- */
.static   { position: static; }
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }

.inset-0   { top: 0; right: 0; bottom: 0; left: 0; position: absolute; }
.top-0     { top: 0; }
.left-0    { left: 0; }
.right-0   { right: 0; }
.bottom-0  { bottom: 0; }
.bottom-4  { bottom: 1rem; }
.top-6     { top: 1.5rem; }
.right-4   { right: 1rem; }
.right-6   { right: 1.5rem; }
.bottom-6  { bottom: 1.5rem; }
.-top-1    { top: -0.25rem; }
.-right-1  { right: -0.25rem; }
.-right-20 { right: -5rem; }
.-top-20   { top: -5rem; }
.-bottom-20{ bottom: -5rem; }

/* ---- 6. Z-INDEX ---- */
.z-10     { z-index: 10; }
.z-20     { z-index: 20; }
.z-30     { z-index: 30; }
.z-50     { z-index: 50; }
.z-\[100\]{ z-index: 100; }
.z-\[200\]{ z-index: 200; }

/* ---- 7. OVERFLOW ---- */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* ---- 8. POINTER EVENTS ---- */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ---- 9. FLEXBOX ---- */
.flex-col  { flex-direction: column; }
.flex-row  { flex-direction: row; }
.flex-grow { flex-grow: 1; }
.shrink-0  { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ---- 10. GRID ---- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* ---- 11. GAP ---- */
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }

/* ---- 12. SPACE-Y ---- */
.space-y-2  > * + * { margin-top: 0.5rem; }
.space-y-4  > * + * { margin-top: 1rem; }
.space-y-6  > * + * { margin-top: 1.5rem; }
.space-y-8  > * + * { margin-top: 2rem; }
.space-y-12 > * + * { margin-top: 3rem; }
.space-y-16 > * + * { margin-top: 4rem; }

/* ---- 13. PADDING ---- */
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }

.pr-1  { padding-right: 0.25rem; }
.px-4  { padding-left: 1rem;    padding-right: 1rem; }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-8  { padding-left: 2rem;    padding-right: 2rem; }
.px-10 { padding-left: 2.5rem;  padding-right: 2.5rem; }

.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-4    { padding-top: 1rem;     padding-bottom: 1rem; }
.py-12   { padding-top: 3rem;     padding-bottom: 3rem; }
.py-24   { padding-top: 6rem;     padding-bottom: 6rem; }

.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }
.pt-12 { padding-top: 3rem; }
.pt-20 { padding-top: 5rem; }
.pt-32 { padding-top: 8rem; }
.pt-40 { padding-top: 10rem; }

.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }

/* ---- 14. MARGIN ---- */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-2    { margin-top: 0.5rem; margin-bottom: 0.5rem; }

.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mt-8    { margin-top: 2rem; }
.mt-10   { margin-top: 2.5rem; }
.mt-32   { margin-top: 8rem; }

.-mr-1   { margin-right: -0.25rem; }
.-mt-16  { margin-top: -4rem; }
.-mt-32  { margin-top: -8rem; }

/* ---- 15. SIZING ---- */
.w-full  { width: 100%; }
.w-px    { width: 1px; }
.w-4     { width: 1rem; }
.w-6     { width: 1.5rem; }
.w-8     { width: 2rem; }
.w-12    { width: 3rem; }
.w-16    { width: 4rem; }
.w-20    { width: 5rem; }
.w-64    { width: 16rem; }
.w-\[320px\] { width: 320px; }
.max-w-\[calc\(100vw-2\.5rem\)\] { max-width: min(320px, calc(100vw - 5rem)); }

.h-full  { height: 100%; }
.h-4     { height: 1rem; }
.h-6     { height: 1.5rem; }
.h-8     { height: 2rem; }
.h-12    { height: 3rem; }
.h-16    { height: 4rem; }
.h-20    { height: 5rem; }
.h-64    { height: 16rem; }
.h-\[600px\] { height: 600px; }
.min-h-\[600px\] { min-height: 600px; }
.max-h-\[60vh\] { max-height: 60vh; }
.max-h-\[80vh\] { max-height: 80vh; }

.max-w-md  { max-width: 28rem; }
.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-7xl { max-width: 80rem; }

.bg-cover  { background-size: cover; }
.bg-center { background-position: center; }
.object-cover { object-fit: cover; }

/* ---- 16. TYPOGRAPHY ---- */
.text-\[10px\] { font-size: 10px; line-height: 1.4; word-break: break-word; }
.text-\[11px\] { font-size: 11px; line-height: 1.4; word-break: break-word; }
.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; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-7xl  { font-size: 4.5rem;   line-height: 1; }

.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

.tracking-tight    { letter-spacing: -0.025em; }
.tracking-tighter  { letter-spacing: -0.05em; }
.tracking-wider    { letter-spacing: 0.05em; }
.tracking-widest   { letter-spacing: 0.1em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }

.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.uppercase  { text-transform: uppercase; }
.italic     { font-style: italic; }
.text-center{ text-align: center; }
.antialiased{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.font-\[\'Spline_Sans\'\] { font-family: 'Spline Sans', sans-serif; }

/* ---- 17. TEXT COLORS ---- */
.text-white     { color: #ffffff; }
.text-white\/80 { color: rgba(255,255,255,0.8); }
.text-white\/60 { color: rgba(255,255,255,0.6); }
.text-white\/40 { color: rgba(255,255,255,0.4); }
.text-black     { color: #000000; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.text-\[\#BFFF00\] { color: #BFFF00; }
.text-lime-600  { color: #65a30d; }

/* ---- 18. BACKGROUND COLORS ---- */
.bg-white     { background-color: #ffffff; }
.bg-white\/80 { background-color: rgba(255,255,255,0.8); }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.bg-slate-50  { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-200 { background-color: #e2e8f0; }
.bg-slate-900 { background-color: #0f172a; }
.bg-slate-800 { background-color: #1e293b; }
.bg-black     { background-color: #000000; }
.bg-\[\#BFFF00\]      { background-color: #BFFF00; }
.bg-\[\#BFFF00\]\/5   { background-color: rgba(191,255,0,0.05); }
.bg-\[\#BFFF00\]\/10  { background-color: rgba(191,255,0,0.1); }
.bg-\[\#BFFF00\]\/20  { background-color: rgba(191,255,0,0.2); }
.bg-lime-100  { background-color: #ecfccb; }

/* ---- 19. BORDERS ---- */
.border   { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b-2 { border-bottom-width: 2px; }
.border-2   { border-width: 2px; }
.border-4   { border-width: 4px; }
.border-none{ border-style: none !important; }

.border-slate-100   { border-color: #f1f5f9; }
.border-slate-200   { border-color: #e2e8f0; }
.border-slate-800   { border-color: #1e293b; }
.border-white       { border-color: #ffffff; }
.border-white\/10   { border-color: rgba(255,255,255,0.1); }
.border-\[\#BFFF00\]{ border-color: #BFFF00; }

/* ---- 20. BORDER RADIUS ---- */
.rounded-full { border-radius: 9999px; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-\[2rem\]   { border-radius: 2rem; }
.rounded-\[2\.5rem\]{ border-radius: 2.5rem; }

/* ---- 21. SHADOWS ---- */
.shadow-sm  { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

/* Kombinierte Schatten: shadow-xl + farbiger Schatten */
.shadow-xl.shadow-slate-200\/50 {
    box-shadow: 0 20px 25px -5px rgba(226,232,240,0.5), 0 8px 10px -6px rgba(226,232,240,0.3);
}
/* Lime-farbener Ring + shadow-2xl kombiniert */
.shadow-2xl.ring-1 {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 0 0 1px rgba(191,255,0,0.2);
}

/* ---- 22. RING ---- */
.ring-1                    { box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
.ring-\[\#BFFF00\]\/20     { box-shadow: 0 0 0 1px rgba(191,255,0,0.2); }
.ring-slate-100            { box-shadow: 0 0 0 1px #f1f5f9; }

/* ---- 23. OPACITY ---- */
.opacity-0   { opacity: 0; }
.opacity-100 { opacity: 1; }

/* ---- 24. FILTER ---- */
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.blur-\[80px\]    { filter: blur(80px); }

/* Header: vollständig weiß, kein Blur-Effekt der dunkles Hero durchscheinen lässt */
header.fixed {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- 25. TRANSITIONS ---- */
.transition-all       { transition-property: all;             transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-colors    { transition-property: color, background-color, border-color, fill, stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-opacity   { transition-property: opacity;         transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-transform { transition-property: transform;       transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* ---- 26. TRANSFORMS ---- */
.translate-y-0  { transform: translateY(0); }
.translate-y-10 { transform: translateY(2.5rem); }

/* ---- 27. HOVER STATES ---- */
.hover\:opacity-70:hover { opacity: 0.7; }
.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:scale-105:hover  { transform: scale(1.05); }
.hover\:scale-110:hover  { transform: scale(1.1); }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }

.hover\:text-white:hover      { color: #ffffff; }
.hover\:text-slate-900:hover  { color: #0f172a; }
.hover\:text-\[\#BFFF00\]:hover { color: #BFFF00; }
.hover\:bg-\[\#BFFF00\]:hover { background-color: #BFFF00; }
.hover\:bg-slate-50:hover     { background-color: #f8fafc; }
.hover\:bg-slate-800:hover    { background-color: #1e293b; }

.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
/* Lime-farbene Hover-Schatten für CTA-Buttons */
.hover\:shadow-lg.hover\:shadow-\[\#BFFF00\]\/20:hover {
    box-shadow: 0 10px 15px -3px rgba(191,255,0,0.2), 0 4px 6px -4px rgba(191,255,0,0.1);
}
.hover\:shadow-lg.hover\:shadow-\[\#BFFF00\]\/30:hover {
    box-shadow: 0 10px 15px -3px rgba(191,255,0,0.3), 0 4px 6px -4px rgba(191,255,0,0.15);
}

/* ---- 28. ACTIVE / FOCUS STATES ---- */
.active\:scale-95:active { transform: scale(0.95); }

.focus\:ring-2:focus,
.focus\:ring-\[\#BFFF00\]:focus {
    outline: none;
    box-shadow: 0 0 0 2px #BFFF00;
}
/* Kombination: focus:ring-2 focus:ring-[#BFFF00] */
.focus\:ring-2.focus\:ring-\[\#BFFF00\]:focus { box-shadow: 0 0 0 2px #BFFF00; }

/* ---- 29. GROUP HOVER ---- */
.group:hover .group-hover\:bg-\[\#BFFF00\]     { background-color: #BFFF00; }
.group:hover .group-hover\:bg-\[\#BFFF00\]\/20 { background-color: rgba(191,255,0,0.2); }
.group:hover .group-hover\:opacity-100          { opacity: 1; }

/* ---- 30. SELECTION ---- */
.selection\:bg-\[\#BFFF00\] ::selection { background-color: #BFFF00; }
.selection\:text-black ::selection      { color: #000000; }
.selection\:bg-\[\#BFFF00\]::selection  { background-color: #BFFF00; }
.selection\:text-black::selection       { color: #000000; }

/* ---- 31. RESPONSIVE BREAKPOINTS ---- */

/* sm: 640px */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:right-6     { right: 1.5rem; }
}

/* md: 768px */
@media (min-width: 768px) {
    .md\:flex    { display: flex; }
    .md\:hidden  { display: none; }
    .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:text-5xl     { font-size: 3rem;   line-height: 1; }
    .md\:text-6xl     { font-size: 3.75rem; line-height: 1; }
    .md\:text-7xl     { font-size: 4.5rem;  line-height: 1; }
    .md\:flex-row     { flex-direction: row; }
}

/* lg: 1024px */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 32. MOBILE FIXES ---- */
@media (max-width: 768px) {
    .text-7xl { font-size: 3rem; }
    .-mt-32   { margin-top: -2rem; }
}

/* ---- 33. FIREFOX / CROSS-BROWSER FIXES ---- */
/* PWA-Hinweis: nie breiter als Viewport, mit Seitenabstand */
#pwa-install-hint {
    left: 0 !important;
    right: 0 !important;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}
#pwa-install-hint > div {
    width: 100%;
    max-width: 28rem;
    box-sizing: border-box;
}

/* Chat-Widget: nie über den rechten Rand hinaus */
#chat-widget {
    right: 1rem !important;
    max-width: calc(100vw - 2rem);
}
#chat-bubble {
    max-width: min(320px, calc(100vw - 5rem)) !important;
}