/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/*
 * Font-Face Definitions 
 */

/* Helvetica heavy cond */
@font-face {
  font-family: 'HelveticaHeavyCond';
  src: url('../fonts/hel_heavycond.woff') format('woff'),
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Helvetica heavy cond */
@font-face {
  font-family: 'HelveticaNeueLTPro-Cn';
  src: url('../fonts/HelveticaNeueLTPro-Cn.woff') format('woff'),
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}





/* Helvetica Neue LT Pro 100 */
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-100.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-100.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-100.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-100-italic.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-100-italic.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-100-italic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Helvetica Neue LT Pro 200 */
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-200.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-200.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-200.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-200-italic.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-200-italic.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-200-italic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Helvetica Neue LT Pro 300 */
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-300.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-300.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-300.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-300-italic.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-300-italic.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-300-italic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Helvetica Neue LT Pro 400 */
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-400.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-400.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-400.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-400-italic.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-400-italic.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-400-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Helvetica Neue LT Pro 500 */
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-500.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-500.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-500.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-500-italic.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-500-italic.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-500-italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Helvetica Neue LT Pro 700 Italic */
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-700-italic.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-700-italic.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-700-italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Helvetica Neue LT Pro Condensed 700 */
@font-face {
  font-family: 'Helvetica Neue LT Pro Condensed';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-cond-700.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-cond-700.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-cond-700.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

/* Helvetica Neue LT Pro Condensed 900 */
@font-face {
  font-family: 'Helvetica Neue LT Pro Condensed';
  src: url('../fonts/helvetica/woff2/helvetica-neue-lt-pro-cond-900.woff2') format('woff2'),
       url('../fonts/helvetica/woff/helvetica-neue-lt-pro-cond-900.woff') format('woff'),
       url('../fonts/helvetica/otf/helvetica-neue-lt-pro-cond-900.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

/* --- Zusätzliche Schriftschnitte für Helvetica Neue LT --- */
/* Helvetica Neue LT Com 55 Roman */
@font-face {
  font-family: 'Helvetica Neue LT Condensed';
  src: url('../fonts/helvetica/HelveticaNeueLT_Com_55_Roman/HelveticaNeueLTCom-Roman.woff2') format('woff2'),
       url('../fonts/helvetica/HelveticaNeueLT_Com_55_Roman/HelveticaNeueLTCom-Roman.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

/* Helvetica Neue LT Com 57 Condensed */
@font-face {
  font-family: 'Helvetica Neue LT Condensed';
  src: url('../fonts/helvetica/HelveticaNeueLT_Com_57_Cn/HelveticaNeueLTCom-Cn.woff2') format('woff2'),
       url('../fonts/helvetica/HelveticaNeueLT_Com_57_Cn/HelveticaNeueLTCom-Cn.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

/* Helvetica Neue LT Com 67 Medium Condensed */
@font-face {
  font-family: 'Helvetica Neue LT Condensed';
  src: url('../fonts/helvetica/HelveticaNeueLT_Com_67_MdCn/HelveticaNeueLTCom-MdCn.woff2') format('woff2'),
       url('../fonts/helvetica/HelveticaNeueLT_Com_67_MdCn/HelveticaNeueLTCom-MdCn.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

/* Helvetica Neue LT Com 75 Bold */
/* @font-face {
  font-family: 'Helvetica Neue LT Condensed';
  src: url('../fonts/helvetica/HelveticaNeueLT_Com_75_Bd/HelveticaNeueLTCom-Bd.woff2') format('woff2'),
       url('../fonts/helvetica/HelveticaNeueLT_Com_75_Bd/HelveticaNeueLTCom-Bd.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
} */

/* Helvetica Neue LT Com 77 Bold Condensed */
/* @font-face {
  font-family: 'Helvetica Neue LT Condensed';
  src: url('../fonts/helvetica/HelveticaNeueLT_Com_77_BdCn/HelveticaNeueLTCom-BdCn.woff2') format('woff2'),
       url('../fonts/helvetica/HelveticaNeueLT_Com_77_BdCn/HelveticaNeueLTCom-BdCn.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
} */


/* 
 * CSS Variablen 
 */
:root {
  /* Farben */
  --color-yellow: oklch(from #ffcc00 l c h);
  --color-blue: oklch(from #253081 l c h);
  --color-blue-light: oklch(from #a2b4ef l c h);
  --color-blue-dark: oklch(from #1f2974 l c h);
  --color-gray: oklch(from #d0d0d0 l c h);
  --color-gray-light: oklch(from #f5f5f5 l c h);
  --color-black: oklch(from #000000 l c h);
  --color-white: oklch(from #ffffff l c h);
  
  /* Bootstrap Farben */
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-tertiary: var(--color-tertiary);

  /* TYPO3 Farben */
  --color-primary: var(--color-yellow);
  --color-secondary: var(--color-blue);
  --color-tertiary: var(--color-blue-light);

  --color-shadow: oklch(from #000000 l c h / 0.1);

  /* Layout */
  --bs-container-max-inline-size: 1920px; /* Bootstrap: Max Container Width */
  --wqhd-max-inline-size: 2560px;
  --uhd-max-inline-size: 3840px;

  --container-offset-x: 2.5rem; /* Custom: Container Offset Horizontal */
  --custom-container-max-inline-size: calc(var(--bs-container-max-inline-size) - (2 * var(--container-offset-x))); /* Custom: Max Container Width minus Offset */

  --header-block-size: 11.25rem;
  --main-nav-item-min-block-size: 3.5rem;

  /* Seitenverhältnisse */
	--ratio-square: 1 / 1;
	--ratio-wide: 16 / 9;
	--ratio-tall: 9 / 16;
	--ratio-ultrawide: 21 / 9;
	--ratio-standard: 4 / 3;
	--ratio-portrait: 3 / 4;
	--ratio-banner: 3 / 1;
	--ratio-cinema: 2.39 / 1;
  --ratio-cinema-classic: 2.35 / 1;
  --ratio-cinema-ultrawide: 2.76 / 1; 
	--ratio-1-2: 1 / 2;
	--ratio-2-1: 2 / 1;
  --ratio-golden: 1.618 / 1;
  --ratio-golden-inverse: 1 / 1.618;
	--ratio-photo-standard: 3 / 2;
	--ratio-photo-portrait: 2 / 3;
	--ratio-auto: auto;

  /* Übergänge */
	--transition-duration: 250ms;
	--transition-timing: ease-in-out;
	--transition-delay: 0ms;

  /* Animationen */
	--animation-duration: 250ms;
  --animation-delay: 0ms;
	--animation-timing: ease-in-out;
	--animation-direction: normal;
  --animation-fill-mode: forwards;

  /* Logo-Größe */
  --max-logo-size: clamp(3rem, calc(15vw - 2rem), 7rem);

  /* Typografie */
  --bs-body-font-family: 'Helvetica Neue LT Pro', Arial, Helvetica, sans-serif, system-ui; /* Bootstrap: Body Font Family */
  --font-family-headings: 'Helvetica Neue LT Pro', Arial, sans-serif, system-ui;
  --font-family-headings-condensed: 'Helvetica Neue LT Pro Condensed', Arial, sans-serif, system-ui;
  --font-family-base: 'Helvetica Neue LT Pro', Arial, sans-serif, system-ui;
  
  --font-family-h1: var(--font-family-headings-condensed);
  --font-family-h2: var(--font-family-headings-condensed);
  --font-family-h3: var(--font-family-headings-condensed);
  --font-family-h4: var(--font-family-headings-condensed);
  --font-family-h5: var(--font-family-headings-condensed);
  --font-family-h6: var(--font-family-headings-condensed);

  --font-color-headings: var(--color-secondary);
  --font-color-paragraph: var(--color-secondary);
  --font-color-links: var(--color-primary);
  --font-color-links-hover: var(--color-tertiary);

  --font-size-h1: clamp(3rem, calc(5vw - 1rem), 4rem);
  --font-size-h2: clamp(.85rem, calc(5vw - 1rem), 1.2rem);
  --font-size-h3: clamp(2.75rem, calc(5vw - 1rem), 4.2rem);
  --font-size-h4: clamp(2.5rem, calc(5vw - 1rem), 3rem);
  --font-size-h5: clamp(2rem, calc(5vw - 1rem), 2.5rem);
  --font-size-h6: clamp(1.5rem, calc(5vw - 1rem), 2rem);
  --font-size-paragraph: 1.2rem;
  --font-size-nav-item: clamp(1.4rem, calc(5vw - 4rem), 2.375rem);
  --font-size-button: clamp(1rem, calc(5vw - 3rem), 1.2rem);

  --font-weight-h1: 400;
  --font-weight-h2: 400;
  --font-weight-h3: 700;
  --font-weight-h4: 400;
  --font-weight-h5: 400;
  --font-weight-h6: 400;
  --font-weight-paragraph: 300;
  --font-weight-button: 700;

  --line-height-h1: 1.0;
  --line-height-h2: 1.4;
  --line-height-h3: 1.0;
  --line-height-h4: 1.1;
  --line-height-h5: 1.2;
  --line-height-h6: 1.3;
  --line-height-paragraph: 1.4;
  --line-height-button: 1.4;

  --max-inline-size-h1: 30ch;
  --max-inline-size-h2: 40ch;
  --max-inline-size-h3: 50ch;
  --max-inline-size-h4: 60ch;
  --max-inline-size-h5: 65ch;
  --max-inline-size-h6: 70ch;
  --max-inline-size-paragraph: 75ch;

  /* Bootstrap Breakpoints */
  --bs-breakpoint-sm: 576px;    /* entspricht in 36rem */
  --bs-breakpoint-md: 768px;    /* entspricht in 48rem */
  --bs-breakpoint-lg: 992px;    /* entspricht in 62rem */
  --bs-breakpoint-xl: 1200px;   /* entspricht in 75rem */
  --bs-breakpoint-xxl: 1400px;  /* entspricht in 87.5rem */

  /* Bootstrap Abstände-Erweiterung */
  --bs-size-6: 3rem;
  --bs-size-7: 4rem;
  --bs-size-8: 5rem;
  --bs-size-9: 6rem;
  --bs-size-10: 8rem;

  /* 
   *SVG-Elemente 
   */
  
  /* Pfeile */
  --svg-arrow-right-primary: url('/fileadmin/uw/assets/media/images/u-und-w-icons_arrow-right-yellow.svg');
  --svg-arrow-right-secondary: url('/fileadmin/uw/assets/media/images/u-und-w-icons_arrow-right-blue.svg');
  --svg-arrow-right-secondary-dark: url('/fileadmin/uw/assets/media/images/u-und-w-icons_arrow-right-darkblue.svg');
  --svg-arrow-right-white: url('/fileadmin/uw/assets/media/images/u-und-w-icons_arrow-right-white.svg');

  /* Runde Ecken kurz */
  --svg-corner-short-top-left-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-short-yellow.svg');
  --svg-corner-short-top-right-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-short-yellow.svg');
  --svg-corner-short-bottom-left-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-short-yellow.svg');
  --svg-corner-short-bottom-right-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-short-yellow.svg');

  --svg-corner-short-top-left-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-short-blue.svg');
  --svg-corner-short-top-right-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-short-blue.svg');
  --svg-corner-short-bottom-left-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-short-blue.svg');
  --svg-corner-short-bottom-right-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-short-blue.svg');

  --svg-corner-short-top-left-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-short-white.svg');
  --svg-corner-short-top-right-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-short-white.svg');
  --svg-corner-short-bottom-left-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-short-white.svg');
  --svg-corner-short-bottom-right-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-short-white.svg');

  /* Runde Ecken mittel */
  --svg-corner-medium-top-left-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-medium-yellow.svg');
  --svg-corner-medium-top-right-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-medium-yellow.svg');
  --svg-corner-medium-bottom-left-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-medium-yellow.svg');
  --svg-corner-medium-bottom-right-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-medium-yellow.svg');

  --svg-corner-medium-top-left-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-medium-blue.svg');
  --svg-corner-medium-top-right-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-medium-blue.svg');
  --svg-corner-medium-bottom-left-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-medium-blue.svg');
  --svg-corner-medium-bottom-right-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-medium-blue.svg');

  --svg-corner-medium-top-left-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-medium-white.svg');
  --svg-corner-medium-top-right-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-medium-white.svg');
  --svg-corner-medium-bottom-left-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-medium-white.svg');
  --svg-corner-medium-bottom-right-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-medium-white.svg');

  --svg-corner-medium-top-left-inline-size: calc(22rem * .5);
  --svg-corner-medium-bottom-right-inline-size: calc(37rem * .5);

  /* Runde Ecken lang */
  --svg-corner-long-top-left-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-long-yellow.svg');
  --svg-corner-long-top-right-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-long-yellow.svg');
  --svg-corner-long-bottom-left-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-long-yellow.svg');
  --svg-corner-long-bottom-right-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-long-yellow.svg');

  --svg-corner-long-top-left-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-long-blue.svg');
  --svg-corner-long-top-right-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-long-blue.svg');
  --svg-corner-long-bottom-left-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-long-blue.svg');
  --svg-corner-long-bottom-right-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-long-blue.svg');

  --svg-corner-long-top-left-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-left-big-white.svg');
  --svg-corner-long-top-right-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-top-right-big-white.svg');
  --svg-corner-long-bottom-left-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-left-big-white.svg');
  --svg-corner-long-bottom-right-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_corner-bottom-right-big-white.svg');

  --svg-corner-long-inline-size: calc(92.5rem * .5);

  /* Runde Ecken L-Form */
  --svg-corner-l-shape-primary: url(../media/images/L-key-visual.svg);

  --svg-corner-l-shape-inline-size: calc(15rem * .5);
  --svg-corner-l-shape-aspect-ratio: var(--ratio-photo-portrait);

  /* Vertikale Trenner kurz */
  --svg-separator-short-vertical-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-short-yellow.svg');
  --svg-separator-short-vertical-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-short-blue.svg');
  --svg-separator-short-vertical-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-short-white.svg');

  /* Vertikale Trenner lang */
  --svg-separator-long-vertical-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-long-yellow.webp');
  --svg-separator-long-vertical-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-long-blue.svg');
  --svg-separator-long-vertical-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-long-white.svg');

  /* Vertikale Trenner sehr lang */
  --svg-separator-xlong-vertical-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-xl-yellow.svg');
  --svg-separator-xlong-vertical-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-xl-blue.svg');
  --svg-separator-xlong-vertical-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_seperator-vertical-xl-white.svg');

  --svg-separator-inline-size: calc(2.625rem * .5);

  /* Kurven */
  --svg-curve-primary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_curve-big-yellow.svg');
  --svg-curve-secondary: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_curve-big-blue.svg');
  --svg-curve-white: url('/fileadmin/uw/assets/media/images/u-w-keyvisuals-website_curve-big-white.svg');

  --svg-curve-inline-size: calc(93rem * .5);

  /* Download- & Upload-Symbole */
  --svg-icon-download-primary: url('/fileadmin/uw/assets/media/images/u-und-w-icons_download-yellow.svg');
  --svg-icon-download-secondary: url('/fileadmin/uw/assets/media/images/u-und-w-icons_download-blue.svg');
  --svg-icon-download-white: url('/fileadmin/uw/assets/media/images/u-und-w-icons_download-white.svg');

  --svg-icon-download-primary-hover: url('/fileadmin/uw/assets/media/images/u-und-w-icons_download-yellow-hover.svg');
  --svg-icon-download-secondary-hover: url('/fileadmin/uw/assets/media/images/u-und-w-icons_download-blue-hover.svg');
  --svg-icon-download-white-hover: url('/fileadmin/uw/assets/media/images/u-und-w-icons_download-white-hover.svg');

  --svg-icon-upload-primary: url('/fileadmin/uw/assets/media/images/u-und-w-icons_upload-yellow.svg');
  --svg-icon-upload-secondary-hover: url('/fileadmin/uw/assets/media/images/u-und-w-icons_upload-blue-hover.svg');

  /* Aufzählungszeichen */
  --svg-icon-bullet-list-secondary: url('/fileadmin/uw/assets/media/images/u-und-w-icon-bullet-list.svg');

  /* Externe Links */
  --svg-icon-external-primary: url('/fileadmin/uw/assets/media/images/u-und-w-icons_arrow-top-right-yellow.svg');
  --svg-icon-external-secondary: url('/fileadmin/uw/assets/media/images/u-und-w-icons_arrow-top-right-blue.svg');
  --svg-icon-external-white: url('/fileadmin/uw/assets/media/images/u-und-w-icons_arrow-top-right-white.svg');

  /* Radios & Checkboxen */
  --svg-icon-radio-checked-secondary: url('/fileadmin/uw/assets/media/images/u-und-w-chevron-blue.svg');
  --svg-icon-checkbox-checked-secondary: url('/fileadmin/uw/assets/media/images/u-und-w-checkbox-cross-blue.svg');

  /* 60 Jahre-Schriftzug-SVG-Animation für Historie */
  --svg-animation-history-60-years-bg-transparent: url('/fileadmin/uw/assets/media/images/u-und-w-history-60-years-bg-transparent.svg');
  --svg-animation-history-60-years-bg-yellow: url('/fileadmin/uw/assets/media/images/u-und-w-history-60-years-bg-yellow.svg');

  /* Ziffern für Historie */
  --svg-icon-history-1: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-1.svg');
  --svg-icon-history-2: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-2.svg');
  --svg-icon-history-3: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-3.svg');
  --svg-icon-history-4: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-4.svg');
  --svg-icon-history-5: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-5.svg');
  
  --svg-icon-history-1-hover: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-1-hover.svg');
  --svg-icon-history-2-hover: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-2-hover.svg');
  --svg-icon-history-3-hover: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-3-hover.svg');
  --svg-icon-history-4-hover: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-4-hover.svg');
  --svg-icon-history-5-hover: url('/fileadmin/uw/assets/media/images/u-und-w-history-number-5-hover.svg');

  /* Benefits */
  --svg-icon-verguetung : url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-attraktive-verguetung.svg);
  --svg-icon-aufgabengebiet: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-abwechslungsreiches-aufgabengebiet.svg);
  --svg-icon-arbeitsschutzbekleidung: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-arbeitsschutzbekleidung.svg);
  --svg-icon-einarbeitung: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-einarbeitung.svg);
  --svg-icon-fortschritt: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-fortschritt.svg);
  --svg-icon-entwicklung: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-entwicklungsmoeglichkeiten.svg);
  --svg-icon-weiterbildung: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-weiterbildung.svg);
  --svg-icon-gesundheitsmanagement: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-gesundheitsmanagement.svg);
  --svg-icon-leasing: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-bike-leasing.svg);
  --svg-icon-bauprojekte: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-regionale-bauprojekte.svg);
  --svg-icon-mitarbeiterprogramm: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-mitarbeiterprogramm.svg);
  --svg-icon-dienstwagen: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-dienstwagen.svg);
  --svg-icon-handy: url(/fileadmin/uw/assets/media/images/u-und-w-icons-handy.svg);
  --svg-icon-bueroarbeitsplatz: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-modern-ausgestatteter-bueroarbeitsplatz.svg);
  --svg-icon-firmenevents: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-firmenevents.svg);
  --svg-icon-mitarbeiterrabatte: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-mitarbeiterrabatte.svg);
  --svg-icon-tools: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-hochwertige-tools.svg);
  --svg-icon-arbeitsvertrag: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-unbefristeter-arbeitsvertrag.svg);
  --svg-icon-sozialleistungen: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-sozialleistungen.svg);
  --svg-icon-urlaub: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-urlaub.svg);
  --svg-icon-team: url(/fileadmin/uw/assets/media/icons_karriere/u-und-w-icons-karriere-zielorientiertes-team.svg);

  /* Swiper */
  --swiper-item-inline-size: 80vw;
  --swiper-item-max-block-size: calc(100vh - var(--header-block-size) - var(--main-nav-item-min-block-size)); 
  --swiper-item-block-size: clamp(40rem, calc(50vw - 1rem), var(--swiper-item-max-block-size));
}

/* 
 * Basic Styles 
 */
html, body {
  min-block-size: 100%;
  margin: 0;
}

