:root {
    /* Logo-Farben */
    --logo-red: #dd042d;
    --logo-dark-grey: #878786;
    --logo-light-grey: #d9dada;

    /* Primär- und Akzentfarben (bewusst sparsam einsetzen: nur für Aktionen/Akzente) */
    --color-primary: var(--logo-red);
    --color-accent: #ff6a82;
    --color-primary-deep: #a90022;
    --color-primary-gloss: #dd042d;

    /* Nachhaltigkeit – moderner, dezenter Grünton (passend zum übrigen Silber/Graphit-Design) */
    --color-sustainability: #4caf7d;
    --color-sustainability-deep: #245c3d;
    --color-sustainability-soft: rgba(76, 175, 125, .2);

    /* Neutrale Farben – warmer, redaktioneller Grauton (statt kühlem Standard-Grau) */
    --color-background: #e7e9eb;
    --color-surface: #f7f8f8;

    --color-gray-300: #d5d8da;
    --color-gray-400: #aeb3b7;
    --color-gray-500: #858b90;
    --color-gray-600: #62686d;
    --color-gray-700: #44494d;
    --color-gray-900: #1c1f21;

    --color-text: #202326;
    --color-text-dimmed: #52585d;
    --color-text-muted: #747b80;
    --color-text-toned: #a6adb1;
    --color-text-highlighted: #f2f3f3;
    --color-text-inverted: #f2f3f3;

    --color-bg: #e7e9eb;
    --color-bg-muted: #dfe2e4;
    --color-bg-elevated: #f7f8f8;
    --color-bg-accented: #d4d8db;
    --color-bg-inverted: #202326;

    --color-border: #cbd0d3;
    --color-border-muted: #dce0e2;
    --color-border-accented: #9da5aa;
    --color-border-inverted: #151719;

    /* Statusfarben */
    --color-success: #2f7d52;
    --color-warning: #b8860b;
    --color-error: #b3261e;
    --color-info: #2b6f8a;

    /* Sekundaere UI-Zustaende zentral fuer neue Partials */
    --color-selection: #dd042d;
    --color-selection-text: #ffffff;
    --color-focus: #a90022;
    --color-focus-on-dark: #ff6a82;
    --color-scrollbar-track: #dfe2e4;
    --color-scrollbar-thumb: #878786;
    --color-scrollbar-thumb-hover: #62686d;
    --color-control-bg: #f7f8f8;
    --color-control-border: #aeb3b7;

    /* Premium-Flächen (für dunkle, hochwertig wirkende Sektionen) */
    --color-bg-premium: #50565e;
    --color-bg-footer: rgb(37, 42, 47);
    --color-surface-premium: #5a6269;
    --color-surface-premium-elevated: #68707a;
    --color-border-premium: rgba(242, 243, 243, .2);
    --color-text-premium: #f2f3f3;
    --color-text-premium-muted: rgba(242, 243, 243, .68);

    /* Silver is expressed through quiet surfaces and moving light, not gradients. */
    --surface-silver: #eef0f1;
    --surface-silver-soft: #f7f8f8;

    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(23, 20, 16, .06);
    --shadow-md: 0 12px 24px -8px rgba(23, 20, 16, .16);
    --shadow-lg: 0 32px 64px -16px rgba(23, 20, 16, .28);

    /* Abstände */
    --spacing: .25rem;

    /* Container-Größen */
    --ui-container: min(90%, 1920px);
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-7xl: 80rem;

    /* Textgrößen */
    --text-xs: .75rem;
    --text-xs--line-height: 1.33333;
    --text-sm: .875rem;
    --text-sm--line-height: 1.42857;
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.55556;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.4;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 1.33333;
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.2;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: 1.11111;
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Animationen */
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

    /* Geometrie */
    --border-radius: 0.125rem;

    --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    --grid-size: 4rem;

    --container-width: 1400px;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
}

* {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
    scrollbar-width: thin;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    accent-color: var(--color-primary);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--color-selection);
    color: var(--color-selection-text);
}

::-webkit-scrollbar {
    width: .7rem;
    height: .7rem;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border: .2rem solid var(--color-scrollbar-track);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
    background: var(--color-scrollbar-track);
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: .15rem solid var(--color-focus);
    outline-offset: .2rem;
}

:where(button, input, select, textarea) {
    font: inherit;
}

:where(input, select, textarea) {
    color: var(--color-text);
    background: var(--color-control-bg);
    border: 1px solid var(--color-control-border);
    border-radius: var(--border-radius);
}

:where(input, select, textarea)::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

:where(textarea) {
    resize: vertical;
}

:where(summary) {
    cursor: pointer;
}

