@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box; }

* {
  margin: 0; }

html, body {
  height: 100%; }

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto; }

input, button, textarea, select {
  font: inherit; }

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; }

#root, #__next {
  isolation: isolate; }

h1, h2, h3, h4, h5, h6, strong {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*Margin Classes

 */
.margin-full {
  margin-top: 50px;
  margin-bottom: 50px; }
  @media (min-width: 767px) {
    .margin-full {
      margin-top: 75px;
      margin-bottom: 75px; } }
  @media (min-width: 1024px) {
    .margin-full {
      margin-bottom: 100px;
      margin-top: 100px; } }

.margin-top {
  margin-top: 50px; }
  @media (min-width: 767px) {
    .margin-top {
      margin-top: 75px; } }
  @media (min-width: 1024px) {
    .margin-top {
      margin-top: 100px; } }

.margin-bottom {
  margin-bottom: 50px; }
  @media (min-width: 767px) {
    .margin-bottom {
      margin-bottom: 75px; } }
  @media (min-width: 1024px) {
    .margin-bottom {
      margin-bottom: 100px; } }

/* Basis-Setup CSS
   Copyright: 2025 - Mike Bembenek
   Author: Mike Bembenek
   E-Mail: info@mikebembenek.de
   Web: https//www.mikebembenek.de
 */
:root {
  --unit: 0.0625rem;
  --spacing-5: calc(5 * var(--unit));
  --spacing-10: calc(10 * var(--unit));
  --spacing-15: calc(15 * var(--unit));
  --spacing-20: calc(20 * var(--unit));
  --spacing-25: calc(25 * var(--unit));
  --spacing-50: calc(50 * var(--unit));
  --spacing-75: calc(75 * var(--unit));
  --spacing-100: calc(100 * var(--unit));
  --spacing-150: calc(150 * var(--unit));
  --base: calc(16 * var(--unit));
  --headline-color: #1f1f1f;
  --text-color: #1f1f1f;
  /*Farben*/
  /*Hauptfarbe*/
  --primary-color: #29abe2;
  --primary-color-300: #1169e1;
  --content-link-color: #073e88;
  --white: #ffffff;
  /*------------------------------------------------------*/
  /*Sekundärfarbe*/
  --secondary-color: #10B981;
  /*------------------------------------------------------*/
  /*tertiaryfarbe*/
  --tertiary-color: #F9FAFB;
  /*------------------------------------------------------*/
  /*UI*/
  /*Globals*/
  --globals-max-width: 1480px;
  --globals-font-family: "Red Hat Display", sans-serif;
  /*------------------------------------------------------*/
  /*Body*/
  --body-width: 100%;
  --body-background-color: #efefef;
  --body-base-font-size: 16px;
  /*------------------------------------------------------*/
  /*Header*/
  --header-topcontent-height: 50px;
  --header-position: fixed;
  --header-background-color: #F1F7FB;
  --header-height: calc( 150px + var(--header-topcontent-height));
  --header-border: 0px solid var(--primary-color);
  --header-width: 100%;
  --header-padding: 0 0 0 0;
  --header-margin: 0 0 0 0;
  --header-zindex: 10;
  --header-logo-maxwidth: 280px;
  --header-top-link-color: transparent;
  --header-top-backgroundcolor: white;
  /*------------------------------------------------------*/
  /*--------------------------------------------------------*/
  /*Hauptcontent*/
  --mastercontent-maxwidth: 1200px;
  --mastercontent-article-distance: var(--spacing-50);
  --mastercontent-padding-inline: calc(13 * var(--unit));
  --mastercontent-font-size-h1: var(--font-size-xl);
  --mastercontent-line-height-h1: 1.25;
  --mastercontent-font-size-h2: var(--font-size-xl);
  --mastercontent-font-size-h3: var(--font-size-l);
  --mastercontent-font-size-h4: var(--font-size-l);
  --mastercontent-font-size-h5: var(--font-size-m);
  --mastercontent-font-size-h6: var(--font-size-m);
  --mastercontent-font-size-text: var(--font-size-m);
  --mastercontent-text-color: #000000;
  --headlines-xl-font-size: calc(30 * var(--unit));
  --headlines-l-font-size: calc(26 * var(--unit));
  --headlines-m-font-size: calc(20 * var(--unit));
  --text-size: calc(16 * var(--unit));
  --text-paddding-block-end: calc(20 * var(--unit));
  --article-distance: var(--spacing-50);
  --mainnavigation-background-color: #ffffff;
  --mainnavigation-level2-background-color: #ffffff;
  --mainnavigation-level2-shadow: 5px 5px 15px 5px var(--darkmode-color-500);
  --mainnavigation-level2-hover: var(--primary-color);
  --kompentenzen-bg: #ffffff;
  --projektablauf-item-bg: white;
  /*------------------------------------------------------*/
  /*Formular-Elemente#*/
  /* Formular Allgemein */
  --form-max-width: 1000px;
  --form-font-family: "Inter",sans-serif;
  --form-font-size: 1rem;
  --form-label-font-weight: bold;
  /* Abstände */
  --form-gap: 1rem;
  --form-input-padding: 0.75rem;
  --form-input-margin-bottom: 1.25rem;
  /* Input Style */
  --form-input-border: 1px solid #ccc;
  --form-input-border-radius: 4px;
  --form-input-bg: #fff;
  --form-input-color: var(--darkmode-color-300);
  --form-input-border-focus: 2px solid var(--primary-color, #1e90ff);
  --form-input-bg-focus: #fff;
  --form-input-shadow-focus: 0 0 0 3px rgba(30, 144, 255, 0.3);
  /* Fehlerzustand */
  --form-input-border-error: 1px solid var(--color-error, #dc3545);
  --form-input-bg-error: #ffe6e6;
  --form-error-text-color: var(--color-error, #dc3545);
  --form-error-font-size: 0.875rem;
  /* Button */
  --form-button-padding: 0.75rem 1.5rem;
  --form-button-bg: var(--primary-color);
  --form-button-bg-hover: var(--footer-background);
  --form-button-color: #fff;
  --form-button-border-radius: 4px;
  --form-button-font-size: 1rem;
  --menubutton-line-color: var(--primary-color);
  /*------------------------------------------------------*/
  /*Darkmode Colors*/
  --darkmode-color-100: black;
  --darkmode-color-200: #222222;
  --darkmode-color-300: #333333;
  --darkmode-color-400: #555555;
  --darkmode-color-500: #777777;
  --darkmode-color-600: #999999;
  --darkmode-color-700: #aaaaaa;
  --darkmode-color-800: #dddddd;
  --darkmode-color-900: white;
  /*------------------------------------------------------*/
  /*Buttons*/
  /* Allgemeine Button Settings */
  --button-font-family: "Verdana", sans-serif;
  --button-font-size: 1rem;
  --button-padding: 0.75rem 1.5rem;
  --button-border-radius: 4px;
  --button-border-width: 1px;
  --button-transition: background-color 0.3s ease;
  /* Primary Button */
  --button-primary-bg: var(--primary-color, #29ABE2);
  --button-primary-color: #fff;
  --button-primary-border: none;
  --button-primary-bg-hover: var(--primary-color-700, #0057b8);
  --button-primary-color-hover: #fff;
  /* Secondary Button */
  --button-secondary-bg: transparent;
  --button-secondary-color: var(--primary-color, #29ABE2);
  --button-secondary-border: var(--button-border-width) solid var(--primary-color, #1e90ff);
  --button-secondary-bg-hover: var(--primary-color-100, #e6f0ff);
  --button-secondary-color-hover: var(--primary-color, #1e90ff);
  /* Tertiary Button */
  --button-tertiary-bg: transparent;
  --button-tertiary-color: #666;
  --button-tertiary-border: none;
  --button-tertiary-bg-hover: #f0f0f0;
  --button-tertiary-color-hover: #333;
  /*Contactbox*/
  --conbox-bg: linear-gradient(359deg, #29abe2 0%, #40aff5 45%, #42abe2 80%);
  --conbox-border-radius: 15px;
  --conbox-border: 5px solid #fafafa;
  --conbox-box-shadow: 0px 0px 0px 5px white inset;
  --conbox-padding-inline: calc( 25 * var(--unit));
  --conbox-padding-block: calc( 50 * var(--unit));
  --conbox-background-color: #29ABE2;
  /*------------------------------------------------------*/
  /*CTA-Button*/
  --cta-background-color: #F2B705;
  --cta-bacckground-color-hover: #FFD83B;
  /*------------------------------------------------------*/
  /*Footer*/
  --footer-width: 100%;
  --footer-height: auto;
  --footer-padding-inline: var(--master-padding-inline);
  --footer-padding-block: calc( 50 * var(--unit));
  --footer-margin: 0 0 0 0;
  --footer-background: #155b81;
  --footer-text-color: #ffffff;
  --footer-bottom-background: #ffffff;
  /*------------------------------------------------------*/
  /*Module*/
  /*Card-Module*/
  --card-item-backgroundcolor: #F2FAFE;
  --card-item-border-color: #C4CDEA;
  --card-item-border-size: 5px;
  --card-item-border-radius: 15px;
  --card-item-max-width: unset;
  --card-item-height: 380px;
  --card-item-padding-block: calc( 40 * var(--unit));
  --card-item-padding-inline: calc( 30 * var(--unit));
  --card-item-text-color: var(--text-color);
  --card-item-topheadline-size: var(--spacing-15);
  --card-item-topheadline-text-transform: uppercase;
  --card-item-topheadline-margin-bottom: calc( 22 * var(--unit));
  --card-item-key-headline-size: calc( 20 * var(--unit));
  --card-item-key-headline-lineheight: 1.25;
  --card-item-key-headline-font-weight: 700;
  --card-item-key-headline-margin-bottom: calc( 22 * var(--unit));
  --card-item-content-list-style-type: decimal;
  --card-item-content-text-size: calc( 15 * var(--unit));
  --card-item-content-line-height: 2;
  --card-item-content-margin-bottom: calc( 22 * var(--unit));
  --card-item-cta-background-color: #FD93FB;
  --card-item-cta-text-color: white;
  --card-item-cta-text-size: calc( 14 * var(--unit));
  --card-item-cta-font-weight: bold;
  --card-item-cta-border-radius: 5px;
  --card-item-cta-height: 34px;
  --card-item-cta-padding-inline: calc( 12 * var(--unit)) calc( 14 * var(--unit));
  --infobox-background-color: #f6f8fa;
  /*------------------------------------------------------*/
  /* Hercontent*/
  --hero-background-color: #1b1727;
  /*------------------------------------------------------*/
  --master-padding-inline: 13px; }
  :root .darkmode {
    --body-background-color: var(--darkmode-color-100);
    --text-color: var(--darkmode-color-900);
    --headline-color: var(--darkmode-color-900);
    --header-top-backgroundcolor: var(--darkmode-color-300);
    --header-top-backgroundcolor-mobile: var(--darkmode-color-400);
    --header-background-color: var(--darkmode-color-300);
    --navlinkcolor: var(--darkmode-color-900);
    --header-top-link-color: var(--darkmode-color-900);
    --primary-color: var(--darkmode-color-600);
    --footer-background: var(--darkmode-color-300);
    --footer-bottom-background: var(--darkmode-color-400);
    --cta-background-color: var(--darkmode-color-300);
    --cta-bacckground-color-hover: var(--darkmode-color-400);
    --conbox-bg: var(--darkmode-color-200);
    --content-link-color: var(--darkmode-color-900);
    --conbox-border: 5px solid var(--darkmode-color-400);
    --conbox-box-shadow: var(--darkmode-color-500);
    --infobox-background-color: var(--darkmode-color-200);
    --mainnavigation-background-color: var(--darkmode-color-300);
    --menubutton-line-color: white;
    --mainnavigation-level2-background-color: var(--darkmode-color-200);
    --mainnavigation-level2-shadow: 5px 5px 15px 5px var(--darkmode-color-300);
    --mainnavigation-level2-hover: var(--darkmode-color-300);
    --kompentenzen-bg: var(--darkmode-color-300);
    --form-button-bg: var(--darkmode-color-200);
    --form-button-bg-hover: var(--darkmode-color-300);
    --projektablauf-item-bg: var(--darkmode-color-400);
    --card-item-backgroundcolor: var(--darkmode-color-300);
    --card-item-border-color: var(--darkmode-color-400);
    --card-item-cta-background-color: var(--darkmode-color-200); }
  @media (min-width: 767px) {
    :root {
      --master-padding-inline: 21px;
      --headlines-xl-font-size: calc(34 * var(--unit));
      --headlines-l-font-size: calc(30 * var(--unit));
      --headlines-m-font-size: calc(24 * var(--unit));
      --text-size: calc(16 * var(--unit));
      --text-paddding-block-end: calc(20 * var(--unit));
      --article-distance: var(--spacing-75);
      --header-top-link-color: var(--text-color);
      --header-topcontent-height: 60px;
      --conbox-border: 10px solid #fafafa;
      --conbox-box-shadow: 0px 0px 0px 10px white inset;
      --conbox-padding-inline: calc( 50 * var(--unit));
      --conbox-padding-block: calc( 75 * var(--unit)); } }
  @media (min-width: 1024px) {
    :root {
      --footer-height: 460px; } }
  @media (min-width: 1200px) {
    :root {
      --headlines-xl-font-size: calc(40 * var(--unit));
      --headlines-l-font-size: calc(36 * var(--unit));
      --headlines-m-font-size: calc(30 * var(--unit));
      --text-size: calc(18 * var(--unit));
      --text-paddding-block-end: calc(21 * var(--unit));
      --article-distance: var(--spacing-100);
      --conbox-padding-inline: calc( 75 * var(--unit));
      --conbox-padding-block: calc( 75 * var(--unit));
      --header-logo-maxwidth: 10px; } }
  @media (min-width: 1480px) {
    :root {
      --master-padding-inline: 0px; } }

/*Logo*/
/* Light Mode – Standardfarben */
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-f88c4d69-8013-424b-93fe-381cd5b9a7a9 {
  fill: #29abe2; }

#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-b48a7af2-38f2-4e7d-b804-228c3ac1e509 {
  fill: #ffffff; }

/* Alle Textklassen */
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-91586b66-b2c6-47a0-af04-9a81c9d523fe,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-b14324d8-835d-4eef-be4a-7c52a6bf8748,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-4085b111-da09-47ff-baa1-953d4ecad1b8,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-83c9f9e4-b873-4582-8e15-d4ce45222c6c,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-ae2209f2-b5f7-4cc1-9b59-c17d9ab69d89,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-da747af9-514a-460a-b164-a219b474dd6c,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-844bef13-5ba9-4b90-ab58-d4dcff0a335e,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-9f16a9eb-1715-4ac8-969f-3892b04af41e,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-bb9f2209-668e-4ead-9508-a2332bf4e824,
#uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-b332593f-391a-4a0f-a313-ae8b38201207 {
  fill: #000000; }

/* Darkmode für neues SVG */
.darkmode #uuid-9f94396e-55ba-4e1a-a634-dfb06eed8965 .uuid-1df00973-0f12-46fc-b55e-2f5a59d3a3e2 {
  fill: #222222;
  /* Hintergrund dunkel */ }

.darkmode #uuid-9f94396e-55ba-4e1a-a634-dfb06eed8965 .uuid-39fa5a24-37cd-46c9-a519-d521c0573cb6 {
  fill: #ffffff;
  /* Pfeile + Schriftzug in Weiß */ }

.darkmode header .logo svg path {
  fill: #ffffff !important;
  /* Pfeile + Schriftzug in Weiß */ }

/* red-hat-display-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/red-hat-display-v20-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/red-hat-display-v20-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/red-hat-display-v20-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/red-hat-display-v20-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/red-hat-display-v20-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/red-hat-display-v20-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/red-hat-display-v20-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/red-hat-display-v20-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/red-hat-display-v20-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/red-hat-display-v20-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/red-hat-display-v20-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/red-hat-display-v20-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/red-hat-display-v20-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* red-hat-display-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Red Hat Display';
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/red-hat-display-v20-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
header {
  position: var(--header-position);
  border-bottom: var(--header-border);
  height: var(--header-height);
  background-color: var(--header-background-color);
  z-index: var(--header-zindex);
  width: var(--header-width);
  margin: var(--header-margin);
  top: 0; }
  header .logo {
    padding-block-start: calc(50 * var(--unit)); }
    @media (min-width: 767px) {
      header .logo {
        padding-block-start: calc(38 * var(--unit)); } }
    @media (min-width: 1200px) {
      header .logo {
        padding-block-start: calc(50 * var(--unit)); } }
    header .logo svg {
      max-width: 250px; }
      @media (min-width: 767px) {
        header .logo svg {
          max-width: 320px; } }
      @media (min-width: 1200px) {
        header .logo svg {
          max-width: 250px; } }
  header .mobilelogo {
    display: none; }
  header .inlay:not(.header-top-content .inlay) {
    display: grid;
    grid-template-columns: 400px 2fr; }
  header .header-main-content {
    padding-inline: var(--master-padding-inline); }
  header .header-top-content {
    width: 100%;
    height: var(--header-topcontent-height);
    padding-block-start: calc( 17 * var(--unit));
    background-color: var(--header-top-backgroundcolor);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    header .header-top-content a {
      color: var(--header-top-link-color);
      text-decoration: none;
      font-size: calc( 14 * var(--unit)); }
    @media (min-width: 1024px) {
      header .header-top-content {
        padding-inline: var(--master-padding-inline);
        display: block; }
        header .header-top-content .inlay {
          display: grid;
          grid-template-columns: 1fr 2fr 1fr;
          justify-content: center; }
        header .header-top-content .header_mailadress {
          justify-self: flex-end; } }
    header .header-top-content .header_telephone {
      background-image: url("../img/icon_tel.svg");
      background-repeat: no-repeat;
      background-size: 30px;
      padding-inline-start: calc( 40 * var(--unit));
      display: none; }
      @media (min-width: 1024px) {
        header .header-top-content .header_telephone {
          display: block; } }
    header .header-top-content .header_mailadress {
      background-image: url("../img/icon_mail.svg");
      background-repeat: no-repeat;
      padding-inline-start: calc( 40 * var(--unit));
      background-size: 30px;
      display: none; }
      header .header-top-content .header_mailadress a {
        font-size: .75rem;
        white-space: nowrap; }
      @media (min-width: 1024px) {
        header .header-top-content .header_mailadress {
          display: block; } }

.headertopmobile {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99; }

.accessibility-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-inline: var(--master-padding-inline);
  margin-inline: auto;
  justify-content: center;
  justify-self: center;
  width: 100%; }
  @media (min-width: 1024px) {
    .accessibility-area {
      max-width: 380px; } }
  .accessibility-area .modetoggler {
    cursor: pointer;
    position: relative;
    margin-right: 1rem;
    display: grid;
    grid-template-columns: 120px 1fr;
    height: inherit; }
    .accessibility-area .modetoggler .toggleelement {
      max-width: 100px;
      width: 100%;
      border-radius: 15px;
      height: 10px;
      position: relative;
      top: 8px;
      background-color: var(--primary-color);
      -webkit-box-shadow: 0px 4px 4px 5px #dadada;
      box-shadow: 0px 2px 38px 5px #dadada; }
      .accessibility-area .modetoggler .toggleelement .ball {
        width: 20px;
        background-color: white;
        height: 20px;
        border-radius: 50%;
        border: 2px solid var(--primary-color);
        position: absolute;
        left: 2px;
        top: -5px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; }
    .accessibility-area .modetoggler p.statecontent {
      font-weight: bold;
      font-size: calc( 14 * var(--unit));
      position: relative;
      top: 2px; }
  .accessibility-area .font-size-toogler {
    justify-self: flex-end; }
    @media (min-width: 1200px) {
      .accessibility-area .font-size-toogler {
        justify-self: unset; } }
    .accessibility-area .font-size-toogler button {
      cursor: pointer;
      background-color: transparent;
      border: 0;
      outline: unset;
      font-weight: bold;
      color: var(--text-color); }

.activetoogler .ball {
  left: 78px !important; }

.mainnavigation {
  --fontsizemainul: calc( 16 * var(--unit));
  --fontsizesecondlevel: calc( 15 * var(--unit));
  position: fixed;
  z-index: 9;
  background-color: var(--mainnavigation-background-color);
  top: 0px;
  width: 100%;
  left: -100%;
  height: 100vh;
  overflow-y: scroll;
  border-radius: 0 0 25px 25px;
  padding-block: 60px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  @media (min-width: 1480px) {
    .mainnavigation {
      position: relative;
      left: 30px;
      top: 0px !important;
      overflow-y: unset;
      height: auto; } }
  .mainnavigation ul.level_1 {
    padding-inline: var(--master-padding-inline);
    margin-block-start: calc( 60 * var(--unit)); }
    .mainnavigation ul.level_1 li {
      padding-block-end: 15px; }
      .mainnavigation ul.level_1 li a {
        font-size: var(--fontsizemainul);
        font-weight: 700;
        letter-spacing: 1.25px;
        color: var(--navlinkcolor);
        text-decoration: none;
        white-space: nowrap;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        text-transform: unset;
        border-bottom: 0; }
        .mainnavigation ul.level_1 li a:hover {
          color: var(--primary-color); }
    @media (min-width: 1480px) {
      .mainnavigation ul.level_1 {
        margin-inline-start: 0px; } }
  .mainnavigation ul.level_1 strong {
    font-weight: 700;
    text-transform: unset;
    color: var(--primary-color);
    position: relative;
    font-size: var(--fontsizemainul);
    white-space: nowrap;
    left: -15px;
    padding: 5px 5px 0px 5px;
    border-radius: 8px;
    letter-spacing: 1.25px;
    z-index: 99;
    box-sizing: border-box; }
  .mainnavigation .activebutton {
    top: -8px; }
    .mainnavigation .activebutton svg {
      transform: rotate(180deg); }
  .mainnavigation ul.level_2 {
    padding-inline-start: calc( 2* var(--master-padding-inline));
    padding-block: 5px; }
    .mainnavigation ul.level_2 li {
      padding-block-end: 5px; }
      .mainnavigation ul.level_2 li a {
        color: var(--navlinkcolor);
        font-size: var(--fontsizesecondlevel);
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0;
        text-transform: unset; }
      .mainnavigation ul.level_2 li strong {
        color: var(--primary-color) !important;
        font-size: var(--fontsizesecondlevel);
        font-weight: 700 !important;
        line-height: 1.5;
        padding-left: 10px !important;
        letter-spacing: 0 !important;
        text-transform: unset !important;
        background-color: transparent;
        white-space: nowrap; }
    @media (min-width: 1200px) {
      .mainnavigation ul.level_2 {
        background-color: var(--subnavbackground); } }

@media (min-width: 1480px) {
  .darksub svg path {
    fill: var(--darkpink); }

  nav.block {
    overflow: unset; }

  .mainnavigation {
    display: block;
    background-color: transparent;
    padding-block: 0;
    top: 50px;
    z-index: 12; }
    .mainnavigation ul.level_1 {
      display: flex;
      gap: 0 15px;
      position: relative; }
      .mainnavigation ul.level_1 li.submenu {
        position: static; }
      .mainnavigation ul.level_1 strong {
        position: static !important;
        left: 0; }
      .mainnavigation ul.level_1 a {
        padding: 5px 5px; }
    .mainnavigation ul.level_2 {
      position: absolute;
      background-color: var(--mainnavigation-level2-background-color);
      top: 10px;
      display: none;
      z-index: 999;
      margin: 25px 0 0 0;
      padding: 10px 11px 8px 10px;
      border-radius: 10px;
      -webkit-box-shadow: var(--mainnavigation-level2-shadow);
      box-shadow: var(--mainnavigation-level2-shadow); }
      .mainnavigation ul.level_2 a {
        white-space: nowrap;
        display: block;
        width: 100%;
        color: var(--subnavlinkcolor);
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        padding: 0px 10px;
        border-radius: 4px; }
        .mainnavigation ul.level_2 a:hover {
          background-color: var(--mainnavigation-level2-hover);
          color: white !important; }
      .mainnavigation ul.level_2 strong {
        background-color: var(--subnavhovercolor) !important;
        padding: 0px 0px !important;
        white-space: nowrap;
        display: block;
        margin-block: 2px;
        color: var(--subnavlinkcolor) !important; }
      .mainnavigation ul.level_2 .submenuicon {
        position: relative;
        top: -19px;
        left: 11px;
        width: 20px;
        height: 10px;
        display: none; }
        .mainnavigation ul.level_2 .submenuicon svg path {
          fill: var(--subnavbackground); } }
      @media (min-width: 1480px) and (min-width: 1200px) {
        .mainnavigation ul.level_2 .submenuicon {
          display: block; } }

@media (min-width: 1480px) {
  li.jobs ul.level_2 {
    height: 95px;
    width: 250px !important; }

  .mainnavigation ul.level_1 li.submenu:hover > ul {
    display: block !important; } }
ul.level_2 .submenuicon {
  display: none; }
@media (min-width: 1200px) {
  ul.level_2 {
    display: block; } }

.activemainnavigation {
  left: 0; }

.menubutton {
  position: absolute;
  right: var(--master-padding-inline);
  top: 60%;
  transform: translateY(-50%); }
  @media (min-width: 767px) {
    .menubutton {
      top: 62%; } }
  @media (min-width: 1480px) {
    .menubutton {
      display: none; } }
  .menubutton .togglemenu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000; }
    .menubutton .togglemenu span {
      display: block;
      height: 3px;
      width: 100%;
      background-color: var(--menubutton-line-color);
      border-radius: 2px;
      transition: all 0.3s ease-in-out; }

.activemenubutton {
  position: fixed !important;
  top: 125px;
  right: 13px;
  z-index: 999; }
  @media (min-width: 767px) {
    .activemenubutton {
      top: 130px;
      right: 21px; } }
  .activemenubutton span:nth-child(1) {
    transform: rotate(45deg) translate(2px, 7px); }
  .activemenubutton span:nth-child(2) {
    opacity: 0; }
  .activemenubutton span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -13px); }

@media screen and (max-width: 1479px) {
  .mainnavigation ul.level_1 {
    padding-left: var(--master-padding-inline);
    margin-block-end: 25px; }
    .mainnavigation ul.level_1 li.submenu {
      position: relative;
      padding-left: 15px; }
      .mainnavigation ul.level_1 li.submenu > a,
      .mainnavigation ul.level_1 li.submenu > strong {
        position: relative;
        z-index: 2; }
      .mainnavigation ul.level_1 li.submenu ul.level_2 {
        padding-left: 15px;
        margin-top: 8px;
        list-style: none;
        border-left: none;
        position: relative; }
        .mainnavigation ul.level_1 li.submenu ul.level_2::before {
          content: '';
          position: absolute;
          top: 2px;
          left: 0;
          width: 2px;
          height: calc( 100% - 26px);
          background-color: #ccc; }
        .mainnavigation ul.level_1 li.submenu ul.level_2 li {
          position: relative;
          padding-left: 15px;
          margin-bottom: 10px; }
          .mainnavigation ul.level_1 li.submenu ul.level_2 li::before {
            content: '';
            position: absolute;
            top: 0.8em;
            left: -15px;
            width: 15px;
            height: 2px;
            background-color: #ccc; }
          .mainnavigation ul.level_1 li.submenu ul.level_2 li a,
          .mainnavigation ul.level_1 li.submenu ul.level_2 li strong {
            text-decoration: none;
            font-weight: 400;
            transition: color 0.3s ease; }
            .mainnavigation ul.level_1 li.submenu ul.level_2 li a.active, .mainnavigation ul.level_1 li.submenu ul.level_2 li a.active strong,
            .mainnavigation ul.level_1 li.submenu ul.level_2 li strong.active,
            .mainnavigation ul.level_1 li.submenu ul.level_2 li strong.active strong {
              color: var(--primary-color);
              font-weight: 700; }
            .mainnavigation ul.level_1 li.submenu ul.level_2 li a:hover,
            .mainnavigation ul.level_1 li.submenu ul.level_2 li strong:hover {
              color: var(--primary-color); } }
.herocontent {
  --grid-x: 0px;
  --grid-y: 0px;
  background-color: var(--hero-background-color);
  padding-inline: var(--master-padding-inline);
  padding-block: var(--master-padding-inline);
  position: relative;
  color: var(--white); }
  .herocontent .rte {
    opacity: 0; }
  .herocontent h1 {
    opacity: 0; }
  .herocontent h1, .herocontent p {
    color: inherit; }
  .herocontent .inlay {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 400px; }
  .herocontent img {
    width: 100%;
    height: auto; }
  .herocontent .content-image {
    justify-self: flex-end;
    order: 1;
    opacity: 0; }
  .herocontent .content-text {
    align-self: center;
    order: 2; }
  .herocontent a {
    color: var(--text-color) !important; }

.herocontent {
  position: relative;
  background: linear-gradient(135deg, #100f1a, #1c1b2b);
  overflow: hidden;
  color: white; }

.herocontent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.03)), linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.03));
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  animation: gridMove 30s linear infinite;
  z-index: 0;
  pointer-events: none;
  transform: translate(var(--grid-x, 0), var(--grid-y, 0));
  transition: transform 0.2s ease-out; }

@keyframes gridMove {
  0% {
    background-position: 0 0, 20px 20px; }
  100% {
    background-position: -200px -200px, -180px -180px; } }
.herocontent > * {
  position: relative;
  z-index: 1; }

@keyframes gridColorShift {
  0% {
    filter: hue-rotate(0deg); }
  100% {
    filter: hue-rotate(360deg); } }
.herocontent::before {
  animation: gridMove 30s linear infinite, gridColorShift 60s linear infinite; }

@media screen and (min-width: 600px) {
  .herowithimage .inlay {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px; }
  .herowithimage .content-image, .herowithimage .content-text {
    order: unset; }
  .herowithimage img {
    max-height: 600px; } }
@media (min-width: 1200px) {
  .herocontent .content-text {
    max-width: 1000px;
    margin-inline: auto; } }

.dsecontent ul {
  list-style-type: disc;
  margin-block: calc(15 * var(--unit)); }
  .dsecontent ul li {
    color: var(--text-color); }

.ce_rsce_carditem {
  background-color: var(--card-item-backgroundcolor);
  padding-block: var(--card-item-padding-block);
  padding-inline: var(--card-item-padding-inline);
  border: var(--card-item-border-size) solid var(--card-item-border-color);
  border-radius: var(--card-item-border-radius);
  color: var(--card-item-text-color);
  margin-block-end: 25px;
  max-width: var(--card-item-max-width);
  height: var(--card-item-height); }
  .ce_rsce_carditem h4.card-top-headline {
    font-size: var(--card-item-topheadline-size);
    text-transform: var(--card-item-topheadline-text-transform);
    margin-block-end: var(--card-item-topheadline-margin-bottom); }
  .ce_rsce_carditem h2.card-key-headline {
    font-size: var(--card-item-key-headline-size);
    line-height: var(--card-item-key-headline-lineheight);
    font-weight: var(--card-item-key-headline-font-weight);
    margin-block-end: var(--card-item-key-headline-margin-bottom); }
  .ce_rsce_carditem .card-content {
    min-height: 120px;
    margin-block-end: var(--card-item-content-margin-bottom); }
    .ce_rsce_carditem .card-content ol {
      list-style-type: decimal;
      padding: 0 20px; }
      .ce_rsce_carditem .card-content ol li {
        font-size: var(--card-item-content-text-size);
        line-height: var(--card-item-content-line-height);
        white-space: nowrap;
        color: var(--text-color); }
  .ce_rsce_carditem ul.card-links {
    padding-inline: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); }
    .ce_rsce_carditem ul.card-links a {
      font-size: var(--card-item-cta-text-size);
      padding-block-start: 7px;
      display: block;
      border-bottom: 0; }
    .ce_rsce_carditem ul.card-links li:last-of-type {
      justify-self: flex-end; }
    .ce_rsce_carditem ul.card-links a.card-cta-link {
      display: block;
      width: fit-content;
      text-decoration: none;
      background-color: var(--card-item-cta-background-color);
      color: var(--card-item-cta-text-color);
      font-size: var(--card-item-cta-text-size);
      font-weight: var(--card-item-cta-font-weight);
      border-radius: var(--card-item-cta-border-radius);
      height: var(--card-item-cta-height);
      padding-inline: var(--card-item-cta-padding-inline);
      padding-block-start: 7px; }

.mastercontent {
  margin-top: var(--header-height);
  padding-block-end: var(--master-padding-inline); }
  .mastercontent h1, .mastercontent h2 {
    font-size: var(--headlines-xl-font-size);
    font-weight: 500;
    line-height: 1.25;
    margin-block-end: var(--spacing-15); }
    @media (min-width: 1200px) {
      .mastercontent h1, .mastercontent h2 {
        margin-block-end: calc( 40 * var(--unit)); } }
  .mastercontent h1:not(.herocontent h1) {
    color: var(--headline-color); }
  .mastercontent h2 {
    color: var(--headline-color); }
  .mastercontent h2, .mastercontent h3 {
    margin-block-end: calc(30 * var(--unit)); }
  .mastercontent h3, .mastercontent h4 {
    font-size: var(--headlines-l-font-size);
    font-weight: 500;
    color: var(--headline-color); }
  .mastercontent h5, .mastercontent h6 {
    font-size: var(--headlines-m-font-size);
    font-weight: 500;
    color: var(--headline-color); }

p {
  font-size: var(--text-size);
  color: var(--text-color);
  margin-block-end: var(--text-paddding-block-end); }

strong {
  font-weight: bold; }

a:not(.cta-button, footer a) {
  color: var(--content-link-color);
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  a:not(.cta-button, footer a):hover {
    color: var(--primary-color); }

.touppercase {
  text-transform: uppercase; }

.mod_article:not(.herocontent) {
  padding-inline: var(--master-padding-inline); }

.mod_article {
  margin-block-end: var(--article-distance); }

.contactbox {
  background: var(--conbox-background-color);
  padding-inline: var(--conbox-padding-inline);
  padding-block: var(--conbox-padding-block);
  border: var(--conbox-border);
  border-radius: var(--conbox-border-radius);
  box-shadow: var(--conbox-box-shadow);
  background: var(--conbox-bg);
  color: white; }
  .contactbox a {
    color: var(--text-color); }
  .contactbox p, .contactbox h2 {
    color: inherit; }

.profileimage img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border: 1px solid var(--darkmode-color-700);
  border-radius: 10px; }
.profileimage figcaption {
  display: block;
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
  margin-block-start: calc( 10 * var(--unit)); }

#article-12 {
  background: var(--kompentenzen-bg);
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  max-width: 1050px;
  margin-inline: auto;
  margin-block: 4rem;
  position: relative;
  border-left: 6px solid var(--primary-color); }

/* Titel */
#article-12 h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 700; }

/* Kategorien + Skills */
#article-12 p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem; }

#article-12 p strong {
  display: inline-block;
  min-width: 220px;
  font-weight: 600; }

/* Link zur Leistungsübersicht */
#article-12 a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease; }

.listitems {
  padding: 0; }
  .listitems li {
    background-image: url("../img/icon-check.svg");
    background-repeat: no-repeat;
    background-size: 60px;
    color: var(--text-color);
    font-size: var(--text-size);
    padding-inline-start: 75px;
    margin-block-end: var(--spacing-25);
    background-position: 0 -10px; }
    @media (min-width: 1200px) {
      .listitems li {
        background-position: 0 -6px; } }
    .listitems li strong {
      color: var(--primary-color); }
  @media (min-width: 1200px) {
    .listitems li:first-of-type {
      margin-block-end: var(--spacing-50); } }
  @media (min-width: 767px) {
    .listitems {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 20px; } }
  @media (min-width: 1200px) {
    .listitems {
      grid-template-columns: repeat(3, 1fr); } }

.secondlistelement {
  margin-block-start: var(--article-distance); }

/* Hauptbereich mit Clipboard-Optik */
.mod_article.projektablauf {
  background: var(--kompentenzen-bg);
  border-radius: 16px;
  max-width: 800px;
  margin-inline: var(--master-padding-inline);
  box-shadow: 0 0 0 4px #d6cbb6, 0 20px 40px rgba(0, 0, 0, 0.05);
  padding: 3rem 2rem;
  position: relative;
  margin-block: 4rem; }
  @media (min-width: 1024px) {
    .mod_article.projektablauf {
      margin-inline: auto; } }

/* Klammer oben */
.mod_article.projektablauf::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 30px;
  background: #ccc;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 2; }

/* Headline */
.mod_article.projektablauf h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 3rem; }

/* Schritte-Wrapper */
.mod_article.projektablauf .inlay {
  display: flex;
  flex-direction: column;
  gap: 2rem; }

/* Einzelner Schritt */
.mod_article.projektablauf .content-text {
  background: var(--projektablauf-item-bg);
  padding: 1.5rem 1.5rem 1.5rem 4rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  position: relative; }

/* Schritt-Nummer aus h3 extrahieren */
.mod_article.projektablauf .content-text h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  position: relative; }

/* Nummer in einem Kreis anzeigen (aus Text geholt!) */
.mod_article.projektablauf .content-text h3::before {
  content: attr(data-step);
  position: absolute;
  left: -3rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--projektablauf-item-bg); }

/* Text */
.mod_article.projektablauf .content-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6; }

/* Responsive */
@media (max-width: 600px) {
  .mod_article.projektablauf .content-text {
    padding-left: 3.5rem; }

  .mod_article.projektablauf .content-text h3::before {
    left: -2.5rem; } }
.mod_article.infobox {
  background: var(--infobox-background-color);
  border-left: 6px solid var(--primary-color);
  padding: 2rem;
  max-width: 800px;
  margin-block-start: 3rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  margin-inline: var(--master-padding-inline); }
  @media (min-width: 1024px) {
    .mod_article.infobox {
      margin-inline: auto; } }

.mod_article.infobox ul {
  padding: 0;
  margin-block: calc( 15* var(--unit)); }
  .mod_article.infobox ul li {
    color: var(--text-color);
    font-weight: bold; }

/* Headline */
.mod_article.infobox h2 {
  margin-top: 0;
  font-size: 1.5rem;
  margin-bottom: 1rem; }

/* Text */
.mod_article.infobox .rte p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem; }

/* Link-Stil */
.mod_article.infobox a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease; }

.mod_article.infobox a:hover {
  color: var(--accent-color, #4e46e5);
  border-color: var(--accent-color, #4e46e5); }

/* Icon / visuelles Highlight optional */
.mod_article.infobox::before {
  content: "ℹ️";
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.5rem;
  opacity: 0.1;
  pointer-events: none; }

/* Boxen-Style */
.servicelist .content-text {
  background: var(--kompentenzen-bg);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  width: 100%; }
  .servicelist .content-text:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08); }

.servicelist .content-text:not(:last-of-type) {
  margin-block-end: calc( 15 * var(--unit)); }
  @media (min-width: 1024px) {
    .servicelist .content-text:not(:last-of-type) {
      margin-block-end: 0; } }

.servicelist ul {
  list-style: none;
  padding: 0;
  margin: 0; }
  .servicelist ul li {
    margin-top: 0.5rem; }
    .servicelist ul li a {
      color: var(--primary-color);
      font-weight: 500;
      border-bottom: 1px solid var(--primary-color);
      transition: color 0.3s ease, border-color 0.3s ease; }
      .servicelist ul li a:hover {
        color: var(--primary-color-500);
        border-color: var(--primary-color-500); }

.mod-form-teaser {
  min-height: 400px;
  margin-block: calc( 50 *var(--unit)); }

.gridrow {
  display: grid; }

.gridtwoelements {
  display: grid;
  max-width: var(--content-maxwidth);
  margin-inline: auto; }
  .gridtwoelements .content-text {
    order: 2; }
  .gridtwoelements .content-image {
    order: 1;
    margin-block-end: calc(25*var(--unit)); }
  @media (min-width: 1024px) {
    .gridtwoelements {
      grid-template-columns: 1fr 1fr;
      gap: 0 50px; }
      .gridtwoelements .content-text, .gridtwoelements .content-image {
        order: unset; }
      .gridtwoelements .content-image {
        justify-self: flex-end; } }
  @media (min-width: 1200px) {
    .gridtwoelements {
      gap: 0 100px; }
      .gridtwoelements .ce_text {
        max-width: 580px;
        justify-self: center;
        align-self: center; }
      .gridtwoelements .ce_image {
        align-self: center; } }

@media (min-width: 1024px) {
  .gridthreeelements {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 15px; }
    .gridthreeelements .linkbox {
      width: 100%; } }
@media (min-width: 1200px) {
  .gridthreeelements {
    gap: 0 30px; } }
@media (min-width: 1200px) {
  .gridthreeelements {
    grid-template-columns: 1fr 1fr 1fr; } }

.gridfourelements .content-headline {
  width: 100%;
  display: block; }
  @media (min-width: 767px) {
    .gridfourelements .content-headline {
      grid-column: 1 / 3; } }
  @media (min-width: 1024px) {
    .gridfourelements .content-headline {
      grid-column: 1 / 5; } }
  @media (min-width: 1200px) {
    .gridfourelements .content-headline {
      grid-column: 1 / 5;
      max-width: 690px; } }
@media (min-width: 767px) {
  .gridfourelements {
    grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .gridfourelements {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0 30px; } }
@media (min-width: 1200px) {
  .gridfourelements {
    grid-template-columns: 1fr 1fr 1fr 1fr; } }

@media (min-width: 1024px) {
  .grid75 {
    grid-template-columns: 58.33% 41.66%; } }

.gridtwoelementshdl100 {
  width: 100%; }
  .gridtwoelementshdl100 .content-text:first-of-type {
    margin-block-end: 25px; }
  @media (min-width: 767px) {
    .gridtwoelementshdl100 {
      grid-template-columns: 1fr 1fr;
      gap: 0 30px;
      grid-template-areas: 'headline headline' 'box1 box2'; }
      .gridtwoelementshdl100 .content-headline {
        grid-area: headline; } }
  @media (min-width: 1400px) {
    .gridtwoelementshdl100 {
      gap: 0 47px; } }

@media (max-width: 766px) {
  .gridthreelementshome {
    display: grid; }
    .gridthreelementshome h2 {
      margin-bottom: 25px; } }
@media (min-width: 767px) {
  .gridthreelementshome {
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    grid-template-areas: 'headline headline' 'box1 box2' 'box3 box3'; }
    .gridthreelementshome .content-headline {
      grid-area: headline;
      margin-block-end: 35px; }
    .gridthreelementshome .ce_rsce_imageslider {
      grid-area: box1; }
    .gridthreelementshome .ce_rsce_imageslidersecond {
      grid-area: box2; }
    .gridthreelementshome .linkbox {
      grid-area: box3;
      width: 100%; }
    .gridthreelementshome .rte:first-of-type {
      grid-area: box1; } }
@media (min-width: 1200px) {
  .gridthreelementshome {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 'headline headline headline' 'box1 box2 box3'; }
    .gridthreelementshome .linkbox {
      height: calc( 100% - 70px );
      position: relative; }
      .gridthreelementshome .linkbox .cta-button {
        position: absolute;
        left: 50px;
        bottom: 50px; }
    .gridthreelementshome .slidecontent h3 {
      margin-block: 35px 0 !important; } }

.nogap .gridrow {
  gap: 0 !important; }

@media (min-width: 767px) {
  .gridfourelementscontent {
    grid-template-areas: 'headline headline' 'box1 box2'; }
    .gridfourelementscontent .content-text:first-of-type {
      grid-area: headline;
      margin-bottom: 50px; } }

@media (min-width: 1024px) {
  .gridthreelementshdl100 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 47px;
    grid-template-areas: 'headline headline' 'box1 box2'; }
    .gridthreelementshdl100 .content-text:first-of-type {
      grid-area: headline;
      margin-bottom: 50px; } }
@media (min-width: 1024px) {
  .gridthreelementshdl100 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 30px;
    grid-template-areas: 'headline headline headline' 'box1 box2 box3'; } }
@media (min-width: 1400px) {
  .gridthreelementshdl100 {
    gap: 0 48px; } }

.gridfourelementshdl100 h3 {
  color: var(--darkblue); }
@media (min-width: 767px) {
  .gridfourelementshdl100 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 47px;
    grid-template-areas: 'headline headline' 'box1 box2'; }
    .gridfourelementshdl100 .content-headline {
      grid-area: headline;
      margin-bottom: 50px; }
    .gridfourelementshdl100 .content-text:first-of-type {
      grid-area: box1; } }
@media (min-width: 1200px) {
  .gridfourelementshdl100 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0 47px;
    grid-template-areas: 'headline headline headline headline' 'box1 box2 box3 box4'; } }

.gridnotcentered {
  overflow: unset; }
  .gridnotcentered .gridtwoelements {
    display: grid; }
    @media (min-width: 1024px) {
      .gridnotcentered .gridtwoelements {
        grid-template-columns: 1fr 1fr; }
        .gridnotcentered .gridtwoelements h2 {
          max-width: 500px; }
        .gridnotcentered .gridtwoelements .content-text:first-of-type .rte {
          position: relative;
          top: -40px; } }

.threegridelements {
  display: grid; }
  @media (min-width: 767px) {
    .threegridelements {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 'headline box1' 'headline box2'; }
      .threegridelements .content-headline {
        grid-area: headline;
        margin-block-end: 35px;
        max-width: 257px; } }
  @media (min-width: 767px) {
    .threegridelements .content-text {
      padding-right: 50px; } }
  @media (min-width: 1024px) {
    .threegridelements {
      grid-template-columns: 1fr 1fr;
      gap: 0 30px;
      grid-template-areas: 'headline headline' 'box1 box2'; }
      .threegridelements .content-headline {
        grid-area: headline;
        margin-block-end: 50px !important;
        max-width: 1100px; } }

@media (min-width: 1400px) {
  .gridtwoelements .content-text {
    padding-block-start: 50px; } }
@media (min-width: 1480px) {
  .gridtwoelements .content-text {
    padding-block-start: 75px;
    max-width: 723px; } }
footer {
  width: var(--footer-width);
  height: var(--footer-height);
  padding-inline: var(--footer-padding-inline);
  padding-block: var(--footer-padding-block);
  margin: var(--footer-margin);
  background-color: var(--footer-background);
  color: var(--footer-text-color);
  position: relative; }
  footer h3 {
    font-size: calc( 20 * var(--unit));
    font-weight: bold;
    margin-block-end: 10px; }
  footer .footer-logo {
    margin-block: var(--spacing-15); }
    footer .footer-logo svg {
      max-width: 220px; }
  footer ul {
    padding: 0;
    margin-block-end: var(--spacing-15); }
    footer ul li {
      color: inherit; }
  footer p:not(.footer-bottom p) {
    color: inherit; }
  footer a {
    color: var(--footer-text-color);
    white-space: nowrap;
    font-size: calc( 14 * var(--unit));
    text-decoration: none; }
  @media (min-width: 1024px) {
    footer .footergrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;
      width: 100%; } }
  footer ul li {
    margin-block-end: calc( 5 *var(--unit)); }

