html {
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: 100%;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.05em; /* 5% von 18px, relativ zur Schriftgröße */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  html[lang="ko"] {
    font-size: 20px;
    line-height: 30px;
  }
  

 /** WebFonts **/
  @font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Variable.woff2') format('woff2'), /* Modern */
         url('../fonts/Satoshi-Variable.woff') format('woff'),   /* Fallback */
         url('../fonts/Satoshi-Variable.ttf') format('truetype'); /* Ältester Fallback */
    font-weight: 300 900; /* Variabler Bereich von 300 bis 900 */
    font-style: normal;
    font-display: swap; /* Schnelles Rendering */
  }
  
  @font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
         url('../fonts/Satoshi-VariableItalic.woff') format('woff'),
         url('../fonts/Satoshi-VariableItalic.ttf') format('truetype');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Noto Sans KR';
    src: url('../fonts/NotoSansKR-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* oder 300 700, je nach unterstütztem Bereich */
    font-style: normal;
    font-display: swap;
  }

  [lang="ko"] {
    font-family: 'Noto Sans KR', sans-serif;
  }
  
  

 /* Markierter Text*/ 
::-moz-selection { background: #AD122A; color: #fff; }
::selection { background: #AD122A; color: #fff; }
mark { background: #AD122A; color: #fff; }

/* Anpassen Boxmodel */
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

*:before,
*:after{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
a {
  color: #AD122A;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}
#top {
  margin: 0;
}
  /* Text */
body {
    font-family: 'Satoshi', sans-serif;
    font-weight: 300; 
    font-style: light;
    color: #040711;
    font-feature-settings: 'ss01' 1,'ss03' 1;
    margin: 0;
  }

  [lang="ko"] body {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400; /* Regular, kannst aber auch 300 nehmen, falls gewünscht */
  }
  
  
  p {
    margin: 0;
    font-weight: 350;
    margin-bottom: 32px;
  }
  /*p + p {
    margin-top: 16px;
  }*/

  .text--white {
    color: #f0f0f2;
    margin: 0;
    font-weight: 350;
    /*padding: calc(clamp(1.778rem, 2.143vw + 1.397rem, 3.111rem)) calc(clamp(0.889rem, 7.143vw - 0.381rem, 5.333rem));*/
  }
  /* Überschriften */
  h1,
  .h1 {
    font-family: 'Satoshi', sans-serif;
  }
  h1.display-1 {
    font-weight: 700; /* Fett */
    font-style: normal;
    /*font-size: clamp(35px, calc(2.1875rem + ((1vw - 0.01px) * 2.5712)), 72px); /* Dynamische Schriftgröße */
    font-size: clamp(35px, calc(2.1875rem + ((1vw - 3.2px) * 3.3036)), 72px);
    line-height: calc(clamp(2.333rem, 4.107vw + 1.603rem, 4.889rem));
      margin-top: 0;
    margin-bottom: 8px;
    min-height: 0vw; /* Min Höhe für den Viewport */
    color: #000000;
  }
  .display-2 {
    font-size: calc(clamp(1.556rem, 2.143vw + 1.175rem, 2.889rem));
    line-height: calc(clamp(2.222rem, 2.5vw + 1.778rem, 3.778rem));
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-top: 0;
    /*margin-bottom: 8px;*/
  }
  h2 {
    font-size: calc(clamp(1.556rem, 1.818vw + 1.232rem, 2.444rem));
    font-weight: 500;
    line-height: calc(clamp(2.222rem, 2.727vw + 1.737rem, 3.556rem));
    letter-spacing: 0.02em;
    margin-top: 0;
  }
  h3 {
    font-size: calc(clamp(1.278rem, 1.364vw + 1.035rem, 1.944rem));
    line-height: calc(clamp(1.778rem, 1.818vw + 1.455rem, 2.667rem));
    font-weight: 500;
    color: #AD122A;
    margin: 0;
  }
  .text--large.content-text h3 {
    margin-bottom: 36px;
  }
  .text--large.content-text h3 + .rte p {
   margin-bottom: 36px;
  }
  .text--large.content-text p + h3 {
    margin-top: 36px;
    margin-bottom: 12px;
  }
  .m-b-12 {
    margin-bottom: 12px !important;
  }
  .m-b-16 {
    margin-bottom: 16px;
  }
  .m-t-16 {
    margin-top: 16px;
  }
  .m-t-32 {
    margin-top: 32px;
  }
  .text--large {
    font-size: calc(clamp(1rem, 2.344vw + 0.583rem, 1.333rem));
    line-height: calc(clamp(1.333rem, 4.688vw + 0.5rem, 2rem));
    font-weight: 350;
  }

  
  .text--large_medium {
    font-size: calc(clamp(1rem, 2.344vw + 0.583rem, 1.333rem));
    line-height: calc(clamp(1.333rem, 4.688vw + 0.5rem, 2rem));
    font-weight: 500;
  }
  .text--light {
    
  }
  /* Kursiver Text */
  em {
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  .margin-block {
    margin-block: 64px;
  }
img {
  width: 100%;
  height: auto;
}
  /* Für Container mit voller Breite */
.full-width > .inside {
  max-width: 100% !important; 
  padding: 0 !important;
}

/* HERO-/Fullwidth-Bild Container */
.full-image {
  width: 100vw;         /* volle Fensterbreite */
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  display: block;
  background: #eee;     /* Fallback-Hintergrund */
}

/* Bild IMMER auf Containergröße und schön beschnitten */
.full-image img,
.full-image__dark-highlight img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* für Focusbereich, wenn in Contao definiert */
  display: block;
}

/* Weißes Overlay auf dem Hero-Bild */
.full-image figure,
.white-overlay figure {
  position: relative;
}
.full-image figure::after,
.white-overlay figure::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* Weiß mit 50% Deckkraft */
  pointer-events: none;
}


#header {
  border-bottom: 1px solid #3037462e;
}
  #main .inside,
  #header .inside,
  #teaser > .inside,
  .footer-bar__legal-inner,
  .mod_breadcrumb  {
    max-width: clamp(320px, calc(100vw - 32px), 1440px);
    margin: auto;
    padding-left: clamp(0.889rem, calc(0.889rem + ((1vw - 0.2rem) * 3.81)), 3.556rem);
    padding-right: clamp(0.889rem, calc(0.889rem + ((1vw - 0.2rem) * 3.81)), 3.556rem);
    min-height: 0vw;
    padding-block: 16px;
  }
  .footer-bar__content {
    max-width: clamp(320px, calc(100vw - 32px), 1440px);
    margin: auto;
    padding-left: clamp(0.889rem, calc(0.889rem + ((1vw - 0.2rem) * 3.81)), 3.556rem);
    padding-right: clamp(0.889rem, calc(0.889rem + ((1vw - 0.2rem) * 3.81)), 3.556rem);
    min-height: 0vw;
    padding-block: calc(clamp(0.889rem, 7.407vw - 0.428rem, 5.333rem));
  }
  .header-top-bar  {
    display: none;
  }

.logo {
  display: flex;
  gap: 8px;
}
/* Initiales großes Logo */
.logo svg {
  width: auto;
  height: 120px;
  transition:
all 0.3s ease;
  position: absolute;
  top: -56px;
  left: auto;
  z-index: 10;
}

/* Bei Scroll verkleinern */
.header--scrolled .logo svg {
  width: 60px;
  height: 60px;
  top: 0;
}

/*.logo svg {
  fill: #AD122A;
  width: 32px;
  height: 32px;
}*/
a.logo {
  text-decoration: none;
}

.logo span {
  font-size: 12px;
  line-height: 16px;
  color: #040711;
  text-decoration: none;
  padding-left: 164px;
}
.logo span strong {
  font-weight: 700; /* Oder der gewünschte Wert */
}
/* MObile Navigation */
.navigation-bar-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 16px 0px 24px;
  z-index: 1000;
  border-top: 1px solid #3037462e;
}

.menu-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #040711; /* Standardfarbe für Text und Icons */
  font-size: 12px;
  line-height: 16px;
  border: none;
  width: 55px;
  height: 55px;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  background-color: #ffffff;
  cursor: pointer;
}

