@font-face {
      font-family: 'Inter-regular';
      src: url('/assets/fonts/Inter-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
}

@font-face {
      font-family: 'Inter-bold';
      src: url('/assets/fonts/Inter-Bold.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
}

body,
html {
      margin: 0;
      padding: 0;
      font-family: 'Inter-regular', sans-serif;
}

/* Footer */

.site-footer {
      background-color: #111;
      color: #ffffff;
      padding: 4rem 2rem 2rem 2rem;
      font-size: 0.95rem;
}

.footer-inner {
      max-width: 1600px;
      margin: 0 auto;
}

.footer-columns {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: space-between;
}

.footer-col {
      flex: 1 1 18%;
      min-width: 150px;
}

.footer-col h4 {
      font-size: 20px;
      margin-bottom: 0.5rem;
      font-weight: bold;
      text-transform: uppercase;
}

.footer-col p,
.footer-col a,
.footer-col ul {
      color: #ccc;
      text-decoration: none;
      line-height: 1.6;
      text-transform: none;
      font-size: 16px;
}

.footer-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
}

.footer-col ul li {
      margin-bottom: 0.3rem;
}

.footer-logo img {
      max-width: 160px;
      height: auto;
}

.footer-bottom {
      text-align: center;
      margin-top: 2rem;
      font-size: 0.9rem;
      color: #777;
}

.footer-bottom a {
      color: #999;
      text-decoration: none;
}

.footer-bottom a:hover {
      color: #ffffff;
}

/* Head */

.main-head {
      width: 100%;
      height: 100px;
      background-color: #006637;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
}

.main-nav {
      width: 100%;
      height: 100px;
      background-color: #006637;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 50px;
}

.main-nav a,
p {
      text-transform: uppercase;
      text-decoration: none;
      color: #ffffff;
      font-size: 20px;
}

.head-column img {
      width: 50px;
      height: auto;
      margin-left: 30px;
}

/* Hero */
.hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 70vh;
      background: url('/images/konsul-hero.jpg');
      overflow: hidden;
      margin-bottom: 100px;
}

.bg-leistung {
      background: url('/images/bg-leistung.jpg');
      background-repeat: no-repeat;
      background-size: cover;
}

.hero-flag {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      z-index: 1;
      pointer-events: none;
}

.hero-flag img {
      width: 100%;
      height: 100%;
      display: block;
}

.hero-content {
      text-align: center;
      color: white;
}

.hero-title {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 1rem;
}

.hero-text {
      font-size: 1.2rem;
      opacity: 0.85;
}

/* Zwei-Spalten-Sektion */
.section-two-column {
      display: flex;
      flex-wrap: nowrap;
      gap: 0;
      max-width: 1600px;
      margin: 0 auto;
      padding: 4rem 2rem;
      align-items: stretch;
}

.column-text {
      flex: 1 1 50%;
      max-width: 50%;
      padding-right: 2rem;
}

.column-image {
      flex: 1 1 50%;
      max-width: 50%;
      height: 500px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
}

/* 40/60 */

.main-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
}

.who-am-i {
      display: flex;
      flex-wrap: nowrap;
      gap: 100px;
      margin-bottom: 100px;
}

.column-40 {
      flex: 0 0 40%;
}

.column-60 {
      flex: 0 0 60%;
}

.column-60 p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #111;
      text-transform: none;
}

.column-60 h1 {
      margin-top: 150px;
}

.column-40 img {
      align-items: right;
      width: 100%;
      height: auto;
      display: block;
}

@media (max-width: 768px) {
      .who-am-i {
            flex-direction: column;
      }

      .column-40,
      .column-60 {
            flex: 0 0 100%;
      }
}

/* 50/50 boxen */

.text p {
      color: #000;
      text-transform: none;
}

.boxlayout {
      display: flex;
      flex-direction: column;
      max-width: 1200px;
}

/* Einzelne Zeile (bestehend aus 2 Hälften) */
.box {
      width: 100%;
      line-height: 1.6;
}

/* Container mit zwei Hälften */
.box-content {
      display: flex;
      flex-wrap: nowrap;
      height: 300px;
      /* feste Höhe für "quadratisch wirkend" */
      border-radius: 0;
      overflow: hidden;
      margin: 0;
      /* kein Abstand zwischen den Boxen */
      padding: 0;
}

/* Reihenfolge kontrollieren */
.text-left .text {
      order: 1;
      background-color: white;
      color: #000;
}

.text-left .icon {
      order: 2;
      background-color: #23653c;
}

.text-right .icon {
      order: 1;
      background-color: #23653c;
}

.text-right .text {
      order: 2;
      background-color: white;
      color: #000;
}

/* Hälften */
.text,
.icon {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      box-sizing: border-box;
}

/* Text vertikal & horizontal zentrieren */
.text {
      flex-direction: column;
      text-align: center;
}

/* Optional: Titel & Text etwas getrennt */
.text h2 {
      margin: 0 0 1rem 0;
      font-size: 1.5rem;
}

.text p {
      margin: 0;
      max-width: 90%;
}

/* Icon-Größe */
.icon svg {
      width: 64px;
      height: 64px;
      fill: white;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
      .box-content {
            flex-direction: column;
            height: auto;
      }

      .text,
      .icon {
            width: 100%;
            padding: 1.5rem;
      }

      .text p {
            max-width: 100%;
      }
}

/* Mobile: Stapeln */
@media (max-width: 768px) {
      .box-content {
            flex-direction: column;
      }

      .text,
      .icon {
            width: 100%;
      }

      .icon {
            padding-top: 1rem;
            padding-bottom: 1rem;
      }
}

@media (max-width: 768px) {
      .box-content {
            flex-direction: column;
            text-align: center;
      }

      .icon {
            margin-bottom: 1rem;
      }
}

/* Optional Responsive Design */
@media (max-width: 768px) {

      .boxlayout .row,
      .boxlayout .row.reverse {
            flex-direction: column;
      }

      .column-50 {
            flex: 0 0 100%;
      }
}

/* Hintergrundbilder */
.bg-mayr {
      background-image: url('/images/africa-1.jpg');
}

.bg-wirtschaft {
      background-image: url('/images/africa-2.jpg');
}

.bg-kultur {
      background-image: url('/images/africa-3.jpg');
}

/* Akkordeon */
.accordion-group {
      border-top: 1px solid #ddd;
      margin-top: 2rem;
}

.accordion-item {
      border-bottom: 1px solid #ddd;
}

.accordion-title {
      padding: 1rem 0;
      cursor: pointer;
      font-weight: bold;
      position: relative;
}

.accordion-title::after {
      content: "+";
      position: absolute;
      right: 0;
      top: 1rem;
      font-size: 1.2rem;
      transition: transform 0.3s ease;
}

.accordion-item.active .accordion-title::after {
      content: "-";
      transform: rotate(180deg);
}

.accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
      padding: 0 0;
}

.accordion-item.active .accordion-content {
      max-height: 500px;
      padding: 0.5rem 0 1rem 0;
}

/* Section content */
.section-heading {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 1rem;
}

.section-paragraph {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #111;
}

/* Preloader */

#preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #006637;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

#preloader.slide-out {
      transform: translateY(-100%);
      opacity: 0;
}

#preloader img {
      width: 400px;
      opacity: 0;
      animation: fadeIn 1s ease-in-out forwards;
}

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

/* Leaflet */

.map-wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
}

#map {
      width: 100%;
      max-width: 100%;
      height: 600px;
      margin-bottom: 100px;
}