body {
  --_animation-duration: 0ms;
  --_animation-delay: 0ms;

  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  background-color: var(--color-white);
  color: var(--color-secondary);
  caret-color: var(--color-secondary);
  margin: 0;
  padding: 0;

  /* TYPO3 Body-Container */
  & > .body-bg {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
  }

  &:has(.splashscreen) {
    --_animation-duration: 1000ms;
    --_animation-delay: 6500ms;
    
    pointer-events: none;
    max-height: 100vh;
    /* Seite nach Animation entsperren */
    animation: 
      enableWebsite var(--_animation-duration, 0ms) var(--animation-timing) var(--_animation-delay, 0ms) var(--animation-direction) var(--animation-fill-mode);
    overflow-y: hidden;

    &:has(.splashscreen.skipped) {
      pointer-events: auto;
      max-height: none;
    }
  }

  /* Wenn das Splashscreen übersprungen wurde, Seite sofort entsperren */
  &:has(.splashscreen.skipped) {
    pointer-events: auto;
    max-height: none;
    animation: none;
    overflow-y: auto;
  }

  &:has(
    section.game,
    section.job-application,
    section.history
  ) {
    .map-marker {
      display: none;
    }
  }

  &:not(#p137):has(
    section.game,
    section.history
  ) {
    header {
      .static {
        visibility: hidden;
        margin-block-start: -100%;
      }
    }
  }

  &:not(#p131):has(section.job-application) {
    header {
      .static {
        visibility: hidden;
      }
    }
  }

  &:has(section.history) {
    footer {
      display: none;
    }
  }
}

#p695    header {
	visibility: visible !important;
	background-color: var(--color-primary);
}
#p695    header .static {
        visibility: visible !important;
}

main {
  flex: 1;

  & > section {
    overflow: visible;
    overflow-x: clip;
  }
}

.container {
  max-inline-size: var(--custom-container-max-inline-size);
}

/*
 * Typografie 
 */
body, 
p, 
.paragraph {
  font-family: var(--font-family-base);
  font-size: var(--font-size-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-stretch: normal;
  font-style: normal;
  color: var(--color-secondary);
  line-height: var(--line-height-paragraph);
}
body main p{
  color: #000631;
}
p {
  text-wrap-style: pretty;
  max-inline-size: var(--max-inline-size-paragraph);

  &:is(.text-center) {
    text-align: center;
    margin-inline: auto;
  }
}

.fs-paragraph {
  font-size: var(--font-size-paragraph) !important;
}

.fw-paragraph {
  font-weight: var(--font-weight-paragraph) !important;
}

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

.text-normalize {
  text-transform: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--color-secondary);
  text-transform: uppercase;
  text-wrap-style: balance;
  margin-block-start: 0;
  margin-block-end: .5lh;

  &:is(.text-center) {
    text-align: center;
    margin-inline: auto;
  }
}
.news.news-single .news-backlink-wrap {   display: none; }
h1, 
.h1 {
  font-family: var(--font-family-h1);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  font-stretch: condensed;
  font-style: normal;
  line-height: var(--line-height-h1);
  max-inline-size: var(--max-inline-size-h1);
}

h2, 
.h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  font-stretch: condensed;
  font-style: normal;
  line-height: var(--line-height-h2);
  max-inline-size: var(--max-inline-size-h2);
}

h3, 
.h3 {
  font-family: var(--font-family-h3);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  font-stretch: condensed;
  font-style: normal;
  line-height: var(--line-height-h3);
  max-inline-size: var(--max-inline-size-h3);
}

h4, 
.h4 {
  font-family: var(--font-family-h4);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  font-stretch: condensed;
  font-style: normal;
  line-height: var(--line-height-h4);
  max-inline-size: var(--max-inline-size-h4);
}

h5, 
.h5 {
  font-family: var(--font-family-h5);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  font-stretch: condensed;
  font-style: normal;
  line-height: var(--line-height-h5);
  max-inline-size: var(--max-inline-size-h5);
}

h6, 
.h6 {
  font-family: var(--font-family-h6);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-h6);
  font-stretch: condensed;
  font-style: normal;
  line-height: var(--line-height-h6);
  max-inline-size: var(--max-inline-size-h6);
}


/* 
 * Hilfsklassen für Schriftgrößen und -stärken 
 */
.fs-1 {
  font-size: var(--font-size-h1) !important;
}

.fs-2 {
  font-size: var(--font-size-h2) !important;
}

.fs-3 {
  font-size: var(--font-size-h3) !important;
}

.fs-4 {
  font-size: var(--font-size-h4) !important;
}

.fs-5 {
  font-size: var(--font-size-h5) !important;
}

.fs-6 {
  font-size: var(--font-size-h6) !important;
}

.fw-1 {
  font-weight: var(--font-weight-h1) !important;
}

.fw-2 {
  font-weight: var(--font-weight-h2) !important;
}

.fw-3 {
  font-weight: var(--font-weight-h3) !important;
}

.fw-4 {
  font-weight: var(--font-weight-h4) !important;
}

.fw-5 {
  font-weight: var(--font-weight-h5) !important;
}

.fw-6 {
  font-weight: var(--font-weight-h6) !important;
}

a {
  &:not(.btn) {
    color: var(--font-color-links);
    text-decoration: none;
    
    &:is(:focus, :focus-visible) {
      color: var(--font-color-links-hover);
      text-decoration: underline;
    }
  } 
}

::selection {
  background-color: oklch(from var(--color-primary) l c h / 0.5);
}

button, input, select, textarea {
  color: var(--color-secondary);
}

input[type="checkbox"] {
  &:is(.form-check-input) {
    border-color: var(--color-secondary);
    border-radius: 0;
    box-shadow: none;
    margin-block: 0;

    &:is(:checked) {
      background-color: var(--color-secondary);
    }
  }
}

.form-check {
  input[type="checkbox"],
  input[type="radio"] {
    &:is(.form-check-input) {
      border-color: var(--color-tertiary);

      &:is(:checked) {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
      }
    }
  }

  input[type="checkbox"] {
    &:is(.form-check-input) {
      &:checked {
        background-image: var(--svg-icon-checkbox-checked-secondary);
        background-size: 50%;
      }
    }
  }

  input[type="radio"] {
    &:is(.form-check-input) {
      box-shadow: none;

      &:is(:checked) {
        background-image: var(--svg-icon-radio-checked-secondary);
        background-size: 50%;
      }
    }
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"] {
    &:is(.form-control) {
      border-color: var(--color-tertiary);
      border-radius: 0;
      box-shadow: none;
      margin-block: 0;
    }
  }
}

.form-control {
  &::placeholder {
    color: var(--color-secondary);
    opacity: 1;
    transition: 
      opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
  }

  &:is(:focus, :focus-visible) {
    box-shadow: none;;

    &::placeholder {
      opacity: .2;
    }
  }
}


/* Unordered Lists */
ul {
  list-style-type: disc;
}


/* Ordered Lists */
ol {
  --_svg-horizontal-offset: 2.25rem;
  --_svg-marker-size: .75rem;

  list-style-type: none;
  padding-inline-start: var(--_svg-horizontal-offset);

  li {
    position: relative;

    /* SVG als Marker */
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: calc(var(--_svg-horizontal-offset) * -1);

      display: inline-flex;
      width: var(--_svg-marker-size);
      height: var(--_svg-marker-size);

      background-image: var(--svg-icon-bullet-list-secondary);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

      --_svg-offset-x: calc(100% + (var(--_svg-marker-size) * -1));
      --_svg-offset-y: -50%;

      transform: translate(var(--_svg-offset-x), var(--_svg-offset-y));
    }
  }
}

.sticky-top {
  z-index: 100;
}

section {
  &:is(.company) {
    &:before {
      --_svg-horizontal-offset: .675rem;
    }
  }
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  :root {
    --svg-corner-medium-top-left-inline-size: 22rem;
    --svg-corner-long-inline-size: 92.5rem;
    --svg-separator-inline-size: 2.625rem;
    --svg-corner-l-shape-inline-size: 15rem;
  }

  section {
    &:is(.company) {
      &:before {
        --_svg-horizontal-offset: 1.325rem;
      }
    }

    &:is(.data-and-facts) {
      &:before {
        --svg-corner-medium-bottom-right-inline-size: 37rem;
      }
    }

    --svg-curve-inline-size: 93rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  section {
    &:is(.career-page-banner, .certificates-qualifications-banner) {
      position: relative;
  
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        
        display: block;
        inline-size: var(--svg-separator-inline-size);
        block-size: 100%;
        
        background-image: var(--svg-separator-long-vertical-white);
        background-repeat: repeat-y;
        background-position: center;
        background-size: 100%;
        
        translate: calc(var(--swiper-item-inline-size) - (var(--svg-separator-inline-size) / 2));
        pointer-events: none;
      }
    }

    &:is(.certificates-qualifications-banner) {
      &:before {
        z-index: 10;
      }
    }

    &:is(.career-page-banner) {
      &:before {
        z-index: 0;
      }
    }
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}


/*
 * Buttons 
 */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1.9rem;
  font-family: var(--font-family-headings-condensed);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  text-transform: uppercase;
  text-decoration: none;
  border-width: 2px;
  border-style: solid;
  border-radius: 3rem;
  padding-inline: 2.175rem 1.675rem;
  padding-block: .7rem .6rem;

  &:is(
    .btn-primary, 
    .btn-secondary, 
    .btn-blue, 
    .btn-yellow,
    .btn-outline-primary, 
    .btn-outline-secondary,
    .btn-outline-blue, 
    .btn-outline-yellow,
    .btn-inline-link,
    .btn-download-primary,
    .btn-download-secondary,
    .btn-download-white,
    .btn-upload-primary,
    .btn-inline-link-external-primary,
    .btn-inline-link-external-secondary,
    .btn-inline-link-external-white
  ) {
    &:after {
      content: "";
      display: inline-flex;
      aspect-ratio: var(--ratio-square);
      inline-size: 1rem;
      background-repeat: no-repeat;
      background-position: center right;
      transition: 
        all var(--transition-duration) var(--transition-timing) var(--transition-delay);
      translate: 0 0;
    }

    &:is(:active) {
      background-color: inherit;
      color: inherit;
      border-color: inherit;
    }

    &:is(:hover, :focus-visible) {
      text-decoration: none;

      &:after {
        translate: .25rem 0;
      }
    }
  }

  /* Button: Primär und Blau */
  &:is(.btn-primary, .btn-blue) {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-secondary);

    &:is(:hover, :active, :focus-visible) {
      background-color: transparent;
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    &:after {
      background-image: var(--svg-arrow-right-secondary);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        background-image: var(--svg-arrow-right-primary);
      }
    }
  }

  /* Button: Sekundär und Gelb */
  &:is(.btn-secondary, .btn-yellow) {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-primary);

    &:after {
      background-image: var(--svg-arrow-right-primary);
    }

    &:is(:active) {
      &:after {
        background-image: var(--svg-arrow-right-secondary);
      }
    }
  }

  /* Button Outline: Primär und Blau */
  &:is(.btn-outline-primary, .btn-outline-blue) {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);

    &:after {
      background-image: var(--svg-arrow-right-primary);
    }
  }

  /* Button Outline: Sekundär und Gelb */
  &:is(.btn-outline-secondary, .btn-outline-yellow) {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);

    &:after {
      background-image: var(--svg-arrow-right-secondary);
    }
  }

  /* Button Inline Link */
  &.btn-inline-link {
    background-color: transparent;
    border-color: transparent;
    padding: 0;
    gap: .5rem;
    font-size: var(--font-size-paragraph);
    font-weight: var(--font-weight-paragraph);
    border-color: transparent;

    &:after {
      inline-size: .75rem;
      background-image: var(--svg-arrow-right-secondary);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        background-image: var(--svg-arrow-right-secondary);
      }
    }
  }

  /* Button Plain */
  &:is(.btn-plain) {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background-color: inherit;
    text-decoration: none;
    border-radius: 0;
    border-color: transparent;
    padding-inline: 0;
    padding-block: 0;
  }

  &:is(
    .btn-download-primary, 
    .btn-download-secondary,
    .btn-download-white,
    .btn-upload-primary,
    .btn-inline-link-external-primary,
    .btn-inline-link-external-secondary,
    .btn-inline-link-external-white
  ) {
    font-size: var(--font-size-paragraph);
    font-weight: var(--font-weight-paragraph);
    text-transform: none;
    background-color: transparent;
    gap: 1.2rem;
    border-radius: 0;
    padding-inline: 0;
    padding-block: 0;
  }

  &:is(.btn-download-primary) {
    color: var(--color-primary);

    &:after {
      background-image: var(--svg-icon-download-primary);
    }
    
    &:is(:hover, :focus-visible) {
      color: var(--color-secondary);
      
      &:after {
        background-image: var(--svg-icon-download-primary-hover);
        translate: 0 0;
      }
    }
  }

  &:is(.btn-download-secondary) {
    color: var(--color-secondary);
    
    &:after {
      background-image: var(--svg-icon-download-secondary);
    }
    
    &:is(:hover, :focus-visible) {
      color: var(--color-tertiary);

      &:after {
        background-image: var(--svg-icon-download-secondary-hover);
        translate: 0 0;
      }
    }
  }

  &:is(.btn-download-white) {
    color: var(--color-white);

    &:after {
      background-image: var(--svg-icon-download-white);
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-primary);

      &:after {
        background-image: var(--svg-icon-download-white-hover);
        translate: 0 0;
      }
    }
  }

  &:is(.btn-upload-primary) {
    color: var(--color-primary);

    &:after {
      background-image: var(--svg-icon-upload-primary);
    }

    &:is(:hover, :focus-visible) {
      color: var(--color-secondary);

      &:after {
        background-image: var(--svg-icon-upload-secondary-hover);
        translate: 0 0;
      }
    }
  }

  &:is(.btn-inline-link-external-primary) {
    color: var(--color-primary);

    &:after {
      background-image: var(--svg-icon-external-secondary);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        background-image: var(--svg-icon-external-secondary);
        translate: .25rem -.25rem;
      }
    }
  }

  &:is(.btn-inline-link-external-secondary) {
    color: var(--color-secondary);

    &:after {
      background-image: var(--svg-icon-external-primary);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        background-image: var(--svg-icon-external-primary);
        translate: .25rem -.25rem;
      }
    }
  }

  &:is(.btn-inline-link-external-white) {
    color: var(--color-white);

    &:after {
      background-image: var(--svg-icon-external-primary);
    }

    &:is(:hover, :focus-visible) {
      &:after {
        background-image: var(--svg-icon-external-primary);
        translate: .25rem -.25rem;
      }
    }
  }
}

/* Rahmen */
.border-primary {
  border-color: var(--color-primary) !important;
}

.border-secondary {
  border-color: var(--color-secondary) !important;
}

.border-tertiary {
  border-color: var(--color-tertiary) !important;
}


/* 
 * Hilfsklassen 
 */