.menu-item svg {
  width: 24px;
  height: 24px;
  stroke: #040711; /* Standardfarbe für Icons */
  stroke-width: 1.5;
  margin-bottom: 4px;
}

.menu-item:hover {
  color: #AD122A; /* Hoverfarbe für Text */
}

.menu-item:hover svg {
  stroke: #AD122A; /* Hoverfarbe für Icons */
}

.menu-label {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  font-weight: 400;
}

/* Sprachwechler mobile */
#language-menu {
  position: fixed;
  bottom: 0px; /* Positioniert das Menü direkt unter der 96px hohen Navigationsleiste */
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  z-index: 999;
  transform: translateY(100%); /* Startet das Menü außerhalb des sichtbaren Bereichs direkt unter der Leiste */
  transition: transform 0.5s ease-in-out; /* Weiche Animation für das Ein- und Ausblenden */
}

#language-menu.visible {
  transform: translateY(-96px); /* Bewegt das Menü in den sichtbaren Bereich, wenn es aktiv ist */
}
#language-menu span {
  display: block;
  text-align: center;
  padding: 10px 0;
  font-size: 18px; /* Größere Schrift für bessere Lesbarkeit */
  color: #333; /* Dunkelgraue Schriftfarbe für Kontrast */
  background-color: #f8f8f8; /* Leicht grauer Hintergrund für visuelle Abhebung */
  border-bottom: 1px solid #ccc; /* Eine Linie unter dem Text, um das Design zu segmentieren */
  width: 100%; /* Stellt sicher, dass das Span-Element die volle Breite einnimmt */
}

/* Anpassungen für das Dropdown-Menü */
#language-menu .select-wrapper {
  position: relative;
  width: 90%;
  margin: 10px auto;
}

#language-menu .select-wrapper select {
  width: 100%;
  padding: 16px 32px; /* Rechts Padding erhöht, um Platz für den Pfeil zu schaffen */
  font-size: 18px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
}



/* Stil für den Fokus-Zustand des Dropdowns */
#language-menu select:focus {
  border-color: #AD122A;
  outline: none;
}

/* Anpassung für Optionen im Dropdown */
#language-menu option {
  padding: 10px; /* Bietet mehr Platz innerhalb der Optionen */
  background-color: white; /* Stellt sicher, dass die Optionen weiß bleiben */
}

#language-menu option:hover {
  background-color: #f0f0f2;
}

.hero--home,
.article__highlight {
  background-color: #F0F0F2;
  /*padding: 32px 16px;*/
}
.article__highlight--dark {
  background-color: #303746;
  color: #F0F0F2;
}
.article__highlight--dark h3 {
  color: white;
}
.hero__header {
  margin-bottom: calc(clamp(0.889rem, 6.25vw - 0.222rem, 1.778rem));
}
figure {
  margin:0;
  /* margin-bottom: -5px;*/
}
.hero__image {
 /* height: 531px;        /* oder deine gewünschte Höhe */
  overflow: hidden;
  position: relative;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* Bild füllt Container, wird ggf. beschnitten */
  object-position: center;
  display: block;
}

/*
.hero__image figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 5px;
}*/

h1.hero__text-title {
  font-weight: 500; /* Fett */
  font-style: normal;
  font-size: calc(clamp(1.944rem, 2.313vw + 1.533rem, 4rem));
  line-height: calc(clamp(2.333rem, 4.107vw + 1.603rem, 4.889rem));
  margin-top: 0;
  margin-bottom: 8px;
  min-height: 0vw; /* Min Höhe für den Viewport */
  color: #AD122A;
}
.hero__text-description {
 /* margin-bottom: 16px;*/
 hyphens: auto;
  hyphenate-limit-chars: auto 4;
  hyphenate-limit-lines: 4;
}
/* ---------------------------------------------
   Hero Highlight Boxes – Grundstyling
--------------------------------------------- */
.hero__highlight-boxes {
  margin-top: auto;
}

.hero__highlight-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 2px;
  box-sizing: border-box;
  margin: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Icons */
.hero__highlight-box .icon {
  width: calc(clamp(1.333rem, 3.571vw + 0.698rem, 3.556rem));
  height: calc(clamp(1.333rem, 3.571vw + 0.698rem, 3.556rem));
  stroke: #AD122A;
  stroke-width: 3%;
  fill: none;
}

.hero__highlight-box .icon--arrow-right {
  stroke: #fff;
  stroke-width: 1.5;
}

/* Farbvarianten */
.hero__highlight-box--grey {
  background-color: #fff;
}

.hero__highlight-box--red {
  background-color: #AD122A;
  color: #fff;
}

/* Text */
.hero__highlight-box-text .rte p {
  font-size: calc(clamp(0.667rem, 1.339vw + 0.429rem, 1rem));
  line-height: calc(clamp(0.889rem, 3.571vw + 0.254rem, 1.778rem));
  font-weight: 500;
  margin: 16px 0;
}

/* ---------------------------------------------
   Hover-Effekt nur für die Kontaktbox
--------------------------------------------- */
.highlight-contact a {
  text-decoration: none;
  display: block;
}

/* Zielgenauer Hover nur auf der roten Box */
.highlight-contact a:hover .hero__highlight-box--red {
  transform: translateY(-2px);
  background-color: #8A0D22; /* leicht dunkleres Rot als Hover */
  cursor: pointer;
}

/* Breadcrumb */

#sub-header {
  background-color: #f0f0f2; 
}
.mod_breadcrumb {
  font-size: calc(clamp(0.667rem, 0.341vw + 0.606rem, 0.833rem)); 
  line-height: 24px; 
}

.mod_breadcrumb ul {
  list-style: none; /* Entfernt die Aufzählungszeichen */
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* Zeilenumbruch bei kleineren Bildschirmen */
  align-items: center; /* Vertikale Zentrierung */
}

