/* EES Design System Bundle – Version: 1.0.3 */

/**
 * EES Design System – Variables
 * Zweck: Zentrale und verbindliche Design Tokens für alle EES-Komponenten.
 * Inhalt: Farben, Typografie, Abstände, Größen, Radien, Schatten, Bewegung,
 *         Ebenen, Transparenz und Unschärfe.
 * Abhängigkeiten: Keine.
 * Verwendung: Als erste CSS-Datei laden. Jede Komponente benötigt an ihrem
 *             äußersten Element zusätzlich die Klasse `.ees-scope`.
 * Version: 1.0.0
 */

.ees-scope {
    /* ======================================================
       1. Farbpalette: Firmengrün
       `green-500` ist der Markenakzent. Für kleine weiße
       Schrift auf Grün mindestens `green-600` verwenden.
       ====================================================== */
    --ees-color-green-50: #f4f8f0;
    --ees-color-green-100: #e8f1df;
    --ees-color-green-200: #d0e2bf;
    --ees-color-green-300: #afcf95;
    --ees-color-green-400: #84b762;
    --ees-color-green-500: #5b8f32;
    --ees-color-green-600: #49782a;
    --ees-color-green-700: #396021;
    --ees-color-green-800: #2d4d1c;
    --ees-color-green-900: #243e19;
    --ees-color-green-950: #11230c;

    /* ======================================================
       2. Graustufen mit leicht natürlichem Unterton
       ====================================================== */
    --ees-color-gray-0: #ffffff;
    --ees-color-gray-50: #f7f9f8;
    --ees-color-gray-100: #eef1ef;
    --ees-color-gray-200: #dce2de;
    --ees-color-gray-300: #c5cec8;
    --ees-color-gray-400: #9ca9a1;
    --ees-color-gray-500: #77847c;
    --ees-color-gray-600: #667069;
    --ees-color-gray-700: #4c5750;
    --ees-color-gray-800: #344039;
    --ees-color-gray-900: #233027;
    --ees-color-gray-950: #17211b;

    /* ======================================================
       3. Semantische Markenfarben
       ====================================================== */
    --ees-color-primary: var(--ees-color-green-600);
    --ees-color-primary-hover: var(--ees-color-green-700);
    --ees-color-primary-active: var(--ees-color-green-800);
    --ees-color-primary-accent: var(--ees-color-green-500);
    --ees-color-primary-soft: var(--ees-color-green-50);
    --ees-color-primary-soft-hover: var(--ees-color-green-100);

    /* ======================================================
       4. Textfarben
       ====================================================== */
    --ees-color-text: var(--ees-color-gray-900);
    --ees-color-text-strong: var(--ees-color-gray-950);
    --ees-color-text-muted: var(--ees-color-gray-600);
    --ees-color-text-on-primary: var(--ees-color-gray-0);
    --ees-color-text-disabled: var(--ees-color-gray-500);
    --ees-color-link: var(--ees-color-green-700);
    --ees-color-link-hover: var(--ees-color-green-800);

    /* ======================================================
       5. Hintergründe und Oberflächen
       ====================================================== */
    --ees-color-background: var(--ees-color-gray-0);
    --ees-color-background-subtle: var(--ees-color-gray-50);
    --ees-color-background-muted: var(--ees-color-gray-100);
    --ees-color-background-accent: var(--ees-color-green-50);
    --ees-color-surface: var(--ees-color-gray-0);
    --ees-color-surface-raised: #fbfcfb;
    --ees-color-surface-sunken: var(--ees-color-gray-50);
    --ees-color-overlay: rgba(23, 33, 27, 0.56);

    /* ======================================================
       6. Borders
       ====================================================== */
    --ees-color-border: var(--ees-color-gray-200);
    --ees-color-border-strong: var(--ees-color-gray-300);
    --ees-color-border-accent: var(--ees-color-green-300);
    --ees-color-border-focus: var(--ees-color-green-600);
    --ees-border-width-thin: 1px;
    --ees-border-width-medium: 2px;
    --ees-border-width-strong: 3px;

    /* ======================================================
       7. Glassmorphism
       Die deckende Fallback-Farbe bleibt ohne Blur lesbar.
       ====================================================== */
    --ees-color-glass-fallback: #f8faf8;
    --ees-color-glass: rgba(255, 255, 255, 0.82);
    --ees-color-glass-strong: rgba(255, 255, 255, 0.92);
    --ees-color-glass-border: rgba(255, 255, 255, 0.78);
    --ees-color-glass-highlight: rgba(255, 255, 255, 0.96);

    /* ======================================================
       8. Funktionale Statusfarben
       Ausschließlich für Status und Rückmeldungen verwenden.
       ====================================================== */
    --ees-color-success: #396021;
    --ees-color-success-soft: #edf5e8;
    --ees-color-info: #375f78;
    --ees-color-info-soft: #edf4f7;
    --ees-color-warning: #725700;
    --ees-color-warning-soft: #fbf6e5;
    --ees-color-error: #993c35;
    --ees-color-error-soft: #fbefed;

    /* ======================================================
       9. Typografie
       Keine externe Schrift wird durch das Design System geladen.
       ====================================================== */
    --ees-font-family-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ees-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

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

    --ees-font-size-h1: clamp(2.5rem, 5vw, 4.75rem);
    --ees-font-size-h2: clamp(2rem, 4vw, 3.5rem);
    --ees-font-size-h3: clamp(1.4rem, 2.5vw, 2.125rem);
    --ees-font-size-h4: clamp(1.125rem, 1.6vw, 1.5rem);
    --ees-font-size-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
    --ees-font-size-body: clamp(1rem, 0.3vw + 0.94rem, 1.125rem);
    --ees-font-size-small: clamp(0.875rem, 0.2vw + 0.84rem, 0.9375rem);
    --ees-font-size-caption: clamp(0.75rem, 0.15vw + 0.72rem, 0.8125rem);

    --ees-line-height-tight: 1.08;
    --ees-line-height-display: 1.12;
    --ees-line-height-heading: 1.2;
    --ees-line-height-subheading: 1.3;
    --ees-line-height-lead: 1.65;
    --ees-line-height-body: 1.7;
    --ees-line-height-small: 1.55;

    --ees-letter-spacing-tighter: -0.04em;
    --ees-letter-spacing-tight: -0.025em;
    --ees-letter-spacing-normal: 0;
    --ees-letter-spacing-caption: 0.02em;
    --ees-letter-spacing-wide: 0.08em;
    --ees-letter-spacing-widest: 0.16em;

    --ees-text-width-body: 65ch;
    --ees-text-width-narrow: 48ch;
    --ees-text-width-h1: 18ch;
    --ees-text-width-h2: 24ch;
    --ees-text-width-h3: 32ch;
    --ees-text-width-h4: 40ch;

    /* ======================================================
       10. Spacing Scale
       Basis: 0.25rem. Komponenten dürfen nur diese Werte nutzen.
       ====================================================== */
    --ees-spacing-0: 0;
    --ees-spacing-3xs: 0.25rem;
    --ees-spacing-2xs: 0.5rem;
    --ees-spacing-xs: 0.75rem;
    --ees-spacing-sm: 1rem;
    --ees-spacing-md: 1.5rem;
    --ees-spacing-lg: 2rem;
    --ees-spacing-xl: 3rem;
    --ees-spacing-2xl: 4rem;
    --ees-spacing-3xl: 5rem;
    --ees-spacing-4xl: 7.5rem;
    --ees-spacing-5xl: 10rem;

    --ees-spacing-section: clamp(4.5rem, 8vw, 7.5rem);
    --ees-spacing-section-compact: clamp(3rem, 6vw, 5rem);
    --ees-spacing-section-spacious: clamp(6rem, 10vw, 10rem);
    --ees-spacing-container-inline: clamp(1rem, 4vw, 3rem);
    --ees-spacing-grid: clamp(1rem, 2.2vw, 2rem);

    /* ======================================================
       11. Border Radius
       1.5rem / 24px ist der verbindliche Kartenradius.
       ====================================================== */
    --ees-radius-none: 0;
    --ees-radius-xs: 0.375rem;
    --ees-radius-sm: 0.625rem;
    --ees-radius-md: 1rem;
    --ees-radius-lg: 1.5rem;
    --ees-radius-xl: 2rem;
    --ees-radius-full: 9999px;

    /* ======================================================
       12. Shadow Levels
       ====================================================== */
    --ees-shadow-none: none;
    --ees-shadow-xs: 0 0.25rem 0.75rem rgba(23, 33, 27, 0.06);
    --ees-shadow-sm: 0 0.5rem 1.5rem rgba(23, 33, 27, 0.08);
    --ees-shadow-md: 0 1rem 2.5rem rgba(23, 33, 27, 0.10);
    --ees-shadow-lg: 0 1.5rem 4rem rgba(23, 33, 27, 0.14);
    --ees-shadow-xl: 0 2rem 5rem rgba(23, 33, 27, 0.18);
    --ees-shadow-focus: 0 0 0 0.25rem rgba(73, 120, 42, 0.24);

    /* ======================================================
       13. Container und Größen
       ====================================================== */
    --ees-container-xs: 40rem;
    --ees-container-sm: 48rem;
    --ees-container-md: 64rem;
    --ees-container-lg: 75rem;
    --ees-container-xl: 87.5rem;
    --ees-container-full: 100%;
    --ees-grid-item-min: 16rem;

    --ees-size-icon-sm: 1rem;
    --ees-size-icon-md: 1.5rem;
    --ees-size-icon-lg: 2rem;
    --ees-size-control-sm: 2.5rem;
    --ees-size-control-md: 3rem;
    --ees-size-control-lg: 3.5rem;

    /* ======================================================
       14. Breakpoints
       Dokumentationswerte. CSS Custom Properties können nicht
       direkt in @media-Abfragen verwendet werden.
       ====================================================== */
    --ees-breakpoint-smartphone: 37.5rem;
    --ees-breakpoint-tablet: 56.25rem;
    --ees-breakpoint-laptop: 75rem;
    --ees-breakpoint-desktop-wide: 90rem;

    /* ======================================================
       15. Bewegung und Übergänge
       ====================================================== */
    --ees-duration-instant: 120ms;
    --ees-duration-fast: 200ms;
    --ees-duration-normal: 300ms;
    --ees-duration-slow: 450ms;
    --ees-duration-reveal: 650ms;

    --ees-delay-1: 70ms;
    --ees-delay-2: 140ms;
    --ees-delay-3: 210ms;
    --ees-delay-4: 280ms;

    --ees-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ees-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ees-ease-enter: cubic-bezier(0, 0, 0.2, 1);
    --ees-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    --ees-transition-color: color var(--ees-duration-fast) var(--ees-ease-standard),
        background-color var(--ees-duration-fast) var(--ees-ease-standard),
        border-color var(--ees-duration-fast) var(--ees-ease-standard);
    --ees-transition-transform: transform var(--ees-duration-normal) var(--ees-ease-emphasized);
    --ees-transition-shadow: box-shadow var(--ees-duration-normal) var(--ees-ease-standard);
    --ees-transition-opacity: opacity var(--ees-duration-normal) var(--ees-ease-standard);

    /* ======================================================
       16. Opacity
       ====================================================== */
    --ees-opacity-hidden: 0;
    --ees-opacity-subtle: 0.08;
    --ees-opacity-soft: 0.16;
    --ees-opacity-disabled: 0.48;
    --ees-opacity-muted: 0.72;
    --ees-opacity-visible: 1;

    --ees-scale-enter: 0.97;
    --ees-scale-image-hover: 1.05;

    /* ======================================================
       17. Blur
       ====================================================== */
    --ees-blur-none: 0;
    --ees-blur-sm: 0.375rem;
    --ees-blur-md: 0.75rem;
    --ees-blur-lg: 1.125rem;

    /* ======================================================
       18. Z-Index System
       ====================================================== */
    --ees-z-base: 0;
    --ees-z-raised: 10;
    --ees-z-sticky: 100;
    --ees-z-dropdown: 200;
    --ees-z-overlay: 800;
    --ees-z-modal: 900;
    --ees-z-toast: 1000;

    /* ======================================================
       19. Fokus, Auswahl und Scrollbar
       ====================================================== */
    --ees-focus-ring-width: 3px;
    --ees-focus-ring-offset: 3px;
    --ees-color-focus-ring: rgba(73, 120, 42, 0.42);
    --ees-color-focus-transparent: rgba(73, 120, 42, 0);
    --ees-color-tap-highlight: rgba(73, 120, 42, 0.14);
    --ees-color-selection-background: var(--ees-color-green-200);
    --ees-color-selection-text: var(--ees-color-green-950);
    --ees-scrollbar-size: 0.625rem;
    --ees-color-scrollbar-thumb: var(--ees-color-gray-400);
    --ees-color-scrollbar-track: var(--ees-color-gray-100);
}
/**
 * EES Design System – Base
 * Zweck: Sicheres Grundverhalten innerhalb des EES-Namespace.
 * Inhalt: Lokales Box-Sizing, Grundschrift, Links, Bedienelement-Basis,
 *         Bilder, Listen, Fokus, Auswahl, Scrollbar und Hilfsklassen.
 * Abhängigkeiten: variables.css.
 * Verwendung: Nach variables.css laden. Wirkt ausschließlich innerhalb
 *             eines Elements mit der Klasse `.ees-scope`.
 * Version: 1.0.0
 */

