@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    background-color: #f3f4f6; /* bg-gray-100 */
    font-family: 'Inter', sans-serif;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    max-width: 1280px;
}

h1 {
    font-size: 1.875rem;
    font-weight: 700;
    text-align: center;
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 2rem;
}

.input-field {
    width: 80%;
    padding: 0.75rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    background-color: #fff;
    transition: all 0.3s ease;
}

.input-field:focus {
    outline: none;
    box-shadow: 0 0 0 2px #14b8a6; /* teal ring */
}


.grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.bg-white {
    background-color: #ffffff;
}

.p-6 {
    padding: 1.5rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.transition-shadow {
    transition-property: box-shadow;
    transition-duration: 300ms;
}

.bg-teal-500 {
    background-color: #14b8a6;
}

.text-white {
    color: #ffffff;
}

.font-medium {
    font-weight: 500;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.hover\:bg-teal-600:hover {
    background-color: #0d9488;
}

.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 300ms;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.space-x-4 > * + * {
    margin-left: 1rem;
}

.w-40 {
    width: 15rem;
}

.w-30 {
    width: 10rem; /* oder z. B. width: 60%; für relative Breite */
}

.w-full {
    width: 100%; /* Explizite Definition für w-full */
}

.p-2 {
    padding: 0.5rem;
}

.border {
    border-width: 1px;
}

.border-gray-300 {
    border-color: #d1d5db;
}

.focus\:outline-none:focus {
    outline: none;
}

.focus\:ring-2:focus {
    --tw-ring-offset-width: 2px;
    box-shadow: 0 0 0 var(--tw-ring-offset-width) rgba(0, 0, 0, 0.05), 0 0 0 calc(2px + var(--tw-ring-offset-width)) #14b8a6;
}

.transition-all {
    transition-property: all;
    transition-duration: 300ms;
}

.mt-4 {
    margin-top: 1rem;
}

.text-gray-600 {
    color: #4b5563;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.max-w-xl {
    max-width: 36rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.h-96 {
    height: 24rem;
}

/* Neue oder angepasste Klassen */
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}