/* Font Face Declarations */
@font-face {
    font-family: 'Syndicat Grotesk';
    src: url('/fonts/SyndicatGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syndicat Grotesk';
    src: url('/fonts/SyndicatGrotesk-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables */
:root {
    /* Base Colors */
    --color-black: #000;
    --color-white: #FFF;
    --color-grey-10: rgba(229, 229, 229, 0.60);

    /* Typography */
    --font-family: 'Syndicat Grotesk', -apple-system, Roboto, Helvetica, sans-serif;

    /* Level Colors */
    --color-level-1: #B4B4FF;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: var(--font-family);
    background: var(--color-white);
    color: var(--color-black);
    line-height: 1.2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content should grow to push footer down */
body > * {
    flex-shrink: 0;
}

body > main,
body > .spur-page,
body > .alle-spuren {
    flex: 1 0 auto;
}

/* Typography Helpers */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

p {
    margin: 0;
}

a {
    color: inherit;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.7;
}

/* Utility Classes */
.container {
    max-width: 1512px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

.mb-0 {
    margin-bottom: 0 !important;
}
.w-100 {
    width: 100% !important;
}
.block {
    display: block;
}

.w450 {
    max-width: 450px !important;
}

/* Highlighted Quote */
.highlighted-quote {
    font-family: var(--font-family);
    font-size: 57px;
    font-weight: 400;
    line-height: 120%;
    color: var(--color-black);
    background-color: var(--spur-highlight);
    border-radius: 12px;
    paint-order: stroke fill;

    /* Add these properties */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline;
}

@media (max-width: 768px) {
    .highlighted-quote {
        font-size: 32px;
        /*-webkit-text-stroke-width: 14px;*/
    }
}