.bg-primary {
  background-color: var(--color-primary) !important;

  ::selection {
    background-color: oklch(from var(--color-tertiary) l c h / 0.5);
  }
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-tertiary {
  background-color: var(--color-tertiary) !important;
}

.bg-gray {
  background-color: var(--color-gray) !important;
}

.bg-gray-light {
  background-color: var(--color-gray-light) !important;
}

.bg-stripes {
  --_stripe-thickness: clamp(8rem, calc(20vw - 2rem), 16rem);
  --_stripe-spacing: clamp(8rem, calc(20vw - 2rem), 16rem);

  background-image: repeating-linear-gradient(
    45deg,
    oklch(from var(--color-black) l c h / .03) 0,
    oklch(from var(--color-black) l c h / .03) var(--_stripe-thickness),
    transparent var(--_stripe-thickness),
    transparent calc(var(--_stripe-thickness) + var(--_stripe-spacing))
  );
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  &:is(.bg-primary) {
    background-image: repeating-linear-gradient(
      45deg,
      oklch(from var(--color-primary) 80% 60% h / .2) 0,
      oklch(from var(--color-primary) 80% 60% h / .2) var(--_stripe-thickness),
      transparent var(--_stripe-thickness),
      transparent calc(var(--_stripe-thickness) + var(--_stripe-spacing))
    );
  }
}

.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-tertiary {
  color: var(--color-tertiary) !important;
}


/*
 * Seitenverhaltnis  
 */
.ratio-square {
  aspect-ratio: var(--ratio-square) !important;
}

.ratio-wide {
  aspect-ratio: var(--ratio-wide) !important;
}

.ratio-tall {
  aspect-ratio: var(--ratio-tall) !important;
}

.ratio-ultrawide {
  aspect-ratio: var(--ratio-ultrawide) !important;
}

.ratio-standard {
  aspect-ratio: var(--ratio-standard) !important;
}

.ratio-portrait {
  aspect-ratio: var(--ratio-portrait) !important;
}

.ratio-banner {
  aspect-ratio: var(--ratio-banner) !important;
}

.ratio-cinema {
  aspect-ratio: var(--ratio-cinema) !important;
}

.ratio-cinema-classic {
  aspect-ratio: var(--ratio-cinema-classic) !important;
}

.ratio-cinema-ultrawide {
  aspect-ratio: var(--ratio-cinema-ultrawide) !important;
}

.ratio-1-2 {
  aspect-ratio: var(--ratio-1-2) !important;
}

.ratio-2-1 {
  aspect-ratio: var(--ratio-2-1) !important;
}

.ratio-golden {
  aspect-ratio: var(--ratio-golden) !important;
}

.ratio-golden-inverse {
  aspect-ratio: var(--ratio-golden-inverse) !important;
}

.ratio-photo-standard {
  aspect-ratio: var(--ratio-photo-standard) !important;
}

.ratio-photo-portrait {
  aspect-ratio: var(--ratio-photo-portrait) !important;
}

.ratio-auto {
  aspect-ratio: var(--ratio-auto) !important;
}


/* 
 * Animationen 
 */
@keyframes fadeOut {
  to{
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeIn {
  to{
    opacity: 1;
    visibility: visible;
  }
}

@keyframes moveToTopLeft {
  to {
    left: 0;
    top: calc(var(--header-block-size) * .5);
    max-inline-size: var(--_max-media-size-end) ;
    transform: 
      translate(-.5rem, -50%);
  }
}

@keyframes enableWebsite {
  to {
    pointer-events: auto;
    max-height: initial;
    overflow-y: auto;
  }
}

@keyframes disableWebsite {
  to {
    pointer-events: none;
    max-height: 100vh;
    overflow-y: hidden;
  }
}

@keyframes enablePointerEvents {
  to {
    pointer-events: auto;
  }
}

@keyframes disablePointerEvents {
  to {
    pointer-events: none;
  }
}

@keyframes shrinkBackground {
  0% {
    transform: scale(1)
  }

  100% {
    transform: scale(0)
  }
}

@keyframes shrinkHistoryIntro {
  to {
    transform: scale(.25);
  }
}

@keyframes slideInFromTop {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUpAndDown50 {
  50% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideToInitialX {
  to {
    left: 0;
    transform: translateX(0);
  }
}

@keyframes slideToInitialY {
  to {
    left: 0;
    transform: translateY(0);
  }
}

@keyframes slideToInitial {
  to {
    left: 0;
    transform: translate(0, 0);
  }
}

@keyframes rotateTo0 {
  to {
    transform: rotate(0deg);
  }
}

@keyframes rotateTo180 {
  to {
    transform: rotate(180deg);
  }
}

@keyframes rotateToMinus180 {
  to {
    transform: rotate(-180deg);
  }
}

@keyframes centerBackgroundImage {
  to {
    background-position: center;
  }
}

@keyframes centerBackgroundImageX {
  to {
    background-position-x: center;
  }
}

@keyframes centerBackgroundImageY {
  to {
    background-position-y: center;
  }
}

@keyframes revealGameCardFront {
  0% {
    transform: rotateY(90deg) translateY(0) scale(1);
    box-shadow: 0 0 .5rem oklch(from var(--color-black) l c h / .125);
    opacity: 0.5;
  }

  60% {
    transform: rotateY(20deg) translateY(-1.5rem) scale(1.08);
    box-shadow: 0 1.5rem 2.5rem oklch(from var(--color-black) l c h / .075);
    opacity: 1;
  }

  100% {
    transform: rotateY(0deg) translateY(0) scale(1);
    box-shadow: 0 0 .5rem oklch(from var(--color-black) l c h / .125);
    opacity: 1;
  }
}

@keyframes concealGameCardFront {
  0% {
    transform: rotateY(90deg) translateY(0) scale(1);
    box-shadow: 0 0 .5rem oklch(from var(--color-black) l c h / .125);
    opacity: 0.5;
  }

  60% {
    transform: rotateY(20deg) translateY(-1.5rem) scale(1.08);
    box-shadow: 0 1.5rem 2.5rem oklch(from var(--color-black) l c h / .075);
    opacity: 1;
  }

  100% {
    transform: rotateY(0deg) translateY(0) scale(1);
    box-shadow: 0 0 .5rem oklch(from var(--color-black) l c h / .125);
    opacity: 1;
  }
}

@keyframes showGameCardSide {
  to {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@keyframes hideGameCardSide {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* 
 * Abstandshalter 
 */
.seperator-1,
.seperator-2,
.seperator-3,
.seperator-4,
.seperator-5 {
  display: block;
  inline-size: 100% !important;
  block-size: 0 !important;
  margin: 0 !important;
}

.seperator-1 {
  padding-block: .5rem;
}

.seperator-2 {
  padding-block: 1rem;
}

.seperator-3 {
  padding-block: 2rem;
}

.seperator-4 {
  padding-block: 3.5rem;
}

.seperator-5 {
  padding-block: 5rem;
}

/*
* Bootstrap Abstandsklassen erweitern *-6 bis *-10
*/
/* Margin Utilities */
.m-6  { margin: var(--bs-size-6) !important; }
.m-7  { margin: var(--bs-size-7) !important; }
.m-8  { margin: var(--bs-size-8) !important; }
.m-9  { margin: var(--bs-size-9) !important; }
.m-10 { margin: var(--bs-size-10) !important; }

.mt-6  { margin-block-start: var(--bs-size-6) !important; }
.mt-7  { margin-block-start: var(--bs-size-7) !important; }
.mt-8  { margin-block-start: var(--bs-size-8) !important; }
.mt-9  { margin-block-start: var(--bs-size-9) !important; }
.mt-10 { margin-block-start: var(--bs-size-10) !important; }

.mb-6  { margin-block-end: var(--bs-size-6) !important; }
.mb-7  { margin-block-end: var(--bs-size-7) !important; }
.mb-8  { margin-block-end: var(--bs-size-8) !important; }
.mb-9  { margin-block-end: var(--bs-size-9) !important; }
.mb-10 { margin-block-end: var(--bs-size-10) !important; }

.mx-6  { margin-inline: var(--bs-size-6) !important; }
.mx-7  { margin-inline: var(--bs-size-7) !important; }
.mx-8  { margin-inline: var(--bs-size-8) !important; }
.mx-9  { margin-inline: var(--bs-size-9) !important; }
.mx-10 { margin-inline: var(--bs-size-10) !important; }

.my-6  { margin-block: var(--bs-size-6) !important; }
.my-7  { margin-block: var(--bs-size-7) !important; }
.my-8  { margin-block: var(--bs-size-8) !important; }
.my-9  { margin-block: var(--bs-size-9) !important; }
.my-10 { margin-block: var(--bs-size-10) !important; }

.ms-6  { margin-inline-start: var(--bs-size-6) !important; }
.ms-7  { margin-inline-start: var(--bs-size-7) !important; }
.ms-8  { margin-inline-start: var(--bs-size-8) !important; }
.ms-9  { margin-inline-start: var(--bs-size-9) !important; }
.ms-10 { margin-inline-start: var(--bs-size-10) !important; }

.me-6  { margin-inline-end: var(--bs-size-6) !important; }
.me-7  { margin-inline-end: var(--bs-size-7) !important; }
.me-8  { margin-inline-end: var(--bs-size-8) !important; }
.me-9  { margin-inline-end: var(--bs-size-9) !important; }
.me-10 { margin-inline-end: var(--bs-size-10) !important; }


/* Padding Utilities */
.p-6  { padding: var(--bs-size-6) !important; }
.p-7  { padding: var(--bs-size-7) !important; }
.p-8  { padding: var(--bs-size-8) !important; }
.p-9  { padding: var(--bs-size-9) !important; }
.p-10 { padding: var(--bs-size-10) !important; }

.pt-6  { padding-block-start: var(--bs-size-6) !important; }
.pt-7  { padding-block-start: var(--bs-size-7) !important; }
.pt-8  { padding-block-start: var(--bs-size-8) !important; }
.pt-9  { padding-block-start: var(--bs-size-9) !important; }
.pt-10 { padding-block-start: var(--bs-size-10) !important; }

.pb-6  { padding-block-end: var(--bs-size-6) !important; }
.pb-7  { padding-block-end: var(--bs-size-7) !important; }
.pb-8  { padding-block-end: var(--bs-size-8) !important; }
.pb-9  { padding-block-end: var(--bs-size-9) !important; }
.pb-10 { padding-block-end: var(--bs-size-10) !important; }

.px-6  { padding-inline: var(--bs-size-6) !important; }
.px-7  { padding-inline: var(--bs-size-7) !important; }
.px-8  { padding-inline: var(--bs-size-8) !important; }
.px-9  { padding-inline: var(--bs-size-9) !important; }
.px-10 { padding-inline: var(--bs-size-10) !important; }

.py-6  { padding-block: var(--bs-size-6) !important; }
.py-7  { padding-block: var(--bs-size-7) !important; }
.py-8  { padding-block: var(--bs-size-8) !important; }
.py-9  { padding-block: var(--bs-size-9) !important; }
.py-10 { padding-block: var(--bs-size-10) !important; }

.ps-6  { padding-inline-start: var(--bs-size-6) !important; }
.ps-7  { padding-inline-start: var(--bs-size-7) !important; }
.ps-8  { padding-inline-start: var(--bs-size-8) !important; }
.ps-9  { padding-inline-start: var(--bs-size-9) !important; }
.ps-10 { padding-inline-start: var(--bs-size-10) !important; }

.pe-6  { padding-inline-end: var(--bs-size-6) !important; }
.pe-7  { padding-inline-end: var(--bs-size-7) !important; }
.pe-8  { padding-inline-end: var(--bs-size-8) !important; }
.pe-9  { padding-inline-end: var(--bs-size-9) !important; }
.pe-10 { padding-inline-end: var(--bs-size-10) !important; }


/* 
 * Header 
 */
header {
  /* Grid-Hintergrundfarbe */
  --_brand-grid-bg-color: var(--color-primary);

  /* Logo-Größe */
  --_grid-logo-size: 8rem;
  --_grid-logo-visibility: visible;

  /* Startpositionen */
  --_yellow-bg-translate-x-start: 100%;
  --_text-translate-x-start: -100%;
  --_text-opacity-start: 0;
  
  display: grid;
  position: relative;
  overflow: clip;
  z-index: 1000;
  
  * {
    pointer-events: none;
  }

  a,
  button {
    pointer-events: auto;
  }
  
  & > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }

  &:is(.blue, .bg-secondary) {
    .logo-container {
      img {
        outline: 1px solid var(--color-white);
      }
    }
  }
  
  section {
    display: flex;
    align-items: center;
    block-size: var(--header-block-size);
    
    &.fixed {
      position: fixed;
      top: 0;
      inline-size: 100%;
      z-index: 1000;

      .yellow-bg-container,
      .text-container {
        /* visibility: hidden; */
      }
    }

    a:has(> img) {
      aspect-ratio: var(--ratio-square);
      inline-size: 100%;
      block-size: auto;
    }
    
    &.static {
      --_brand-grid-bg-color: transparent;

      --_grid-logo-visibility: hidden;

      --_yellow-bg-translate-x-start: 0%;
      --_text-translate-x-start: 0%;
      --_text-opacity-start: 1;

      position: static;
      background-color: var(--color-primary);
      z-index: 1;
    }

    .logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      
      img {
        aspect-ratio: var(--ratio-square);
        inline-size: 100%;
        max-inline-size: var(--max-logo-size);
        block-size: auto;
      }
    }

    
    /* Grid: Wortbildmarke */
    .brand-grid-wrapper {
      .brand-grid {
        --_grid-h-offset: clamp(.5rem, calc(5vw - 1rem), 1rem);
        --_grid-v-offset: clamp(.5rem, calc(5vw - 1rem), 1rem);

        display: grid;
        inline-size: fit-content;
        translate: calc(var(--_grid-h-offset) * -1) 0;
        grid-template-columns: var(--_grid-h-offset) var(--max-logo-size) auto;
        grid-template-rows: var(--_grid-v-offset) auto var(--_grid-v-offset);
        grid-template-areas:
          ". logo ."
          "yellow-bg-container logo text"
          ". logo .";
        
        /*
         * Container-Definition 
         */
        .yellow-bg-container,
        .text-container {
          overflow: hidden;
        }
    
        /* Spalte 1: Gelber Hintergrund */
        .yellow-bg-container {
          grid-area: yellow-bg-container;
        }
    
        /* Spalte 2: Logo */
        .logo-container {
          grid-area: logo;
          visibility: var(--_grid-logo-visibility);
        }
    
        /* Spalte 3: Text */
        .text-container {
          grid-area: text;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-transform: uppercase;
        }
        

        /*
         * Inhaltsdefinition 
         */
        .yellow-bg-item,
        .text-item {
          background-color: var(--_brand-grid-bg-color);
          transition: 
            all var(--transition-duration) var(--transition-timing) var(--transition-delay);
        }

        .yellow-bg-item {
          inline-size: 100%;
          block-size: 100%;
          translate: var(--_yellow-bg-translate-x-start) 0;
        }

        .text-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          translate: var(--_text-translate-x-start) 0;
          padding-inline: clamp(.75rem, calc(5vw - 1rem), 3rem);
          
          .title,
          .slogan {
            --transition-duration: 500ms;
            --transition-delay: 400ms;

            inline-size: fit-content;
            font-family: var(--font-family-headings-condensed);
            font-size: clamp(.6rem, calc(5vw - 1rem), 2.25rem);
            font-weight: 700;
            line-height: 1.2;
            opacity: var(--_text-opacity-start);
            transition: 
              opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
          }
        }
    
   /*     &:has(.logo-container:is(:hover, :focus-visible)) {
          .yellow-bg-item,
          .text-item {
            translate: 0 0;

            .title,
            .slogan {
              opacity: 1;
            }
          }
        }*/
      }
    }
  }
}


body:has(.navbar-transition) .brand-grid:has(.logo-container:is(:hover, :focus-visible)) {
          .yellow-bg-item,
          .text-item {
            translate: 0 0;

            .title,
            .slogan {
              opacity: 1;
            }
          }
        }

/* 
 * HTML & Body
 */
html {
  /* Wenn das Fullscreen-Menü oder das Excavator-Menü geöffnet ist, Scrollen verhindern */
  &:has(body .fullscreen-menu.show, body .excavator.expanded) {
    overflow: hidden;
    block-size: 100vh;
    max-block-size: 100vh;

    body {
      main {
        animation: 
          disableWebsite var(--transition-duration) var(--transition-timing) var(--animation-fill-mode);
        pointer-events: none;
      }
    }
  }

  &:has( body .excavator.expanded) {
    body {
      main {
        position: relative;
        z-index: 2;
      }

      footer {
        --transition-duration: 1500ms;

        margin-block-start: -100%;

        transition: 
          margin-block-start var(--transition-duration) var(--transition-timing) var(--transition-delay);
      }
    }
  }
}

/*
* Body
*/
body {
  container-name: body-container;
  container-type: size;
  
  /* Wenn das Fullscreen-Menü geöffnet ist, Header-Text ausblenden */
  &:has(.fullscreen-menu.show) {
    /* Scrollen verhindern */
    max-block-size: 100vh;
    overflow: hidden;

    header {
      section {
        &:is(.static) {
          &:before {
            display: none;
          }

          .text-item {
            opacity: 0;
          }
        }
      }
    }

    @container body-container ( width < 135rem ) {
      .map-marker {
        animation: 
          fadeOut var(--transition-duration) var(--transition-timing) var(--transition-delay) var(--animation-fill-mode);
      }
    }
  }

  /* &:not(:has(.swiper)) { */
  &:has(section:is(.home-swiper, .career-page-banner, .certificates-qualifications-banner)) {
    header {
      container-name: header;
      container-type: inline-size;
      
      section {
        &:is(.static) {
          @container header ( width >= 75rem ) {
            &:before {
              --_svg-horizontal-offset: 1.625rem;
              --_svg-vertical-offset: .75rem;

              content: "";
              position: absolute;
              top: 0;
              left: 0;
      
              aspect-ratio: var(--ratio-banner);
              inline-size: var(--svg-corner-medium-top-left-inline-size);
              block-size: auto;
              
              background-image: var(--svg-corner-medium-top-left-white);
              background-repeat: no-repeat;
              background-position: center;

              translate: calc(var(--swiper-item-inline-size) - var(--_svg-horizontal-offset, 1.625rem)) calc(50% + var(--_svg-vertical-offset, .5rem));
              pointer-events: none;
              z-index: 0;
            }


            &:after {
              content: "";
              position: absolute;
              top: 0;
              right: 0;
              
              display: block;
              inline-size: 3rem;
              block-size: 100%;
              
              background-color: var(--color-primary);
            }
          }
        }
      }
    }
  }
}


/* 
 * Footer 
 */
footer {
  background-color: var(--color-secondary);
 /* min-block-size: 20rem;*/
  padding-block: 4rem;

  * {
    &:not(.btn *) {
      color: var(--color-white);
    }
  }

  .footer-navigation {
    container-name: footer-navigation;
    container-type: inline-size;

    border-bottom: 1px solid var(--color-white);
    padding-block-end: 1rem;
    margin-block-end: clamp(4rem, calc(10vw - 1rem), 7rem);

    ul {
      display: grid;
      grid-template-columns: auto;
      justify-content: space-between;

      @container footer-navigation ( width >= 20rem ) {
        grid-template-columns: repeat(2, auto);
      }
      
      @container footer-navigation ( width >= 36rem ) {
        grid-template-columns: repeat(3, auto);
      }
      
      @container footer-navigation ( width >= 62rem ) {
        grid-template-columns: repeat(6, auto);
      }

      a {
        --font-size-nav-item: clamp(1.2rem, calc(5vw - 1rem), 1.45rem);

        font-size: var(--font-size-nav-item);
        color: var(--color-white);
        padding-inline: 0;

        &:is(:hover, :focus-visible) {
          color: var(--color-primary);
        }
      }
    }
  }

  .career-container {
    display: inline-block;
    inline-size: min-content;
    min-inline-size: min(25rem, 100%);
    margin-inline: auto;
    
    .btn {
      inline-size: 100%;
      color: var(--color-secondary);
      font-size: var(--font-size-paragraph);
      font-weight: 300;
      border-radius: 5rem;
      padding-block: 2.5rem;
      padding-inline: 2.5rem;

      &:after {
        display: none;
      }

      .btn-text-2 {
        display: none;
      }

      &:is(:hover, :focus-visible) {
        background-color: var(--color-blue-dark);
        border-color: var(--color-blue-dark);
        color: var(--color-white);

        .btn-text-1 {
          display: none;
        }

        .btn-text-2 {
          display: inline;
        }
      }
    }
  }
}


/* 
 * Button: Menü 
 */
.menu-btn,
.menu-btn-placeholder {
  display: grid;
  inline-size: 4.5rem;
  aspect-ratio: var(--ratio-square);
  place-items: center;
  background-color: var(--color-primary);
  border: none;
  cursor: pointer;
  padding-inline: .5rem;
  padding-block: .5rem;
  
  .menu-btn-inner {
    --stripe-thickness: 10px;
    --stripe-spacing: 5px;

    display: flex;
    inline-size: 2.5rem;
    flex-direction: column;
    align-items: center;
    row-gap: var(--stripe-spacing);
    background-color: transparent;
    margin: 0;
    padding: 0;
  
    /* Hamburger-Linien */
    .menu-line {
      background-color: var(--color-secondary);
      inline-size: 2.5rem;
      block-size: var(--stripe-thickness);
      transform-origin: center right;
      transition: 
        all var(--transition-duration) var(--transition-timing);

      /* Initialer Zustand */
      &:nth-child(2) {
        transform: scaleX(.7);
      }
    }
  
    .menu-title {
      color: var(--color-secondary);
      font-size: .8rem;
      line-height: 1.2;
      text-transform: uppercase;
      max-block-size: var(--stripe-thickness);
    }
  }

  /* Hover-Zustand */
  &:hover {
    .menu-line {
      &:nth-child(2) {
        transform: scaleX(1);
      }
    }
  }

  /* Aktiver Zustand */
  &:is(.active) {
    .menu-line {
      transition:
        all var(--transition-duration) var(--transition-timing) var(--transition-delay);
    
      &:first-child {
        transform: rotate(-45deg) translate(0, calc(-75% - .1rem))
      }

      &:nth-child(2) {
        transform: rotate(45deg) translate(0, calc(75% + .1rem))
      }
    }
  }

  /* Inaktiver Zustand */
  &:not(.active) {
    .menu-line {
      &:nth-child(2) {
        transform: scaleX(.7);
      }
    }
  }
}

/* 
 * Sections 
 */
section {
  /* Splashscreen Animation */
  &:is(.splashscreen) {
    --_padding-block: 1rem;
    --_max-media-size-start: 30rem;
    --_max-media-size-end: var(--max-logo-size);

    --animation-duration: 1000ms;
    --animation-delay: 7000ms;

    position: fixed;
    top: 0;
    inset: 0 0 0 0;

    background-color: var(--color-primary);
    opacity: 1;
    visibility: visible;
    z-index: 1001;
    pointer-events: auto;
    cursor: pointer;
    animation: 
      fadeOut var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-direction) var(--animation-fill-mode);

    &:is(.skipped) {
      display: none;
      cursor: default;
    }

    div {
      block-size: 100%;
    }

    .media-container-outer {
      display: grid;
      inline-size: 100%;
      block-size: 100%;
      
      .media-container-inner {
        --animation-delay: 5000ms;

        position: relative;
        left: 50%;
        top: 50%;

        display: grid;
        justify-items: center;
        
        aspect-ratio: var(--ratio-square);
        inline-size: 100%;
        max-inline-size: var(--_max-media-size-start);
        block-size: fit-content;

        transform: translate(-50%, -50%);
        animation: 
          moveToTopLeft var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-direction) var(--animation-fill-mode);
        
        & > * {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
        }
  
        video,
        img {
          display: flex;
          aspect-ratio: var(--ratio-square);
          max-inline-size: 100%;
          max-block-size: fit-content;
          object-fit: cover;
        }

        video {
          --animation-delay: 3500ms;

          opacity: 1;
          visibility: visible;
          animation: 
            fadeOut var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-direction) var(--animation-fill-mode);
          pointer-events: none;
        }
      }
    }
  }


  &:is(.fullscreen-menu) {
    position: fixed;
    inset: 0 0 0 0;

    display: flex;
    align-items: stretch;
    background-color: var(--color-primary);
    
    transition: 
      transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
    transform: translate(100%, -100%) scale(.5);
    
    z-index: 100;

    .container {
      --_margin-block-start: calc(var(--header-block-size) + clamp(1rem, calc(5vw - 2rem), 2rem));
      --_margin-block-end: clamp(1rem, calc(5vw - 1rem), 2rem);

      margin-block: var(--_margin-block-start) var(--_margin-block-end);
      overflow-y: auto;
      overflow-x: clip;

      & > * {
        min-block-size: 24rem;
      }
    }

    nav,
    ul {
      list-style-type: none;
      margin-block: 0;
      padding-inline: 0;
    }

    .fullscreen-menu-primary {
      container-name: primary-menu;
      container-type: inline-size;

      ul {
        /*Mobile Attributes */
        --_flex-direction: column;
        --_padding-inline-start: 1ch;
        --_padding-block-start: .5lh;
        --_padding-block-end: 0;
        --_min-block-size-level-1-a: unset;
        --_display-after: none;
        --_display-dropdown-arrow: inline-flex;

        --_position-level-1: static;
        --_position-level-2: relative;
        --_position-li: relative;
        --_display-level-2: none;
        --_opacity-level-2: 0;

        --_target-font-size-level-2: calc(5vw - 2rem);
        
        /* Desktop Attributes */
        @container primary-menu ( width >= 62rem ) {
          --_flex-direction: row;
          --_padding-inline-start: 0;
          --_padding-block-start: 4lh;
          --_padding-block-end: 1lh;
          --_min-block-size-level-1-a: 4rem;
          --_display-after: inline-flex;
          --_display-dropdown-arrow: none;

          --_position-level-1: relative;
          --_position-level-2: absolute;
          --_position-li: relative;
          --_display-level-2: flex;
          --_opacity-level-2: 0;

          --_target-font-size-level-2: min(calc(5vw - 2rem), calc(5vh - 1rem));
        }

        .dropdown-arrow {
          position: relative;
          display: var(--_display-dropdown-arrow);
          inline-size: 1lh;
          aspect-ratio: var(--ratio-square);
          align-items: center;
          justify-content: center;
          transition: 
            transform var(--transition-duration, 250ms) var(--transition-timing, ease-in-out) var(--transition-delay, 0);
          transform: rotate(90deg);
          z-index: 2;
        }

        li {
          position: var(--_position-li);
          display: flex;
          flex-direction: var(--_flex-direction);
          background-color: var(--color-primary);
          
          a {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            font-family: var(--font-family-headings-condensed);
            font-weight: 700;

            overflow-x: clip;
            z-index: 1;

            &:after {
              will-change: transform;
              content: "";
              
              position: absolute;
              left: 0;
              bottom: 0;
              
              display: var(--_display-after);
              inline-size: 0;
              block-size: 2px;
              background-color: var(--color-secondary);
              transition: 
                transform var(--transition-duration, 250ms) var(--transition-timing, ease-in-out) var(--transition-delay, 0);
              transform: translate(calc((100% + 1rem) * -1), 0);
            }
            
            &:is(:hover, :focus-visible) {
              &:after {
                transform: translate(0, 0);
              }
            }
          }
        }

        &.level-1 {
          position: var(--_position-level-1);
          display: flex;
          flex-direction: var(--_flex-direction);
          column-gap: 2rem;
          row-gap: 1rem;
          justify-content: space-between;

          & > li {
            & > a {
              min-block-size: var(--_min-block-size-level-1-a, unset);
              
              font-size: clamp(2rem, calc(3vw - 1rem), 2.5rem);
              text-transform: uppercase;
              z-index: 2;

              &:after {
                inline-size: 100%;
                border-bottom: 3px solid var(--color-secondary);
              }
            }
            
            &:has(.open) {
              .dropdown-arrow {
                transform: rotate(-90deg);
              }
            }
          }
        }

        &.level-2 {
          position: var(--_position-level-2);
          left: 0;
          inline-size: max-content;
          row-gap: .5rem;

          background-color: var(--color-primary);
          opacity: var(--_opacity-level-2, 0);
          
          transition: 
            opacity var(--transition-duration, 250ms) var(--transition-timing, ease-in-out) var(--transition-delay, 0);
          
          padding-inline-start: var(--_padding-inline-start, 0);
          padding-block-start: var(--_padding-block-start, 0);
          padding-block-end: var(--_padding-block-end, 0);
          
          &:is(.open) {
            display: flex;
            opacity: 1;
          }

          li {
            overflow-x: clip;
            
            a {
              flex: 0;
              font-size: clamp(.8rem, var(--_target-font-size-level-2), 1.5rem);
              font-weight: 300;
              text-transform: uppercase;
  
              &:after {
                inline-size: 100%;
              }
            }
          }
        }

        @container primary-menu ( width < 62rem ) {
          &.level-2 {
            display: var(--_display-level-2);
            
            flex-direction: column;
            align-items: flex-start;
            
            opacity: var(--_opacity-level-2, 0);
          }
        }

        @container primary-menu ( width >= 62rem ) {
          &.level-2 {
            display: block;
            column-gap: 4rem;
            column-rule: 1px solid var(--color-secondary);
            pointer-events: none;

            --_columns: 1;

            /* Wenn mehr als 6 Li-Elemente */
            &:has( > li:nth-child(n + 6)) {
              --_columns: 2;
            }

            columns: var(--_columns);

            li {
              display: block;
              inline-size: fit-content;
            }

            a {
              flex: 0 0 auto;
              background-color: transparent;
              background-image: none;
              white-space: nowrap;
            }
          }
        }

        &.level-1 {
          & > li {
            &:is(:hover, :focus-visible) {
              .level-2 {
                opacity: 1;
                z-index: 1;
                pointer-events: auto;

                &:before {
                  content: "";
                  position: fixed;
                  display: block;
                  inset: 0 0 20% 0;
                }
              }
            }
          }
        }
      }

      a {
        font-size: clamp(1.2rem, calc(5vw - 2rem), 3rem);
        font-weight: 300;

        &:is(:active, :focus) {
          color: var(--color-secondary);
          text-decoration: none;
        }
      }
    }

    .fullscreen-contact {
      container-name: contact-menu;
      container-type: inline-size;
      block-size: 100%;

      ul {
        /*Mobile Attributes */
        --_flex-direction: column;
        --_align-items: flex-start;
        --_justify-content: flex-end;
        --_item-border-right: none;
        --_padding-inline: 0;

        /* Desktop Attributes */
        @container contact-menu ( width >= 36rem ) {
          --_flex-direction: row;
          --_align-items: flex-end;
          --_justify-content: flex-start;
          --_item-border-right: 2px solid oklch(from var(--color-primary) 82% 60% h);
          --_padding-inline: 2rem;
        }

        display: flex;
        flex-direction: var(--_flex-direction);
        justify-content: var(--_justify-content);
        align-items: var(--_align-items);
        row-gap: 0;
        block-size: 100%;
        padding-inline: 0;
        margin-block-start: 0;
        margin-block-end: 0;

        li {
          flex-shrink: 0;
          
          &:not(:last-child) {
            border-right: var(--_item-border-right, none);
          }
        }
      }

      a {
        font-weight: 300;
        padding-inline: var(--_padding-inline, 0);
      }
    }

    .fullscreen-menu-secondary {
      ul {
        display: flex;
        flex-direction: column;
        row-gap: .5rem;
        align-items: var(--_align-items, flex-end);

        a {
          font-weight: 300;
        }
      }
    }

    a {
      color: var(--color-secondary);
      font-size: clamp(1rem, calc(5vw - 2rem), 1.5rem);
      text-decoration: none;

      &:is(.btn-arrow) {
        display: inline-flex;
        align-items: baseline;
        column-gap: .5rem;

        &:after {
          content: "";
          display: inline-flex;
          aspect-ratio: var(--ratio-square);
          inline-size: 1rem;
          background-repeat: no-repeat;
          background-position: center right;
          transition: 
            all var(--transition-duration, 250ms) ease-in-out;
          translate: 0 .1rem;
          background-image: var(--svg-arrow-right-secondary);
        }

        &:is(:hover, :focus-visible) {
          &:after {
            transform: translateX(.25rem);
            background-image: var(--svg-arrow-right-secondary);
          }
        }
      }
    }

    &:is(.show) {
      transform: 
        translate(0, 0) 
        scale(1);
    }
  }


  /* Swiper im Kopfbereich der Startseite */
  &:is(.home-swiper) {
    position: relative;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      
      display: block;
      inline-size: var(--svg-separator-inline-size);
      block-size: 100%;
      
      background-image: var(--svg-separator-long-vertical-primary);
      background-repeat: repeat-y;
      background-position: center;
      background-size: 100%;
      
      translate: calc(var(--swiper-item-inline-size) - (var(--svg-separator-inline-size) / 2));
      pointer-events: none;
      z-index: 10;
    }

    /* Swiper */
    .swiper {
      max-inline-size: var(--uhd-max-inline-size);
      margin-inline: auto;

      /* Bootstrap Carousel */
      .swiper-wrapper {
        display: flex;
        aspect-ratio: var(--ratio-cinema-classic);
        block-size: var(--swiper-item-block-size);
        align-items: center;

        .swiper-slide {
          block-size: var(--swiper-item-block-size);
          inline-size: var(--swiper-item-inline-size);

          &:has(.swiper-item-inner) {
            .swiper-item-inner {
              display: grid;

              & > * {
                grid-column: 1 / -1;
                grid-row: 1 / -1;
                z-index: 0;
              }

              .swiper-text-layer {
                block-size: var(--swiper-item-block-size);
                align-content: flex-end;
                place-self: self-start;
              /* background-color: oklch(0 0 0 / 0.25);*/
                padding-inline: clamp(1.25rem, calc(5vw - 1rem), 2.625rem);
                padding-block: 3rem;

                h2, h3 {
                  color: var(--color-white);
                }

                h2 {
                  font-weight: 300;

                  &.underline-primary {
                    display: inline-block;
                    
                    &:before {
                      content: "";
                      display: inline-block;
                      width: 100%;
                      border-bottom: 2px solid var(--color-primary);
                      translate: 0 calc(1lh + .5rem);
                    }
                  }
                }

                h3 {
                  max-inline-size: 20ch;
                  font-size: clamp(2.5rem, calc(10vw - 1rem), 5.325rem);
                  line-height: 1.1;
                  font-weight: 400;
                }
              }
            }
          }
        }

        video, 
        img {
          inline-size: 100%;
          block-size: 100%;
          object-fit: cover;
          object-position: center;
          background-color: var(--color-black);
        }
      }

      .swiper-button-prev,
      .swiper-button-next {
        top: 0;
        inline-size: 2.625rem;
        block-size: 100%;
        opacity: 0;
        transition: 
          opacity var(--transition-duration) var(--transition-timing) var(--transition-delay),
          backdrop-filter var(--transition-duration) var(--transition-timing) var(--transition-delay);
        margin: 0;

        .swiper-navigation-icon {
          color: var(--color-white);
          max-inline-size: 1rem;
        }

        &:is(:hover, :focus-visible) {
          opacity: 1;
          backdrop-filter: blur(.25rem);
        }
      }

      .swiper-button-prev {
        left: 0
      }

      .swiper-button-next {
        right: 0
      }
    }
  }

  /* Navigation */
  &:is(.navigation) {
    /* Main Navigation */
    &.main-navigation {
      position: relative;

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        
        display: block;
        inline-size: var(--svg-separator-inline-size);
        block-size: 100%;
        
        background-image: var(--svg-separator-long-vertical-white);
        background-repeat: repeat-y;
        background-position: center;
        background-size: 100%;
        
        translate: calc(var(--swiper-item-inline-size) - (var(--svg-separator-inline-size) / 2));
        z-index: 10;
      }

      li {
        a {
          --bs-nav-link-color: var(--color-primary);
          --bs-nav-link-hover-color: var(--color-white);

          display: inline-flex;
          align-items: center;
          min-block-size: var(--main-nav-item-min-block-size);
          
          font-family: var(--font-family-headings-condensed);
          font-size: var(--font-size-nav-item);
          font-weight: 400;
          
          padding-block: 0;
        }

        &:first-child {
          a {
            padding-inline-start: 0;
          }
        }
        
        &:last-child {
          a {
            padding-inline-end: 0;
          }
        }
      }
    }
  }


  /* Section: Unternehmen */
  &:is(.company) {
    --_svg-corner-vertical-offset: 6rem;
    
    --_content-block-size: 18lh;
    --_content-margin-block-end: 4rem;

    /*--font-size-h3: var(--font-size-h3); wäre leer! */
    --_max-lines-h3: 2;

    --font-size-paragraph: var(--font-size-h6);
    --_max-lines-paragraph: 4;

    container-name: company;
    container-type: inline-size;
    
    position: relative;

    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;

      display: block;
      background-size: 100%;

      pointer-events: none;
      z-index: 0;
    }

    /* Breakpoint: lg */
    @container company ( width < 62rem ) {
      &:before,
      &:after {
        --_svg-corner-vertical-offset: 0rem;
      }

      .text-content-container {
        --_content-block-size: 14lh;
        --_content-margin-block-end: 5rem;
      }

      h3 {
        --font-size-h3: 2.5rem;
        --_max-lines-h3: 3;
      }

      p {
        --font-size-paragraph: 1.125rem;
        --_max-lines-paragraph: 6;
      }
    }

    /* Breakpoint: md */
    @container company ( width < 48rem ) {
      &:before,
      &:after {
        --_svg-corner-vertical-offset: 15rem;
      }

      .text-content-container {
        --_content-block-size: 12lh;
        --_content-margin-block-end: 5rem;
      }
    }

    /* Breakpoint: sm */
    @container company ( width < 36rem ) {
      &:before,
      &:after {
        --_svg-corner-vertical-offset: 12rem;
      }

      .text-content-container {
        --_content-block-size: 10lh;
        --_content-margin-block-end: 5rem;
      }

      h3 {
        --font-size-h3: 1.6rem;
        --_max-lines-h3: 5;
      }

      p {
        --font-size-paragraph: .875rem;
        --_max-lines-paragraph: 6;
      }
    }

    &:after {
      inline-size: var(--svg-separator-inline-size);
      block-size: var(--_svg-corner-vertical-offset);

      background-image: var(--svg-separator-long-vertical-white);
      background-repeat: repeat-y;
      background-position: center;

      translate: calc(var(--swiper-item-inline-size) - (var(--svg-separator-inline-size) / 2)) 0;
    }
    
    &:before {
      inline-size: var(--svg-corner-long-inline-size);
      block-size: auto;
      aspect-ratio: var(--ratio-cinema-ultrawide);

      background-image: var(--svg-corner-long-bottom-right-white);
      background-repeat: no-repeat;
      background-position: center bottom;

      translate: calc(var(--swiper-item-inline-size) - (var(--svg-corner-long-inline-size) - var(--_svg-horizontal-offset, 1.325rem))) var(--_svg-corner-vertical-offset, 0rem);
    }

    .text-content-container {
      block-size: var(--_content-block-size);
      margin-block-end: var(--_content-margin-block-end);
    }

    h3 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: var(--_max-lines-h3);
      font-size: var(--font-size-h3);
      font-weight: var(--font-weight-h3);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    p {
      --font-size-paragraph: clamp(1.2rem, calc(5vw - 1rem), 1.9rem);
      --font-weight-paragraph: 600;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: var(--_max-lines-paragraph);
      font-size: var(--font-size-paragraph);
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }


  /* Section: Leistungen */
  &:is(.services) {
    /* Grid Layout */
    .grid-container {
      /* Services Grid */
      .services-grid {
        --_min-item-size: min(20rem, 100%);
      
        grid-template-columns: repeat(auto-fill, minmax(var(--_min-item-size), 1fr));
        column-gap: 1rem;
        row-gap: 3rem;
      
        .grid-item {
          article {
            display: flex;
            block-size: 100%;
            flex-direction: column;
            justify-content: flex-end;
            row-gap: 1rem;
      
            .media-container-inner {
              overflow: hidden;
      
              img {
                aspect-ratio: var(--ratio-photo-standard);
                inline-size: 100%;
                block-size: 100%;
                object-fit: cover;
                transition: 
                  transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
              }
            }
        
            .article-title {
              display: flex;
              align-items: flex-end;
              justify-content: space-between;
              column-gap: .5rem;
              flex-wrap: nowrap;
              color: var(--color-secondary);
              font-size: 2rem;
              line-height:1;
              text-transform: uppercase;
        
              &:after {
                content: "";
                display: inline-flex;
                aspect-ratio: var(--ratio-square);
                inline-size: 2rem;
                background-repeat: no-repeat;
                background-position: center right;
                transition:
                  all var(--transition-duration, 250ms) ease-in-out;
                translate: 0 -.5rem;
                background-image: var(--svg-arrow-right-secondary);
              }
            }
      
            .btn {
              font-size: 1rem;
              align-self: center;
            }
          }
      
          &:is(:hover) {
            img {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }

  /* Section: Karriere */
  &:is(.career) {
    container-name: career-section;
    container-type: inline-size;

    .btn {
      @container career-section ( width < 36rem ) {
        font-size: clamp(1rem, calc(5vw - 1rem), 1.25rem);
        column-gap: .5rem;
        padding-inline: 1rem;
        padding-block: .5rem;
      }
    }
  }

  /* Section: Qualifikationen */
  &:is(.qualifications) {
    .grid-container {
      container-name: qualifications-grid;
      container-type: inline-size;

      /* Qualifications Grid */
      .qualifications-grid {
        --_min-item-size: min(4rem, 100%);

        @container qualifications-grid ( width >= 36rem ) {
          --_min-item-size: min(8rem, 100%);
        }
      
        grid-template-columns: repeat(auto-fill, minmax(var(--_min-item-size), 1fr));
        place-items: center;
        column-gap: 7rem;
        row-gap: 3rem;
      
        .grid-item {
          block-size: 8.5rem;
          aspect-ratio: var(--ratio-square);
          object-fit: contain;
        }
      }
    }
  }

  /* Section: Standorte */
  &:is(.locations) {
    .grid-container {
      container-name: locations-grid;
      container-type: inline-size;

      /* News Grid */
      &:has(> .news-grid) {
        .news-grid {
          --_max-grid-size: 95rem;
          --_min-grid-size: 95rem;
          --_max-grid-columns: 3;
          --_gap-size: 2rem;

          --_max-first-item-inline-size: 35.35rem;
          --_first-item-block-size: 100%;
          --_ratio-first-item: auto;

          max-inline-size: var(--_max-grid-size);
          min-block-size: var(--_min-grid-size);
          grid-template-areas: 
            "item-1 item-1 item-1"
            "item-2 item-3 item-4"
            "item-2 item-5 item-5";
          grid-auto-columns: 1fr;
          grid-auto-rows: 1fr;
          column-gap: 2rem;
          row-gap: 2rem;
          place-items: stretch;
          margin-inline: auto;

          @container locations-grid ( width < 65rem ) {
            --_max-grid-size: calc(100vw - var(--bs-gutter-x) * 2);
            --_min-grid-size: auto;
            --_max-grid-columns: 2;
            --_gap-size: 1rem;
      
            grid-template-areas: 
              "item-1 item-1"
              "item-2 item-3"
              "item-2 item-4"
              "item-5 item-5";
          }

          @container locations-grid ( width < 62rem ) {
            --_max-grid-size: calc(100vw - var(--bs-gutter-x) * 2);
            --_min-grid-size: auto;
            --_max-grid-columns: 1;
            --_gap-size: 1rem;

            --_max-first-item-inline-size: unset;
            --_first-item-block-size: 100%;
            --_ratio-first-item: unset;

            grid-template-areas: 
              "item-1"
              "item-2"
              "item-3"
              "item-4"
              "item-5";
          }
    
          .grid-item {
            --_max-text-lines: 5;

            display: grid;

            &:has(a) {
              cursor: pointer;
            }

            .grid-item-outer {
              display: grid;
              inline-size: 100%;
              block-size: 100%;
      
              & > * {
                grid-column: 1 / -1;
                grid-row: 1 / -1;
              }
      
              & > img {
                inline-size: 100%;
                block-size: 100%;
                object-fit: cover;
                object-position: center;
                z-index: 0;
              }
            }
    
            .grid-item-inner {
              display: grid;
              inline-size: 100%;
              block-size: 100%;
              padding-inline: 1.25rem;
              padding-block: 1.25rem;

              a {
                z-index: 1;
              }
            }
    
            .text-box {
              --_max-text-box-size: calc(var(--_max-grid-size) / var(--_max-grid-columns) - (var(--_gap-size) * (var(--_max-grid-columns) - 1)));

              max-inline-size: var(--_max-text-box-size);
              aspect-ratio: var(--ratio-square);
              object-fit: contain;
              padding-inline: 2rem;
              padding-block: 2rem;

              .meta-info {
                span {
                  font-size: .935rem;
                }
              }
    
              & > *:last-child {
                margin-block-end: 0;
              }
            }
    
            img {
                           aspect-ratio: inherit;
              height: auto;
              width: auto;
              min-height: 100%;
              min-width: 100%;
              object-fit: cover;
            }
            
            &:is(.grid-item-1) { 
              grid-area: item-1; 
    
              .grid-item-inner {
                place-items: center;
                justify-items: flex-end;
    
                .text-box {
                  background-color: var(--bs-secondary);
                  max-inline-size: var(--_max-first-item-inline-size);
                  block-size: var(--_first-item-block-size);
                  aspect-ratio: var(--_ratio-first-item);
    
                  * {
                    color: var(--bs-primary);
                  }
                }
              }
            }
    
            &:is(.grid-item-2) { 
              grid-area: item-2;
    
              .grid-item-inner {
                place-items: flex-end;
                justify-items: center;
    
                .text-box {
                  background-color: var(--bs-secondary);
    
                  * {
                    color: var(--bs-primary);
                  }
                }
              }
            }
    
            &:is(.grid-item-3) { 
              --_max-text-lines: 4;

              grid-area: item-3;

              img {
                display: none;
              }

              .grid-item-inner {
                position: relative;

                &:before,
                &:after {
                  content: "";
                  position: absolute;
                  inline-size: 9rem;
                  aspect-ratio: var(--ratio-square);
                  background-repeat: no-repeat;
                  background-position: center left;
                  pointer-events: none;
                  z-index: 10;
                }
                
                /* Corner top left */
                &:before {
                  top: 0;
                  left: 0;
                  background-image: var(--svg-corner-short-top-left-primary);
                }

                /* Corner bottom right */
                &:after {
                  bottom: 0;
                  right: 0;
                  background-image: var(--svg-corner-short-bottom-right-primary);
                }

                .text-box {
                  background-color: var(--bs-white);
                  align-items: flex-start;
                  justify-content: center;
                  padding-inline: 4rem;
                  padding-block: 0;

                  * {
                    color: var(--bs-secondary);
                  }

                  &:is(:hover, :focus-visible) {
                    .btn {
                      &:after {
                        translate: .25rem 0;
                      }
                    }
                  }
                }
              }
            }
    
            &:is(.grid-item-4) { 
              --_max-text-lines: 4;

              grid-area: item-4;
    
              .grid-item-inner {
                place-items: center;
                justify-items: center;
    
                .text-box {
                  background-color: transparent;
                  justify-content: flex-end;
    
                  * {
                    color: var(--bs-white);
                  }
                }
              }
            }
    
            &:is(.grid-item-5) { 
              grid-area: item-5; 
    
              .grid-item-inner {
                place-items: center;
                justify-items: flex-start;
    
                .text-box {
                  background-color: var(--bs-primary);
    
                  * {
                    color: var(--bs-secondary);
                  }
                }
              }
            }

            /* Textüberlauf bei zu viel Text verhindern */
            .text-box {
              & > *:is(h1, h2, h3, h4, h5, h6, p) {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: var(--_max-text-lines);
                overflow: hidden;
              }
            }
          }
        }
      }
    }

    /* News-Karussell */
    .news-carousel {
      .carousel-item {
        block-size: auto;
        aspect-ratio: var(--ratio-1-2);

        .carousel-item-inner {
          display: grid;
          
          .carousel-text-layer {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;

            padding-inline: .75rem;
            padding-block: .75rem;
          }
          
          & > * {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
          }

          img {
            aspect-ratio: var(--ratio-1-2);
            object-fit: cover;
            z-index: 0;
          }
          
          .text-box {
            --_max-text-lines: 3;
            --_max-text-box-size: calc(var(--_max-grid-size) / var(--_max-grid-columns) - (var(--_gap-size) * (var(--_max-grid-columns) - 1)));

            max-inline-size: var(--_max-text-box-size);
            aspect-ratio: var(--ratio-square);
            object-fit: contain;
            padding-inline: 2rem;
            padding-block: 2rem;
            z-index: 1;

            .meta-info {
              span {
                font-size: .935rem;
              }
            }

            & > *:last-child {
              margin-block-end: 0;
            }

            & > *:is(h1, h2, h3, h4, h5, h6, p) {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: var(--_max-text-lines);
              overflow: hidden;
            }
          }
        }

        /* Farben der Textboxen */
        &:nth-child(1) {
          .carousel-text-layer {
            justify-content: flex-start;
          }

          .text-box {
            background-color: var(--bs-secondary);

            * {
              color: var(--bs-primary);
            }
          }
        }

        &:nth-child(2) {
          .text-box {
            background-color: var(--bs-primary);

            * {
              color: var(--bs-secondary);
            }
          }
        }

        &:nth-child(3) {
          align-content: center;

          img {
            display: none;
          }

          .carousel-item-inner {
            position: relative;

            &:before,
            &:after {
              content: "";
              position: absolute;
              inline-size: 9rem;
              aspect-ratio: var(--ratio-square);
              background-repeat: no-repeat;
              background-position: center left;
              pointer-events: none;
              z-index: 10;
            }
            
            /* Corner top left */
            &:before {
              top: 0;
              left: 0;
              background-image: var(--svg-corner-short-top-left-primary);
            }

            /* Corner bottom right */
            &:after {
              bottom: 0;
              right: 0;
              background-image: var(--svg-corner-short-bottom-right-primary);
            }

            .text-box {
              background-color: var(--bs-white);
              align-items: flex-start;
              justify-content: center;
              padding-inline: 4rem;
              padding-block: 0;

              * {
                color: var(--bs-secondary);
              }

              &:is(:hover, :focus-visible) {
                .btn {
                  &:after {
                    translate: .25rem 0;
                  }
                }
              }
            }
          }
        }

        &:nth-child(4) {
          .carousel-text-layer {
            justify-content: flex-start;
          }

          .text-box {
            background-color: var(--bs-secondary);

            * {
              color: var(--bs-primary);
            }
          }
        }

        &:nth-child(5) {
          .text-box {
            background-color: var(--bs-primary);

            * {
              color: var(--bs-secondary);
            }
          }
        }
      }
    }
  }

  /* Standortkarte */
  &:is(.locations-map) {
    .grid-container {
      container-name: locations-map-grid;
      container-type: inline-size;

      .locations-map-grid {
        --_aspect-ratio: var(--ratio-cinema-ultrawide);

        @container locations-map-grid ( width < 62rem ) {
          --_aspect-ratio: var(--ratio-square);
        }

        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: var(--_aspect-ratio);
        place-items: center;
        overflow: hidden;
  
        & > * {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
          z-index: 0;
        }
  
        .map-text-layer {
          --font-size-h2: var(--font-size-h4);
          
          display: flex;
          inline-size: 100%;
          block-size: auto;
          justify-content: center;
          align-self: flex-start;
          text-align: center;
          padding-inline: 1rem;
          padding-block: 2rem;
        }
  
        .svg-map-layer {
          display: grid;
          inline-size: 100%;
          place-items: center;
          overflow: hidden;
        }
  
        img {
          inline-size: 100%;
          max-inline-size: 100rem;
          block-size: 100%;
          object-fit: cover;
          object-position: center;
          z-index: -1;
        }
      }
    }
  }

  &:is(.page-banner) {
    .grid-container {
      .page-banner-grid {
        & > * {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
        }

        img {
          aspect-ratio: var(--ratio-banner);
          inline-size: 100%;
          block-size: 100%;
          object-fit: cover;
          object-position: center;
          z-index: 0;
        }

        .text-container {
          margin-block-start: clamp(0rem, calc(5vw - 1rem), 4rem);
          padding-inline: 2rem;
          padding-block: 2rem;
          z-index: 1;

          h1 {
            font-size: clamp(2.5rem, calc(10vw - 1rem), var(--font-size-h1));
          }
        }
      }
    }
  }

  &:has(+ .data-and-facts) {
    &:not(.page-banner, .bg-stripes) {
      position: relative;
  
      container-name: pre-data-and-facts;
      container-type: inline-size;
  
      @container pre-data-and-facts ( width > 90rem ) {
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 80vw;
    
          display: block;
          inline-size: var(--svg-separator-inline-size);
          block-size: 100%;
          
          background-image: var(--svg-separator-short-vertical-secondary);
          background-repeat: no-repeat;
          background-position: center bottom;
          background-size: 100%;
          
          translate: -50% 0;
    
          pointer-events: none;
          z-index: 0;
        }
      }
    }
  }

  /* Section: Daten und Fakten */
  &:is(.data-and-facts) {
    position: relative;

    container-name: data-and-facts;
    container-type: inline-size;

    h2 {
      font-size: 1.8rem;
    }

    @container data-and-facts ( width > 90rem ) {
      & > * {
        position: relative;
        z-index: 1;
      }
  
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 80vw;
  
        display: block;
        inline-size: var(--svg-corner-medium-bottom-right-inline-size);
        block-size: auto;
        aspect-ratio: var(--ratio-cinema-ultrawide);
  
        background-image: var(--svg-corner-medium-bottom-right-white);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100%;
  
        translate: calc(-100% + (var(--svg-separator-inline-size) / 2)) 0;
  
        pointer-events: none;
        z-index: 0;
      }
    }

    .grid-container {
      --_margin-inline: 1rem;

      container-name: data-and-facts-grid;
      container-type: inline-size;

      max-inline-size: calc(90rem + var(--_margin-inline) * 2);
      margin-inline: auto;
      
      .data-list-grid {
        grid-template-columns: repeat(4, minmax(15rem, 1fr));
        margin-inline: var(--_margin-inline);

        .data-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          border-inline: 1px solid transparent;
          padding-inline: 2rem;
          padding-block: 2rem;

          span {
            font-family: var(--font-family-headings-condensed);
            font-weight: 700;
            font-size: 3.6rem;
            white-space: nowrap;
          }
        
          small {
            max-inline-size: 18ch;
            font-size: 1.2rem;
            font-weight: 500;
          }

          &:not(:last-child) {
            border-inline-end-color: var(--color-secondary);
          }
        }
      }

      @container data-and-facts-grid ( width < 60rem ) {
        .data-list-grid {
          grid-template-columns: repeat(2, minmax(15rem, 1fr));

          .data-item {
            &:nth-child(2n) {
              border-inline-end-color: transparent;
            }
          }
        }
      }

      @container data-and-facts-grid ( width < 36rem ) {
        .data-list-grid {
          grid-template-columns: repeat(1, minmax(15rem, 1fr));

          .data-item {
            &:nth-child(1n) {
              border-inline-end-color: transparent;
            }
          }
        }
      }
    }
  }

  /* Section: Projekt-Galerie */
  &:is(.project-gallery) {
    position: relative;

    container-name: image-gallery;
    container-type: inline-size;

    @container image-gallery ( width > 62rem ) {
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 50vw;
  
        display: block;
        inline-size: min(var(--svg-curve-inline-size), 100%);
        max-inline-size: calc(100vw - 2rem);
        block-size: auto;
        aspect-ratio: var(--ratio-2-1);
  
        background-image: var(--svg-curve-primary);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: min(100%, 80vw);
  
        translate: -50% -.25rem;
  
        pointer-events: none;
        z-index: 0;
      }
    }

    .grid-container {
      container-name: image-gallery-grid;
      container-type: inline-size;

      .grid-item {
        object-fit: cover;
        object-position: center;
        overflow: hidden;

        &:is(:nth-child(1)) {
          position: relative;
          grid-area: item-1; 
          aspect-ratio: var(--ratio-square);
          z-index: 1;
        }

        &:is(:nth-child(2)) { 
          grid-area: item-2; 
          aspect-ratio: var(--ratio-cinema-ultrawide);
        }

        &:is(:nth-child(3)) {
          grid-area: item-3; 
          aspect-ratio: var(--ratio-cinema-ultrawide);
        }

        &:is(:nth-child(4)) {
          grid-area: item-4; 
          aspect-ratio: var(--ratio-square);
        }
      }

      .image-gallery-grid {
        --_max-grid-size: 100%;
        --_gap-size: 1rem;
        
        grid-template-areas: 
          "item-1 item-2 item-2"
          "item-3 item-3 item-4";

        @container image-gallery-grid ( width < 60rem ) {
          --_max-grid-size: 100%;
          --_gap-size: 1rem;

          grid-template-areas: 
            "item-1 item-1"
            "item-2 item-3"
            "item-4 item-4";

          .grid-item {
            --_item-max-block-size: calc((min(100vw, var(--_max-grid-size)) - var(--_gap-size)));

            &:is(:nth-child(1)) {
              max-block-size: var(--_item-max-block-size);
              aspect-ratio: var(--ratio-cinema-ultrawide);
            }
            
            &:is(:nth-child(2)) { 
              aspect-ratio: var(--ratio-square);
            }

            &:is(:nth-child(3)) {
              grid-area: item-3; 
              aspect-ratio: var(--ratio-square);
            }
            
            &:is(:nth-child(4)) {
              max-block-size: var(--_item-max-block-size);
              aspect-ratio: var(--ratio-cinema-ultrawide);
            }
          }
        }

        @container image-gallery-grid ( width < 36rem ) {
          --_max-grid-size: 100%;
          --_gap-size: .5rem;

          grid-template-areas: 
            "item-1 item-2"
            "item-3 item-4";

          .grid-item {
            &:is(:nth-child(n)) {
              max-block-size: none;
              aspect-ratio: var(--ratio-square);
            }
          }
        }

        max-inline-size: var(--_max-grid-size);
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        column-gap: var(--_gap-size);
        row-gap: var(--_gap-size);
        place-items: stretch;
        margin-inline: auto;
      }
    }
  }

  /* Section: Text-Image-Swiper */
  &:is(.text-image-swiper) {
    .swiper {
      container-name: text-image-swiper;
      container-type: inline-size;

      block-size: 100%;

      --_swiper-ratio: var(--ratio-wide);
      --_text-layer-background: var(--color-secondary);
      --_text-layer-inline-size: min(45rem, 50%);

      @container text-image-swiper ( width < 62rem ) {
        .swiper-text-layer {
          --_text-layer-inline-size: min(36rem, 50%);
        }
      }
      
      @container text-image-swiper ( width < 48rem ) {
        .swiper-item-inner {
          --_swiper-ratio: var(--ratio-auto);

          block-size: 100%;
        }

        .swiper-text-layer {
          --_text-layer-background: oklch(from var(--color-secondary) l c h  / .5);
          --_text-layer-inline-size: 100%;
          backdrop-filter: blur(.125rem);
        }
      }

      .swiper-wrapper {
        .swiper-slide {
          .swiper-item-inner {
            display: grid;
            aspect-ratio: var(--_swiper-ratio);
            overflow: hidden;

            & > * {
              grid-column: 1 / -1;
              grid-row: 1 / -1;
            }

            img {
              aspect-ratio: var(--_swiper-ratio);
              inline-size: 100%;
              block-size: 100%;
              object-fit: cover;
              object-position: center;
              z-index: -1;
            }

            .swiper-text-layer {
              inline-size: var(--_text-layer-inline-size);
              block-size: 100%;

              background-color: var(--_text-layer-background);

              & > * {
                color: var(--color-white);
              }

              padding-inline: 3rem;
              padding-block: 4rem;
              z-index: 2;
            }
          }
        }
      }

      .swiper-pagination {
        display: flex;
        inline-size: fit-content;
        max-inline-size: var(--_text-layer-inline-size);
        column-gap: 1rem;
        
        background-color: transparent;
        color: var(--color-white);
        font-size: 1rem;
        font-weight: 300;
        text-align: start;
        border-radius: .25rem;

        margin-inline: 2.5rem;
        margin-block: 2rem;
        padding-inline: .5rem;
        padding-block: .25rem;

        .swiper-pagination-bullet {
          inline-size: 1.5ch;
          block-size: 100%;

          color: var(--color-white);
          text-align: center;
          line-height: 1.2;
          
          border-radius: 0;
          border: 2px solid transparent;
          opacity: 1;
          
          background: none;
          margin-inline: 0;

          &:is(.swiper-pagination-bullet-active) {
            border-block-end-color: var(--color-primary);
          }
        }
      }
    }
  }

  /* Section: Simple Gallery */
  &:is(.simple-gallery) {
    .grid-container {
      container-name: simple-gallery-grid;
      container-type: inline-size;

      .simple-gallery-grid {
        --_min-item-size: min(16rem, 100%);
      
        grid-template-columns: repeat(auto-fill, minmax(var(--_min-item-size), 1fr));
        column-gap: 1rem;
        row-gap: 1rem;
      
        .grid-item {
          aspect-ratio: var(--ratio-photo-standard);
          inline-size: 100%;
          block-size: 100%;
          object-fit: cover;
          object-position: center;
        }
      }

      @container simple-gallery-grid ( width < 36rem ) {
        .simple-gallery-grid {
          --_min-item-size: min(10rem, 100%);

          .grid-item {
            aspect-ratio: var(--ratio-square);
            object-fit: cover;
            object-position: center;
          }
        }
      }
    }
  }

  /* Section: Bild-Text-Galerie */
  &:is(.image-text-gallery) {
    .grid-container {
      container-name: image-text-gallery-grid;
      container-type: inline-size;

      .image-text-gallery-grid {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-auto-rows: auto;
        column-gap: 3rem;
        row-gap: 2rem;

        --_max-image-size: 13.75rem;

        @container image-text-gallery-grid ( width < 36rem ) {
          --_max-image-size: 4rem;

          grid-template-columns: 1fr;
          row-gap: 0;

          .image-container {
            background-color: var(--color-secondary);
            overflow: hidden;

            img {
              background-color: var(--color-secondary);
              border-inline-end: .125rem solid var(--color-white);
              padding-inline: .125rem;
              padding-block: .125rem;
            }
          }

          .text-container {
            border: 1px solid var(--color-secondary);
            border-block-start: none;
            margin-block-end: 2rem;
            padding-inline: 1rem;
            padding-block: 2rem;
          }
        }

        img {
          inline-size: var(--_max-image-size);
          aspect-ratio: var(--ratio-square);
          object-fit: cover;
        }
      }
    }
  }

  /* Section: Karriere-Seitenbanner */
  &:is(.career-page-banner) {
    .media-content-container {
      /* --_vertical-offset: -5rem; */
      --_vertical-offset: 0rem;

      display: grid;
      block-size: calc(100% + var(--_vertical-offset) * -1);
      align-items: end;
      justify-items: center;
      margin-block-start: var(--_vertical-offset);

      img {
        inline-size: min(41.625rem, 100%);
        z-index: 1;
      }
    }
  }

  &:is(.career-job-offers) {
    .grid-container {
      container-name: job-offers-grid;
      container-type: inline-size;

      .job-offers-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
        gap: 2.25rem;
      }

      .btn {
        &:is(.load-more) {
          display: flex;
          inline-size: fit-content;
          justify-self: center;
          column-gap: .5rem;
          
          font-size: var(--font-size-paragraph);
          font-weight: 300;
          
          margin-block-start: 5rem;
          
          &:after {
            display: none;
          }

          &:is(:hover, :focus-visible) {
            background-color: var(--color-primary);
            color: var(--color-white);
          }
        }
      }
    }
  }

  /* Section: Karriere-Stellenbeschreibungen */
  &:is(.career-job-descriptions) {
    .grid-container {
      container-name: job-descriptions-grid;
      container-type: inline-size;

      .job-descriptions-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
        gap: 2.25rem;

        .grid-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          background-color: var(--color-tertiary);
          padding-inline: 2rem;
          padding-block: 1.25rem;

          img {
            inline-size: 3.5rem;
            aspect-ratio: var(--ratio-square);
            object-fit: contain;
            margin-block-end: 1rem;
          }

          .job-benefit {
            color: var(--color-secondary);
            font-size: 1rem;
            font-weight: 300;
          }
        }
      }
    }
  }

  /* Section: Spiel */
  &:is(.game) {
    --_bg-initial: oklch(from #f4f4f4 l c h / 1);
    --_bg-running: oklch(from #d6d7db l c h / 1);

    --transition-duration: 800ms;
    --_verical-spacing: var(--header-block-size);

    display: grid;
    block-size: 100%;
    min-block-size: 100vh;
    justify-items: center;
    background-color: var(--_bg-initial);
    transition: 
      background-color var(--transition-duration) var(--transition-timing) var(--transition-delay);

    & > * {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      position: relative;
      z-index: 1;
    }

    & > .image-container {
      display: grid;
      inline-size: 100%;
      block-size: 100%;
      place-items: center;
      background-color: var(--_bg-running);
      pointer-events: none;
      user-select: none;
      z-index: 0;

      & > img {
        inline-size: 100%;
        max-inline-size: 1920px;
        block-size: 100%;
        object-fit: cover;
      }
    }
    
    .grid-container:has(> .game-grid) {
      container-name: game-grid;
      container-type: inline-size;
      
      block-size: 100%;
    }

    @container game-grid ( width < 60rem ) {
      .excavator {
        translate: 0 var(--_verical-spacing);
      }
    }

    @container game-grid ( width < 40rem ) {
      .excavator {
        --_inline-size-expanded: 14rem;

        bottom: .5rem;
        right: .5rem;
        translate: 0 calc((var(--_item-size) * .5) * -1);
        scale: .75;

        .text-container {
          span {
            font-size: .85rem;
          }
        }
        
        &:is(:hover, :focus-visible) {
          .text-container {
            span {
              inline-size: var(--_inline-size-expanded);
              margin-inline-end: 6rem;
            }
          }
        }

        &:is(.expanded, [aria-expanded="true"]) {
          /* Hintergrund-Animation: Ende */
          &:before {
            inline-size: max(250vw, 250vh);
            block-size: max(250vw, 250vh);
          }

          .text-container {
            span {
              inline-size: var(--_inline-size-collapsed);
              margin-inline-end: 0;
            }
          }
        }
      }
    }

    .game-info-center {
      display: grid;
      inline-size: min(54rem, 100%);
      grid-template-columns: repeat(3, 1fr);
      
      justify-self: center;
      align-self: end;
      column-gap: 1rem;
      row-gap: .5rem;

      font-size: clamp(1rem, calc(5vw - 2rem), 1.25rem);
      
      opacity: 0;
      user-select: none;

      padding-inline: 4rem;

      & > * {
        display: inherit;
        grid-template-columns: auto auto;
      }

      .player-score-container,
      .cpu-score-container,
      .round-info-container {
        display: inherit;
        grid-template-columns: auto;
      }

      .round-label {
        align-self: flex-end;
      }
      
      .score-points {
        font-size: clamp(1.8rem, calc(5vw - 1rem), 2.6rem);
        font-family: var(--font-family-headings-condensed);
        font-weight: 700;
      }
    }

    .game-grid {
      position: relative;
      block-size: 100%;
      min-block-size: min(100vw, calc(100vh - var(--_verical-spacing) * 2));
      grid-template-columns: 1fr;
      align-items: stretch;
      justify-items: center;
      row-gap: clamp(0rem, calc(5vw  - 2rem), 1rem);
      text-align: center;
      padding-block: clamp(calc(var(--_verical-spacing) * .5), calc(10vw - 1rem), var(--_verical-spacing)) 2rem;

      .loading {
        justify-self: center;
        pointer-events: none;
      }

      &:not(.game-running),
      &:has(.game-card) {
        .loading {
          opacity: 0;
        }
      }

      .game-card {
        outline: 2px solid transparent;

        margin-inline: 1rem;
        margin-block: 1rem;

        &:is(.winner) {
          outline-color: var(--color-primary);
        }
      }

      .player,
      .cpu {
        display: grid;
        place-items: center;
      }

      .player {
        & > .game-card {
          transform: translateY(-100%);
        }
      }

      .cpu {
        & > .game-card {
          transform: translateY(100%);
          cursor: default;
          pointer-events: none;
          user-select: none;
        }
      }

      &:is(.game-running) {
        .game-info-center {
          --transition-duration: 350ms;
          --transition-delay: 2000ms;

          opacity: 1;
          transform: translateY(0);

          transition: 
            opacity var(--transition-duration) var(--transition-timing) calc(var(--transition-delay) + 150ms),
            transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
        }

        .game-card {
          --_transition-duration-outline: 250ms;
          --_transition-delay-outline: 350ms;

          transform: translateY(0);

          transition: 
            outline-color var(--_transition-duration-outline) var(--transition-timing) var(--_transition-delay-outline),
            transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
        }
      }

      .game-header {
        display: grid;
        inline-size: 100%;
        justify-content: center;
        
        & > .text-container {
          inline-size: fit-content;
        } 

        *:is(h1, h2, h3, h4, h5, h6, p) {
          text-align: center;
          margin-inline: auto;
        }

        h1 {
          max-inline-size: clamp(16ch, calc(50vw - 1rem), 40ch);
          font-size: clamp(3rem, calc(5vw + 1rem), var(--font-size-h1));
        }

        p {
          margin-block: 0;
        }
        
        .text-container-inner {
          display: grid;
          
          & > * {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
          }
        }
      }

      .game-body {
        display: grid;
        inline-size: 100%;
        align-items: center;
        row-gap: 1rem;

        & > *:not(.message-container) {
          position: relative;
          grid-column: 1 / -1;
          grid-row: 1 / -1;
          z-index: 1;
        }

        .card-container {
          opacity: 0;
          z-index: 0;

          &:has(.cpu > .game-card.flipped) {
            .game-card {
              cursor: not-allowed;

              table {
                button {
                  pointer-events: none;
                }
              }
            }
          }
        }

        .grid-container {
          container-name: game-cards-grid;
          container-type: inline-size;

          display: grid;
          block-size: 100%;
          place-items: center;
        }

        .game-cards-grid {
          inline-size: min(62rem, 100%);
          grid-template-columns: repeat(2, 1fr);
          column-gap: 2rem;
          row-gap: 2rem;
          justify-items: center;

          @container game-grid ( width < 48rem ) {
            grid-template-columns: 1fr;
            margin-block: -3rem;

            & > * {
              position: relative;
              grid-column: 1 / -1;
              grid-row:  1 / -1;
            }

            .player {
              order: 2;
              transform: translateX(-1.5rem) scale(.8);

              transition: 
                transform var(--transition-duration) var(--transition-timing) var(--transition-delay);

              z-index: 2;
            }

            .cpu {
              order: 1;
              transform: translateX(1.5rem) scale(.75);

              z-index: 1;
            }

            &:has(.cpu > .game-card.flipped) {
              .player {
                transform: translateX(calc((50% + 2.5rem) * -1)) scale(.8);
              }
            }

            &:has(.cpu > .game-card.unflipped) {
              .player {
                transform: translateX(-1.5rem) scale(.8);
              }
            }
          }
        }

        .btn {
          &:is(.start-game) {
            align-self: center;
            justify-self: center;
            opacity: 1;
            translate: 0 8rem;

            &:is(.btn-primary) {
              &:is(:hover, :focus-visible) {
                background-color: var(--color-secondary);
                color: var(--color-primary);
                border-color: var(--color-secondary);
              }
            }
          }
        }
      }

      .game-footer {
        display: grid;
        row-gap: 1rem;

        .message-container {
          min-block-size: 1lh;
          
          .game-message {
            --_transition-duration-message-opacity: 250ms;
            --_transition-delay-message-opacity: 0ms;

            align-self: center;
            justify-self: center;
            
            font-family: var(--font-family-headings-condensed);
            font-size: clamp(1rem, calc(5vw - 1rem), 1.25rem);
            font-weight: 700;
            text-align: center;
    
            opacity: 0;
            visibility: hidden;
    
            transition: 
              opacity var(--_transition-duration-message-opacity) var(--transition-timing) var(--_transition-delay-message-opacity);
    
            &:is(.show) {
              visibility: visible;
              opacity: 1;
            }
          }
        }

        .button-container {
          display: flex;
          align-items: center;
          justify-content: center;
          column-gap: 1rem;

          opacity: 0;
          pointer-events: none;

          &:is(.show) {
            --_transition-duration-btn-container-opacity: 250ms;
            --_transition-delay-btn-container-opacity: 0ms;
            
            opacity: 1;
            pointer-events: initial;

            transition: 
              opacity var(--_transition-duration-btn-container-opacity) var(--transition-timing) var(--_transition-delay-btn-container-opacity);
          }

          .btn {
            --_transition-duration: 250ms;
            --_transition-delay: 0ms;

            &:is(.restart-game) {
              padding-inline-end: 3rem;

              &:after {
                display: none;
              }

              &:is(:hover, :focus-visible) {
                color: var(--color-white);
              }
            }
          }
        }

        @container game-grid ( width < 48rem ) {
          .button-container {
            --_transition-delay-btn-container-opacity: 1000ms;
          }

          .game-message {
            --_transition-delay-message-opacity: 500ms;
          }
        }
      }

      .excavator {
        opacity: 0;
        pointer-events: none;
      }
    }

    &:has(.game-grid.game-running) {
      & > .image-container {
        opacity: 0;
        transition: 
          opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
      }
      
      .game-header {
        p {
          opacity: 0;

          transition: 
            opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
        }
      }

      .game-body {
        .card-container {
          --transition-delay: 1000ms;

          opacity: 1;
          z-index: 1;

          transition: 
            opacity var(--transition-duration) var(--transition-timing) var(--transition-delay),
            z-index var(--transition-duration) var(--transition-timing) var(--transition-delay);

          table {
            --transition-delay: 0ms;
          }
        }
      }

      .btn {
        &:is(.start-game) {
          opacity: 0;
          pointer-events: none;
          
          transition: 
            opacity var(--transition-duration) var(--transition-timing) var(--transition-delay),
            pointer-events var(--transition-duration) var(--transition-timing) var(--transition-delay);
        }

        &:is(.restart-game) {
          display: none;
        }
      }

      @container game-grid ( width >= 48rem ) {
        .excavator {
          --_transition-delay-opacity: 2000ms;
          
          opacity: 1;
          pointer-events: initial;

          transition: 
            opacity var(--transition-duration) var(--transition-timing) var(--_transition-delay-opacity);
        }
      }
      
      &:has(.game-ended, .game-over) {
        .btn {
          &:is(.next-round) {
            display: none;
          }

          &:is(.restart-game) {
            display: inherit;
          }
        }

        @container game-grid ( width < 48rem ) {
          .game-grid {
            .game-cards-grid {
              filter: grayscale(.5);
              opacity: .25;
  
              transition: 
                filter var(--transition-duration) var(--transition-timing) var(--transition-delay),
                opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
            }

            .excavator {
              --_transition-duration-opacity: 500ms;
              --_transition-delay-opacity: 2000ms;
  
              opacity: 1;
              pointer-events: initial;
  
              transition: 
                opacity var(--_transition-duration-opacity) var(--transition-timing) var(--_transition-delay-opacity);
            }

            &:has(.excavator.expanded, .excavator[aria-expanded="true"]) {
              .game-footer {
                opacity: 0;
                pointer-events: none;

                transition: 
                  opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
              }
            }
          }
        }
      }

      &:has(.game-restarting) {
        @container game-grid ( width < 48rem ) {
          .excavator {
            --_transition-duration-opacity: 250ms;
            --_transition-delay-opacity: 0ms;

            opacity: 0;
            pointer-events: none;
            
            transition: 
              opacity var(--_transition-duration-opacity) var(--transition-timing) var(--_transition-delay-opacity);
          }
        }
      }
    }
  }

  /* Section: Bewerbung */
  &:is(.job-application) {
    --font-size-h3: clamp(2.5rem , calc(8vw - 1rem), 3.5rem);

    p:first-of-type,
    h3 {
      text-align: center;
      margin-inline: auto;
    }

    p:first-of-type{
      margin-block-end: 1.5lh;
    }

    form {
      display: flex;
      flex-direction: column;
      inline-size: 100%;

      .form-segment-group {
        display: flex;
        flex-direction: column;
        inline-size: 100%;
        max-inline-size: 26.85rem;
        row-gap: 1.25rem;

        margin-inline: auto;
        margin-block: 2rem 0;

        &:has(.form-segment input[name="privacy"]) {
          margin-block: 1rem 2rem;
        }

        &:has(.dropzone) {
          max-inline-size: 75rem;
        }
      }

      .form-segment {
        display: flex;
        inline-size: 100%;

        justify-content: space-between;
        align-items: center;
        column-gap: 1rem;

        font-weight: 500;
        border: 1px solid var(--color-tertiary);
        
        margin-inline: 0;
        margin-block: 0;
        padding-inline: 0;
        padding-block: 0;

        &:has(> label + input:not([name="privacy"])) {
          display: grid;
          grid-auto-columns: 1fr;

          & > * {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
          }

          label {
            display: flex;
            inline-size: 100%;
            block-size: 100%;
            align-items: center;

            padding-inline: 1.65rem;
            padding-block: 1.5rem;
          }

          & > input:not([name="privacy"]) {
            justify-self: flex-end;

            translate: -1.65rem 0;

            margin-inline: 0;
            margin-block: 0;
          }
        }

        label {
          cursor: pointer;
        }

        &:has(
          > input[type="text"],
          > input[type="email"],
          > input[type="tel"]
        ) {
          padding-inline: 0;
          padding-block: 0;

          & > input[type="text"],
          & > input[type="email"],
          & > input[type="tel"] {
            border-radius: 0;
            border-color: transparent;

            padding-inline: 1.65rem;
            padding-block: 1.5rem;
          }
        }

        &:has(
          input[name="privacy"],
          *[type="submit"],
          .dropzone
        ) {
          border-color: transparent;
        }

        &:has(
          input[name="privacy"]
        ) {
          align-items: flex-start;
          font-size: .95rem;

          input[type="checkbox"] {
            inline-size: .75rem;
            block-size: .75rem;
            
            translate: 0 .25lh;
          }

          label {
            text-wrap-style: pretty;

            padding-inline: 0;
            padding-block: 0;

            a {
              color: var(--color-secondary);
              transition: 
                color var(--transition-duration) var(--transition-timing) var(--transition-delay);

              &:is(:hover, :focus-visible) {
                color: var(--color-primary);
              }
            }
          }
        }

        &:has(*[type="submit"]) {
          justify-content: center;

          .btn[type="submit"] {
            flex: 1;
            max-inline-size: 24rem;
            padding-inline: 2.175rem;

            &:after {
              display: none;
            }

            &:is(:hover, :focus-visible) {
              background-color: var(--color-secondary);
              color: var(--color-white);
              border-color: var(--color-secondary);
            }
          }
        }

        .form-check-input {
          float: unset;
          margin-inline: 0;
        }

        &:has(*:checked) {
          border-color: var(--color-primary);
        }
      }

      input[type="checkbox"] {
        &:is(.form-check-input) {
          --_item-size: 1.5rem;

          inline-size: var(--_item-size);
          block-size: var(--_item-size);
        }
      }

      input[type="radio"] {
        &:is(.form-check-input) {
          --_item-size: 1.85rem;

          inline-size: var(--_item-size);
          block-size: var(--_item-size);
        }
      }

      .dropzone {
        --clr-border: var(--color-tertiary, #a2b4ef);
        --border-width: 2px;
        --dash-length: .5rem;
        --dash-gap: .5rem;

        display: flex;
        inline-size: 100%;
        justify-content: center;
        align-items: center;
        border: none;
        border-radius: 0;
        padding-inline: 1.25rem;
        padding-block: 1.25rem;

        /* Rahmen mit background-image für gestrichelten Linien-Effekt */
        background:
          repeating-linear-gradient(90deg, var(--clr-border), var(--clr-border) var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--dash-gap))) top left / 100% var(--border-width) no-repeat,
          repeating-linear-gradient(180deg, var(--clr-border), var(--clr-border) var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--dash-gap))) top right / var(--border-width) 100% no-repeat,
          repeating-linear-gradient(270deg, var(--clr-border), var(--clr-border) var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--dash-gap))) bottom right / 100% var(--border-width) no-repeat,
          repeating-linear-gradient(0deg, var(--clr-border), var(--clr-border) var(--dash-length), transparent var(--dash-length), transparent calc(var(--dash-length) + var(--dash-gap))) bottom left / var(--border-width) 100% no-repeat;
        background-repeat: no-repeat;

        .dz-message {
          text-align: center;
          margin-block: 3rem;
        }

        p {
          font-family: var(--font-family-headings-condensed);
          color: var(--color-tertiary);
          line-height: 2;

          span {
            &:is(.drag-drop-files) {
              font-size: 2.4rem;
              font-weight: 500;
            }

            &:is(.select-files) {
              display: inline-flex;
              color: var(--color-primary);
              text-transform: uppercase;
              line-height: 1;
              transition: 
                color var(--transition-duration) var(--transition-timing) var(--transition-delay);
              align-items: baseline;
              column-gap: 1rem;

              &:after {
                content: "";
                flex: 1;
                display: inline-flex;
                aspect-ratio: var(--ratio-square);
                inline-size: 1.25rem;
                block-size: auto;

                transition: 
                  background-image var(--transition-duration) var(--transition-timing) var(--transition-delay);

                background-image: var(--svg-icon-upload-primary);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
              }
            }
          }
        }

        p:last-of-type {
          margin-block-end: 0;
        }

        &:is(:hover, :focus-within) {
          span {
            &:is(.select-files) {
              color: var(--color-secondary);

              &:after {
                background-image: var(--svg-icon-upload-secondary-hover);
              }
            }
          }
        }
      }
    }
  }

  /* Section: Firmengeschichte (Work in Progress) */
  &:is(.history) {
    --nviitimeline-items: 5;
    --nviitimeline-item-size: clamp(6rem, calc(15vw - 1rem), 14.15rem);
    
    display: grid;
    min-block-size: 100vh;
    grid-auto-rows: 1fr;
    overflow: hidden;

    & > .container,
    & > .container > .row {
      display: grid;
      grid-auto-rows: 1fr;
    }

    .grid-container {
      container-name: history-grid;
      container-type: inline-size;

      block-size: 100%;
      max-inline-size: 100rem;
      align-content: center;
      justify-items: center;
      margin-inline: auto;

      .history-stack {
        inline-size: 100%;
        block-size: 100%;
        place-items: center;
        
        & > * {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
        }

        /* Ebene: Video-Intro mit Text (Overlay) */
        .media-container-outer {
          --_animation-duration-shrink: 500ms;
          --_animation-delay-shrink: 6000ms;

          --_animation-duration-fade-out: 500ms;
          --_animation-delay-fade-out: 6750ms;

          display: grid;
          aspect-ratio: var(--ratio-square);
          max-inline-size: 56.25rem;
          background-color: var(--color-primary);
          place-items: center;
          transform: scale(1);
          pointer-events: none;
          
          padding-inline: 2rem;
          padding-block: 2rem;

          animation: 
            shrinkHistoryIntro var(--_animation-duration-shrink) var(--animation-timing) var(--_animation-delay-shrink) var(--animation-fill-mode),
            fadeOut var(--_animation-duration-fade-out) var(--animation-timing) var(--_animation-delay-fade-out) var(--animation-fill-mode);
          z-index: 1;

          &:before {
            --animation-duration: 500ms;
            --animation-delay: 2750ms;

            content: "";
            position: absolute;
            left: 50%;
            top: 50%;

            display: flex;
            inline-size: max(100vw, 100vh);
            block-size: auto;
            aspect-ratio: var(--ratio-square);
            background-color: var(--color-primary);

            translate: -50% -50%;
            transform: scale(1);
            animation: 
              shrinkBackground var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);

            pointer-events: none;
            z-index: -1;

            padding: 2rem;
          }

          .media-container-inner,
          .text-container {
            --animation-duration: 1500ms;
            --animation-delay: 4000ms;

            opacity: 1;
            visibility: visible;
          }

          .media-container-inner {
            display: grid;
            inline-size: 100%;
            block-size: 100%;

            background: var(--color-primary);
            place-items: center;

            z-index: 1;

            animation: 
              fadeOut var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);

            video {
              inline-size: clamp(16rem, calc(50vw - 1rem), 43.75rem);
              block-size: auto;
            }
          }

          .text-container {
            --_animation-duration-slideInFromTop: 500ms;
            --_animation-delay-slideInFromTop: 2500ms;
            
            display: flex;
            inline-size: 100%;
            block-size: 100%;
            
            align-items: center;
            justify-content: center;

            transform: translateY(-100%);

            animation: 
              slideInFromTop var(--_animation-duration-slideInFromTop) var(--animation-timing) var(--_animation-delay-slideInFromTop) var(--animation-fill-mode),
              fadeOut var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
            
            padding-inline: 2rem;

            h3 {
              font-size: clamp(1.4rem, calc(5vw - 1rem), var(--font-size-h3));
              text-align: center;
              margin-block: 0;
            }
          }
        }

        /* Ebene: Timeline-Kacheln */
        .history-timeline {
          --_nviitimeline-item-position-x: 0;
          
          --_horizontal-offset: 0rem;
          --_vertical-offset: calc(50% - (var(--nviitimeline-item-size) * .5));
          
          inline-size: 100%;
          translate: 0 0;

          /* Unterhalb Bootstrap xs */
          @container history-grid ( width < 36rem ) {
            --nviitimeline-item-size: clamp(4rem, calc((100vw / 3) - 1rem), 6rem);
            --_max-text-lines: 5;

            --_horizontal-offset: 0rem;
            --_vertical-offset: 0rem;

            .main-grid {
              display: grid;
              inline-size: 100%;
              
              grid-template-columns: 1fr;
              justify-content: space-between;
              column-gap: 1rem;
              row-gap: 1rem;
              
              translate: var(--_horizontal-offset) var(--_vertical-offset);

              * {
                pointer-events: none;
              }
            }

            .sub-grid {
              --_transform-origin-x: 0;
              --_transform-origin-y: 0;

              --animation-duration: 800ms;
              --animation-delay: 7000ms;

              display: grid;
              grid-template-rows: subgrid;
              grid-column: 1;
              
              transform-origin: var(--_transform-origin-x) var(--_transform-origin-y);
              
              &:is(.timeline-grid-1) {
                grid-row: 1 / span 3;

                transform: translateY(calc(100% - var(--nviitimeline-item-size)));
              }
              
              &:is(.timeline-grid-2) {
                grid-row: 2 / span 2;
                
                transform: translateY(calc(100% - var(--nviitimeline-item-size)));
              }

              &:is(.timeline-grid-3) {
                grid-row: 3 / span 1;
                
                animation:
                  slideUpAndDown50 var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
              }

              &:is(.timeline-grid-4) {
                grid-row: 3 / span 2;

                transform: translateY(calc((100% - var(--nviitimeline-item-size)) * -1) );
              }

              &:is(.timeline-grid-5) {
                grid-row: 3 / span 3;

                transform: translateY(calc((100% - var(--nviitimeline-item-size)) * -1) );
              }

              animation: 
                slideToInitialY var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
            }

            .nviitimeline-item {
              ---animation-delay: 0ms;
              --_vertical-offset: 0rem;
              --_horizontal-offset: 50%;

              --_additional-animation-delay: 0ms;
              --_additional-animation-delay-enablePointerEvents: 1000ms;

              position: relative;
              left: calc((var(--nviitimeline-item-size) * .5) * -1);

              display: grid;
              grid-template-columns: var(--nviitimeline-item-size) 1fr;
              column-gap: 1rem;
              align-items: center;
              cursor: pointer;
              pointer-events: none;

              transform: translateX(var(--_horizontal-offset));
  
              &:before {
                --transition-duration: 750ms;
                --transition-delay: 1000ms;
  
                content: "";
                position: absolute;
                top: calc(var(--nviitimeline-item-size) * .5);
                left: calc(var(--nviitimeline-item-size) * .5);
  
                aspect-ratio: var(--ratio-square);
                inline-size: 0;
                block-size: auto;
                background-color: var(--color-primary);
  
                translate: -50% -50%;
  
                transition: 
                  inline-size var(--transition-duration) var(--transition-timing) var(--transition-delay),
                  block-size var(--transition-duration) var(--transition-timing) var(--transition-delay);
  
                pointer-events: none;
                z-index: -1;
              }

              &:not(.item-3) {
                opacity: 0;
                visibility: hidden;
              }

              &:is(.item-1) {
                grid-row: 1;
              }

              &:is(.item-2) {
                grid-row: 1;
              }

              &:is(.item-3) {
                grid-row: 1;
              }

              &:is(.item-4) {                
                grid-row: 2;
              }

              &:is(.item-5) {                
                grid-row: 3;
              }
              
              animation: 
                fadeIn var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + var(--_additional-animation-delay)) var(--animation-fill-mode),
                slideToInitialX var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + var(--_additional-animation-delay)) var(--animation-fill-mode),
                enablePointerEvents var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + var(--_additional-animation-delay-enablePointerEvents)) var(--animation-fill-mode);

              .episode {
                --transform-delay: 0ms;
                
                inline-size: var(--nviitimeline-item-size);
                
                transform: rotate(180deg);
                
                img {
                  inline-size: clamp(85%, calc(10vw - 2rem), 12rem);

                  transform: translateX(calc(var(--nviitimeline-item-size) * -1));
                }
    
                &:is(.episode-1) {
                  --_additional-animation-delay: 500ms;
                }
      
                &:is(.episode-2) {
                  --_additional-animation-delay: 600ms;
                }
      
                &:is(.episode-3) {
                  --_additional-animation-delay: 700ms;
                }
      
                &:is(.episode-4) {
                  --_additional-animation-delay: 800ms;
                }
      
                &:is(.episode-5) {
                  --_additional-animation-delay: 900ms;
                }

                animation: 
                  slideToInitialX var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + var(--_additional-animation-delay)) var(--animation-fill-mode),
                  rotateTo0 var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
              }
            }
          }

          /* Bootstrap xs und aufwärts */
          @container history-grid ( width >= 36rem ) {
            .main-grid {
              display: grid;
              inline-size: 100%;
              
              grid-template-columns: repeat(var(--nviitimeline-items), var(--nviitimeline-item-size));
              justify-content: space-between;
              column-gap: 1rem;
              row-gap: 1rem;
              
              translate: var(--_horizontal-offset) var(--_vertical-offset);
  
              * {
                pointer-events: none;
              }
            }
            
            .sub-grid {
              --_transform-origin-x: 50%;
              --_transform-origin-y: calc(var(--nviitimeline-item-size) * .5);
              
              --animation-duration: 800ms;
              --animation-delay: 7000ms;
  
              display: grid;
              grid-template-columns: subgrid;
              grid-row: 1;
              justify-content: space-between;
              
              transform-origin: var(--_transform-origin-x) var(--_transform-origin-y);
              
              &:not(.timeline-grid-3) {
                animation: 
                  rotateTo0 var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
              }
              
              &:is(.timeline-grid-1) {
                grid-column: 1 / span 3;
                transform: rotate(180deg);
              }
              
              &:is(.timeline-grid-2) {
                grid-column: 2 / span 2;
                transform: rotate(180deg);
              }
  
              &:is(.timeline-grid-3) {
                grid-column: 3 / span 1;
                
                animation:
                  slideUpAndDown50 var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
              }
  
              &:is(.timeline-grid-4) {
                grid-column: 3 / span 2;
                transform: rotate(-180deg);
              }
  
              &:is(.timeline-grid-5) {
                grid-column: 3 / span 3;
                transform: rotate(-180deg);
              }
            }

            .nviitimeline-item {
              --_max-text-lines: 5;
              --_additional-animation-delay-enablePointerEvents: 1000ms;
  
              position: relative;
              display: grid;
              grid-template-rows: auto 1fr;
              row-gap: 2rem;
              cursor: pointer;
              pointer-events: none;

              animation: 
                enablePointerEvents var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + var(--_additional-animation-delay-enablePointerEvents)) var(--animation-fill-mode);
  
              &:before {
                --transition-duration: 750ms;
                --transition-delay: 1000ms;
  
                content: "";
                position: absolute;
                top: calc(var(--nviitimeline-item-size) * .5);
                left: calc(var(--nviitimeline-item-size) * .5);
  
                aspect-ratio: var(--ratio-square);
                inline-size: 0;
                block-size: auto;
                background-color: var(--color-primary);
  
                translate: -50% -50%;
  
                transition: 
                  inline-size var(--transition-duration) var(--transition-timing) var(--transition-delay),
                  block-size var(--transition-duration) var(--transition-timing) var(--transition-delay);
  
                pointer-events: none;
                z-index: -1;
              }
  
              &:is(.item-1) {
                grid-column: 1;
              }
    
              &:is(.item-2) {
                grid-column: 1;
              }
    
              &:is(.item-3) {
                grid-column: 1;
              }
    
              &:is(.item-4) {
                grid-column: 2;
              }
    
              &:is(.item-5) {
                grid-column: 3;
              }
            }

            .episode {
              --transform-delay: 0ms;

              img {
                inline-size: clamp(85%, calc(15vw - 2rem), 14rem);

                transform: translateY(calc(var(--nviitimeline-item-size) * -1));
              }

              &:is(.episode-1) {
                --_additional-animation-delay: 500ms;
                
                transform: rotate(90deg);
              }
    
              &:is(.episode-2) {
                --_additional-animation-delay: 600ms;
                
                transform: rotate(90deg);
              }
    
              &:is(.episode-3) {
                --_additional-animation-delay: 700ms;
                
                transform: rotate(0deg);
              }
    
              &:is(.episode-4) {
                --_additional-animation-delay: 800ms;
                
                transform: rotate(-90deg);
              }
    
              &:is(.episode-5) {
                --_additional-animation-delay: 900ms;
                
                transform: rotate(-90deg);
              }

              animation: 
                rotateTo0 var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
            }
          }

          .nviitimeline-item {
            .episode {
              display: grid;
              aspect-ratio: var(--ratio-square);
              background-color: var(--color-primary);
              place-items: center;
              
              overflow: hidden;
              z-index: 0;

              & > * {
                grid-column: 1 / -1;
                grid-row: 1 / -1;
              }

              img {
                aspect-ratio: var(--ratio-square);
                object-fit: contain;
                pointer-events: none;
                
                animation: 
                  slideToInitial var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + var(--_additional-animation-delay)) var(--animation-fill-mode);

                &:is(.number-icon) {
                  z-index: 0;
                }

                &:is(.number-icon-hover) {
                  opacity: 0;
                  visibility: hidden;

                  transition: 
                    opacity var(--transition-duration) var(--transition-timing) var(--transition-delay),
                    visibility var(--transition-duration) var(--transition-timing) var(--transition-delay);

                  z-index: 1;
                }
              }
            }

            &:is(:hover, :focus-visible) {
              .episode {
                img {
                  &:is(.number-icon-hover) {
                    opacity: 1;
                    visibility: visible;
                  }
                }
              }

              p {
                color: var(--color-primary);
                transform: translateY(.25lh);
              }
            }

            p {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: var(--_max-text-lines);
              overflow: hidden;
  
              block-size: 5lh;
  
              font-family: var(--font-family-headings-condensed);
              font-size: clamp(.85rem, calc(3vw - 1rem), 1.75rem);
              font-weight: 700;
              line-height: 1.2;
  
              color: var(--color-secondary);
              text-transform: uppercase;

              opacity: 0;
              visibility: hidden;

              transition: 
                color var(--transition-duration) var(--transition-timing) var(--transition-delay),
                transform var(--transition-duration) var(--transition-timing) var(--transition-delay);

              animation: 
                fadeIn var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + 1250ms) var(--animation-fill-mode);
              
              margin-block-end: 0;
            }

            /* Unterhalb Bootstrap xs */
            @container history-grid ( width < 36rem ) {
              p {
                block-size: auto;
              }
            }
          }

          /* Timeline Item wurde geklickt */
          &:is([data-interacted="true"]) {
            --transition-delay: 1500ms;

            transition: 
              transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
            
            .nviitimeline-item {
              --_additional-animation-delay: 0ms;

              opacity: 1;
              visibility: visible;
              
              @container history-grid ( width < 36rem ) {
                --_horizontal-offset: calc(var(--nviitimeline-item-size) * .5);
              }
              
              & > * {
                --transition-delay: 0ms;
                --_additional-animation-delay: 0ms;
              }
            }
            
            /* Timeline Item ist erweitert */
            &:has(.nviitimeline-item.expanded) {
              --_vertical-offset-active: calc((50vh - calc(var(--nviitimeline-item-size) + (var(--_vertical-offset) * .5))) * -1);
              
              @container history-grid ( width < 36rem ) {
                --_vertical-offset-active: calc(((50vh - 50%) - calc(var(--nviitimeline-item-size) + (var(--_vertical-offset) * .5))) * -1);
              }

              .nviitimeline-item {
                &:before {
                  inline-size: max(200vw, 200vh);
                  block-size: auto;
                }

                &:not(.expanded) {
                  --animation-delay: 0ms;

                  pointer-events: none;

                  animation: 
                    fadeOut var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
                }

                &:is(.expanded) {
                  pointer-events: none;
                  animation: none;
                  
                  & > .episode {
                    pointer-events: auto;
                  }
                }
                
                p {
                  --animation-delay: 0ms;

                  animation: 
                    fadeOut var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
                }
              }

              transform: translateY(var(--_vertical-offset-active));
            }
  
            /* Timeline Item ist reduziert */
            &:not(:has(.nviitimeline-item.expanded)) {
              --transition-delay: 500ms;

              .main-grid {
                --transition-delay: 500ms;
              }

              .nviitimeline-item {
                --animation-delay: 1250ms;

                &:not(.collapsed) {
                  opacity: 0;
                  visibility: hidden;
                  
                  animation: 
                    fadeIn var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode),
                    enablePointerEvents var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);

                  &:before {
                    --transition-duration: 0ms;
                    --transition-delay: 0ms;

                    inline-size: 0;
                    block-size: auto;
                  }
                }

                p {
                  --animation-delay: 1750ms;

                  animation: 
                    fadeIn var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
                }
              }
            }

            .main-grid {
              transition: 
                transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
              
              &:has(.timeline-grid-1 > .nviitimeline-item.expanded) {
                --_nviitimeline-item-position-x: 0;
                --_nviitimeline-item-position-y: 0;
              }
                
              &:has(.timeline-grid-2 > .nviitimeline-item.expanded) {
                --_nviitimeline-item-position-x: -1;
                --_nviitimeline-item-position-y: -1;
              }
              
              &:has(.timeline-grid-3 > .nviitimeline-item.expanded) {
                --_nviitimeline-item-position-x: -2;
                --_nviitimeline-item-position-y: -2;
              }

              &:has(.timeline-grid-4 > .nviitimeline-item.expanded) {
                --_nviitimeline-item-position-x: -3;
                --_nviitimeline-item-position-y: -3;
              }

              &:has(.timeline-grid-5 > .nviitimeline-item.expanded) {
                --_nviitimeline-item-position-x: -4;
                --_nviitimeline-item-position-y: -4;
              }
              
              &:has(.sub-grid > .nviitimeline-item.expanded) {
                @container history-grid ( width < 36rem ) {
                  --_vertical-offset-active: calc(((100% - var(--nviitimeline-item-size)) / (var(--nviitimeline-items) - 1)) * var(--_nviitimeline-item-position-y));

                  transform: translateY(var(--_vertical-offset-active));
                }

                @container history-grid ( width >= 36rem ) {
                  --_horizontal-offset-active: calc(((100% - var(--nviitimeline-item-size)) / (var(--nviitimeline-items) - 1)) * var(--_nviitimeline-item-position-x));
                  
                  transform: translateX(var(--_horizontal-offset-active));
                }
              }
            }
          }
        }
      }
    }
  }
}