/* Lokaler Reset: Purity III außerhalb des Namespace bleibt unberührt. */
.ees-scope,
.ees-scope *,
.ees-scope *::before,
.ees-scope *::after {
    box-sizing: border-box;
}

.ees-scope {
    color: var(--ees-color-text);
    font-family: var(--ees-font-family-sans);
    font-size: var(--ees-font-size-body);
    font-weight: var(--ees-font-weight-regular);
    line-height: var(--ees-line-height-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: var(--ees-color-tap-highlight);
}

/* Links erhalten eine erkennbare, aber ruhige Standarddarstellung. */
.ees-scope a {
    color: var(--ees-color-link);
    text-decoration-color: currentColor;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition: var(--ees-transition-color);
}

@media (hover: hover) and (pointer: fine) {
    .ees-scope a:hover {
        color: var(--ees-color-link-hover);
        text-decoration-thickness: 0.12em;
    }
}

/* Nur technische Basis; dies ist keine visuelle Button-Komponente. */
.ees-scope button {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.ees-scope button:not(:disabled) {
    cursor: pointer;
}

.ees-scope button:disabled,
.ees-scope [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: var(--ees-opacity-disabled);
}

/* Einheitliches, verzerrungsfreies Bildverhalten. */
.ees-scope img,
.ees-scope picture,
.ees-scope svg {
    display: block;
    max-width: 100%;
}

.ees-scope img {
    height: auto;
}

.ees-scope figure {
    margin: 0;
}

/* Listen bleiben ohne CSS logisch und zugänglich. */
.ees-scope ul,
.ees-scope ol {
    margin-block: 0 var(--ees-spacing-md);
    padding-inline-start: 1.5em;
}

.ees-scope li + li {
    margin-block-start: var(--ees-spacing-2xs);
}

/* Konsistenter Tastaturfokus für alle interaktiven Elemente. */
.ees-scope :focus-visible {
    outline: var(--ees-focus-ring-width) solid var(--ees-color-focus-ring);
    outline-offset: var(--ees-focus-ring-offset);
}

.ees-scope :focus:not(:focus-visible) {
    outline: none;
}

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

/* Dezente Scrollbar nur innerhalb von EES-Bereichen. */
.ees-scope,
.ees-scope * {
    scrollbar-color: var(--ees-color-scrollbar-thumb) var(--ees-color-scrollbar-track);
    scrollbar-width: thin;
}

.ees-scope::-webkit-scrollbar,
.ees-scope *::-webkit-scrollbar {
    width: var(--ees-scrollbar-size);
    height: var(--ees-scrollbar-size);
}

.ees-scope::-webkit-scrollbar-track,
.ees-scope *::-webkit-scrollbar-track {
    background: var(--ees-color-scrollbar-track);
}

.ees-scope::-webkit-scrollbar-thumb,
.ees-scope *::-webkit-scrollbar-thumb {
    background: var(--ees-color-scrollbar-thumb);
    border: var(--ees-border-width-medium) solid var(--ees-color-scrollbar-track);
    border-radius: var(--ees-radius-full);
}

.ees-scope [hidden] {
    display: none;
}

/* Visuell verborgen, für Screenreader weiterhin verfügbar. */
.ees-scope .ees-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
/**
 * EES Design System – Layout
 * Zweck: Wiederverwendbare, responsive Layout- und Abstandsgrundlagen.
 * Inhalt: Container, Sections, Grid, Flex, Stack, Cluster, Flow und
 *         kontrollierte Spacing-Utilities.
 * Abhängigkeiten: variables.css und base.css.
 * Verwendung: Nur innerhalb von `.ees-scope`. Für breiteabhängige Grids
 *             `.ees-layout-context` auf einen übergeordneten Rahmen setzen.
 * Version: 1.0.2
 */

/* =========================================================
   1. Container
   ========================================================= */
.ees-scope .ees-container {
    width: min(100%, var(--ees-container-xl));
    margin-inline: auto;
    padding-inline: var(--ees-spacing-container-inline);
}

.ees-scope .ees-container--xs {
    max-width: var(--ees-container-xs);
}

.ees-scope .ees-container--sm {
    max-width: var(--ees-container-sm);
}

.ees-scope .ees-container--md {
    max-width: var(--ees-container-md);
}

.ees-scope .ees-container--lg {
    max-width: var(--ees-container-lg);
}

.ees-scope .ees-container--xl {
    max-width: var(--ees-container-xl);
}

.ees-scope .ees-container--flush {
    padding-inline: 0;
}

/* =========================================================
   2. Sections und Weißraum
   ========================================================= */
.ees-scope .ees-section {
    position: relative;
    width: 100%;
    padding-block: var(--ees-spacing-section);
}

.ees-scope .ees-section--compact {
    padding-block: var(--ees-spacing-section-compact);
}

.ees-scope .ees-section--spacious {
    padding-block: var(--ees-spacing-section-spacious);
}

.ees-scope .ees-section--flush {
    padding-block: 0;
}

/* Container Queries reagieren auf die tatsächliche Joomla-Modulbreite. */
.ees-scope.ees-layout-context,
.ees-scope .ees-layout-context {
    container-type: inline-size;
}

/* =========================================================
   3. Grid
   ========================================================= */
.ees-scope .ees-grid {
    display: grid;
    min-width: 0;
    gap: var(--ees-spacing-grid);
}

.ees-scope .ees-grid > * {
    min-width: 0;
}

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

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

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

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

.ees-scope .ees-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ees-grid-item-min)), 1fr));
}