.mod_breadcrumb li {
  display: flex; /* Chevron und Text nebeneinander */
  align-items: center; /* Vertikale Zentrierung */
}

.mod_breadcrumb li::after {
  content: "›"; /* Chevron als Trenner */
  color: #303746; /* Chevron-Farbe */
  margin: 0 8px; /* Abstand zum Text */
}

.mod_breadcrumb li:last-child::after {
  content: ""; /* Entfernt Chevron für die letzte Seite */
}

.mod_breadcrumb li a {
  color: #303746; /* Linkfarbe */
  text-decoration: none; /* Entfernt Unterstreichung */
  transition: color 0.3s ease; /* Hover-Effekt */
}

.mod_breadcrumb li a:hover {
  color: #981211; /* Hover-Farbe */
}

.mod_breadcrumb .active {
  color: #AD122A; 
}

  .mod_article  {
   /* padding: 32px 16px;*/
  padding-block: clamp(32px, calc(2rem + ((1vw - 3.2px) * 5.7143)), 96px) clamp(16px, calc(1rem + ((1vw - 3.2px) * 4.2857)), 64px);
  }
  .mod_article.full-width {
    padding: 0 !important;
  }
  .article__header {
    color: #000;
    margin-bottom: calc(clamp(1.778rem, 7.143vw + 0.508rem, 3.556rem));
  }
  .article__header-content {
  margin-bottom: 96px;
  }
.service-cards {
    display: grid;
    gap: calc(clamp(0.444rem, 2.143vw + 0.063rem, 1.778rem));
  }
/**.service-card__desktop  { 
    display: none;
  }*/
  .service-card {
    background-color: #F0F0F2;
    border-radius: 2px;
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4;
    margin-bottom: 16px;
  }
  .service-card h3 {
    font-size: calc(clamp(1rem, 1.42vw + 0.747rem, 1.556rem));
    line-height: calc(clamp(1.333rem, 2.273vw + 0.929rem, 2.222rem));
    margin:0;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #000;
    display: flex;
    align-items: flex-start;
  }

.service-card h3 svg {
    width: calc(clamp(1.333rem, 2.143vw + 0.952rem, 2.667rem));
    height: calc(clamp(1.333rem, 2.143vw + 0.952rem, 2.667rem));
    margin-right: 8px;
    stroke: #AD122A; 
    stroke-width: 3%;
    flex-shrink: 0; 
  }
  .service-card__text {
    margin-bottom: 24px;
    color: #000;
    font-weight: 400;
  }
  
  @media screen and (min-width: 1200px) {
    .service-card__text {
      font-weight: 300;
    }
  }
 .service-card__link a {
  font-weight: 500;
 }
 
 /* Akkordion Dienstleistungen */
  .ui-accordion-header, .service-card__header {
    position:relative;
    transition:color ease-in-out 0.2s;
    padding: calc(clamp(0.889rem, 2.857vw + 0.381rem, 2.667rem)) calc(clamp(0.889rem, 2.857vw + 0.381rem, 2.667rem)) 8px calc(clamp(0.889rem, 2.857vw + 0.381rem, 2.667rem));
  }
  .ui-accordion-header:hover {
    cursor:pointer
  }
  .ui-accordion-header:hover,
  .ui-accordion-header:focus {
   
  }
  .ui-accordion-header:after,
  .ui-accordion-header:before {
    transition:opacity ease-in-out 0.2s;
    position:absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    width: 24px;
    height: 24px;
    background:transparent url("../img/chevron-down.svg") center center no-repeat;
    content:""
  }
  .ui-accordion-header:before {
    opacity:1
  }
  .ui-accordion-header:after {
    opacity:0;
    background:transparent url("../img/chevron-up.svg") center center no-repeat
  }
  .ui-accordion-header-active:before {
    opacity:0
  }
  .ui-accordion-header-active:after {
    opacity:1
  }
  .ui-accordion-header-icon {
    display:none
  }
  .ui-accordion-content, .service-card__body {
    font-size: 15px;
    line-height:24px;
    padding: 0 calc(clamp(0.889rem, 2.857vw + 0.381rem, 2.667rem)) calc(clamp(0.889rem, 2.857vw + 0.381rem, 2.667rem)) calc(clamp(0.889rem, 2.857vw + 0.381rem, 2.667rem));
    background:#F0F0F2;
    color:#000;
  }

  /* Klassisches Akkordion */
  .handorgel__header__button {
    position: relative;
    color: inherit; /* Textfarbe bleibt unverändert */
  }
  .handorgel__header__button::after {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #AD122A; /* Die Farbe für das Icon */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-plus'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-plus'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: background 0.3s ease;
  }
  
  .handorgel__header__button[aria-expanded="true"]::after {
    background: #AD122A; /* Die Farbe für das Minus-Icon */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-minus'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-minus'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  
.accordion-handorgel {
  margin-top: -18px;
  margin-bottom: 18px;
}

  .handorgel__header {
    display:block;
    margin:0;
    background-color: #F0F0F2;
    border-bottom: 1px solid #303746;
  }

  .handorgel__header--open {
    border: 0;
  }
  .handorgel__header__button {
    display:block;
    width:100%;
    padding:24px 16px;
    margin:0;
    border:0;
    background-color:#F0F0F2;
    border-radius:0;
    color:#000000;
    cursor:pointer;
    font-size:18px;
    line-height: 32px;
    font-weight: 500;
    text-align:left;
    transition:background-color .2s ease;
    user-select:none
  }
  .handorgel__header__button::-moz-focus-inner {
    border:0
  }
  .handorgel__content {
    display:none;
    overflow:hidden;
    height:0;
    border-bottom: 1px solid #303746;
    background-color:#F0F0F2;
    transition:height .1s ease .1s
  }
  .handorgel__content--open {
    display:block;
    transition:height .2s ease
  }
  .handorgel__content--opened {
    overflow:visible
  }
  .handorgel__content__inner {
    padding: 0px 16px 32px;
    opacity:0;
    transition:opacity .1s ease;
    hyphens: auto;
    hyphenate-limit-before: 3;
    hyphenate-limit-after: 2;
  }
  .handorgel__content__inner h3 {
    font-size: calc(clamp(1rem, 1.42vw + 0.747rem, 1.556rem));
    line-height: calc(clamp(1.333rem, 2.273vw + 0.929rem, 2.222rem));
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.05em;
  }
  .handorgel__content--opened .handorgel__content__inner {
    opacity:1;
    transition:opacity .3s ease
  }
  .handorgel .accordion {
    display:none;
    overflow:hidden;
    height:0;
    transition:height .2s ease
  }
  .handorgel .accordion.open {
    display:block;
    transition:height .2s ease
  }
  .handorgel .accordion.active {
    overflow:visible
  }
  
  .article__header-link {
    font-size: 15px;
    line-height: 24px;
    font-weight: 300;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-bottom: 16px;
    
  }
  
  .article__header-link .content-text.ivp {
    display: flex;
    align-items: center;
  }
  
  .article__header-link .rte {
    display: flex;
    align-items: center;
    margin: 0; /* verhindert unnötigen Abstand */
  }
  
  .article__header-link .rte p {
    margin: 0;
    display: flex;
    align-items: center;
  }
  
  .article__header-link-text {
    padding-right: 8px;
  }
  
  .article__header-link a {
    color: #040711;
    text-decoration: none;
  }
  
  .article__header-link a:hover {
    color: #AD122A;
    text-decoration: underline;
  }
  
  .article__header-description {
    margin-bottom: 72px;
  }
  
  .button-icon a.article__header-link-icon {
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: 2px solid #F0F0F2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
  }
  
  .button-icon a.article__header-link-icon:hover {
    width: 40px;
    height: 40px;
    background-color: #AD122A;
    border-color: #AD122A;
    stroke: #ffffff;
  }
  

.icon--arrow-right {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  stroke: #AD122A; /* Pfeil initial rot */
  fill: none;
  transition: stroke 0.3s ease; /* Weiche Animation für den Pfeil */
}
.button-icon a.article__header-link-icon:hover .icon--arrow-right {
  stroke: #FFFFFF; /* Pfeil wird beim Hover weiß */
}

/* Rechtsanwälte */

/* Vollständig aus dem Grid entfernen */
.lawyer-cards.lawyer-cards__desktop {
  display: none !important;      
}
.lawyer-cards.lawyer-cards__mobile {

    display: block;

}



.lawyer-card {
  background-color: transparent;
  padding-bottom: 24px;
}
h3.lawyer-card__name {
  font-size: 21px;
  line-height: 24px;
  letter-spacing: 0.02em;
  font-weight: 700;
  margin: 16px 0 8px 0;
}
.lawyer-card__description,
.lawyer-card__link a {
  font-size: 15px;
    line-height: 24px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #040711;
    hyphens: auto;
}
.lawyer-card__description {
  margin-bottom: 24px;
}

.content-image {
  max-width: 100%;
  height: auto;
}

/* Slider */
.swiper-container {
  position: relative;
  overflow: visible; /* Stellen Sie sicher, dass nichts abgeschnitten wird */
}
.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: -28px; /* Oberhalb des Inhalts */
  width: 32px; /* Startgröße */
  height: 32px;
  color: #AD122A;
  border: 2px solid #F0F0F2; /* Randfarbe */
  border-radius: 50%; /* Runde Buttons */

}
.swiper-button-prev {
  left: 20%;
}
.swiper-button-next {
  right: 20%;
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 14px;
  font-weight: bold;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  background: #AD122A; /* Innerer Kreis rot */
  color: #fff; /* Pfeilfarbe weiß */
  border-color: #AD122A; /* Randfarbe rot */
}
.swiper-pagination {
  top: -50px; /* Platzierung oberhalb des Inhalts */
}
.swiper-pagination-bullet-active {
  background-color: #AD122A; /* Aktive Farbe */
}

