/* ==========================================================================
  Universeller Font: Roboto (variabel)
  ========================================================================== */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/Roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/Roboto-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font Rendering on Macos */
body {
	/*text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;*/
	-moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

/* ==========================================================================
  Typography: Variables
  ========================================================================== */
:root {
  --font-main: 'Roboto', sans-serif;

  /* Clamps (375px bis 1440px) */
  --h1: clamp(3rem, 2.164rem + 3.57vw, 5.375rem);
  --h2: clamp(2.125rem, 1.289rem + 3.57vw, 4.5rem);
  --h3: clamp(1.875rem, 1.127rem + 3.19vw, 4rem);
  --h4: clamp(1.75rem, 1.134rem + 2.63vw, 3.5rem);
  --h5: clamp(1.5rem, 0.972rem + 2.25vw, 3rem);
  --h6: clamp(1.375rem, 1.023rem + 1.5vw, 2.375rem);

  --text-large:  clamp(1.25rem, 0.986rem + 1.13vw, 2rem);
  --text-normal: clamp(1.125rem, 0.905rem + 0.94vw, 1.75rem);
  --text-small:  clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
}

/* ==========================================================================
 Typography: Grund-Setup
  ========================================================================== */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  font-size: var(--text-large);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-style: normal; /* Erzwingt Standardmäßig "nicht-kursiv" */
}

h1, .h1 { font-family: var(--font-main); font-size: var(--h1); line-height: 1.1; font-weight: 800;}
h2, .h2 { font-family: var(--font-main); font-size: var(--h2); line-height: 1.1; font-weight: 700;}
h3, .h3 { font-family: var(--font-main); font-size: var(--h3); line-height: 1.2; font-weight: 700;}
h4, .h4 { font-family: var(--font-main); font-size: var(--h4); line-height: 1.2; font-weight: 600;}
h5, .h5 { font-family: var(--font-main); font-size: var(--h5); line-height: 1.3; font-weight: 600;}
h6, .h6 { font-family: var(--font-main); font-size: var(--h6); line-height: 1.3; font-weight: 600;}


p { 
  font-size: var(--text-large); 
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.text-large, 
.text-large p,
.text-large ul  { font-size: var(--text-large); }
.text-normal,
.text-normal p,
.text-normal ul { font-size: var(--text-normal); }
.text-small,
.text-small p,
.text-small ul  { font-size: var(--text-small); }

.text-2-col {
  column-count: 2;
  column-gap: 1rem;
}
@media (max-width: 768px) { 
  .text-2-col {
    column-count: 1;
    column-gap: 0;
  }
}
/* ==========================================================================
Margins
  ========================================================================== */
h1.fl-module, .h1.fl-module {
  margin-bottom: 2.5rem;
}
h2.fl-module, .h2.fl-module {
  margin-bottom: 2rem;
}
h3.fl-module, .h3.fl-module {
  margin-bottom: 1.75rem;
}
h4.fl-module, .h4.fl-module {
  margin-bottom: 1.5rem;
}
h5.fl-module, .h5.fl-module {
  margin-bottom: 1rem;
}
h6.fl-module, .h6.fl-module {
  margin-bottom: 1rem;
}
.fl-module.fl-module-custom-button, 
.fl-module.fl-module-custom-rich-text,
.fl-module.fl-module-custom-accordion,
.fl-module.fl-module-custom-photo,
.fl-module.fl-module-unternehmen-cards,
.fl-module.fl-module-personen-cards {
  margin-bottom: 1.75rem;
}
/* Target letztes Child-Element im col-content*/
.fl-col-content > *:last-child {
    margin-bottom: 10px;
}

/* ==========================================================================
 Buttons: Main Button
  ========================================================================== */
.ic-button {
  font-size: var(--h4); 
  line-height: 1.2; 
  font-weight: 600;
  display: inline-block; 
  transition: all 0.3s ease;
  text-decoration: none;
}
.ic-button:hover {
  text-decoration: underline;
}
.ic-button {
  font-size: var(--h4); 
  line-height: 1.2; 
  font-weight: 600;
  display: inline-block; 
}
.ic-button-text {
    display: block;
    margin-bottom: 1rem;
}
.ic-button-icon {
  display: flex;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: -30px;
    justify-self: flex-end;
}
.ic-button-icon svg {
    transform: rotate(0deg);
    transition: all 0.3s ease;
}
/* Mobile Devices */
@media (max-width: 768px) { 
 .ic-button-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
  }
  .ic-button-icon svg {
    width: 26px;
  }
}

/* Color Logic  */
.ic-button-icon {
  border: 2px solid var(--ic-white);
}
.ic-button:hover .ic-button-icon,
.ic-personen-card-link:hover .ic-button-icon {
  background-color: var(--ic-white);
}
.ic-button:hover .ic-button-icon svg,
.ic-personen-card-link:hover .ic-button-icon svg {
  transform: rotate(-45deg);
  transition: all 0.3s ease;
}
.ic-button-icon svg path{
  fill: var(--ic-white);
}
.ic-button:hover .ic-button-icon svg path,
.ic-personen-card-link:hover .ic-button-icon svg path {
  fill: var(--ic-orange);
}