/* 
 * Keyvisual: Ecken-Elemente 
 * Classes:
 * Position: top-left | bottom-right
 * Color: corner-primary | corner-secondary | corner-white
 */
.keyvisual-container {
  --_item-size: clamp(4.5rem, calc(10vw - 1rem), 9rem);
  --_padding-size: clamp(2.5rem, calc(5vw - 1rem), 5rem);

  position: relative;
  display: inline-block;

  &:before,
  &:after {
    content: "";
    position: absolute;
    inline-size: var(--_item-size);
    aspect-ratio: var(--ratio-square);
  }

  &:is(.top-left, .bottom-right) {
    padding-block: var(--_padding-size);

    & > * {
      margin-inline: clamp(0rem, calc(5vw - 1rem), var(--_padding-size));
    }
    
    & > *:first-child {
      margin-inline: var(--_padding-size);
    }

    &:last-child {
      margin-block-end: 0;
    }
  }

  &:is(.top-left) {
    &:before {
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 10;
    }

    &:is(.corner-primary) {
      &:before {
        background-image: var(--svg-corner-short-top-left-primary);
      }
    }

    &:is(.corner-secondary) {
      &:before {
        background-image: var(--svg-corner-short-top-left-secondary);
      }
    }

    &:is(.corner-white) {
      &:before {
        background-image: var(--svg-corner-short-top-left-white);
      }
    }
  }

  &:is(.bottom-right) {
    &:after {
      bottom: 0;
      right: 0;
    }

    &:is(.corner-primary) {
      &:after {
        background-image: var(--svg-corner-short-bottom-right-primary);
      }
    }

    &:is(.corner-secondary) {
      &:after {
        background-image: var(--svg-corner-short-bottom-right-secondary);
      }
    }

    &:is(.corner-white) {
      &:after {
        background-image: var(--svg-corner-short-bottom-right-white);
      }
    }
  }
}