.desktop {
  display: none !important;
}
/* Mobile Navigation */

#nav-main,
.nav-megamenu  {  
  display: none;  
} 

/* Spezifisch für das neue Menü-Element */
.nav-toggle a,
.content-toplink a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit; /* Erbt die Farbe */
}

.nav-toggle a svg,
.content-toplink a svg {
  width: 24px;
  height: 24px;
  stroke: #040711;
  stroke-width: 1.5;
  margin-bottom: 4px;
}

.nav-toggle a:hover svg,
.content-toplink a:hover svg {
  stroke: #AD122A;
}

.nav-toggle a span {
  font-size: 12px;
  color: inherit;
  line-height: 1.2;
  text-align: center;
}
/* Aufzählung */
/* Pfeil rechts */

.arrow--right ul {
  list-style: none; /* Entfernt Standard-Aufzählungspunkte */
  padding: 0;
  padding-bottom: 32px;
  margin: 0;
}

.arrow--right ul li {
  position: relative;
  padding-left: 32px; /* Platz für das Icon */
  margin-bottom: 8px; /* Abstand zwischen den Elementen */
 /* font-size: 1rem; /* Schriftgröße */
}

/* Maskiertes Icon */
.arrow--right ul li::before {
  content: "";
  position: absolute;
  top: calc(clamp(0.722rem, 2.024vw + 0.362rem, 1rem));
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #AD122A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
  transition: background 0.3s ease;
}

/* Hover-Effekt */
.arrow--right ul li:hover::before {
  background: var(--icon-hover-color, #981211); /* Hoverfarbe */
} 
/* Klienten */
/* Klienten */
.clients {
  margin: 3rem auto;
}

.card-client {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.16);
  padding: 1.5rem;
  height: 100%;
}
.card-client > div {
  height: 100%;
}
.card-client > div > div {
  display: flex;
  flex-flow: row wrap;
  height: 100%;
}
.card-client-text > p {
  margin-bottom: 1rem;
  font-weight: 300;
  color: #040711;
}
.info {
  display: flex;
  flex-flow: column;
  align-self: flex-end;
}
.card-client-rating {
  color: #AD122A;
  font-size: 1.5em;
}
.star.active {
  margin-right: -9px;
}
.card-client-name {
  font-weight: 700;
  font-size: 16px;
  color: #040711;
  margin-top: 8px;
}

.quote {
  font-size: calc(clamp(1rem, 1.071vw + 0.81rem, 1.667rem));
  line-height: calc(clamp(1.778rem, 1.429vw + 1.524rem, 2.667rem));
  font-weight: 400;
  padding: calc(clamp(1.778rem, 2.143vw + 1.397rem, 3.111rem)) calc(clamp(0.889rem, 7.143vw - 0.381rem, 5.333rem));
  color: #040711;
}
.quote svg {
  width: calc(clamp(1.333rem, 2.143vw + 0.952rem, 2.667rem));
  height: calc(clamp(1.333rem, 2.143vw + 0.952rem, 2.667rem));
  margin-right: 8px;
  fill: #ffffff; 
  stroke-width: 3%;
}
.blockquote {
  font-size: calc(clamp(1rem, 1.964vw + 0.651rem, 2.222rem));
  font-style: italic;
  margin: 0 0 24px 0;
  font-feature-settings: 'ss01' 0,'ss03' 0;
}
.text--highlight_dark {
  color: #E61747;
}

blockquote {
  font-style: italic;
  font-size: smaller;
  background: #F0F0F2;
  padding: 1rem;
  margin: 1rem 0;
  color: #000000;

}
.quote-content {
  margin: 32px 0;
  padding: 16px 24px;
  background-color: #f8f8f8;
  border-left: 4px solid #666;
  font-style: italic;
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .quote-content {
    padding: 16px;
    font-size: 0.95rem;
  }
}

