/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Sanftes Scrollen */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "Montserrat", sans-serif; font-weight:400; font-size:1.2rem; color:#1d1d1b;
}

p{margin-bottom:2rem;}

ul{padding-left:20px;}

/* Styling für die ungeordnete Liste */
.content-list {
  list-style: none; /* Entfernt den Standard-Punkt */
  padding-left: 0;   /* Setzt den Einzug zurück */
  margin: 1.5rem 0;  /* Standard-Abstand nach oben und unten */
}

/* Styling für die einzelnen Listenelemente */
.content-list li {
  width:100% !important;
  box-sizing: border-box;
  position: relative;
  padding-left: 1.25rem; /* Schafft Platz für den neuen Punkt */
  margin-bottom: 0.75rem; /* Angenehmer Abstand zwischen den Zeilen */
}

/* Der goldene Kreis als Aufzählungszeichen */
.content-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em; /* Positioniert den Kreis präzise auf Höhe der ersten Textzeile */
  
  /* Größe des Kreises */
  width: 8px;
  height: 8px;
  
  /* Form und Farbe */
  background-color: #d8ad57; /* Ihre originale CI-Farbe */
  border-radius: 50%; /* Macht das Quadrat zum perfekten Kreis */
  
  /* Barrierefreiheit: Verhindert, dass Screenreader den Punkt als Text interpretieren */
  speak: none; 
}

hr{border:none; height:5px; width:100px; background-color:#d8ad57; margin:60px auto;}

/*
a{color:#16438e; text-decoration: none; border-bottom:2px solid #16438e;}

a:hover{color:#16438e; border-bottom:2px solid transparent;}
*/

a {
  color:#1d1d1b;
  text-decoration: underline;
  text-decoration-color: #d8ad57; /* Ihre originale CI-Farbe als visueller Anker */
  text-decoration-thickness: 2px; /* Gut sichtbare Linie */
  text-underline-offset: 2px; /* Schafft modernen Abstand zum Text */
  transition: all 0.2s ease-in-out;
}

/* Hover-Zustand (Mauszeiger darüber) */
a:hover {
  color: #d8ad57; /* Text wechselt elegant zu Ihrer CI-Hauptfarbe */
  text-decoration-color: #d8ad57; /* Linie wird als Kontrast dunkler */
  text-decoration-thickness: 3px; /* Linie wird dicker für visuelles Feedback */
}


/* Standardmäßig den Fokus ausblenden */
:focus {
  outline: none;
}

/* Fokus nur bei Tastatursteuerung anzeigen */
.keyboard-focused :focus {
  outline: 2px solid orange; /* Beispiel für eine Fokusanzeige */
  outline-offset: 3px;
}



h1, h2{
    font-size:2.4rem; display:block; font-weight:700; margin-bottom:1.5rem;
}



h3, h4, h5, h6, .infobox h2{
    font-size:1.4rem;
    font-weight:700;
    text-align:left;
    margin-bottom:1.5rem;
}


img{
    max-width:100%;
    height:auto;
}

img.blob {
/* Blob 1 – organisch */
border-radius: 68% 32% 59% 41% / 40% 63% 37% 60%;
}
  

.nomargin{
    margin-bottom:0;
}

.smallcontent{
    max-width:700px;
    margin:0 auto;
}



strong{font-weight:700;}

header.page {
 height:112px;
 background-color: #122a3e;
}

header {
    background: linear-gradient(
        180deg,
        #2a2a28 0%,
        #232321 45%,
        #1d1d1b 100%
    );
}

.center, .center p, .center h2, .center h3{
    text-align:center;
}

.video-container{
    max-width:1000px;
    margin:0 auto;
}


/* -------------------- HEADER ------------------------- */
header{
    background-color:#1d1d1b;
    width:100%;
    padding:30px;
    box-sizing: border-box;
    display:flex;
    justify-content: space-between;
}

/* HEADER-BASIS-LAYOUT */
header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Verteilt Logo und Nav auf den Seiten */
  padding: 20px 40px;
  background-color: #1d1d1b; /* Edles Schwarz */
  position: relative;
  z-index: 1000;
  font-family: sans-serif;
}




.logo{
    width:350px;
}

.logo a{
    width:100%;
    border-bottom: none;
}