.corner-l-shape-primary-top-left {
  position: relative;

  container-name: corner-l-shape-primary-top-right;
  container-type: inline-size;

  @container corner-l-shape-primary-top-right ( width > 90rem ) {
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;

      display: block;
      inline-size: var(--svg-corner-l-shape-inline-size);
      block-size: auto;
      aspect-ratio: var(--svg-corner-l-shape-aspect-ratio);

      background-image: var(--svg-corner-l-shape-primary);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 100%;

      translate: 50% 0;

      pointer-events: none;
      z-index: 10;
    }
  }

  &:is(.corner-section-bleeding) {
    &:before {
      translate: 50% -50%;
    }
  }
}

.separator-xlong-vertical-primary-top-right {
  position: relative;
  
  container-name: separator-xlong-vertical-primary-top-right;
  container-type: inline-size;

  @container separator-xlong-vertical-primary-top-right ( width > 90rem ) {
    &:after {
      content: "";
      position: absolute;
      top: 0;
      right: 5vw;

      display: block;
      inline-size: var(--svg-separator-inline-size);
      block-size: 100%;

      background-image: var(--svg-separator-xlong-vertical-primary);
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 100%;
      
      translate: 50% 0;

      pointer-events: none;
      z-index: 10;
    }
  }

  &:is(.separator-section-bleeding) {
    &:after {
      translate: 50% -9rem;
    }
  }
}