.article__highlight--dark {
  margin-bottom: 72px;
}
/* Aufzählung */
/* Grundlayout für die horizontale Liste mit Rand */
/* Container für die horizontale Liste */
.horizontal-list-border {
  display: block; /* Block-Layout statt Flexbox */
  padding: 0;
  margin: 0;
  list-style: none; /* Entfernt Standardnummerierung */
  counter-reset: list-counter; /* Zähler zurücksetzen */
}

/* Styling für jedes Listenelement */
.horizontal-list-border .list-item {
  position: relative;
  counter-increment: list-counter; /* Zählt die Listenelemente */
  padding: 54px;
  border: 1px solid #000;
  break-inside: avoid; /* Verhindert, dass Listenelemente mitten in der Spalte brechen */
  margin-bottom: 48px; /* Abstand zwischen den Listenelementen */
}

/* Styling für die Zahl (zählt die Listenelemente) */
.horizontal-list-border .list-item::before {
  content: counter(list-counter); /* Fügt die Zahlen hinzu */
  display: block;
  font-weight: 500; /* Fett */
  font-style: normal;
  font-size: calc(clamp(1.944rem, 4.205vw + 1.197rem, 4rem));
  line-height: calc(clamp(2.333rem, 4.107vw + 1.603rem, 4.889rem));
  margin-top: 0;
  margin-bottom: 8px;
  min-height: 0vw; /* Min Höhe für den Viewport */
  color: #AD122A; /* Farbe der Zahl */
}

/* Styling für die Überschrift (strong) */
.horizontal-list-border .list-item strong {
  font-size: 18px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0.02;
  color: #040711;
  display: block;
  margin-bottom: 8px;
}

/* Styling für den Inhalt der Listenelemente */
.horizontal-list-border .list-item .content p {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: #040711;
}

/* Styling für die Unterliste (subpoints) */
.horizontal-list-border .sub-list {
  padding-left: 20px; /* Einrückung der Unterpunkte */
  margin-top: 12px;
}

/* Styling für jedes Listenelement in der Unterliste */
.horizontal-list-border .sub-list-item {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin-bottom: 8px; /* Abstand zwischen den Unterpunkten */
  padding-left: 10px;
  position: relative;
}

/* Optional: Punkt vor jedem Unterpunkt */
.horizontal-list-border .sub-list-item::before {
  content: "•";
  position: absolute;
  left: 0;
  font-size: 15px;
  color: #040711;
}

/* Optional: Hover-Effekt für Listenelemente */
.horizontal-list-border .list-item:hover {
  background-color: #f0f0f2;
  transition: background-color 0.3s;
}

.horizontal-list-border .sub-list-item:hover {
  color: #AD122A;
  transition: color 0.3s;
}
  .horizontal-list-border {
    column-count: 1; /* Alle Listenelemente untereinander */
  }
  .horizontal-list-border .list-item {
    margin-bottom: 32px; /* Etwas weniger Abstand zwischen den Listenelementen */
  }

/* Hauptaufzählung (ol) */

.horizontal-list ol {
  display: flex;
  flex-wrap: wrap;
  gap: 48px; /* Abstand zwischen den Listenelementen */
  padding: 0;
  margin: 0;
  list-style: none; /* Entfernt Standardnummerierung */
}

.horizontal-list ol li {
  counter-increment: list-counter; /* Zählt die Listenelemente */
  position: relative;
  flex: 1 1 100%; /* Elemente standardmäßig untereinander */
}
.horizontal-list ol li::before {
  content: counter(list-counter); /* Fügt die Zahlen hinzu */
  display: block;
  font-weight: 500; /* Fett */
  font-style: normal;
  font-size: calc(clamp(1.944rem, 4.205vw + 1.197rem, 4rem));
  line-height: calc(clamp(2.333rem, 4.107vw + 1.603rem, 4.889rem));
  margin-top: 0;
  margin-bottom: 8px;
  min-height: 0vw; /* Min Höhe für den Viewport */
  color: #AD122A; /* Farbe der Zahl */
}


/* FAQ *//* FAQ Akkordeon - Kopf */
.faq-accordion .faq-header {
  position: relative;
  padding: 16px 0;
  color: #000;
  cursor: pointer;
  border-bottom: 1px solid #303746;
  font-weight: 500;
  transition: color 0.3s ease;
}

.faq-accordion .faq-header:hover,
.faq-accordion .faq-header.active {
  color: #AD122A;
}
.faq-accordion .faq-header.active {
  border: none;
}
/* FAQ Akkordeon - Inhalt */
.faq-accordion .faq-content {
  display: none;
  padding: 0 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #303746;
  font-size: 0.875rem;
  color: #000;
}

/* Geöffnetes Akkordeon */
.faq-accordion .faq-header.active + .faq-content {
  display: block;
  border-top: none;
}

/* Pfeilsymbol */
.faq-accordion .faq-header::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 24px;
  height: 24px;
  background: url("../img/chevron-down.svg") no-repeat center;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

.faq-accordion .faq-header.active::after {
  background: url("../img/chevron-up.svg") no-repeat center;
  transform: translateY(-50%) rotate(0deg);
}

/* TABS */
/* Grundlegende Stildefinitionen */
.ce_tabs-nav {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.ce_tabs-nav .nav-item {
  margin: 0;
  display: flex;
  /*align-items: center; /* Zentriert Icons und Text vertikal */
}

.ce_tabs-nav .nav-item svg {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  stroke: #AD122A;
  stroke-width: 1.5;
}

.ce_tabs-nav .tab-link {
  display: flex;
  align-items: center;
  padding: 18px 32px;
  text-decoration: none;
  color: #303746;
  font-weight: 700;
  border: 1px solid #3037462e;
  background-color: #fff;
  transition: background-color 0.3s, color 0.3s, border 0.3s;
  z-index: 1; /* Standard-Ebene für inaktive Tabs */
  margin-left: -1px; /* Versteckt linken Rand */
}

.ce_tabs-nav .tab-link:hover,
.ce_tabs-nav .active-tab-nav {
  background-color: #AD122A;
  color: #ffffff;
  border-bottom: none; /* Kein unterer Rand für aktive Tabs */
}

.ce_tabs-nav .tab-link:hover svg,
.ce_tabs-nav .active-tab-nav svg {
  stroke: #ffffff;
}

/* Inhalt */
.tab-content {
  background-color: #fff;
  border: 1px solid #3037462e;
  border-radius: 2px;
  padding: 64px;
  position: relative;
  z-index: 5;
  margin-top: -2px; /* Lässt den Rahmen oben nahtlos erscheinen */
}

.tab-pane {
  display: none;
}

.tab-pane.active-tab {
  display: block;
}

.ce_tabs h2 {
  margin-bottom: 16px;
}

/* Media Query für mobile Ansicht */
@media (max-width: 1200px) {
  .ce_tabs-nav {
    flex-direction: column;
  }

  .nav-item {
    width: 100%; /* Lässt jedes Tab-Element die volle Breite einnehmen */
  }

  .tab-link {
    justify-content: center; /* Zentriert den Inhalt jedes Tabs */
    padding: 12px 20px; /* Angepasstes Padding für kleinere Bildschirme */
  }

  .tab-content {
    padding: 20px; /* Weniger Padding im Inhaltsbereich */
  }
  .ce_tabs-nav .tab-link {
    width: 100%;
  }

}
/* Wrapper sorgt für horizontales Scrollen */
.table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabelle selbst */
.table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* wichtig für Scroll – hier kannst du breiter gehen */
  font-size: 1rem;
  line-height: 1.5;
}