.ees-scope .ees-grid--dense {
    grid-auto-flow: dense;
}

/* =========================================================
   4. Flex
   ========================================================= */
.ees-scope .ees-flex {
    display: flex;
    min-width: 0;
}

.ees-scope .ees-flex--column {
    flex-direction: column;
}

.ees-scope .ees-flex--wrap {
    flex-wrap: wrap;
}

.ees-scope .ees-flex--align-start {
    align-items: flex-start;
}

.ees-scope .ees-flex--align-center {
    align-items: center;
}

.ees-scope .ees-flex--align-end {
    align-items: flex-end;
}

.ees-scope .ees-flex--justify-start {
    justify-content: flex-start;
}

.ees-scope .ees-flex--justify-center {
    justify-content: center;
}

.ees-scope .ees-flex--justify-between {
    justify-content: space-between;
}

.ees-scope .ees-flex--justify-end {
    justify-content: flex-end;
}

.ees-scope .ees-flex--grow {
    flex: 1 1 auto;
}

/* =========================================================
   5. Stack, Cluster und Flow
   ========================================================= */
.ees-scope .ees-stack {
    --ees-stack-space: var(--ees-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--ees-stack-space);
}

.ees-scope .ees-stack--sm {
    --ees-stack-space: var(--ees-spacing-sm);
}