/* 
 * Elemente
 */  

/* Map Marker */
.map-marker {
  --_marker-size: 4rem;
  --_marker-icon-size: 2rem;

  --_inline-size-collapsed: var(--_marker-size);
  --_inline-size-expanded: 18.75rem;
  --_block-size-collapsed: var(--_marker-size);
  --_block-size-expanded: 26.25rem;

  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;

  display: grid;
  inline-size: var(--_inline-size-collapsed);
  block-size: var(--_block-size-collapsed);

  align-items: flex-start;
  place-items: center;

  background-color: var(--color-primary);
  border: none;
  border-radius: calc(var(--_marker-size) / 2);
  padding-inline: calc(var(--_marker-size) / 4);
  padding-block: calc(var(--_marker-size) / 4);
  overflow: hidden;
  box-shadow: 0 0 .75rem var(--color-shadow);
  cursor: pointer;
  transition: 
    all var(--transition-duration) var(--transition-timing) var(--transition-delay);

  .map-grid {
    display: grid;
    inline-size: 100%;
    block-size: 100%;
    grid-template-areas: 
      "icon label"
      "map map";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: .5rem;
    row-gap: .5rem;
  }

  img {
    &:is(.marker-icon) {
      grid-area: icon;
      inline-size: var(--_marker-icon-size);
      max-inline-size: unset;
      aspect-ratio: var(--ratio-square);
    }

    &:is(.map-img) {
      grid-area: map;
      place-self: center;
      inline-size: fit-content;
      block-size: auto;
      max-inline-size: 100%;
    }
  }

  span {
    grid-area: label;
    font-size: 1rem;
    font-weight: 200;
    text-align: start;
    white-space: nowrap;
    translate: 0 .25lh;
    opacity: 0;
    transition: 
      all var(--transition-duration) var(--transition-timing) var(--transition-delay);
  }
  
  &:is(:hover, :focus-visible) {
    inline-size: var(--_inline-size-expanded);
    background-color: var(--color-primary);
  
    span {
      opacity: 1;
    };
  }

  &:is(.expanded, [aria-expanded="true"]) {
    inline-size: var(--_inline-size-expanded);
    block-size: var(--_block-size-expanded);
    background-color: var(--color-white);

    span {
      opacity: 1;
    };
  }
}