/* Tabellenkopf */
.table thead {
  background-color: #F0F0F2;
}

.table thead th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  border-bottom: 1px solid #303746;
  font-size: 1rem;
}

/* Tabellenzellen */
.table tbody td,
.table tbody th {
  padding: 12px 16px;
  border-bottom: 1px solid #3037462e;
  vertical-align: top;
  text-align: left;
}

/* Letzte Zeile ohne Border kannst du bei Bedarf ergänzen */
.table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive Schriftgröße */
@media (max-width: 768px) {
  .table table {
    font-size: 0.95rem;
  }
}


/* Footer */

.footer-bar {
background-color: #303746;
color: #F0F0F2;
margin-bottom: 84px;
}
.footer-bar__content {
padding-block: calc(clamp(1.778rem, 4vw + 1.067rem, 5.333rem));
}
.footer-bar__logo {
margin-bottom: 32px;
}
.footer-bar__info {
margin-bottom: 32px;
}
.footer-bar__info h6 {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}
.footer-bar__info p {
  font-size:15px;
  line-height: 24px;
}
.footer-bar__info a {
color: #fff;
}
h6 svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  stroke-width: 1.5;
  margin-right: 8px;
}
.footer-bar__legal {
  border-top:1px solid #F0F0F2;
}
.footer-bar__legal-links {
  display: grid;
  align-items: center;
  gap: 16px;
  margin:16px 0 8px;
}
.footer-bar__legal-links a {
  color: #F0F0F2;
  text-decoration: none;
  font-size:15px;
  line-height: 24px;
}
.footer-bar__legal-copyright {
  font-size: 12px;
  line-height: 16px;
  display: grid;
  justify-content: start;
  align-items: center;
  margin:16px 0 8px;
}
.footer-logo {
  width: 20vw;
}
.kontakt-footer {
  display: none;
}

/* Profilseiten */
/* Profilseiten */

/* Bild */
.hero__profil-image figure img {
  display: block;
  height: auto;
  width: auto;
}

/* Profil-Container */
.hero__profil-content {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Abstand zwischen den Hauptbereichen (Titel, Untertitel, Icons, Buttons) */
}

/* Titel */
.hero__profil-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.4;
  color: #040711;
}

/* Untertitel */
.hero__profil-subtitles {
  margin: 0;
}

.hero__profil-subtitles .rte p {
  margin-bottom: 12px; /* Abstand zwischen den einzelnen Untertiteln */
}

/* Icons */
.hero__profil-icons {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Abstand zwischen den einzelnen Icon-Elementen */
  color: #040711;
}

/* Icon-Stile */
.hero__profil-icons svg {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  stroke: #040711;
  stroke-width: 1.5;
  vertical-align: middle;
  fill: none;
}
.icon-mail .email,
.icon-phone .phone,
.icon-fax .fax {
  text-decoration: none; /* Keine Unterstreichung */
  color: #040711; /* Schwarzer Text */
}

.icon-mail .email:hover,
.icon-phone .phone:hover,
.icon-fax .fax:hover {
  text-decoration: underline; /* Unterstreichung beim Hover */
  color: #AD122A; /* Primärfarbe beim Hover */
  transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
}

/* Buttons */
.hero__profil-buttons {
  display: flex;
  gap: 16px; /* Abstand zwischen den Buttons */
}

/* Button-Stile (falls spezifisch benötigt) */
.hero__profil-buttons .button {
  flex: 1; /* Buttons gleich breit machen */
}

/* Responsives Verhalten */
@media (max-width: 768px) {
  .hero__profil-content {
    gap: 16px; /* Reduzierter Abstand zwischen Hauptbereichen */
  }

  .hero__profil-icons {
    gap: 12px;
  }

  .hero__profil-buttons {
    flex-direction: column; /* Buttons untereinander anordnen */
    gap: 12px; /* Weniger Abstand im mobilen Layout */
  }
}


/*Buttons */

.buttons {
  padding-block: 32px;
}
.button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
  font-size: 18px;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.3s ease, color 0.3s ease;
  gap: 8px; /* Abstand zwischen Text und Icon */
  cursor: pointer;
}

/* Icon-Stil für alle Buttons */
.button a::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Stile für den roten Button */
.button-red a {
  background-color: #ad122a;
  color: #fff;
}

.button-red a:hover {
  background-color: #981211;
}

/* Stile für den grauen Button */
.button-gray a {
  background-color: #f0f0f2;
  color: #000000;
}

.button-gray a::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
}

.button-gray a:hover {
  background-color: #303746;
  color: #fff;
}

.button-gray a:hover::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
}
/*Timeline*/
.event__date {
  color: #AD122A !important;
}
.timeline-vita {
  margin-bottom: 72px;
}

.roadmap.roadmap--orientation-auto .roadmap__events {
  width: 100%;
  max-width: none;
  min-height: 400px;
}

/* Allgemeine Stile für das Formular */
.ce_form.kontakt-seite {
  display: block;
  padding: 32px;
  margin-top: 64px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.16);
}

/* Widgets */
.kontakt-seite .widget-text,
.kontakt-seite .widget-textarea {
  margin-bottom: 16px;
  color: #040711; /* Dunkle Schrift auf hellem Hintergrund */
}

.kontakt-seite .widget-checkbox {
  margin-bottom: 8px;
}

/* Labels */
.kontakt-seite label {
  display: block;
  color: #040711; /* Dunkle Schrift für bessere Lesbarkeit */
  margin-bottom: 4px;
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}

/* Eingabefelder */
.kontakt-seite input,
.kontakt-seite textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #3037462e; /* Helles Grau für die Grenze */
  border-radius: 2px;
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  background-color: #ffffff; /* Weißer Hintergrund für Eingabefelder */
}

.kontakt-seite input:focus,
.kontakt-seite textarea:focus {
  border-color: #981211; /* Blaue Border beim Fokussieren */
  outline: none;
}

/* Checkboxen */
.ce_form.kontakt-seite .widget-checkbox span {
  display: flex;
  align-items: top;
  gap: 8px;
}

.ce_form.kontakt-seite .widget-checkbox input[type="checkbox"] {
  appearance: none;
  width: 10px;
  height: 10px;
  border: 1px solid #3037462e;
  border-radius: 2px;
  background-color: #ffffff;
  cursor: pointer;
  margin-left: 0;
  padding: 7px;
}