:where(mark) {
    padding-inline: .15em;
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: inherit;
}

:where(hr) {
    height: 1px;
    margin-block: var(--space-md);
    background: var(--color-border);
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
        outline: 2px solid CanvasText;
    }

    ::selection {
        background: Highlight;
        color: HighlightText;
    }
}

a {
    color: inherit;
    text-decoration: none;
}


.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}



/* Typografie für redaktionelle Inhalte (Backend-Content-Elemente) */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    line-height: 1.15;
    /* immer die Textfarbe der umgebenden Sektion übernehmen (hell auf dunklen, dunkel auf hellen Flächen) */
    color: inherit;
}

p {
    max-width: var(--container-3xl);
    color: var(--color-text-dimmed);
}

p + p {
    margin-top: calc(var(--spacing) * 4);
}

ul, ol {
    padding-inline-start: calc(var(--spacing) * 5);
}

li + li {
    margin-top: calc(var(--spacing) * 1.5);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

strong, b {
    font-weight: var(--font-weight-semibold);
}


.text-muted{
    color: var(--color-text-muted);
}


.text-xs{
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
}

.text-sm{
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.text-base{
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
}

.text-lg{
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
}

.text-xl{
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
}

.text-2xl{
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
}

.text-3xl{
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
}

.text-4xl{
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
}

.text-5xl{
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
}

.text-6xl{
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
}

.text-7xl{
    font-size: var(--text-7xl);
    line-height: var(--text-7xl--line-height);
}









.container {
    width: min(calc(100% - 3rem), var(--container-width));
    margin-inline: auto;
}

.container--narrow {
    width: min(calc(100% - 3rem), var(--container-4xl));
    margin-inline: auto;
}



/* Sections */


.section {
    padding-block: clamp(4.5rem, 9vw, 8rem);
}

.section--tight {
    padding-block: var(--space-md);
}

.section--surface {
    background: var(--color-surface);
}

.section--premium {
    background: var(--color-bg-premium);
    color: var(--color-text-premium);
}

.section__header {
    max-width: var(--container-3xl);
    margin-bottom: var(--space-md);
}

.section__header--center {
    margin-inline: auto;
    text-align: center;
}

.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    margin: 0 0 calc(var(--spacing) * 4);
    color: var(--color-text-dimmed);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.eyebrow-mark {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
}

.section--premium .section__eyebrow {
    color: var(--color-text-premium-muted);
}

.section__title {
    margin: 0;
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.section__text {
    margin-top: calc(var(--spacing) * 4);
    max-width: var(--container-2xl);
    color: var(--color-text-dimmed);
    font-size: var(--text-lg);
}

.section--premium .section__text {
    color: var(--color-text-premium-muted);
}

.section__header--center .section__text {
    margin-inline: auto;
}



/* Buttons */


.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3.5);
    padding-inline: calc(var(--spacing) * 7);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    appearance: button;
    border: 1px solid transparent;
    transition-property: background-color, color, border-color, transform, box-shadow;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
}

.button:hover,
.button:focus-visible {
    transform: translateY(-1px);
}

.button--primary {
    position: relative;
    isolation: isolate;
    background: var(--color-primary-gloss);
    color: #ffffff;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.button--primary::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -35%;
    width: 18%;
    background: rgba(255, 255, 255, .24);
    transform: skewX(-18deg);
    transition: inset-inline-start .7s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}

.button--primary:hover::before,
.button--primary:focus-visible::before {
    inset-inline-start: 120%;
}

.button--primary:hover,
.button--primary:focus-visible {
    background: var(--color-primary-deep);
    box-shadow: 0 12px 26px rgba(169, 0, 34, .28);
}

.button--secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-accented);
}

.button--secondary:hover,
.button--secondary:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.button--ghost {
    background: transparent;
    color: var(--color-text-premium);
    border-color: var(--color-border-premium);
}

.button--ghost:hover,
.button--ghost:focus-visible {
    border-color: var(--color-text-premium);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}



/* Grid */


.grid {
    display: grid;
    gap: calc(var(--spacing) * 6);
}

.grid--2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}



/*########## Ab Tablet (ab 768px Breite) ##########*/
@media (min-width: 48rem) {
    .container,
    .container--narrow {
        width: min(calc(100% - 4rem), var(--container-width));
    }

    .section__title {
        font-size: var(--text-5xl);
    }

    .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/*########## Ab Desktop (ab 1024px Breite) ##########*/
@media (min-width: 64rem) {
    .section {
        padding-block: var(--space-xl);
    }

    .section--tight {
        padding-block: var(--space-lg);
    }

    .grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}