.footer-bottom {
  height: 50px;
  width: 100%;
  background-color: var(--footer-bottom-background);
  text-align: center;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 0;
  padding-block: var(--spacing-10); }

@media (min-width: 1024px) {
  .footer-menu {
    margin-block-start: calc( 75 * var(--unit)); } }

@media (min-width: 1024px) {
  .footer-menu_services, .footer-menu_dev {
    justify-self: center; } }

.footer-menu_lastmenu {
  padding-block-end: calc( 50 * var(--unit)); }
  @media (min-width: 1024px) {
    .footer-menu_lastmenu {
      justify-self: flex-end; } }

form {
  font-family: var(--form-font-family);
  font-size: var(--form-font-size);
  margin-block-start: calc( 50 * var(--unit)); }
  form label {
    display: block;
    margin-bottom: var(--form-gap);
    color: var(--text-color);
    font-weight: var(--form-label-font-weight);
    cursor: pointer; }
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="number"],
  form textarea,
  form select {
    display: block;
    width: 100%;
    padding: var(--form-input-padding);
    margin-bottom: var(--form-input-margin-bottom);
    font-size: var(--form-font-size);
    color: var(--form-input-color);
    background-color: var(--form-input-bg);
    border: var(--form-input-border);
    border-radius: var(--form-input-border-radius);
    transition: all 0.3s ease; }
  form input:focus,
  form textarea:focus,
  form select:focus {
    border: var(--form-input-border-focus);
    background-color: var(--form-input-bg-focus);
    box-shadow: var(--form-input-shadow-focus);
    outline: none; }
  form input.error,
  form textarea.error,
  form select.error {
    border: var(--form-input-border-error);
    background-color: var(--form-input-bg-error); }
  form .error-message {
    color: var(--form-error-text-color);
    font-size: var(--form-error-font-size);
    margin-top: calc(-0.75 * var(--form-gap));
    margin-bottom: var(--form-input-margin-bottom); }
  form button,
  form input[type="submit"] {
    display: inline-block;
    padding: var(--form-button-padding);
    background-color: var(--form-button-bg);
    color: var(--form-button-color);
    border: none;
    border-radius: var(--form-button-border-radius);
    font-size: var(--form-button-font-size);
    cursor: pointer;
    transition: background-color 0.3s ease; }
  form button:hover,
  form input[type="submit"]:hover {
    background-color: var(--form-button-bg-hover); }

