body{
	margin:0;
	padding:0;
}
/* .container{
	width:90%
	margin:10px auto;
} */

/* CONTACT*/

/* Kontakt-Styling */
.contact-item {
  transition: transform 0.2s;
}
.contact-item:hover {
  transform: translateY(-3px);
}
.contact-details a:hover {
  color: #0056b3 !important;
}

        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://sektor-berlin.com/img/hero-bg.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 120px 0;
            margin-bottom: 0px;
        }
        .service-card {
            transition: transform 0.3s;
            margin-bottom: 30px;
            height: 100%;
        }
        .service-card:hover {
            transform: translateY(-10px);
        }
        .artist-highlight {
            background-color: #f8f9fa;
            padding: 50px 0;
        }
        .process-step {
            text-align: center;
            padding: 20px;
        }
        .process-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #0d6efd;
        }

        /* Argumente */

        .benefits-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .benefit-card {
            background: white;
            border-radius: 12px;
            padding: 2rem 1.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .benefit-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .benefit-icon i {
            font-size: 1.5rem;
            color: #0056b3;
            background: rgba(0, 86, 179, 0.1);
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            display: inline-block;
        }

        /* Anpassungen für das volle Carousel */
        .full-width-carousel {
            width: 100%;
            margin-bottom: 50px;
        }
        .full-width-carousel .carousel-inner {
            border-radius: 0;
        }


/* BILDERLEISTE */
.visual-process {
  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}

/* Bildcontainer mit festem Ratio */
.ratio-4x3 {
  aspect-ratio: 4/3;
  overflow: hidden;
}

/* Bilder gleichmäßig zuschneiden */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Kartenstruktur */
.process-card {
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.process-card:hover {
  transform: translateY(-5px);
}

.process-img-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.process-content {
  flex-grow: 1; /* Gleichmäßige Content-Höhe */
}

.phase-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  background: #0056b3;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.process-features {
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
}

.process-features li {
  margin-bottom: 0.5rem;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .process-img-container {
    max-height: 200px;
  }
}





/* myCarousel */
.custom-caption {
  position: absolute; /* Ermöglicht die freie Positionierung */
  top: 60px; /* Abstand von oben, hier kannst du den Wert nach Bedarf anpassen */
  left: 30px; /* Abstand von links */
  transform: translate(0, 0); /* Um sicherzustellen, dass keine zusätzliche Verschiebung durch transform entsteht */
}

.custom-caption-right-up {
  position: absolute; /* Ermöglicht die freie Positionierung */
  top: 60px; /* Abstand von oben */
  right: 30px; /* Abstand vom rechten Rand */
  transform: translate(0, 0); /* Um sicherzustellen, dass keine zusätzliche Verschiebung durch transform entsteht */
}

.portfolio-menu{
	text-align:center;
}
.portfolio-menu ul li{
	display:inline-block;
	margin:0;
	list-style:none;
	padding:10px 15px;
	cursor:pointer;
	-webkit-transition:all 05s ease;
	-moz-transition:all 05s ease;
	-ms-transition:all 05s ease;
	-o-transition:all 05s ease;
	transition:all .5s ease;
}

.portfolio-item{
	/*width:100%;*/
}
.portfolio-item .item{
	/*width:303px;*/
	float:left;
	margin-bottom:10px;
}

.item {
    margin-bottom: 20px;
  }
.item img {
    width: 100%;
    height: auto;
    display: block;
  }
.item_min_width img {
     min-width: 400px; /* Mindestbreite des Bildes */
     width: 100%; /* Bild passt sich der Breite des Containers an */
     height: auto; /* Das Seitenverhältnis bleibt erhalten */
  }
  .item-description {
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
    color: #555;
  }

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .custom-headline {
    background: rgba(255, 255, 255, 0.9); 
    color: rgb(28, 28, 28); /* Dunkelrote Schrift */
    font-weight: bolder;
    font-size:30px;
    padding: 10px 20px; /* Abstand um die Headline herum */
    display: inline-block; /* Nur der Textblock wird eingerahmt */
    border-radius: 5px; /* Optional: Runde Ecken für den weißen Hintergrund */
  }

  .carousel-image {
    width: 100%; /* Bild nimmt die volle Breite des Containers ein */
    /*height: 512px; /* Höhe passend zum Bildverhältnis */
    object-fit: cover; /* Bild wird zugeschnitten, nicht verzerrt */
    object-position: center; /* Bild bleibt zentriert */
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    .custom-headline {
      font-size: 20px; /* Größere Schrift ab 768px Bildschirmbreite */
    }
    /* Für schmalere Bildschirme kannst du die Höhe des Bildes anpassen */
    .carousel-image {
      height: 100px; /* Reduziert die Höhe auf kleineren Bildschirmen */
    }
  }

  @media (min-width: 1200px) {
    .custom-headline {
      font-size: 50px; /* Noch größere Schrift ab 1200px */
    }
  }

  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .bio-divider {
    border-bottom: 1px solid #ddd;
    margin: 10px 0;
    color: #000; /* Textfarbe auf Schwarz setzen */
  }

  .accordion-button {
    background-color: rgba(211, 211, 211, 0.5); /* Leicht grau-transparent */
    color: #000; /* Textfarbe auf Schwarz setzen */
    border: 1px solid #555; /* Anthrazitfarbener Rand */
  }

  .accordion-button:not(.collapsed) {
    background-color: rgba(192, 192, 192, 0.7); /* Etwas dunkler, wenn ausgeklappt */
    color: #000; /* Textfarbe auf Schwarz setzen */
    font-weight: bolder;
}

  .accordion-item {
    border: none; /* Rand um das gesamte Accordion entfernen */
  }

  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  table {
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  th {
    background-color: #f4f4f4;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  .space {
    width: 30px; /* Platz zwischen den Spalten */
  }