/* Filter für Stellensuche */
.job-offers-filter {
  position: sticky;
  top: 10rem;
  inline-size: fit-content;

  .filter-list {
    inline-size: fit-content;
    background-color: var(--color-primary);
    box-shadow: 0 0 .5rem oklch(from var(--color-black) l c h / .125);
    transition: 
      background-color var(--transition-duration) var(--transition-timing) var(--transition-delay),
      box-shadow var(--transition-duration) var(--transition-timing) var(--transition-delay);
    padding-inline: 2rem;
    padding-block: 2rem;
    
    ul {
      padding: 0;
      list-style-type: none;
    }

    li {
      display: grid;
      overflow: hidden;
      z-index: 0;

      span {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: space-between;

        cursor: pointer;
        user-select: none;

        padding-block: .25rem;
        z-index: 1;
      }
    }

    label {
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: .5rem;
      font-size: .85rem;
    }

    &:has(.level-1 > li:is(.expanded)) {
      background-color: var(--color-white);
      box-shadow: 0 0 1rem oklch(from var(--color-black) l c h / .125);
    }

    .level-1 {
      margin-block-end: 0;
      
      & > li  {
        transition: 
          all var(--transition-duration) var(--transition-timing) var(--transition-delay);
        row-gap: 0;

        &:has(ul) {
          li {
            span {
              padding-inline-end: .75rem;
            }
          }
        }

        & > span {
          border-bottom: 1px solid transparent;
          column-gap: .5rem;
          transition: 
            border-color var(--transition-duration) var(--transition-timing) var(--transition-delay),
            transform var(--transition-duration) var(--transition-timing) var(--transition-delay);

          & > span {
            margin-inline-end: auto;
          }

          &:after {
            content: "";
            display: inline-block;
            inline-size: 1rem;
            aspect-ratio: var(--ratio-square);

            background-image: var(--svg-arrow-right-secondary);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;

            transition: 
              transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
            transform-origin: center;
            transform: rotate(0deg);
          }
        }

        &:is(.expanded) {
          row-gap: 1rem;
          margin-block-end: 0;

          & > span {
            border-bottom: 1px solid var(--color-secondary);

            &:after {
              transform: rotate(90deg);
            }
          }
            
          .level-2 {
            opacity: 1;
            margin-block-start: 0;
          }
        }
      }
    }

    .level-2 {
      transition:
        all var(--transition-duration) var(--transition-timing) var(--transition-delay);
      opacity: 0;
      margin-block-start: -100%;
      padding-block-start: 1rem;

      input[type="text"] {
        inline-size: 100%;
        border-radius: 2rem;
        border: 2px solid var(--color-secondary);
        transition: 
          border-color var(--transition-duration) var(--transition-timing) var(--transition-delay);
        font-size: 1rem;
        line-height: normal;
        padding-inline: 1rem;
        padding-block: .5rem;
        margin-block-end: 1rem;

        &::placeholder {
          color: var(--color-secondary);
          opacity: .5;
          transition: opacity var(--transition-duration) var(--transition-timing) var(--transition-delay);
        }

        &:is(:focus-visible) {
          outline: none;
          border-color: oklch(from var(--color-primary) l c h  / 1);
          
          &::placeholder {
            opacity: .25;
          }
        }
      }

      li {
        display: grid;

        .filter-title {
          block-size: fit-content;
        }

        &:has(ul) {
          .filter-title {
            &:before,
            &:after {
              content: "";
              position: absolute;
              top: 50%;
              right: 0;

              display: block;
              inline-size: .75rem;
              block-size: 2px;
              
              background-color: var(--color-secondary);
              cursor: pointer;
              
              transition: 
                transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
              transform-origin: center;
              transform: translate(0, -50%);
            }

            &:before {
              transform: rotate(180deg);
            }

            &:after {
              transform: rotate(90deg);
            }
          }

          &:is(.expanded) {
            .filter-title {
              &:before,
              &:after {
                transform: rotate(0deg);
              }
            }
          }
        }

        &:is(.expanded) {
          .level-3 {
            opacity: 1;
            margin-block-end: 0;
            padding-block: 1rem;
          }
        }
      }
    }

    .level-3 {
      transition: 
        all var(--transition-duration) var(--transition-timing) var(--transition-delay);
      opacity: 0;
      margin-block-end: -125%;
      padding-block: 0;

      li {
        font-size: .8rem;
        transition: 
          margin-block-start var(--transition-duration) var(--transition-timing) var(--transition-delay);
      }
    }
  }
}