.mod-formular {
  max-width: var(--form-max-width);
  margin: 50px auto; }

.button {
  display: inline-block;
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--button-transition); }

/* Primary */
.button-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-color);
  border: var(--button-primary-border); }

.button-primary:hover {
  background-color: var(--button-primary-bg-hover);
  color: var(--button-primary-color-hover); }

/* Secondary */
.button-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-color);
  border: var(--button-secondary-border); }

.button-secondary:hover {
  background-color: var(--button-secondary-bg-hover);
  color: var(--button-secondary-color-hover); }

/* Tertiary */
.button-tertiary {
  background-color: var(--button-tertiary-bg);
  color: var(--button-tertiary-color);
  border: var(--button-tertiary-border); }

.button-tertiary:hover {
  background-color: var(--button-tertiary-bg-hover);
  color: var(--button-tertiary-color-hover); }

.cta-button {
  background-color: var(--cta-background-color);
  width: fit-content;
  padding: 1em 1em;
  white-space: nowrap;
  border-radius: 6px;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: var(--text-color);
  border: 0;
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  font-weight: bold; }

.cta-button:hover {
  background-color: var(--cta-bacckground-color-hover);
  transform: translateY(0px); }

.cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg); }

.cta-button:hover::after {
  animation: shine 0.8s forwards; }