.logo a:hover{
    border-bottom:none;
}

.logo img {
    width:100%;
    height:auto;
}


.mobilelogo{
    width:200px;
}



/* ------------------ Navigation ----------------------- */
/* DEINE BESTEHENDE NAVI (OPTIMIERT) */
nav {
  display: flex;
  align-items: center;
}

nav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin-left: 45px;
  display: flex;
  align-items: center;
  position: relative; /* Wichtig für die Positionierung des Dropdowns */
}

nav li a, 
nav li .dropdown-toggle {
  color: #fff;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 0;
  text-transform:uppercase;
  font-size:1.2rem;
  border-bottom:2px solid transparent;
}

nav li a:hover,
nav li .dropdown-toggle:hover,
nav li.has-dropdown:focus-within .dropdown-toggle {
  color: #d6ac58;
  border-bottom: 2px solid #d6ac58;
}

/* DROP-DOWN MENÜ (DESKTOP) */
.dropdown-menu {
  display: none; /* Standardmäßig unsichtbar */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* HIER SIND DIE ÄNDERUNGEN: */
  background-color: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(12px);             
  -webkit-backdrop-filter: blur(12px);
  
  border: 1px solid rgba(214, 172, 88, 0.4); /* Goldene Kante leicht transparent für besseren Look */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  min-width: 420px;
  flex-direction: column;
  padding: 15px 0;
  margin-top: 15px;
}

/* Zeigt das Dropdown, wenn der Button per JS geöffnet wird */
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: flex;
}

.dropdown-menu li {
  margin: 0;
  width: 100%;
}

.dropdown-menu li a {
  padding: 12px 25px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-bottom: none !important;
  transition: background 0.2s ease, color 0.2s ease;
  text-transform: unset;
  font-size:1rem;
}

.dropdown-menu li a:hover {
  background-color: rgba(214, 172, 88, 0.25);
  color: #fff;
}