.ce_form.kontakt-seite .widget-checkbox input[type="checkbox"]:checked {
  background-color: #981211; /* Blauer Hintergrund für gecheckte Boxen */
  border-color: #981211;
}

/* Submit-Button */
.kontakt-seite button.submit {
  background-color: #ad122a;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 2px;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  line-height: 24px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Abstand zwischen Text und Icon */
  width:100%;
}

.kontakt-seite button.submit:hover {
  transition: background-color 0.3s ease;
  background-color: #981211;
}
.kontakt-seite button.submit::after {
content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}


/* Erklärungstext */
.kontakt-seite .explanation {
  font-size: 12px;
  color: #6c757d; /* Dunkelgrau für Erklärungstext */
  margin-top: 16px;
}

/* Pflichtfeld-Markierung */
.kontakt-seite .mandatory {
  color: #040711; /* Rote Markierung für Pflichtfelder */
  font-weight: 500;
}

/* Email-Link */
.kontakt-seite .email {
  color: #040711; /* Blau für Links */
  text-decoration: underline;
}

.kontakt-seite .email:hover {
  color: #00376b; /* Dunkelblau beim Hover */
}


/* ERROR */

/* Fehler-Wrapper */
.widget.error {
  margin-bottom: 1.5rem;
}

/* Fehler-Label (Feldname) */
.widget.error > label.error {
  color: #b42318; /* seriöses Rot */
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

/* Fehlermeldung */
.widget.error > p.error {
  color: #b42318;
  font-size: 0.875rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

/* Eingabefeld im Fehlerzustand */
.widget.error input.error {
  border: 2px solid #b42318;
  background-color: #fffafa;
  outline: none;
}

/* Fokus trotz Fehler */
.widget.error input.error:focus {
  border-color: #8a1c12;
  box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.15);
}

.checkbox_container {
  border: 0;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {

  .logo__lawyer-names {
    display: none;
  }
  
}

@media (min-width: 768px) {
.ui-state-default {
  pointer-events: none;
}
  .ui-accordion-header:after,
  .ui-accordion-header:before {
    display: none;
}
  }
  .horizontal-list ol li {
    flex: 1 1 calc(50% - 16px); /* Zwei Spalten auf größeren Bildschirmen */
  }
  .service-card {
    margin-bottom: 32px;
  }
 /* Allgemeine Stile für das Formular-Footer */
.ce_form.kontakt-footer {
  display: block;
  background-color: transparent;
  border-radius: 8px;
}

/* Widgets */
.kontakt-footer__content .widget-text,
.kontakt-footer__content .widget-textarea {
  margin-bottom: 16px;
}
.kontakt-footer__content .widget-checkbox {
  margin-bottom: 8px;
}

/* Labels */
.kontakt-footer__content label {
  display: block;
  color: #fff;
  margin-bottom: 8px;
  font-family: 'Satoshi';
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  hyphens: auto;
  
}

/* Eingabefelder */
.kontakt-footer__content input,
.kontakt-footer__content textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #FFFFFF32;
  border-radius: 2px;
  font-family: 'Satoshi';
  font-size: 15px;
  background-color: #ffffff16;
  margin-top: 4px;
}

.kontakt-footer__content input:focus,
.kontakt-footer__content textarea:focus {
  border-color: #ffffff;
  outline: none;
}
.footer-bar__legal-copyright {
  justify-content: end;
}

/* Checkboxen */
.ce_form.kontakt-footer .widget-checkbox span {
  display: flex;
  align-items: top;
  gap: 8px;
}

.ce_form.kontakt-footer .widget-checkbox input[type="checkbox"] {
  appearance: none;
  width: 10px;
  height: 10px;
  border: 1px solid #ffffff32;
  border-radius: 2px;
  background-color: #ffffff16;
  cursor: pointer;
  margin-left: 0;
  padding: 7px;
}

.ce_form.kontakt-footer .widget-checkbox input[type="checkbox"]:checked {
  background-color: #ad122a;
  border-color: #ad122a;
}



/* Submit-Button */
.kontakt-footer__content button.submit {
  background-color: #ad122a;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 2px;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  line-height: 24px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Abstand zwischen Text und Icon */
}

.kontakt-footer__content button.submit:hover {
  transition: background-color 0.3s ease;
  background-color: #981211;
}



.kontakt-footer__content button.submit::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}


/* Erklärungstext */
.kontakt-footer__content .explanation {
  font-size: 12px;
  line-height: 15px;
  font-weight: 300;
  color: #F0F0F2;
  margin-top: 16px;
  margin-bottom: 32px;
}

/* Pflichtfeld-Markierung */
.kontakt-footer__content .mandatory {
  color: #fff;
}

/* Versteckte Labels (außer für Checkboxen) */
.ce_form.kontakt-footer .widget:not(.widget-checkbox) label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.kontakt-footer__content .email {
  color: #fff; /* Weiße Schriftfarbe */
  text-decoration: none; /* Unterstreichung entfernen */
}

