@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    /* Mindestens 44 px hohe Tippflächen - darunter trifft man auf dem
       Handy schlecht. */
    .knopf {
        @apply inline-flex items-center justify-center gap-2 min-h-[44px]
               px-4 rounded-xl font-semibold transition;
    }
    .knopf-haupt {
        @apply knopf bg-marke-700 text-white hover:bg-marke-800
               dark:bg-marke-600 dark:hover:bg-marke-700;
    }
    .knopf-still {
        @apply knopf bg-slate-100 text-slate-700 hover:bg-slate-200
               dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600;
    }
    .feld {
        @apply w-full min-h-[44px] px-3 rounded-xl border border-slate-300
               bg-white text-slate-900 focus:outline-none focus:ring-2
               focus:ring-marke-600
               dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100;
    }
    .etikett {
        @apply block text-sm font-medium text-slate-600 mb-1
               dark:text-slate-300;
    }
    .karte {
        @apply bg-white rounded-2xl shadow-sm overflow-hidden
               dark:bg-slate-800;
    }
}