.arrow-icon {
  font-size: 12px;
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.dropdown-toggle[aria-expanded="true"] .arrow-icon {
  transform: rotate(180deg);
}

/* DEIN EDLER KURSPLAN BUTTON */
nav ul li.kursplan a {
  background: linear-gradient(180deg, #e2bc6d 0%, #dcb566 45%, #d6ac58 100%);
  border-radius: 50px;
  padding: 10px 30px;
  display: block;
  border-bottom: none !important;
  color: #1d1d1b;
  font-weight: 700;
  transition: background .35s ease, box-shadow .35s ease, transform .2s ease;
}

nav ul li.kursplan a:hover {
  background: linear-gradient(180deg, #fffef8 0%, #ffffff 50%, #f7e6b4 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* Erzeugt eine unsichtbare Brücke zwischen Button und Dropdown, damit das Menü offen bleibt */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -20px; /* Reicht über die 15px Lücke bis zum Button hoch */
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent; /* Bleibt komplett unsichtbar */
}

/* MOBIL-BUTTON (HAMBURGER) */
.menu-toggle {
  display: none; /* Auf Desktop verstecken */
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle .close-icon { display: none; }
.menu-toggle[aria-expanded="true"] .hamburger-icon { display: none; }
.menu-toggle[aria-expanded="true"] .close-icon { display: inline-block; }


/* RESPONSIVE: MOBILES FULLSCREEN MENÜ (Ab 1099px oder deinem Wunschwert) */
@media (max-width: 1199px) {
  .menu-toggle {
    display: block; /* Hamburger anzeigen */
  }

  nav {
    position: fixed;
    top: 0;
    right: -100%; /* Versteckt außerhalb des Bildschirms */
    width: 100%;
    height: 100vh;
    background-color: rgba(17, 17, 17, 0.98); /* Edles, fast deckendes Schwarz */
    backdrop-filter: blur(10px);
    transition: right 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
    padding: 100px 40px 40px 40px;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
  }

  /* Wenn das Menü aktiv ist, reinsliden */
  header:has(.menu-toggle[aria-expanded="true"]) nav {
    right: 0;
  }

  nav ul.nav-links {
    flex-direction: column;
    width: 100%;
  }

  nav ul li {
    margin-left: 0;
    margin-bottom: 25px;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  nav li a, 
  nav li .dropdown-toggle {
    font-size: 24px; /* Größer auf Mobilgeräten */
    width: 100%;
    text-align: left;
  }

  /* Mobiles Dropdown Anpassung */
  .dropdown-menu {
    position: relative;
    left: 0;
    transform: none;
    width: 100%;
    border: none;
    border-left: 2px solid #d6ac58;
    background: transparent;
    box-shadow: none;
    margin-top: 10px;
    padding: 0 0 0 15px;
  }

  .dropdown-menu li {
    margin-bottom: 15px;
  }

  .dropdown-menu li a {
    font-size: 18px;
    padding: 5px 0;
  }
  
  nav ul li.kursplan {
    margin-top: 20px;
    width: 100%;
  }
  
  nav ul li.kursplan a {
    text-align: center;
  }
}






/* ---- Buttons ----- */
ul.buttongroup{
    list-style-type: none;
    display:flex;
    flex-direction: column;
    margin-left:0;
    padding-left:0;
    justify-content: space-between;
    margin-bottom:2rem;
}

.bt {
    background: linear-gradient(
        180deg,
        #2a2a28 0%,
        #232321 45%,
        #1d1d1b 100%
    );

    color: #fff;
    font-weight: 700;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    margin: 10px 0;
    border-bottom: none;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .25s ease;
}

.bt:hover,
.btwa:hover {
    background: linear-gradient(
        180deg,
        #383836 0%,
        #2b2b29 45%,
        #232321 100%
    );

    color: #fff;
    border-bottom: none;
    text-decoration: none;
    transform: translateY(-2px) scale(1.02);

    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}









/* ---------------------- HERO ----------------------------- */
.hero{position: relative; width:100%; height:700px; display:flex}


.herotxt{
    width:50%;
    background-color:#d6ac58;
    padding:40px;
    box-sizing: border-box;
    display:flex;
    justify-content: center;
    align-items: center;
}


.herotxt, .pagetitle {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        180deg,
        #e2bc6d 0%,
        #dcb566 45%,
        #d6ac58 100%
    );
}

.herotxt::before, .pagetitle::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("../img/dragonbg.svg") center center / 160% no-repeat;

    opacity: .18;      /* Nur das SVG wird transparent */
    mix-blend-mode: soft-light;
    z-index: 0;
    pointer-events: none;
}

.pagetitle::before{
    background: url("../img/dragonbg.svg") center -200px / 160% no-repeat;
}

.herotxt > *, .pagetitle > * {
    position: relative;
    z-index: 1;
}

.herotxt section{
    max-width:600px;
    text-align:center;
}



.dragonbg {
 background-image: url('../img/dragonbg2.svg');
 background-attachment: fixed; /* Fixiert das Bild am Viewport */
 background-position: center top; /* Richtet es für beide Boxen identisch aus */
 background-size: 200%; /* Sorgt dafür, dass es den Bildschirm füllt */
 background-repeat: no-repeat;
}


.dragonbggold {
 background-image: url('../img/dragonbg3.svg');
 background-attachment: fixed; /* Fixiert das Bild am Viewport */
 background-position: center top; /* Richtet es für beide Boxen identisch aus */
 background-size: 200%; /* Sorgt dafür, dass es den Bildschirm füllt */
 background-repeat: no-repeat;
}




/* Slideshow Container */
.slideshow {
    position: relative;
    width: 50%;
    height: 100%; /* Vollbild-Slideshow */
    overflow: hidden;
}

/* Slides */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-size: cover;
    background-position: calc(50% - 15%);
}




/* -------------- WRAPPER -------------------------- */


.wrapper{
    max-width:1920px;
    margin:0 auto;
    box-shadow: 0 0 5px #666
}



.wingtsunlogos{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}

.wingtsunlogos img{margin:0 10px 40px 10px; width:300px;}





/* ---- Read more ---*/
.read-more-container {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
}

/* Versteckt die Checkbox */
#read-more-toggle {
    display: none;
}

/* Zusätzlicher Inhalt standardmäßig unsichtbar */
.more-text {
    display: none;
    margin-top: 10px;
}

/* Wenn Checkbox aktiv ist, wird der zusätzliche Inhalt angezeigt */
#read-more-toggle:checked ~ .more-text {
    display: block;
}

