h2 {
    color: #ffffff;
}

body {
    padding-top: 56px; /* Adjust based on navbar height */
    background-color: #121212;
}

.navbar-custom {
    background-color: #343a40;
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
    color: #ffffff;
}

.cover-image {
    width: 150px;  /* Increase the width */
    height: 225px; /* Increase the height */
    object-fit: cover;
}

.description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Show only the first 5 lines */
    -webkit-box-orient: vertical;
}

/* Add more margin to the bottom of each column */
.col-lg-4, .col-md-6 {
    margin-bottom: 30px; /* Increase this value to add more space */
}

/* Add horizontal spacing between the columns */
.row > .col-lg-4, .row > .col-md-6 {
    padding-left: 25px;
    padding-right: 15px;
}

/* Beispiel-CSS für die Banner-Vorschau */

/* Hintergrundfarbe für die Navbar anpassen, falls gewünscht */
.navbar-custom {
    background-color: #343a40; /* dunkles Grau */
  }
  
  /* Vorschau-Banner-Container */
  .preview-banner {
    display: flex;
    align-items: center;
    background-color: #f8f9fa; /* Heller Hintergrund */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  /* Bild für die Banner */
  .banner-img {
    width: 300px;
    height: 180px;
    object-fit: cover; /* Passt das Bild an, ohne verzerrt zu wirken */
    border-radius: 4px;
    margin-right: 1rem;
  }
  
  /* Text und Link rechts neben dem Bild */
  .banner-info {
    flex: 1;
    color: white;
  }
  
  /* Optional: kleine Optimierung für den Button-Abstand */
  .banner-info .btn {
    margin-top: 0.5rem;
  }
  
  /* Beispiel-CSS für die Banner-Vorschau */

/* Hintergrundfarbe für die Navbar anpassen, falls gewünscht */
.navbar-custom {
    background-color: #121212; /* dunkles Grau */
  }
  
  /* Vorschau-Banner-Container */
  .preview-banner {
    display: flex;
    align-items: center;
    background-color: #1F2021; 
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 1rem;
    padding: 2rem;
  }
  
  /* Bild für die Banner */
  .banner-img {
    width: 300px;
    height: 140px;
    object-fit: cover; /* Passt das Bild an, ohne verzerrt zu sein */
    border-radius: 4px;
    margin-right: 1rem;
  }
  
  /* Container für Text + Button 
     -> Wir machen ihn position: relative, damit der Button
     am unteren rechten Eck platziert werden kann */
  .banner-info {
    position: relative;
    flex: 1; /* füllt den restlichen Platz, so kann der Button frei positioniert werden */
    padding: 0.5rem 0;
  }
  
  /* Platzierung des Buttons unten rechts. */
  .banner-info .btn {
    position: absolute;
    bottom: 10;
    right: 0;
  }
  
  /* Überschrift + Text: Abstände nach Wunsch anpassen */
  .banner-info h5 {
    margin-bottom: 0.25rem;
  }
  .banner-info p {
    margin-bottom: 2rem; /* sorgt für Freiraum oberhalb des Buttons */
  }
  
  .profile-bio {
    /* Beispiel für ein zentriertes Hintergrundbild, das sich an die Containergröße anpasst */
    background: url("https://4kwallpapers.com/images/wallpapers/iron-man-marvel-superheroes-amoled-pitch-black-minimal-art-2560x1080-6293.png") no-repeat center center;
    background-size: cover;
    color: #fff; /* Falls Schrift gut lesbar sein soll */
    border-radius: 10px; /* Optionale Rundung der Ecken */
  }

  .container {
    color: white;
    
  }

  .card-body {
    background-color: #1F2021;
  }
  
  .jumbotron {
    background-color: #1F2021;
  }