/*White Background*/
.fl-row.row-color-white .ic-button-icon {
  border: 2px solid var(--ic-black);
}
.fl-row.row-color-white .ic-button:hover .ic-button-icon,
.fl-row.row-color-white .ic-personen-card-link:hover .ic-button-icon {
  background-color: var(--ic-black);
}
.fl-row.row-color-white .ic-button .ic-button-icon svg path {
  fill: var(--ic-black);
}
.fl-row.row-color-white .ic-button:hover .ic-button-icon svg path,
.fl-row.row-color-white .ic-personen-card-link:hover .ic-button-icon svg path {
  fill: var(--ic-white);
}
/* Purple Background */
.fl-row.row-color-purple .ic-button:hover .ic-button-icon svg path,
.fl-row.row-color-gradient-top-down  .ic-button:hover .ic-button-icon svg path,
.fl-row.row-color-gradient-left-right .ic-button:hover .ic-button-icon svg path,
.fl-row.row-color-purple .ic-personen-card-link:hover .ic-button-icon svg path,
.fl-row.row-color-gradient-top-down  .ic-personen-card-link:hover .ic-button-icon svg path,
.fl-row.row-color-gradient-left-right .ic-personen-card-link:hover .ic-button-icon svg path {
  fill: var(--ic-purple);
}
/* Black Background */
.row-color-black .ic-button:hover .ic-button-icon svg path,
.row-color-black .ic-personen-card-link:hover .ic-button-icon svg path {
  fill: var(--ic-black);
}

/* ==========================================================================
 Colors: Variables
  ========================================================================== */
:root {
    --ic-purple: #e09cde;
    --ic-orange: #FA854F;
    --ic-black: #000000;
    --ic-white: #ffffff;
}

/* ==========================================================================
 Colors: Row Colors
  ========================================================================== */
