/*
Theme Name: Avraven-Bootstrap-Theme.
Theme URI: www.avraven.de
Description: Its the bootstrap.min.css renamed :P.
Version: 1.0
Author: Lovis07
Author URI: www.avraven.de
*/

p, h1, h2, h3, h4, h5, h6 {
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -moz-hyphens: auto !important;
  -ms-hyphens: auto !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  -webkit-hyphenate-limit-before: 3 !important;
  -webkit-hyphenate-limit-after: 3 !important;
  -moz-hyphenate-limit-before: 3 !important;
  -moz-hyphenate-limit-after: 3 !important;
  -ms-hyphenate-limit-before: 3 !important;
  -ms-hyphenate-limit-after: 3 !important;
}

/*p {
    text-align: justify;
} Blocksatz */

h1, h2, h3, h4, h5, h6 {
  color: white !important;
}

.img {
  border-radius: 5%;
} 

a:link {
    color: #ffc107;
  }
  
  /* visited link */
  a:visited {
    color: #ffc107;
  }
  
  /* mouse over link */
  a:hover {
    color: #ffc107;
  }
  
  /* selected link */
  a:active {
    color: #ffc107;
  }

  @media (max-width: 768px) {
    .row {
      display: flex;
      flex-direction: column-reverse;
  
    }
  }

  .layer-opacity-box {
    z-index: 100;
    min-height: 100vh;
  }

  .layer2 {
    z-index: 200;
  }
  
  .layer3 {
    z-index: 300; /* Die box2 wird über der box1 angezeigt. */
  }


a {
    text-decoration: none;
}

body {
    background-color: #2D2924; /*linear-gradient(60deg,#ff5722,#ee4758 50%);*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	display: flex;
	flex-direction: column;
}

html, body {width: auto!important; overflow-x: hidden!important} 

.custom-list-group {
  border: none;
}

ul {
    list-style-type: none;
	padding-top: 0.5em;
}

li {
	padding-top: 0.25em;
	padding-bottom: 0.5em;
}

.page-item.active .page-link {
  background-color: #ff5722; /* Ihre gewünschte Farbe */
  border-color: #ff5722; /* Ihre gewünschte Farbe */
}

/*@media (max-width: 767.98px) {
  .mx-w-100 {
    max-width: 100% !important;
  }
}*/

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}

/*.card {
    cursor: grab;
}
.card:active {
    cursor: grabbing; 
}*/

.col-full-height {
  min-height: 100vh; !important/* Setzt die Mindesthöhe der Spalte auf die volle Höhe des Viewports */
}

body {
    padding-bottom: 100px; /* Stellen Sie sicher, dass dies mindestens so groß ist wie die Höhe des Footers. */
}

.featured-image-box {
  position: absolute;
  top: 30%; /* Adjust to move the image up or down */
  left: 90%; /* Adjust to move the image left or right */
  transform: translate(0, -50%); /* Center the image */
  z-index: 10; /* Keep it above other content */
  width: 20vh; /* Width of the circular mask */
  height: 20vh; /* Height of the circular mask, same as width to form a circle */
  overflow: hidden; /* Hide the parts of the image that overflow the mask */
  border-radius: 50%; /* Makes the mask round */
}

.featured-image-box img {
  width: 100%; /* Fill the width of the container */
  height: auto; /* Maintain the original aspect ratio */
  min-height: 100%; /* Ensure the image covers the height */
  position: absolute; /* Absolutely position the image */
  top: 50%; /* Align the image to the center of the container vertically */
  left: 50%; /* Align the image to the center of the container horizontally */
  transform: translate(-50%, -50%); /* Center the image */
  object-fit: cover; /* Cover the container area, may cut off some parts of the image */
}

/* Hide circular featured image on medium screens and smaller */
@media (max-width: 767.98px) {
  .featured-image-box {
    display: none;
  }
}

/* Show the featured image as a regular card image on top on medium screens and smaller */
@media (max-width: 767.98px) {
  .card-img-top {
    display: block; /* or 'inline-block', as needed */
  }
}

/* Intensifying small shadow */
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4)!important; /* Increased opacity */
}

/* Intensifying default shadow */
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5)!important; /* Increased opacity */
}

/* Intensifying large shadow */
.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.65)!important; /* Increased opacity */
}

/* CSS, das nur auf der dsk_schatzinsel-Seite angewendet wird */
/* Grundlegende Stile für .card */
.dsk-schatzinsel-page .card {
    transition: transform 0.3s ease-in-out; /* Animiert die Transformation */
    z-index: 10; /* Stellt sicher, dass die Karte über anderen Inhalten schwebt */
}

/* Stile für den Hover-Zustand */
.dsk-schatzinsel-page .card:hover {
    transform: scale(1.05); /* Vergrößert die Karte um 5% beim Hovern */
}



@media (max-width: 767px) {
	.dsk-schatzinsel-page .card:hover {
	}
}



.post-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* Verdunkelter Hintergrund */
}

.post-modal-content {
    margin: 10% auto;
    width: 60%; /* Anpassen nach Bedarf */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 3); /* Schatten hinzufügen */
}

/* Modals nur auf größeren Bildschirmen anzeigen */
@media (min-width: 768px) {
    .post-modal {
        display: block; /* oder was auch immer Ihr Standard-Display-Stil ist */
    }
}

.close {
    float: right;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-backdrop.show {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .5;
}


/* Verwenden Sie */
body.light-mode .card {
    background-color: beige;
    color: darkslategray;
}


/* Optional: andere Stile für Light Mode */
.light-mode {
    /* Weitere Stiländerungen für Light Mode */
}