@keyframes shine {
  to {
    left: 125%; } }
body {
  width: var(--body-width);
  background-color: var(--body-background-color);
  font-size: var(--body-base-font-size);
  font-family: var(--globals-font-family); }

.inlay {
  max-width: var(--globals-max-width);
  margin-inline: auto; }

.darkmode .accessibility-area .modetoggler .toggleelement {
  box-shadow: unset; }
.darkmode .listitems li {
  background-image: url(../img/icon-check-dm.svg); }
.darkmode header .header-top-content .header_telephone {
  background-image: url(../img/icon_tel_dm.svg); }
.darkmode header .header-top-content .header_mailadress {
  background-image: url(../img/icon_mail_dm.svg); }

.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-f88c4d69-8013-424b-93fe-381cd5b9a7a9 {
  fill: #222222; }

.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-b48a7af2-38f2-4e7d-b804-228c3ac1e509 {
  fill: #ffffff; }

.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-91586b66-b2c6-47a0-af04-9a81c9d523fe,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-b14324d8-835d-4eef-be4a-7c52a6bf8748,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-4085b111-da09-47ff-baa1-953d4ecad1b8,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-83c9f9e4-b873-4582-8e15-d4ce45222c6c,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-ae2209f2-b5f7-4cc1-9b59-c17d9ab69d89,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-da747af9-514a-460a-b164-a219b474dd6c,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-844bef13-5ba9-4b90-ab58-d4dcff0a335e,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-9f16a9eb-1715-4ac8-969f-3892b04af41e,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-bb9f2209-668e-4ead-9508-a2332bf4e824,
.darkmode #uuid-6e112118-a793-45cb-8b1f-69f2fb8d3c91 .uuid-b332593f-391a-4a0f-a313-ae8b38201207 {
  fill: #ffffff; }

/*# sourceMappingURL=main.css.map */