.fl-row.row-color-black .fl-row-content-wrap {
  background: var(--ic-black);
}
.fl-row.row-color-orange .fl-row-content-wrap {
  background: var(--ic-orange);
}
.fl-row.row-color-purple .fl-row-content-wrap {
  background: var(--ic-purple);
}
.fl-row.fl-row.row-color-gradient-top-down .fl-row-content-wrap {
      background:linear-gradient(180deg, var(--ic-purple, #E09CDE) 0%, var(--ic-orange, #FA854F) 100%);
}
.fl-row.row-color-gradient-left-right .fl-row-content-wrap {
      background:linear-gradient(90deg, var(--ic-purple, #E09CDE) 0%, var(--ic-orange, #FA854F) 100%);
}
.fl-row.row-color-black .fl-row-content-wrap *,
.fl-row.row-color-orange .fl-row-content-wrap *,
.fl-row.row-color-purple .fl-row-content-wrap *,
.fl-row.row-color-gradient-top-down .fl-row-content-wrap *,
.fl-row.row-color-gradient-left-right .fl-row-content-wrap * {
  color: var(--ic-white);
}
.fl-row.row-color-white .fl-row-content-wrap {
  background: var(--ic-white);
  color: var(--ic-black);
}


/* ==========================================================================
Menu Styling
  ========================================================================== */
body .fl-module.fl-module-menu {
  display: flex;
  align-items: center;
}
body .fl-menu .fl-menu-mobile-toggle.hamburger .svg-container, 
body .fl-menu .fl-menu-mobile-toggle.hamburger-label .svg-container {
  width:auto;
  height:auto;
}
body .fl-module-menu .fl-menu-mobile-flyout {
    background-color: var(--ic-black);
    right: -367px;
    height: 0px;
    overflow-y: auto;
    padding: 0 5px;
    position: fixed;
    top: 0;
    transition-property: left, right;
    transition-duration: .2s;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    z-index: 999999;
    width: 350px;
}
body .fl-module-menu .fl-menu .menu {
   margin-top: 8rem;
}
body .fl-module-menu .fl-menu .menu > li {
    font-size: var(--text-large);
    margin-bottom: 2rem;
}
body .fl-module-menu  .fl-flyout-right .fl-menu-mobile-close {
    float: right;
}
body .fl-module-menu  .fl-flyout-right .fl-menu-mobile-close i {
    color: var(--ic-orange);
    font-size: 2rem;
}
body .fl-module-menu .sub-menu{
  display: block !important;
}
body .fl-module-menu .sub-menu .menu-item {
  font-size: var(--text-small);
}
/*Hover-States*/
body .fl-module-menu .menu .menu-item:is(:hover, :active) a,
body .fl-module-menu .menu .menu-item.current-menu-item a,
body .fl-module-menu .sub-menu .menu-item.current-menu-item a {
  color: var(--ic-orange);
}
/* ==========================================================================
Intro Animation
  ========================================================================== */
/* Der Hauptcontainer (Banner-Sektion) */
.banner-container {
    position: relative;
    width: 100%;
    height: 350px; /* Höhe nach Bedarf anpassen */
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Das Hintergrundbild (Gradient) */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Der bewegliche Kreis */
.moving-circle {
    position: absolute;
    z-index: 2;
    width: 350px; /* Größe des Kreises */
    height: 350px;
    pointer-events: none; /* Mausereignisse ignorieren, damit sie das Banner treffen */
    
    /* Die Sanftheit der Bewegung (wie im Wix-Code: 1000ms ease-out) */
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

.moving-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Optionaler Text über dem Ganzen */
.content {
    position: relative;
    z-index: 3;
    color: white;
    margin-left: 10%;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* ==========================================================================
Language Switcher
  ========================================================================== */
.wpml-ls-legacy-list-horizontal, 
.wpml-ls-legacy-list-horizontal:is(:hover, :focus, :active),
.wpml-ls-legacy-list-horizontal a:is(:hover, :focus, :active), {
  font-size: var(--text-small);
  text-decoration: none;
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item.wpml-ls-current-language {
  background: var(--ic-white);
  color: var(--ic-black);
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item.wpml-ls-current-language a span {
  color: var(--ic-black);
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item:not(.wpml-ls-current-language):hover a span {
  color: var(--ic-orange);
  text-decoration:none;
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item {
  background: transparent;
  color: var(--ic-white);
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item:not(.wpml-ls-current-language):hover {
  color: var(--ic-orange);
}

/* ==========================================================================
Timeline
  ========================================================================== */
.process-grid {
    display: grid;
    grid-template-rows: auto 1fr 1fr;
    grid-auto-columns: minmax(150px, 1fr);
    grid-auto-flow: column;
    gap: 15px 40px;
    padding: 20px;
    align-items: center;
    font-size: 1rem;
    line-height: 1.2;
}
.process-grid.single-line {
        grid-template-rows: auto 1fr 0fr; /* Q | Pill 1 | Pill 2 */
}
/* Q-Labels mit gestrichelter Linie */
.q-label {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-family: sans-serif;
    padding-bottom: 10px;
    white-space: nowrap;
}

/* Die Linie nach dem Text */
.q-label::after {
    content: "";
    flex-grow: 1;
    border-bottom: 2px dashed #ccc; /* Deine Linienfarbe */
}

/* Q2-Spezialfall: Spant über zwei Spalten */
.q-span-2 {
    grid-column: span 2;
}

.pill {
    padding: 15px 25px;
    border: 2px solid;
    border-radius: 50px;
    text-align: center;
    font-weight: 500;
    position: relative;
    z-index: 2;
    min-width: 180px;
}

.orange { border-color: var(--ic-orange, #FA854F); color: #333; }
.purple { border-color: var(--ic-purple, #E09CDE); color: #333; }

.merger {
    background: linear-gradient(180deg, var(--ic-purple, #E09CDE) 0%, var(--ic-orange, #FA854F) 100%);
    border-color: var(--ic-purple);
    color: #fff;
}

.span-3 { grid-row: 2 / span 2; } /* Korrigiert: Spant nur die Pillen-Zeilen */

/* Platziert den Merger exakt in die gleiche Zeile wie die anderen Pills */
.span-1 {
  grid-row: 2; 
  display: flex;
  justify-content: center;
}
/* Verbindungslinien Desktop 
.grid-cell.line .pill::before {
    content: "";
    position: absolute;
    left: -62px;
    top: 50%;
    width: 60px;
    height: 2px;
    background-color: #e0e0e0;
    z-index: -1;
}
*/
/* --- MOBILE ANPASSUNG (Nebeneinander) --- */
@media (max-width: 1240px) {
    .process-grid {
        grid-template-columns: auto 1fr 1fr; /* Q | Pill 1 | Pill 2 */
        grid-template-rows: auto;
        grid-auto-flow: row; /* Wechselt zu Zeilen-Fluss */
        gap: 20px 10px;
    }
    .process-grid.single-line {
        grid-template-columns: auto 1fr 0fr; /* Q | Pill 1 | Pill 2 */
    }
    .q-label {
        grid-row: auto;
        grid-column: 1;
        padding-bottom: 0;
        height: 100%;
    }
    
    .q-label::after { display: none; } /* Linie auf Mobile meist störend im Textfluss */

    .grid-cell.top { grid-row: auto; grid-column: 2; }
    .grid-cell.bottom { grid-row: auto; grid-column: 3; }
    .process-grid.single-line .grid-cell.top {
      grid-column: 2 / span 2;
    }
    /* Merger-Pillen nehmen volle Breite ein */
   .grid-cell.span-3 {
        grid-column: 2 / span 2; /* Beginnt in Spalte 2, lässt die Q-Spalte frei */
        grid-row: auto;
    }
    .grid-cell.span-1 {
        grid-column: 2 / span 2; /* Lässt Spalte 1 (Q) frei */
        grid-row: auto;
        margin: 5px 0;
    }
    .pill {
        min-width: 0; /* Erlaubt kleineres Schrumpfen auf Mobile */
        padding: 10px 15px;
        font-size: 0.8rem;
        width:100%
    }

    /* Linien auf Mobile ausblenden oder anpassen */
    .grid-cell.line .pill::before, 
    .grid-cell.line .pill::after {
        display: none;
    }
}