@import "tailwindcss";

@theme {
    --font-display: "Roboto", "sans-serif";
    --font-sans: 'Ubuntu', sans-serif;
    --font-serif: 'Roboto', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-sf_blau-50: #ebeef4;
    --color-sf_blau-100: #c7cee4;
    --color-sf_blau-200: #a3afd4;
    --color-sf_blau-300: #7e91c5;
    --color-sf_blau-400: #5574b5;
    --color-sf_blau-500: #1d59a5;
    --color-sf_blau-600: #1b5197;
    --color-sf_blau-700: #184a89;
    --color-sf_blau-800: #16437c;
    --color-sf_blau-900: #143c6f;
    --color-sf_blau-950: #113562;
    --color-sf_gelb-50: #fdf4ec;
    --color-sf_gelb-100: #fee5c9;
    --color-sf_gelb-200: #fed6a6;
    --color-sf_gelb-300: #fbc883;
    --color-sf_gelb-400: #f6b95f;
    --color-sf_gelb-500: #f0ab38;
    --color-sf_gelb-600: #dc9d33;
    --color-sf_gelb-700: #c88e2f;
    --color-sf_gelb-800: #b4802a;
    --color-sf_gelb-900: #a17326;
    --color-sf_gelb-950: #8e6521;
    --color-sf_grau-50: #ededed;
    --color-sf_grau-100: #cdcdcd;
    --color-sf_grau-200: #adadad;
    --color-sf_grau-300: #8f8f8f;
    --color-sf_grau-400: #717171;
    --color-sf_grau-500: #555555;
    --color-sf_grau-600: #4e4e4e;
    --color-sf_grau-700: #474747;
    --color-sf_grau-800: #404040;
    --color-sf_grau-900: #393939;
    --color-sf_grau-950: #323232;
}

@layer components {
    p {
        @apply text-xl font-serif;
    }

    h1 {
        @apply text-6xl font-sans py-8;
    }

    h2 {
        @apply text-3xl font-sans py-4;
    }

    h3 {
        @apply text-2xl font-sans font-bold py-2;
    }

    .blockpage p {
        @apply py-4;
    }

    .impressum h2 {
        @apply text-3xl pt-12;
    }

}