@import url(/font/bootstrap-icons.min.css);
@import url(outfitthin.css);
@import url(form-elements.css);

body {
    font-family: "Outfit", sans-serif !important;
    color: #faf3f1 !important;
    background-color: #151618 !important;
    font-weight: 200 !important;
    margin: 0;
    min-height: 100vh;
    justify-content: center;
    gap: 20px;
    font-weight: 100 !important;
}

*:hover {
   -webkit-transition: all 1s ease;
   transition: all 1s ease;
}

section {
   float: left;
   width: 100%;
   /* fallback for old browsers */
   padding: 30px 0;
}

h1 {
   float: left;
   width: 100%;
   color: #232323;
   margin-bottom: 30px;
   font-size: 14px;
}

h1 span {
   font-family: "Outfit", sans-serif;
   display: block;
   font-size: 45px;
   text-transform: none;
   margin-bottom: 20px;
   margin-top: 30px;
   font-weight: 700;
}

h1 a {
   color: #131313;
   font-weight: bold;
}

/*Profile card 2*/
.profile-card-2 .card-img-block {
   float: left;
   width: 100%;
   height: 150px;
   overflow: hidden;
}

.card {
    border: 1px solid #ed6e2b !important;
    border-radius: 10px !important;
    background-color: #151618 !important; 
}

.profile-card-2 .card-body {
   position: relative;
   background-color: none;
   color:#faf3f1;
}

.profile-card-2 h5 {
   font-weight: 600;
   color: #ed6e2b;
}

.profile-card-2 .card-text {
   font-weight: 300;
   font-size: 16px;
}

.profile-card-2 .icon-block {
   float: left;
   width: 100%;
}

.profile-card-2 a {
   text-decoration: none;
}

.profile-card-2 i {
   display: inline-block;
   font-size: 16px;
   color: #ed6e2b;
   width: 30px;
   height: 30px;
   line-height: 30px;
   margin: 0 5px;
}

.profile-card-2 .icon-block i:hover {
   background-color: none;
   color: #fff;
}

.box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;;
  }

.date,
.city {
    background-color: #ed6e2b;
    padding: 5px 10px;
    border-radius: 4px;
}

.profile-card-2 h6 {
    font-size: 12px;
    font-weight: 500;
    color: #151618;    
}

.profile-card-2 p {
    font-weight: 100 !important;
}

.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: url("../pictures/cover_notion.svg");
  
    /* Set a specific height */
    height: 50%;
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-top: #ed6e2b solid 1px;
    border-bottom: #ed6e2b solid 1px;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .bd-mode-toggle {
    z-index: 1500;
  }

  .bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
  }

  .footer i {
    color: #ed6e2b !important;
  }

  .adress {
    float: left;
}

  .icon_adress {
    float: left;
  }

  .corr-p {
    padding-top: 2px;
  }

  a {
    text-decoration: none !important;
    color:#ed6e2b !important;
    font-weight: 500;
  }

  a:hover {
    text-decoration: none !important;
    color:#faf3f1 !important;
    font-weight: 500;
  }

  .select__BTN {
    background-color: #ed6e2b;
    color: #151618;
    border: none;
    border-radius: 4px;
    padding: 5px 20px !important;
    font-size: 16px;
    cursor: pointer;
    margin-right: 1em;
  }

  .social-placeholder {
    display: inline-block !important;
    width: 24px !important;  /* Breite eines Icons */
    height: 24px !important; /* Höhe eines Icons */
    margin: 0 5px !important; /* Abstand zwischen den Icons */
}

.btn-primary {
  background-color: #ed6e2b !important;
  color: #151618 !important;
  font-weight: 500 !important;
}

/* Fixierte Höhe für Beschreibung */
.description {
  line-height: 1.4em;
  max-height: 2.8em; /* 2 Zeilen à 1.4em */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em; /* sorgt für gleiche Mindesthöhe */
}

/* Kacheln sollen sich auf gleiche Höhe strecken */
.row.align-items-stretch {
  display: flex;
  flex-wrap: wrap;
}

.col-md-4 {
  display: flex;
  flex-direction: column;
}

.event-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.select__BTN {
  margin-bottom: 0.5rem;
}

.event-card {
  margin-bottom: 1rem; /* zusätzlicher Abstand zur nächsten Zeile */
}

.footer-icon {
  color: #ed6e2b;
}

#backToTop {
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 24px;
  border-radius: 6px;
  line-height: 50px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#backToTop.show {
  opacity: 1;
}

/* Promo-Button: Orange BG, Text schwarz -> Hover weiß */
#promo a.promo-btn,
section#promo a.promo-btn,
a.promo-btn {
  display: inline-block;
  padding: 10px 18px;
  background: #ed6e2b !important;
  background-color: #ed6e2b !important; /* falls irgendwo "background-color" gezielt überschreibt */
  color: #151618 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

#promo a.promo-btn:hover,
#promo a.promo-btn:focus,
#promo a.promo-btn:active {
  color: #faf3f1 !important;
  text-decoration: none !important;
}

/* Spenden-Button bearsXsocial */
a.donate-btn {
    background-color: #ed6e2b;
    color: #151618 !important;
    border: 1px solid #ed6e2b !important;
    border-radius: 4px;
    padding: 5px 20px !important;
    font-size: 16px;
    cursor: pointer;
    align-content: center;
    transition: all 0.2s ease;
    text-align: center !important;
}

a.donate-btn:hover,
a.donate-btn:focus {
  background: #151618;               /* invertiert für Hover */
  color: #faf3f1 !important;         /* heller Text */
  text-decoration: none !important;
  transform: translateY(-1px);
  border: 1px solid #ed6e2b !important;
}


/* Icon-Zeile als Flex-Row */
.icon-block {
    display: flex;
    align-items: center;
    /* kein gap, damit rechts nichts „mitwandert“ */
}

/* Social-Icons links */
.icon-block a:not(.event-ics-link) {
    color: #ed6e2b;
    text-decoration: none;
    font-size: 1.2rem;
    margin-right: 0.4rem; /* Abstand nur zwischen den Social-Icons */
}

.icon-block a:not(.event-ics-link):hover,
.icon-block a:not(.event-ics-link):focus {
    color: #ffffff;
}

/* Platzhalter, damit das Raster links stimmt */
.social-placeholder {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.4rem;
}

/* Kalender-Icon rechts, bündig zum Rand der Card-Contents */
.event-ics-link {
    margin-left: auto;    /* schiebt es ganz nach rechts */
    margin-right: 0;      /* sicherstellen, dass nichts überbleibt */
    font-size: 1.2rem;
    color: #ed6e2b;
    text-decoration: none;
    line-height: 1;
}

.event-ics-link:hover,
.event-ics-link:focus {
    color: #ffffff;
}


/* Icon-Block in der Karte: float entfernen, Flex übernehmen */
.profile-card-2 .icon-block {
    float: none;            /* float von oben neutralisieren */
    width: 100%;
}

/* Margin der Icons im Icon-Block zurücksetzen */
.profile-card-2 .icon-block i {
    margin: 0;              /* kein extra Abstand links/rechts */
    width: 24px;
    height: 24px;
    line-height: 24px;
}

/* Speziell beim Kalender-Icon sicherstellen, dass es bündig sitzt */
.event-ics-link i {
    margin: 0;
}