/* Label zeigt "Weniger anzeigen" bei aktivierter Checkbox */
.read-more-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #ffffff;
    cursor: pointer;
    border-bottom:2px solid #fff;
    transition: color 0.2s ease;
}

.read-more-label:hover {
    border-bottom:2px solid transparent;
    color: #ffffff;
}

/* Dynamischer Wechsel zwischen "Lesen Sie mehr" und "Weniger anzeigen" */
#read-more-toggle:checked + .read-more-label::after {
    content: " - schließen";
}

#read-more-toggle:not(:checked) + .read-more-label::after {
    content: " - öffnen";
}




/*---- Inhalt -------------- */
article .article_inner{
    width:1400px;
    margin:0 auto;
}

article ul.coleset{
    padding-left:0;
}

article .coles, article .coles3, footer .coles3, article .coles4{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

article .coles li{
    width:48%;
    list-style-type: none
}


article .coles3 li, footer .coles3 li{
    width:31%;
    list-style-type: none
}

article .coles4 li{
    width:23%;
    list-style-type: none;
    margin-bottom:25px;
}


.referenzen p, .referenzen h3{
    text-align:center;
}

.referenzen h3{
    margin-bottom:10px;
}

.referenzenbx li{
    background-color:#fff;
    padding:15px;
    box-sizing: border-box;
    margin-bottom:25px;
    border:2px solid #d6ad59;
}







article.articlewhite{
    background-color:#fff;
    padding:100px 0;
}


article.articlecreme{
    background-color:#f9f5ea;
    padding:100px 0;
}


article.articlegold{
    background-color:#d6ac58;
    padding:100px 0;
}


article.articledark {
    background:
        linear-gradient(
            rgba(29,29,27,.88),
            rgba(29,29,27,.88)
        ),
        url("../img/blackbg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 100px 0;
    color: #fff;
}

article.articledark h2, article.articledark h3{
    color:#fff;
}

article.articledark .bt{
    background:#d7ac59 !important;
    color:#000;
}





/* -------------------- Teaser ------------------------------ */
.teaser{
    background-color:#fff;
    border-radius: 0 0 20px 20px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
    margin-bottom:4%;
}

.teasertxt{
    padding:20px;
}






/* --------------------------- Accordion ------------------------------------ */
   .accordion {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  .accordion-item {
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  }

  .accordion-item h3 {
    margin: 0;
    font-size:1.2rem !important;
  }

  .accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 24px;

    border: 0;
    background: transparent;

    color: #111827;
    font: inherit;
    text-align: left;

    cursor: pointer;
  }

  .accordion-header:hover {
    background: #f9f5ea;
  }

  /* Sehr wichtig für Tastatur-Nutzer */
  .accordion-header:focus-visible {
    outline: 3px solid #ffa500;
    outline-offset: -3px;
  }

  .accordion-icon {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;
    background: #d6ac58;

    font-size: 16px;
    font-weight: 400;
    line-height: 1;

    transition:
      transform 0.3s ease,
      background 0.3s ease;
  }

  .accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
    background: #111827;
    color: #fff;
  }

  .accordion-content {
    overflow: hidden;
  }

  .accordion-content-inner {
    padding: 24px 24px 24px 24px;
  }

  .accordion-content p {
  }

  /*
   * Wenn Animationen deaktiviert werden sollen,
   * verzichten wir auf die Transition.
   */
  @media (prefers-reduced-motion: reduce) {
    .accordion-icon {
      transition: none;
    }
  }




/* ----------------------------- Kontaktbox ------------------------------------- */
/* =========================================
   DURST AKTIV – KONTAKTBOX
   ========================================= */

.kontaktbox {
  --dark: #1d1d1b;
  --gold: #d8ad57;
  --cream: #f9f5ea;

  position: relative;
  max-width: 900px;
  margin: 60px auto;
  padding: 3px;

  border-radius: 24px;

  background: linear-gradient(
    135deg,
    var(--gold),
    #ead29b,
    var(--gold)
  );

  box-shadow: 0 20px 50px rgba(29, 29, 27, 0.15);

  animation: kontaktbox-float 5s ease-in-out infinite;
}


/* =========================================
   INHALT
   ========================================= */

.kontaktbox__content {
  position: relative;
  overflow: hidden;

  padding: 50px;

  border-radius: 21px;

  background: var(--dark);
  color: var(--cream);
}


/* Dekorative Elemente */

.kontaktbox__content::before {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  top: -170px;
  right: -100px;

  border-radius: 50%;

  background: var(--gold);

  opacity: 0.12;

  pointer-events: none;
}


.kontaktbox__content::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  bottom: -120px;
  left: -80px;

  border-radius: 50%;

  background: var(--gold);

  opacity: 0.08;

  pointer-events: none;
}