.ees-scope .ees-stack--lg {
    --ees-stack-space: var(--ees-spacing-lg);
}

.ees-scope .ees-stack--xl {
    --ees-stack-space: var(--ees-spacing-xl);
}

.ees-scope .ees-cluster {
    --ees-cluster-space: var(--ees-spacing-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ees-cluster-space);
}

.ees-scope .ees-cluster--between {
    justify-content: space-between;
}

.ees-scope .ees-flow > * {
    margin-block: 0;
}

.ees-scope .ees-flow > * + * {
    margin-block-start: var(--ees-spacing-md);
}

.ees-scope .ees-flow--sm > * + * {
    margin-block-start: var(--ees-spacing-sm);
}

.ees-scope .ees-flow--lg > * + * {
    margin-block-start: var(--ees-spacing-lg);
}

.ees-scope .ees-flow--xl > * + * {
    margin-block-start: var(--ees-spacing-xl);
}

/* =========================================================
   6. Gap Utilities
   ========================================================= */
.ees-scope .ees-gap-xs {
    gap: var(--ees-spacing-xs);
}

.ees-scope .ees-gap-sm {
    gap: var(--ees-spacing-sm);
}

.ees-scope .ees-gap-md {
    gap: var(--ees-spacing-md);
}

.ees-scope .ees-gap-lg {
    gap: var(--ees-spacing-lg);
}

.ees-scope .ees-gap-xl {
    gap: var(--ees-spacing-xl);
}

.ees-scope .ees-gap-2xl {
    gap: var(--ees-spacing-2xl);
}

/* =========================================================
   7. Spacing Utilities
   ========================================================= */
.ees-scope .ees-space-before-sm {
    margin-block-start: var(--ees-spacing-sm);
}

.ees-scope .ees-space-before-md {
    margin-block-start: var(--ees-spacing-md);
}

.ees-scope .ees-space-before-lg {
    margin-block-start: var(--ees-spacing-lg);
}

.ees-scope .ees-space-before-xl {
    margin-block-start: var(--ees-spacing-xl);
}

.ees-scope .ees-space-before-2xl {
    margin-block-start: var(--ees-spacing-2xl);
}

.ees-scope .ees-space-after-sm {
    margin-block-end: var(--ees-spacing-sm);
}

.ees-scope .ees-space-after-md {
    margin-block-end: var(--ees-spacing-md);
}

.ees-scope .ees-space-after-lg {
    margin-block-end: var(--ees-spacing-lg);
}

.ees-scope .ees-space-after-xl {
    margin-block-end: var(--ees-spacing-xl);
}

.ees-scope .ees-space-after-2xl {
    margin-block-end: var(--ees-spacing-2xl);
}

.ees-scope .ees-padding-block-sm {
    padding-block: var(--ees-spacing-sm);
}

