/* =========================================
   Workghosts GmbH – Farbkonzept Override
   ========================================= */

/* Farbvariablen (Logo-basiert) */
:root {
  --color-primary: #3CCB4B;      /* Ghost-Grün */
  --color-secondary: #F5A623;    /* Helmet-Orange */
  --color-dark: #1A1A1A;         /* Dunkelgrau */
  --color-light: #F2F2F2;        /* Hellgrau */
  --color-white: #FFFFFF;
  --color-black: #000000;
}

/* Allgemeine Textfarben */
body {
  color: var(--color-dark);
  background-color: var(--color-white);
}

/* Links */
a,
.typo3 a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover,
.typo3 a:hover {
  color: var(--color-secondary);
}

/* Buttons */
button,
.btn,
input[type="submit"],
input[type="button"] {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Navigation */
@media (min-width: 991px) {
  .navbar,
  .navigation,
  .menu {
    background-color: var(--color-dark);
  }
  .navbar a,
  .navigation a,
  .menu a {
    color: var(--color-dark);
  }
  .navbar a:hover,
  .navigation a:hover,
  .menu a:hover {
    color: var(--color-primary);
  }
  body.backendlayout-special_start .nav-link-main {
    color: var(--color-white);
  }
  
  body.backendlayout-special_start .navbar-transition .nav-link {
    color: var(--color-dark);
  }
  
  .nav-link-dropdown .nav-link-text {
    color: var(--color-dark);
  }
}

/* Footer */
footer {
  background-color: var(--color-dark);
  color: var(--color-light);
}
footer a {
  color: var(--color-primary);
}
footer a:hover {
  color: var(--color-secondary);
}

/* Hintergrundbereiche */
.section-dark {
  background-color: var(--color-dark);
  color: var(--color-light);
}
.section-light {
  background-color: var(--color-light);
  color: var(--color-dark);
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
}

h1.carousel-header {
  margin-bottom: 0px !important;
}

.carousel-text-inner {
  background: rgba(0, 0, 0, 60%);
  border-radius: 15px;
  padding-left: 50px;
  padding-right: 50px
}

#carousel-224 .carousel-text-inner {
  background-color: transparent;
  width: 65%;
}

.carousel .carousel-item h1 {
  color: var(--color-primary)  !important; /* nur H1 grün */
}

@media (min-width: 991px) {
  .carousel .carousel-item h1 {
    font-size: 80px;
  }
}

/* Karten, Boxen, Container */
.card,
.box,
.content-element {
  border: 1px solid var(--color-light);
  background-color: var(--color-white);
}
.card:hover,
.box:hover {
  border-color: var(--color-primary);
}

/* Fallbacks für harte Farben */
[class*="btn-primary"] {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
[class*="btn-secondary"] {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}
[class*="bg-dark"] {
  background-color: var(--color-dark) !important;
}
[class*="bg-light"] {
  background-color: var(--color-light) !important;
}
[class*="text-primary"] {
  color: var(--color-primary) !important;
}
[class*="text-secondary"] {
  color: var(--color-secondary) !important;
}

#c256 img,
#c221 img,
#c222 img {
    width: 64px
}

#umzuege-244 > div.form-element:nth-last-child(2),
#hausraeumungen-255 > div.form-element:nth-last-child(2){
    display: none;
}

@media (max-width: 700px) {
    .wg-track {
      display: none;
    }

    .carousel-text-inner {
      width: 100% !important;
    }
}