/* =========================================
   EYEBROW
   ========================================= */

.kontaktbox__eyebrow {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 12px;

  color: var(--gold);

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.kontaktbox__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: var(--gold);
}


/* =========================================
   ÜBERSCHRIFT
   ========================================= */

.kontaktbox h2 {
  position: relative;

  margin: 0 0 15px;

  color: var(--cream);
}


/* =========================================
   EINLEITUNG
   ========================================= */

.kontaktbox__intro {
  position: relative;

  max-width: 650px;

  margin: 0 0 32px;

  color: rgba(249, 245, 234, 0.78);
}


/* =========================================
   KONTAKT-LINKS
   Immer untereinander
   ========================================= */

.kontaktbox__links {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 12px;

  width: 100%;
}


/* =========================================
   KONTAKT-KARTEN
   ========================================= */

.kontaktbox__item {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-width: 0;
  min-height: 78px;

  box-sizing: border-box;

  padding: 15px 18px;

  border: 1px solid rgba(216, 173, 87, 0.30);
  border-radius: 14px;

  background: rgba(249, 245, 234, 0.06);

  color: var(--cream);

  text-decoration: none;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* Hover */

.kontaktbox__item:hover {
  transform: translateX(5px);

  border-color: var(--gold);

  background: rgba(216, 173, 87, 0.12);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.20);
}


/* =========================================
   ICON
   ========================================= */

.kontaktbox__icon {
  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 15px;

  border-radius: 12px;

  background: var(--gold);

  color: var(--dark);

  font-size: 18px;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}


.kontaktbox__item:hover .kontaktbox__icon {
  transform: scale(1.08);

  background: var(--cream);
}


/* =========================================
   TEXT
   ========================================= */

.kontaktbox__text {
  display: flex;
  flex-direction: column;

  min-width: 0;

  flex: 1;
}


/* Bezeichnung */

.kontaktbox__text small {
  margin-bottom: 3px;

  color: rgba(249, 245, 234, 0.60);

  font-size: 12px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}


/* E-Mail / Telefonnummer */

.kontaktbox__text strong {
  display: block;

  color: var(--cream);

  font-weight: 700;

  line-height: 1.4;

  /* Kein Abschneiden */
  white-space: normal;
  overflow-wrap: anywhere;
}


/* =========================================
   PFEIL
   ========================================= */

.kontaktbox__arrow {
  flex: 0 0 auto;

  margin-left: 20px;

  color: var(--gold);

  font-size: 13px;

  transition: transform 0.3s ease;
}


.kontaktbox__item:hover .kontaktbox__arrow {
  transform: translateX(5px);
}


/* =========================================
   SCHWEBE-ANIMATION
   ========================================= */

@keyframes kontaktbox-float {

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

  50% {
    transform: translateY(-4px);
  }
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 760px) {

  .kontaktbox {
    margin: 40px 20px;
  }


  .kontaktbox__content {
    padding: 40px 30px;
  }


  .kontaktbox__item {
    min-height: 74px;
  }
}


/* =========================================
   SMARTPHONE
   ========================================= */

@media (max-width: 480px) {

  .kontaktbox {
    margin: 30px 15px;

    border-radius: 18px;
  }


  .kontaktbox__content {
    padding: 32px 20px;

    border-radius: 15px;
  }


  .kontaktbox h2 {
  }


  .kontaktbox__intro {
  }


  .kontaktbox__item {
    min-height: 70px;

    padding: 12px 14px;
  }


  .kontaktbox__icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    margin-right: 12px;
  }


  .kontaktbox__text strong {
  }


  /* Auf kleinen Displays
     keinen zusätzlichen Pfeil */
  .kontaktbox__arrow {
    display: none;
  }
}


