/* will overwrite tailwind utilities */
@layer utilities {

    /* Überschreibe die Standardbreiten der container-Klasse */
    .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem; /* Anpassbares Padding */
        padding-right: 1rem; /* Anpassbares Padding */
    }

    /* Responsive Anpassungen */
    @media (max-width: 768px) {
        .container {
            min-width: 100%; /* Breite für mittlere Bildschirme */
        }
    }

    @media (max-width: 1024px) {
        .container {
            max-width: 1024px; /* Breite für große Bildschirme */
        }
    }

    @media (min-width: 1024px) {
        .container {
            max-width: 1024px; /* Breite für große Bildschirme */
        }
    }

    @media (min-width: 1280px) {
        .container {
            max-width: 1280px; /* Breite für extra große Bildschirme */
        }
    }

    @media (min-width: 1536px) {
        .container {
            max-width: 1400px; /* Breite für sehr große Bildschirme */
        }
    }
}

@layer utitilities {
    .input-std{
        @apply rounded-md border border-gray-300 focus:border-primary;
    }

}