.ees-scope .ees-padding-block-md {
    padding-block: var(--ees-spacing-md);
}

.ees-scope .ees-padding-block-lg {
    padding-block: var(--ees-spacing-lg);
}

.ees-scope .ees-padding-block-xl {
    padding-block: var(--ees-spacing-xl);
}

.ees-scope .ees-padding-inline-sm {
    padding-inline: var(--ees-spacing-sm);
}

.ees-scope .ees-padding-inline-md {
    padding-inline: var(--ees-spacing-md);
}

.ees-scope .ees-padding-inline-lg {
    padding-inline: var(--ees-spacing-lg);
}

/* =========================================================
   8. Größen- und Ausrichtungsutilities
   ========================================================= */
.ees-scope .ees-full-width {
    width: 100%;
}

.ees-scope .ees-center {
    margin-inline: auto;
}

.ees-scope .ees-align-self-start {
    align-self: flex-start;
}

.ees-scope .ees-align-self-center {
    align-self: center;
}

.ees-scope .ees-align-self-end {
    align-self: flex-end;
}

/* =========================================================
   9. Responsive Fallback über Viewportbreite
   75rem = Laptop, 56.25rem = Tablet, 37.5rem = Smartphone.
   ========================================================= */
@media (max-width: 74.9375rem) {
    .ees-scope .ees-grid--columns-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 56.1875rem) {
    .ees-scope .ees-grid--columns-4,
    .ees-scope .ees-grid--columns-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 37.4375rem) {
    .ees-scope .ees-grid--columns-4,
    .ees-scope .ees-grid--columns-3,
    .ees-scope .ees-grid--columns-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ees-scope .ees-container {
        padding-inline: var(--ees-spacing-sm);
    }
}