/* Bagger (Work in Progress) */
.excavator {
  --_item-size: 5.5rem;
  
  --_inline-size-collapsed: 0;
  --_inline-size-expanded: calc(20rem + var(--_item-size));

  --_drive-duration: 5000ms; /* Dauer der Fahr-Animation des Baggers */
  --_drive-delay: 1500ms; /* Verzögerung vor Start der Fahr-Animation des Baggers */
  --_drive-delay: 750ms; /* Override */

  --_travel-distance: max(200vw, 200vh); /* Fahr-Entfernung */
  --_travel-distance-diagonal: calc(var(--_travel-distance) * 1.35); /* Fahr-Entfernung diagonal */

  --_track-color: #ffa300;
  --_track-inline-size: 3.175rem;
  --_track-block-size: 4rem;

  --_track-offset-x: 1.15rem;
  --_track-offset-y: 2rem;

  --_transition-duration-track-opacity: 1000ms;
  --_transition-delay-track-opacity: 6000ms;

  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 100;

  display: grid;
  block-size: var(--_item-size);
  min-inline-size: var(--_item-size);
  
  background-color: var(--color-primary);
  box-shadow: 0 0 .75rem var(--color-shadow);
  
  border: none;
  border-radius: calc(var(--_item-size) / 2);
  cursor: pointer;
  transition: 
    all var(--transition-duration) var(--transition-timing) var(--transition-delay);
  
  padding-inline: 0;
  padding-block: 0;

  /* Hintergrund-Animation: Start */
  &:before {
    --transition-delay: 1000ms;
    --transition-delay: 500ms; /* Override */

    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--_item-size) * .5);

    display: block;
    inline-size: 0;
    block-size: 0;
    
    background-color: var(--color-primary);
    border-radius: 200vw;
    
    translate: 50% -50%;
    transition: 
      inline-size var(--transition-duration) var(--transition-timing) var(--transition-delay),
      block-size var(--transition-duration) var(--transition-timing) var(--transition-delay);
    z-index: -1;
  }

  .excavator-grid {
    position: relative;
    display: grid;
    inline-size: 100%;
    block-size: 100%;
    
    grid-template-areas: 
      "label-image-stack";
    grid-template-columns: auto 1fr;
    
    z-index: 1;
  }

  .text-container {
    grid-area: label-image-stack;

    position: relative;
    display: flex;
    inline-size: fit-content;
    align-items: center;
    
    transition: 
      inline-size var(--transition-duration) var(--transition-timing) var(--transition-delay),
      padding-inline var(--transition-duration) var(--transition-timing) var(--transition-delay);
    
    z-index: 0;
  }

  .image-container {
    grid-area: label-image-stack;

    position: relative;
    display: grid;
    inline-size: var(--_item-size);
    block-size: var(--_item-size);
    
    place-content: flex-end;
    justify-self: flex-end;
    
    background-color: var(--color-primary);
    border-radius: calc(var(--_item-size) / 2);
    
    z-index: 1;

    /* Bagger Fahrspur */
    &:before {
      content: "";
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      
      display: flex;
      inline-size: var(--_track-inline-size);
      block-size: var(--_track-block-size);
      background-color: transparent;
      border-inline: .625rem solid var(--_track-color);

      transform: rotate(-45deg) translate(var(--_track-offset-x), var(--_track-offset-y));
      transform-origin: center bottom;
      transition: 
        block-size var(--_drive-duration) var(--transition-timing) var(--_drive-delay),
        opacity var(--_transition-duration-track-opacity) var(--transition-timing) var(--_transition-delay-track-opacity);
      
      opacity: 1;
      z-index: 0;
    }

    /* Bagger Ketten & Kabine */
    .image-group {
      display: grid;
      justify-items: flex-end;
      
      translate: .1rem 0;
      transition:
        translate var(--_drive-duration) var(--transition-timing) var(--_drive-delay);
      
      padding-inline: 0;
      padding-block: 0;

      & > img {
        grid-row: 1 / -1;
        grid-column: 1 / -1;
      }

      
    }
  }

  img {
    max-width: unset;

    /* Bagger Ketten */
    &:is(.excavator-chains) {
      inline-size: auto;
      block-size: 10rem;
      
      z-index: 0;
    }

    /* Bagger Kabine */
    &:is(.excavator-cabin) {
      inline-size: auto;
      block-size: 10rem;
      
      translate: -1.5rem -.5rem;
      transform: rotate(-45deg);
      transform-origin: center 75%;
      transition: 
      transform var(--transition-duration) var(--transition-timing) var(--transition-delay);
      
      z-index: 1;
    }
  }

  span {
    inline-size: var(--_inline-size-collapsed);
    
    font-size: var(--font-size-paragraph);
    font-weight: 400;
    text-align: start;
    text-transform: uppercase;
    white-space: nowrap;
    
    opacity: 0;
    transition: 
      all var(--transition-duration) var(--transition-timing) var(--transition-delay);
    overflow-x: hidden;
    margin-inline: 2rem;
  }

  &:is(:hover, :focus-visible) {
    .text-container {
      span {
        inline-size: var(--_inline-size-expanded);
      }
    }
  }

  &:is(:hover, :focus-visible, .expanded, [aria-expanded="true"]) {
    img {
      max-width: unset;

      &:is(.excavator-cabin) {
        transform: rotate(0deg);
      }
    }
  
    span {
      opacity: 1;
    }
  }

  &:is(.expanded, [aria-expanded="true"]) {
    .text-container {
      padding-inline: 0;

      span {
        inline-size: var(--_inline-size-collapsed);
      }
    }

    .image-container {
      /* Bagger Fahrspur Animation */
      &:before {
        opacity: 0;
        block-size: calc(var(--_travel-distance-diagonal) + var(--_track-block-size));
      }

      .image-group {
        translate: calc(var(--_travel-distance) * -1) calc(var(--_travel-distance) * -1);

        img {
          &:is(.excavator-cabin) {
            transform: rotate(-45deg);
          }
        }
      }
    }

    /* Hintergrund-Animation: Ende */
    &:before {
      inline-size: max(200vw, 200vh);
      block-size: max(200vw, 200vh);
    }
  }
}


.card {
  &:is(.game-card) {
    --animation-duration: 350ms;

    aspect-ratio: var(--ratio-photo-portrait);
    inline-size: clamp(22rem, calc(10vw - 1rem), 24rem);
    background-color: var(--color-white);
    
    border-radius: 1rem;
    border: none;
    box-shadow: 0 0 .5rem oklch(from var(--color-black) l c h / .125);
    cursor: pointer;
    
    padding-inline: 1rem;
    padding-block: 1rem;

    .card-inner {
      --_immer-border-radius: .625rem;

      flex: 1;
      display: grid;
      background-color: var(--color-gray-light);
      
      & > * {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
      }
      
      .backside,
      .frontside {
        border-radius: var(--_immer-border-radius);
        overflow: hidden;
      }
      
      .backside {
        position: relative;
        overflow: hidden;
        
        .image-container {
          position: absolute;
          top: 50%;
          left: 50%;
  
          display: grid;
          aspect-ratio: var(--ratio-square);
          inline-size: auto;
          block-size: 120%;
          place-items: center;
          background-color: oklch(from var(--color-secondary) 38% c h);
  
          transform: translate(-50%, -50%) rotateZ(-35deg);
          user-select: none;
          z-index: 2;
  
          img {
            inline-size: auto;
            block-size: calc(100% - 12rem);
            object-fit: cover;
  
            pointer-events: none;
            user-select: none;
  
            mix-blend-mode: color-burn;
            opacity: .25;
          }
        }
      }

      .frontside {
        z-index: 1;
      }

      .card-header {
        display: grid;
        align-items: start;
        border-radius: var(--_immer-border-radius);
        border-bottom: none;
        padding: 0;
        
        & > * {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
        }
        
        .header-media-layer {
          aspect-ratio: var(--ratio-photo-standard);
          border-radius: var(--_immer-border-radius);
          overflow: hidden;

          .card-img-top {
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
  
        .header-text-layer {
          --_header-bg-color-highlight: oklch(from var(--color-blue-dark) 36% c h);
          --_header-bg-color: oklch(from #253080 16% c h);
          --_header-label-text-color: oklch(from var(--color-white) l c h / .65);
  
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          min-block-size: 2rem;
          background-color: var(--_header-bg-color);
          
          margin-inline: .5rem;
          margin-block: .5rem;
  
          & > * {
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-white);
            text-transform: uppercase;
            padding-inline: 1ch;
          }
  
          .card-label {
            display: grid;
            place-items: center;
            background-color: var(--_header-bg-color-highlight);
            color: var(--_header-label-text-color);
          }
  
          .card-title {
            display: grid;
            place-items: center;
          }
        }
      }
  
      .card-body {
        padding-inline: 1rem;

        table {
          * {
            background-color: transparent;
            font-family: var(--font-family-base);
            color: var(--color-secondary);
            font-weight: 400;
            border-color: transparent;
          }
  
          tr {
            border-color: transparent;
            border-width: 2px;
            border-bottom-color: oklch(from var(--color-primary) l c h / .4);
    
            &:last-child {
              border-bottom: none;
            }
  
            td {
              padding-inline: 0;
              padding-block: .15rem;

              .attribute {
                font-weight: 400;
              }

              .value {
                font-weight: 600;
              }
            }
          }
        }

        .btn {
          inline-size: 100%;
          text-transform: none;
          justify-content: space-between;
          margin-block: 0;

          span {
            --transition-duration: 150ms;

            font-size: 1rem;

            transition: 
              color var(--transition-duration) var(--transition-timing) var(--transition-delay);
          }

          &:is(:hover, :focus-visible) {
            span {
              color: var(--color-tertiary);
            }
          }
        }
      }
    }

    &:is(.flipped) {
      cursor: default;

      animation: 
        revealGameCardFront var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);
      
      .backside {
        --animation-duration: 0ms;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        /* Rückseite wird zur Hälfte der Vorderseiten-Animation ausgeblendet */
        animation: 
          hideGameCardSide var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + calc(var(--animation-duration) * 0.5)) var(--animation-fill-mode);
      }

    }

    &:is(.unflipped) {
      cursor: pointer;

      animation: 
        concealGameCardFront var(--animation-duration) var(--animation-timing) var(--animation-delay) var(--animation-fill-mode);

      .backside {
        --animation-duration: 0ms;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        /* Rückseite wird zur Hälfte der Vorderseiten-Animation eingeblendet */
        animation: 
          showGameCardSide var(--animation-duration) var(--animation-timing) calc(var(--animation-delay) + calc(var(--animation-duration) * 0.5)) var(--animation-fill-mode);
      }
      
      .frontside {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
    }
  }

  &:is(.job-offer-card) {
    block-size: 100%;
    border: none;

    .card-img-top {
      aspect-ratio: var(--ratio-standard);
      border-radius: 0;
      object-fit: cover;
      object-position: center;
      overflow: hidden;
    }

    .card-body {
      display: flex;
      flex-direction: column;
      row-gap: 3rem;
      background-color: var(--color-primary);
      padding-inline: 2rem;
      padding-block: 2rem;
      
      .text-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        row-gap: .25rem;

        .card-title {
          font-size: 1rem;
          color: var(--color-white);
        }
  
        .card-subtitle {
          font-size: 1.5rem;
          color: var(--color-secondary);
        }
      }

      .btn-container {
        display: flex;
        justify-content: flex-start;
        column-gap: .5rem;
        row-gap: .5rem;
        flex-wrap: wrap;

        .btn {
          font-size: var(--font-size-paragraph);
          font-weight: 300;
          column-gap: .5rem;
          padding-inline: 1rem;
          padding-block: .5rem;
        }
      }
    }
  }
}

/* Kontakt-Box */
.contact-box {
  * {
    color: var(--color-black);
  }
  
  .contact-info-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    row-gap: .5rem;
    column-gap: 1.5rem;
    
    img {
      aspect-ratio: var(--ratio-square);
      inline-size: min(7.5rem, 100%);
      object-fit: cover;
      object-position: center;
      border-radius: 50%;
    }

    .contact-info {
      p {
        margin-block-end: 0;
      }
  
      a {
        color: var(--color-black);
      } 
    }
  }
}


/* Parallax */
.parallax-container {
  overflow-y: hidden;
}

.parallax-item {
  & > .frame {
    padding-block: 0;
  }

  img {
    max-block-size: 60rem;
    inline-size: auto;
  }
}


.text-container {
  &:is(.py-10) {
    padding-block: var(--bs-size-6) !important;
  }
}


.col {
  &:is(.certificates) {
    container-name: certificates-col;
    container-type: inline-size;

    @container certificates-col ( width < 62rem ) {
      .contentcontainer {
        grid-template-columns: 1fr !important;

        .contentcontainer-column {
          &:has(.gallery-item) {
            order: 1;
          }
        }
      }
    }
  }
}

.stellengrid {
  .frame-inner {
    container-name: stellengrid;
    container-type: inline-size;

    @container stellengrid ( width < 62rem ) {
      .card-menu {
        --cardmenu-columns: 2;
      }
    }

    @container stellengrid ( width < 36rem ) {
      .card-menu {
        --cardmenu-columns: 1;
      }
    }
  }
}

/*
 * Benefits
 */
.benefits {
  --_icon-size: 5rem;

  ul {
    --_min-item-size: 11rem;
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--_min-item-size), 100%), 1fr));
    gap: 2rem;
    list-style-type: none;
    padding: 0;

    li {
      display: grid;
      min-block-size: var(--_min-item-size);
      grid-template-rows: auto 1fr;
      gap: 1rem;
      align-items: start;
      justify-items: center;

      background-color: transparent;

      padding-inline: 0rem;
      padding-block: 0rem;

      &:before {
        content: "";
        display: inline-flex;
        inline-size: var(--_icon-size);
        block-size: auto;
        aspect-ratio: var(--ratio-square);

        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

      &:is(.aufgabengebiet):before {
        background-image: var(--svg-icon-aufgabengebiet);
      }
  
      &:is(.arbeitsvertrag):before {
        background-image: var(--svg-icon-arbeitsvertrag);
      }
  
      &:is(.verguetung):before {
        background-image: var(--svg-icon-verguetung);
      }
  
      &:is(.entwicklung):before {
        background-image: var(--svg-icon-entwicklung);
      }
  
      &:is(.weiterbildung):before {
        background-image: var(--svg-icon-weiterbildung);
      }
  
      &:is(.einarbeitung):before {
        background-image: var(--svg-icon-einarbeitung);
      }
  
      &:is(.arbeitsschutzbekleidung):before {
        background-image: var(--svg-icon-arbeitsschutzbekleidung);
      }
  
      &:is(.maschinenpark):before {
        background-image: var(--svg-icon-tools);
      }
  
      &:is(.gesundheitsmanagement):before {
        background-image: var(--svg-icon-gesundheitsmanagement);
      }

      &:is(.sozialleistungen):before {
        background-image: var(--svg-icon-sozialleistungen);
      }
  
      &:is(.urlaub):before {
        background-image: var(--svg-icon-urlaub);
      }
  
      &:is(.erfolg):before {
        background-image: var(--svg-icon-team);
      }

      p {
        color: var(--color-secondary);
        font-size: 1rem;
        font-weight: 300;
        text-align: center;
        hyphens: auto;
        hyphenate-limit-chars: 4 16 6;
      }
    }
  }
}


/*
 * Safari-spezifische Anpassungen
 */
/* html[data-vendor="chrome"], */
html[data-vendor="webkit"] {
  section {
    /* Section: Firmengeschichte (Work in Progress) */
    &:is(.history) {
      --nviitimeline-item-size: clamp(6rem, calc(15vw - 1rem), 14.15rem);

      /* Ebene: Timeline-Kacheln */
      .history-timeline {
        /* Unterhalb Bootstrap xs */
        @container history-grid ( width < 36rem ) {
          --nviitimeline-item-size: clamp(4rem, calc((100vw / 3) - 1rem), 7rem) !important; /* Override item size */

          .main-grid {
          }
  
          .sub-grid {
            grid-template-columns: initial !important; /* Override subgrid */

            &:not(.timeline-grid-3) {
            }

            &:is(.timeline-grid-1) {
            }
            
            &:is(.timeline-grid-2) {
            }
  
            &:is(.timeline-grid-3) {
            }
  
            &:is(.timeline-grid-4) {
            }
  
            &:is(.timeline-grid-5) {
            }
          }
  
          .nviitimeline-item {
            &:not(.item-3) {
            }
            
            &:is(.item-1) {
            }
            
            &:is(.item-2) {
            }
            
            &:is(.item-3) {
            }
  
            &:is(.item-4) {
            }
            
            &:is(.item-5) {
            }
            
            .episode {
              inline-size: var(--nviitimeline-item-size) !important; /* Override inline-size */
              
              img {
              }

              &:is(.episode-1) {
              }
    
              &:is(.episode-2) {
              }
    
              &:is(.episode-3) {
              }
    
              &:is(.episode-4) {
              }
    
              &:is(.episode-5) {
              }
            }
          }
        }
  
        /* Bootstrap xs und aufwärts */
        @container history-grid ( width >= 36rem ) {
          --nviitimeline-item-size: clamp(6rem, calc(20vw - 1rem), 14.15rem) !important; /* Override item size */

          .main-grid {
          }
          
          .sub-grid {
            grid-template-columns: initial !important; /* Override subgrid */

            &:not(.timeline-grid-3) {
            }

            &:is(.timeline-grid-1) {
            }
            
            &:is(.timeline-grid-2) {
            }
  
            &:is(.timeline-grid-3) {
            }
  
            &:is(.timeline-grid-4) {
            }
  
            &:is(.timeline-grid-5) {
            }
          }
  
          .nviitimeline-item {
            inline-size: var(--nviitimeline-item-size) !important; /* Override max-inline-size */

            &:is(.item-1) {
              grid-row: intial; /* Override grid-row */
            }
            
            &:is(.item-2) {
              grid-row: intial; /* Override grid-row */
            }
            
            &:is(.item-3) {
              grid-row: intial; /* Override grid-row */
            }
            
            &:is(.item-4) {
              grid-row: intial; /* Override grid-row */
            }
            
            &:is(.item-5) {
              grid-row: intial; /* Override grid-row */
            }
          }
  
          .episode {
            &:is(.episode-1) {
            }
  
            &:is(.episode-2) {
            }
  
            &:is(.episode-3) {
            }
  
            &:is(.episode-4) {
            }
  
            &:is(.episode-5) {
            }
          }
        }
  
        .nviitimeline-item {
          .episode {
            img {
              &:is(.number-icon) {
              }
  
              &:is(.number-icon-hover) {
              }
            }
          }
  
          &:is(:hover, :focus-visible) {
            .episode {
              img {
                &:is(.number-icon-hover) {
                }
              }
            }
          }
  
          /* Unterhalb Bootstrap xs */
          @container history-grid ( width < 36rem ) {
          }
        }
  
        /* Timeline Item wurde geklickt */
        &:is([data-interacted="true"]) {
          .nviitimeline-item {
            @container history-grid ( width < 36rem ) {
            }
            
            & > * {
            }
          }
          
          /* Timeline Item ist erweitert */
          &:has(.nviitimeline-item.expanded) {
            @container history-grid ( width < 36rem ) {
            }
  
            .nviitimeline-item {  
              &:not(.expanded) {
              }
  
              &:is(.expanded) {
              }
            }
          }
  
          /* Timeline Item ist reduziert */
          &:not(:has(.nviitimeline-item.expanded)) {
            .main-grid {
            }
  
            .nviitimeline-item {
              &:not(.collapsed) {
              }
            }
          }
  
          .main-grid {
            &:has(.timeline-grid-1 > .nviitimeline-item.expanded) {
            }
              
            &:has(.timeline-grid-2 > .nviitimeline-item.expanded) {
            }
            
            &:has(.timeline-grid-3 > .nviitimeline-item.expanded) {
            }
  
            &:has(.timeline-grid-4 > .nviitimeline-item.expanded) {
            }
  
            &:has(.timeline-grid-5 > .nviitimeline-item.expanded) {
            }
            
            &:has(.sub-grid > .nviitimeline-item.expanded) {
              @container history-grid ( width < 36rem ) {
              }
  
              @container history-grid ( width >= 36rem ) {
              }
            }
          }
        }
      }
    }
  }
}


@media (max-width:1300px){
	.karriere45er .col {
	  width: 33%;
	}
	.karriere45er .offset-md-1 {
	  margin:0;
	}
}
@media (max-width:980px){
	.karriere45er .col {
	  width: 50%;
	}
	.karriere45er .offset-md-1 {
	  margin:0;
	}
}
@media (max-width:680px){
	.karriere45er .col {
	  width: 100%;
	}
	.karriere45er .offset-md-1 {
	  margin:0;
	}
}