/* =========================================
   FOKUS FÜR TASTATURNUTZER
   ========================================= */

.kontaktbox__item:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}


/* =========================================
   REDUZIERTE BEWEGUNG
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .kontaktbox {
    animation: none;
  }

  .kontaktbox__item,
  .kontaktbox__icon,
  .kontaktbox__arrow {
    transition: none;
  }
}



/* --------------------- Blobsticky ------------------------- */
.blobsticky {
  position: sticky;
  top: 40px;
  align-self: start;
}











/* Footer */



footer .article_inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    width:1400px;
    margin:0 auto;
    padding:100px 0;
}

footer .article_inner section{
    width:100%;
}

footer ul{
    margin-left:0px;
    padding-left:0;
    width:100%;
}

footer ul li p{
    line-height:2.2rem !important;
    text-align:center;
}

footer ul li h3{
    text-align:center;
}


/* ################## Trusted Container ############################ */
/* CSS VARIABLEN FÜR EINFACHE ANPASSUNG */
:root {
  --bg-black: #1d1d1b;
  --accent-gold: #d8ad57; /* Edles Gold */
  --text-white: #FFFFFF;
  --text-gray: #B3B3B3;
}

/* HAUPTCONTAINER */
.trustbar-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background-color: var(--bg-black);
  padding: 30px 20px;
  box-sizing: border-box;
  border-top: 2px solid var(--accent-gold);
  border-bottom: 2px solid var(--accent-gold);
}

/* EINZELNES ELEMENT */
.trustbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
}

/* ICONS (Platzhalter - können durch SVG/FontAwesome ersetzt werden) */
.trustbar-icon {
  color: var(--accent-gold);
  font-size: 24px;
  margin-bottom: 12px;
}

/* TITEL (OBERE ZEILE) */
.trustbar-title {
  color: var(--accent-gold);
  margin: 0 0 6px 0;
  text-align:center;
}

/* TEXT (UNTERE ZEILE) */
.trustbar-text {
  color: var(--text-white);
  margin: 0;
}

/* RESPONSIVE DESIGN (SMARTPHONE & TABLET) */
@media (max-width: 1199px) {
  .trustbar-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 25px;
    padding: 25px 15px;
  }
  
  .trustbar-item {
    flex: 0 0 75%; /* Zeigt ein Element fast ganz und das nächste leicht angeschnitten */
    scroll-snap-align: center;
    background: rgba(255, 255, 255, 0.03); /* Leichte Abhebung auf Mobilgeräten */
    border-radius: 8px;
    padding: 20px 15px;
  }

  /* Schicker, dezenter Scrollbalken für Mobilgeräte */
  .trustbar-container::-webkit-scrollbar {
    height: 4px;
  }
  .trustbar-container::-webkit-scrollbar-thumb {
    background: var(--accent-gold);
    border-radius: 10px;
  }
  .trustbar-container::-webkit-scrollbar-track {
    background: #222;
  }
}








/* RESPONSIVE DESIGN */

/* ------------ Hero ----------------- */
@media only screen and (max-width: 1600px) {
    .hero{height:600px}
}

@media only screen and (max-width: 1440px) {
    .hero{height:550ox}
}

@media only screen and (max-width: 1199px) {
    .hero{flex-direction: column-reverse; height:auto}
    .herotxt, .slideshow{width:100%}
    .herotxt{height:auto}
    .slideshow{height:650px}
}

@media only screen and (max-width: 999px) {
    .slideshow{height:450px}
}





@media only screen and (max-width: 1440px) {
    article .article_inner, footer .article_inner{width:90%;}
}


@media only screen and (max-width: 1199px) {
    body{font-size:1.1em;}
    h2, h1, footer h2, .hero h1{font-size:1.8em;}
}



@media only screen and (max-width: 999px) {
    article .coles li, article .coles3 li, footer .coles3 li, article .coles4 li{
    width:100%;
    max-width:660px;
    margin:0 auto 4% auto;
    }
    .logo{width:250px}
}


@media only screen and (max-width: 600px) {
    .logo{width:220px}
}

@media only screen and (max-width: 350px) {
    .logo{width:180px}
}