.kontakt-footer__content .email:hover {
  text-decoration: underline; /* Unterstreichung beim Hover */
}
}
.pattern {
  background-color: #ffffff;
opacity: 0.8;
background-image:  radial-gradient(#981211 0.5px, transparent 0.5px), radial-gradient(#981211 0.5px, #fff 0.5px);
background-size: 20px 20px;
background-position: 0 0,10px 10px;
}
@media (min-width: 1024px) { 
  .navigation-bar-bottom,
  .mobile {
    display: none;
  }
  .desktop {
    display: block !important;
  }

/* Mega-Menü */
.nav-megamenu {
  display: block;
}
.mod_navigation li.mm_container .mm_dropdown > .inner {
  padding: 1rem 2rem;
  border: 1px solid #E5DFDC;
  background-color: #F0F0F2;
  opacity: 0.98;
}
.mod_customnav.nav-megamenu {
  display: flex;
  flex-wrap: wrap;
  background-color: #F0F0F2;
  padding: 24px;
  gap: 16px;
}

.mod_customnav.nav-megamenu h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  color: #AD122A;
  font-weight: bold;
}

.mod_customnav.nav-megamenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mod_customnav.nav-megamenu li {
  margin-bottom: 8px;
}

.mod_customnav.nav-megamenu a {
  display: block;
  text-decoration: none;
  color: #303746;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-bottom 0.3s;
}

.mod_customnav.nav-megamenu a:hover {
  color: #AD122A;
  border-bottom: 1px solid #AD122A;
}

.mod_customnav.nav-megamenu a:focus {
  outline: 1px solid #981211;
  outline-offset: 1px;
}

/* Untermenüs sichtbar bei Hover oder Fokus */
/*.mod_customnav.submenu {
  display: none;
  position: absolute;
  background-color: #F0F0F2;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  min-width: 200px;
}*/

.mod_customnav.submenu ul {
  margin-top: 0;
  display: block;
  margin-bottom:36px;
}

.mod_customnav.nav-megamenu li:hover .submenu,
.mod_customnav.nav-megamenu li:focus-within .submenu {
  display: block; /* Untermenü wird angezeigt */
}

/* Stil für das Untermenü, das in einem Mega-Menü angezeigt wird */
.mod_customnav.submenu h2 {
  font-size: 1.25rem;
  color: #AD122A;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 2;
  display: flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 8px;
}
/*.mod_customnav.submenu h2 svg {
width: 24px;
height: 24px;
margin-right: 4px;
stroke: #AD122A; 
stroke-width: 1.5;
}*/
/* Styling für die Links im Untermenü */
.mod_customnav.submenu a {
  color: #303746;
  padding: 4px 0;
  font-size: 13px;
  line-height: 19px;
}

.mod_customnav.submenu a:hover {
  color: #AD122A;
  text-decoration: underline;
}
.mod_customnav.submenu a:hover::before {
content: "";
  position: absolute;
  top: calc(clamp(0.722rem, 2.024vw + 0.362rem, 1rem));
  left: -25px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #AD122A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
  transition: background 0.3s ease;
}
.mod_customnav.submenu a:focus {
  outline: 1px solid #981211;
  outline-offset: 1px;
}
/* Megamenü*/
.nav-megamenu a,
.nav-megamenu strong {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  position: relative;
  display: block;
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
  color: #040711;
  text-decoration: none;
  padding: 8px 4px;
}
/*.nav-megamenu a::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 30%;
  width: 24px;
  height: 24px;
  background: url("../img/chevron-down.svg") no-repeat center;
}*/
.nav-megamenu a:hover,
.nav-megamenu a:focus {
  color: #AD122A;
}
.nav-megamenu a.trail,
.nav-megamenu strong {
  color: #040711;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-megamenu ul {
  gap: 1rem;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
.submenu__text {
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
  border-bottom: 1px solid #040711;
  padding-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 600;
}

.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  float: left;
  }
#header .inside {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
  .header-top-bar {
    display:block;
    grid-area:metabar;
    background-color:#303746;
    color: #F0F0F2;
    font-size: 15px;
    line-height: 16px;
  }
  .header-top-bar .inner {
    display:flex;
    gap:1rem 2rem;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    display: flex;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding-left: clamp(0.889rem, calc(0.889rem + ((1vw - 0.2rem) * 3.81)), 3.556rem);
    padding-right: clamp(0.889rem, calc(0.889rem + ((1vw - 0.2rem) * 3.81)), 3.556rem);
    margin: auto;
    max-width: clamp(320px, calc(100vw - 32px), 1440px);
  }
  .logo {
    grid-area:logo;
    display:flex;
    align-items: end;
  }
  .logo svg {
    top: -40px;
  }
  .header-top-bar svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    stroke-width: 1.5;
    margin-right: 2px;
    position: relative;
    top: 3px;
  }

/* Links anpassen */
#top-bar a {
  color: inherit;
  text-decoration: none;
}

#top-bar a:hover {
  text-decoration: underline;
}
/* Sprachenwechsler */
nav.mod_changelanguage {
  position: relative;
  display: inline-block;
  max-width: 128px;
}

/* Basis-Styles für das Select-Tag */
nav.mod_changelanguage .level_1 {
  width: 100%;
  padding: 8px 32px 8px 36px; /* Platz für Icons */
  font-size: 16px;
  font-family: Satoshi, sans-serif;
  color: #f0f0f2; /* Schriftfarbe im normalen Zustand */
  border: 0; /* Heller Rand im normalen Zustand */
  background-color: transparent; /* Hintergrundfarbe im normalen Zustand */
  appearance: none; /* Entfernt das Standard-Dropdown-Design */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23f0f0f2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Sanfte Übergänge für Hintergrund und Textfarbe */
}

/* Hover-Zustand */
nav.mod_changelanguage .level_1:hover {
  background-color: #f0f0f2; /* Hintergrundfarbe im Hover-Zustand */
  color: #303746; /* Schriftfarbe im Hover-Zustand */
  border-color: #AD122A; /* Randfarbe im Hover-Zustand */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23030346" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>'); /* Hintergrundfarbe des SVG ändern */
}

/* Globe-Icon vor dem Select-Tag als Inline-SVG */
nav.mod_changelanguage::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23f0f0f2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-globe"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  stroke: currentColor; /* Setzt die Farbe des Icons basierend auf der Textfarbe */
}

/* Hover-Zustand für das Globe-Icon */
nav.mod_changelanguage:hover::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23030346" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-globe"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>');
}
/* Option-Elemente im Select */
nav.mod_changelanguage .level_1 option {
  font-size: 16px;
  font-family: Satoshi, sans-serif;
  color: #f0f0f2; /* Schriftfarbe der Optionen im normalen Zustand */
  background-color: transparent; /* Hintergrundfarbe der Optionen im normalen Zustand */
  border: 1px solid #F0F0F2; /* Randfarbe der Optionen im normalen Zustand */
}

/* Hover-Zustand für die Option-Elemente */
nav.mod_changelanguage .level_1 option:hover {
  background-color: #f0f0f2; /* Hintergrundfarbe im Hover-Zustand */
  color: #303746; /* Schriftfarbe im Hover-Zustand */
}

.horizontal-list ol li {
    flex: 1 1 calc(25% - 16px); /* Vier Spalten auf noch größeren Bildschirmen */
  }
  .horizontal-list-border ol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* Zwei Spalten */
    gap: 16px;  /* Abstand zwischen den Listenelementen */
  }
  .horizontal-list-border {
    column-count: 2; /* Zwei Spalten */
    column-gap: 48px; /* Abstand zwischen den Spalten */
  }

  /* Auf größeren Geräten etwas mehr Abstand zwischen den Listenelementen */
  .horizontal-list-border .list-item {
    margin-bottom: 48px;
  }
.footer-bar {
  margin-bottom: 0px;
}
/** .service-card__desktop  { 
    display: block;
  }
  .service-card__mobile {
    display:none;
  }*/
.lawyer-cards.lawyer-cards__desktop {
  display: grid !important;
}
.lawyer-cards.lawyer-cards__mobile {
  display: none !important;
}
  .service-card h3 {
    align-items: start;
    flex-direction: column;
    font-weight: 400;
  }
}
@media (min-width: 1200px) {
  .hero__highlight-box {
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 1 / 1;
    /*margin: auto;*/
  }
  .hero__highlight-boxes {
    margin-top: 0 !important;
  }
  .hero__highlight-box-text {
    text-align: center;
    padding: 0 32px;
  }


  .service-card h3 svg {
    margin-left: -4px;
    margin-bottom: 16px;
  }
  .service-card__link a {
    font-weight: 400;
  }
  .horizontal-list ol {
    flex-wrap: nowrap;
}
.mod_faqpage {
  padding: 0 15%;
}
.nav-megamenu ul {
    gap:2rem;
}
.footer-logo {
  width: 12vw;
}
}
@media (max-width: 1199px) {
  .hero__profil-image figure img {
    width: 100%;
  }
}