/* Modernes Upgrade: tatsächliche Modulbreite schlägt Viewportbreite. */
@supports (container-type: inline-size) {
    @container (max-width: 1199px) {
        .ees-scope .ees-grid--columns-4 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @container (max-width: 899px) {
        .ees-scope .ees-grid--columns-4,
        .ees-scope .ees-grid--columns-3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @container (max-width: 599px) {
        .ees-scope .ees-grid--columns-4,
        .ees-scope .ees-grid--columns-3,
        .ees-scope .ees-grid--columns-2 {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}
/**
 * EES Design System – Typography
 * Zweck: Einheitliche, responsive Typografie für alle EES-Komponenten.
 * Inhalt: H1 bis H4, Lead, Body, Small, Caption, Zeilenlängen,
 *         Textfarben und Ausrichtung.
 * Abhängigkeiten: variables.css und base.css.
 * Verwendung: Typografische Klasse passend zur semantischen HTML-Struktur
 *             vergeben, z. B. `<h2 class="ees-heading-2">`.
 * Version: 1.0.0
 */

.ees-scope .ees-heading-1,
.ees-scope .ees-heading-2,
.ees-scope .ees-heading-3,
.ees-scope .ees-heading-4 {
    margin-block: 0;
    color: var(--ees-color-text-strong);
    font-family: var(--ees-font-family-sans);
    font-weight: var(--ees-font-weight-bold);
    text-wrap: balance;
    overflow-wrap: break-word;
}

.ees-scope .ees-heading-1 {
    max-width: var(--ees-text-width-h1);
    font-size: var(--ees-font-size-h1);
    line-height: var(--ees-line-height-tight);
    letter-spacing: var(--ees-letter-spacing-tighter);
}

.ees-scope .ees-heading-2 {
    max-width: var(--ees-text-width-h2);
    font-size: var(--ees-font-size-h2);
    line-height: var(--ees-line-height-display);
    letter-spacing: var(--ees-letter-spacing-tighter);
}

.ees-scope .ees-heading-3 {
    max-width: var(--ees-text-width-h3);
    font-size: var(--ees-font-size-h3);
    line-height: var(--ees-line-height-heading);
    letter-spacing: var(--ees-letter-spacing-tight);
}

.ees-scope .ees-heading-4 {
    max-width: var(--ees-text-width-h4);
    font-size: var(--ees-font-size-h4);
    line-height: var(--ees-line-height-subheading);
    letter-spacing: var(--ees-letter-spacing-tight);
}

.ees-scope .ees-text-lead {
    max-width: var(--ees-text-width-body);
    margin-block: 0;
    color: var(--ees-color-text-muted);
    font-size: var(--ees-font-size-lead);
    line-height: var(--ees-line-height-lead);
    letter-spacing: var(--ees-letter-spacing-normal);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.ees-scope .ees-text-body {
    max-width: var(--ees-text-width-body);
    margin-block: 0;
    color: var(--ees-color-text);
    font-size: var(--ees-font-size-body);
    line-height: var(--ees-line-height-body);
    letter-spacing: var(--ees-letter-spacing-normal);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.ees-scope .ees-text-small {
    max-width: var(--ees-text-width-body);
    margin-block: 0;
    color: var(--ees-color-text-muted);
    font-size: var(--ees-font-size-small);
    line-height: var(--ees-line-height-small);
    letter-spacing: var(--ees-letter-spacing-normal);
    overflow-wrap: break-word;
}

.ees-scope .ees-text-caption {
    max-width: var(--ees-text-width-body);
    margin-block: 0;
    color: var(--ees-color-text-muted);
    font-size: var(--ees-font-size-caption);
    font-weight: var(--ees-font-weight-medium);
    line-height: var(--ees-line-height-small);
    letter-spacing: var(--ees-letter-spacing-caption);
    overflow-wrap: break-word;
}

.ees-scope .ees-text-eyebrow {
    margin-block: 0;
    color: var(--ees-color-primary);
    font-size: var(--ees-font-size-caption);
    font-weight: var(--ees-font-weight-bold);
    line-height: var(--ees-line-height-small);
    letter-spacing: var(--ees-letter-spacing-widest);
    text-transform: uppercase;
}

.ees-scope .ees-text-strong {
    color: var(--ees-color-text-strong);
    font-weight: var(--ees-font-weight-semibold);
}

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

.ees-scope .ees-text-primary {
    color: var(--ees-color-primary);
}

.ees-scope .ees-text-narrow {
    max-width: var(--ees-text-width-narrow);
}

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

.ees-scope .ees-text-start {
    text-align: start;
}

.ees-scope .ees-text-end {
    text-align: end;
}
/**
 * EES Design System – Animations
 * Zweck: Dezente, performante und wiederverwendbare Bewegungsmuster.
 * Inhalt: Fade, Fade Up, Scale, Scroll Reveal, Hover Lift, Image Zoom,
 *         Shadow Hover, Übergangsutilities, Fokus und Reduced Motion.
 * Abhängigkeiten: variables.css und base.css.
 * Verwendung: Animationsklassen gezielt ergänzen. Scroll Reveal funktioniert
 *             als Progressive Enhancement mit `.ees-has-js`,
 *             `[data-ees-reveal]` und `.ees-is-visible`.
 * Version: 1.0.0
 */

/* =========================================================
   1. Keyframes
   ========================================================= */
@keyframes ees-fade-in {
    from {
        opacity: var(--ees-opacity-hidden);
    }

    to {
        opacity: var(--ees-opacity-visible);
    }
}

@keyframes ees-fade-up {
    from {
        opacity: var(--ees-opacity-hidden);
        transform: translate3d(0, var(--ees-spacing-md), 0);
    }

    to {
        opacity: var(--ees-opacity-visible);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ees-scale-in {
    from {
        opacity: var(--ees-opacity-hidden);
        transform: scale(var(--ees-scale-enter));
    }

    to {
        opacity: var(--ees-opacity-visible);
        transform: scale(1);
    }
}

@keyframes ees-focus-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 var(--ees-color-focus-transparent);
    }

    50% {
        box-shadow: var(--ees-shadow-focus);
    }
}

/* =========================================================
   2. Einmalige Eingangsanimationen
   ========================================================= */
.ees-scope .ees-animate-fade-in {
    animation: ees-fade-in var(--ees-duration-slow) var(--ees-ease-enter) both;
}

.ees-scope .ees-animate-fade-up {
    animation: ees-fade-up var(--ees-duration-reveal) var(--ees-ease-emphasized) both;
}

.ees-scope .ees-animate-scale-in {
    animation: ees-scale-in var(--ees-duration-slow) var(--ees-ease-emphasized) both;
}

/* Kurze, systemweit einheitliche Staffelung. */
.ees-scope .ees-delay-1 {
    animation-delay: var(--ees-delay-1);
    transition-delay: var(--ees-delay-1);
}

.ees-scope .ees-delay-2 {
    animation-delay: var(--ees-delay-2);
    transition-delay: var(--ees-delay-2);
}

.ees-scope .ees-delay-3 {
    animation-delay: var(--ees-delay-3);
    transition-delay: var(--ees-delay-3);
}

.ees-scope .ees-delay-4 {
    animation-delay: var(--ees-delay-4);
    transition-delay: var(--ees-delay-4);
}

/* =========================================================
   3. Scroll Reveal – ohne JavaScript standardmäßig sichtbar
   ========================================================= */
.ees-scope [data-ees-reveal] {
    opacity: var(--ees-opacity-visible);
    transform: none;
}

.ees-scope.ees-has-js [data-ees-reveal] {
    opacity: var(--ees-opacity-hidden);
    transform: translate3d(0, var(--ees-spacing-md), 0);
    transition:
        opacity var(--ees-duration-reveal) var(--ees-ease-enter),
        transform var(--ees-duration-reveal) var(--ees-ease-emphasized);
}

.ees-scope.ees-has-js [data-ees-reveal="fade"] {
    transform: none;
}

.ees-scope.ees-has-js [data-ees-reveal="scale"] {
    transform: scale(var(--ees-scale-enter));
}

.ees-scope.ees-has-js [data-ees-reveal].ees-is-visible {
    opacity: var(--ees-opacity-visible);
    transform: none;
}

/* =========================================================
   4. Transition Utilities
   ========================================================= */
.ees-scope .ees-transition-colors {
    transition: var(--ees-transition-color);
}

.ees-scope .ees-transition-transform {
    transition: var(--ees-transition-transform);
}

.ees-scope .ees-transition-shadow {
    transition: var(--ees-transition-shadow);
}

.ees-scope .ees-transition-opacity {
    transition: var(--ees-transition-opacity);
}

/* =========================================================
   5. Hover – nur für Geräte mit präzisem Zeiger
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
    .ees-scope .ees-hover-lift {
        transition:
            var(--ees-transition-transform),
            var(--ees-transition-shadow);
    }

    .ees-scope .ees-hover-lift:hover {
        transform: translate3d(0, calc(var(--ees-spacing-2xs) * -1), 0);
    }

    .ees-scope .ees-hover-shadow {
        transition: var(--ees-transition-shadow);
    }

    .ees-scope .ees-hover-shadow:hover {
        box-shadow: var(--ees-shadow-lg);
    }

    .ees-scope .ees-image-zoom {
        overflow: hidden;
    }

    .ees-scope .ees-image-zoom img {
        transition: transform var(--ees-duration-slow) var(--ees-ease-emphasized);
    }

    .ees-scope .ees-image-zoom:hover img {
        transform: scale(var(--ees-scale-image-hover));
    }
}

/* =========================================================
   6. Fokusanimation
   Der statische Fokus aus base.css bleibt immer erhalten.
   ========================================================= */
.ees-scope .ees-focus-animate:focus-visible {
    animation: ees-focus-pulse var(--ees-duration-slow) var(--ees-ease-standard) 1;
}

/* =========================================================
   7. Reduced Motion
   !important ist hier bewusst erforderlich, um optionale
   Animationen innerhalb des Namespace sicher abzuschalten.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ees-scope,
    .ees-scope *,
    .ees-scope *::before,
    .ees-scope *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .ees-scope.ees-has-js [data-ees-reveal] {
        opacity: var(--ees-opacity-visible);
        transform: none;
    }
}
/**
 * EES Design System – Button
 * Zweck: Einheitliches Button-System für Links und native Buttons.
 * Inhalt: Basis, vier visuelle Varianten, drei Größen, Icon-Variante,
 *         Interaktions-, Fokus-, Disabled- und Reduced-Motion-Zustände.
 * Abhängigkeiten: variables.css, base.css und animations.css.
 * Verwendung: Innerhalb von `.ees-scope` immer `.ees-button` mit genau einer
 *             visuellen Variante und einer Größenvariante kombinieren.
 * Version: 1.0.1
 */

.ees-scope .ees-button {
    display: inline-flex;
    max-inline-size: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--ees-spacing-xs);
    margin: 0;
    border: var(--ees-border-width-thin) solid transparent;
    border-radius: var(--ees-radius-full);
    font-family: var(--ees-font-family-sans);
    font-weight: var(--ees-font-weight-semibold);
    line-height: var(--ees-line-height-small);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    appearance: none;
    -webkit-appearance: none;
    transition:
        var(--ees-transition-color),
        var(--ees-transition-transform),
        var(--ees-transition-shadow);
}

/* Größen */
.ees-scope .ees-button--small {
    min-block-size: var(--ees-size-control-sm);
    padding-inline: var(--ees-spacing-sm);
    font-size: var(--ees-font-size-small);
}

.ees-scope .ees-button--medium {
    min-block-size: var(--ees-size-control-md);
    padding-inline: var(--ees-spacing-md);
    font-size: var(--ees-font-size-body);
}

.ees-scope .ees-button--large {
    min-block-size: var(--ees-size-control-lg);
    padding-inline: var(--ees-spacing-lg);
    font-size: var(--ees-font-size-body);
}

/* Primär: stärkste visuelle Gewichtung. */
.ees-scope .ees-button--primary {
    color: var(--ees-color-text-on-primary);
    background-color: var(--ees-color-primary);
    border-color: var(--ees-color-primary);
    box-shadow: var(--ees-shadow-xs);
}

/* Sekundär: ruhige Alternative auf heller Fläche. */
.ees-scope .ees-button--secondary {
    color: var(--ees-color-link);
    background-color: var(--ees-color-primary-soft);
    border-color: var(--ees-color-border-accent);
    box-shadow: var(--ees-shadow-none);
}

/* Outline: klare Aktion ohne gefüllte Fläche. */
.ees-scope .ees-button--outline {
    color: var(--ees-color-primary);
    background-color: transparent;
    border-color: var(--ees-color-primary);
    box-shadow: var(--ees-shadow-none);
}

/* Ghost: geringste visuelle Gewichtung. */
.ees-scope .ees-button--ghost {
    color: var(--ees-color-link);
    background-color: transparent;
    border-color: transparent;
    box-shadow: var(--ees-shadow-none);
}

/* Icon-Struktur funktioniert mit Inline-SVG oder dekorativem Textsymbol. */
.ees-scope .ees-button__icon {
    display: inline-flex;
    width: var(--ees-size-icon-md);
    height: var(--ees-size-icon-md);
    flex: 0 0 var(--ees-size-icon-md);
    align-items: center;
    justify-content: center;
}

.ees-scope .ees-button__icon > svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

.ees-scope .ees-button--icon {
    min-inline-size: var(--ees-size-control-md);
    padding-inline: var(--ees-spacing-0);
}

.ees-scope .ees-button--icon.ees-button--small {
    min-inline-size: var(--ees-size-control-sm);
}

.ees-scope .ees-button--icon.ees-button--large {
    min-inline-size: var(--ees-size-control-lg);
}

/* Tastaturfokus ergänzt den globalen Outline-Fokus sichtbar. */
.ees-scope .ees-button:focus-visible {
    box-shadow: var(--ees-shadow-focus);
}

/* Aktiver Zustand ist auch auf Touch-Geräten verfügbar. */
.ees-scope .ees-button:not(:disabled):not([aria-disabled="true"]):active {
    transform: scale(var(--ees-scale-enter));
    box-shadow: var(--ees-shadow-xs);
}

.ees-scope .ees-button--primary:not(:disabled):not([aria-disabled="true"]):active {
    background-color: var(--ees-color-primary-active);
    border-color: var(--ees-color-primary-active);
}

.ees-scope .ees-button:disabled,
.ees-scope .ees-button[aria-disabled="true"] {
    color: var(--ees-color-text-disabled);
    background-color: var(--ees-color-background-muted);
    border-color: var(--ees-color-border);
    box-shadow: var(--ees-shadow-none);
    cursor: not-allowed;
    opacity: var(--ees-opacity-disabled);
    pointer-events: none;
}

/* Hover nur auf Geräten mit präzisem Zeiger. */
@media (hover: hover) and (pointer: fine) {
    .ees-scope .ees-button:not(:disabled):not([aria-disabled="true"]):hover {
        transform: translate3d(0, calc(var(--ees-spacing-3xs) * -1), 0);
        box-shadow: var(--ees-shadow-sm);
    }

    .ees-scope .ees-button--primary:not(:disabled):not([aria-disabled="true"]):hover {
        color: var(--ees-color-text-on-primary);
        background-color: var(--ees-color-primary-hover);
        border-color: var(--ees-color-primary-hover);
    }

    .ees-scope .ees-button--secondary:not(:disabled):not([aria-disabled="true"]):hover,
    .ees-scope .ees-button--outline:not(:disabled):not([aria-disabled="true"]):hover,
    .ees-scope .ees-button--ghost:not(:disabled):not([aria-disabled="true"]):hover {
        color: var(--ees-color-link-hover);
        background-color: var(--ees-color-primary-soft-hover);
        border-color: var(--ees-color-border-accent);
    }
}

/* Kleine Buttons erhalten auf Touch-Geräten mindestens 48px Zielhöhe. */
@media (pointer: coarse) {
    .ees-scope .ees-button--small {
        min-block-size: var(--ees-size-control-md);
    }

    .ees-scope .ees-button--icon.ees-button--small {
        min-inline-size: var(--ees-size-control-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ees-scope .ees-button,
    .ees-scope .ees-button:not(:disabled):not([aria-disabled="true"]):hover,
    .ees-scope .ees-button:not(:disabled):not([aria-disabled="true"]):active {
        transform: none;
    }
}
/**
 * EES Design System – Card / Surface
 * Zweck: Inhaltsneutrale Karten- und Oberflächenbasis für spätere Komponenten.
 * Inhalt: Struktur, Default-, Glass- und Interactive-Variante sowie
 *         Header-, Body- und Footer-Bereiche.
 * Abhängigkeiten: variables.css, base.css, layout.css und animations.css.
 * Verwendung: Innerhalb von `.ees-scope` `.ees-card` mit genau einer
 *             Surface-Variante kombinieren. Keine feste Kartenhöhe setzen.
 * Version: 1.0.0
 */

.ees-scope .ees-card {
    position: relative;
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    gap: var(--ees-spacing-md);
    padding: var(--ees-spacing-lg);
    overflow: hidden;
    color: var(--ees-color-text);
    border: var(--ees-border-width-thin) solid var(--ees-color-border);
    border-radius: var(--ees-radius-lg);
    text-decoration: none;
    transition:
        var(--ees-transition-color),
        var(--ees-transition-transform),
        var(--ees-transition-shadow);
}

.ees-scope .ees-card--default {
    background-color: var(--ees-color-surface);
    border-color: var(--ees-color-border);
    box-shadow: var(--ees-shadow-sm);
}

/* Solider Fallback wird erst bei echter Blur-Unterstützung transparent. */
.ees-scope .ees-card--glass {
    background-color: var(--ees-color-glass-fallback);
    border-color: var(--ees-color-glass-border);
    box-shadow: var(--ees-shadow-md);
}

@supports ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))) {
    .ees-scope .ees-card--glass {
        background-color: var(--ees-color-glass);
        -webkit-backdrop-filter: blur(var(--ees-blur-md));
        backdrop-filter: blur(var(--ees-blur-md));
    }
}

.ees-scope .ees-card__header,
.ees-scope .ees-card__body,
.ees-scope .ees-card__footer {
    min-width: 0;
}

.ees-scope .ees-card__header,
.ees-scope .ees-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--ees-spacing-sm);
}

.ees-scope .ees-card__body {
    flex: 1 1 auto;
}

.ees-scope .ees-card__footer {
    margin-block-start: auto;
    padding-block-start: var(--ees-spacing-sm);
}

/* Interactive ist ein Verhalten und wird zusätzlich zu einer Surface genutzt. */
.ees-scope a.ees-card--interactive,
.ees-scope button.ees-card--interactive {
    cursor: pointer;
}

.ees-scope .ees-card--interactive:focus-visible,
.ees-scope .ees-card--interactive:focus-within {
    border-color: var(--ees-color-border-focus);
    box-shadow: var(--ees-shadow-focus);
}

.ees-scope a.ees-card {
    color: var(--ees-color-text);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .ees-scope .ees-card--interactive:hover {
        border-color: var(--ees-color-border-accent);
        box-shadow: var(--ees-shadow-lg);
        transform: translate3d(0, calc(var(--ees-spacing-2xs) * -1), 0);
    }

    .ees-scope a.ees-card--interactive:hover {
        color: var(--ees-color-text);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ees-scope .ees-card--interactive,
    .ees-scope .ees-card--interactive:hover {
        transform: none;
    }
}
/**
 * EES Design System – Section Header
 * Zweck: Einheitlicher Einleitungsbereich für zukünftige Inhaltssektionen.
 * Inhalt: Optionaler Eyebrow, H2, Beschreibung sowie linke und zentrierte
 *         Ausrichtung.
 * Abhängigkeiten: variables.css, base.css, layout.css und typography.css.
 * Verwendung: Innerhalb von `.ees-scope` die semantische Header-Struktur mit
 *             einer Ausrichtungsvariante kombinieren.
 * Version: 1.0.0
 */

.ees-scope .ees-section-header {
    display: flex;
    width: 100%;
    max-width: var(--ees-container-sm);
    flex-direction: column;
    gap: var(--ees-spacing-sm);
}

.ees-scope .ees-section-header--left {
    align-items: flex-start;
    margin-inline: 0;
    text-align: start;
}

.ees-scope .ees-section-header--center {
    align-items: center;
    margin-inline: auto;
    text-align: center;
}

.ees-scope .ees-section-header__eyebrow,
.ees-scope .ees-section-header__title,
.ees-scope .ees-section-header__description {
    margin-block: 0;
}

.ees-scope .ees-section-header__title {
    max-width: var(--ees-text-width-h2);
}

.ees-scope .ees-section-header__description {
    max-width: var(--ees-text-width-body);
}

.ees-scope .ees-section-header--left .ees-section-header__title,
.ees-scope .ees-section-header--left .ees-section-header__description {
    margin-inline: 0;
}

.ees-scope .ees-section-header--center .ees-section-header__title,
.ees-scope .ees-section-header--center .ees-section-header__description {
    margin-inline: auto;
}