/*!
  * face-and-body v1.0.0
  * Autor: Andreas Hugo
  * Lizenz: MIT
  * Datum: 2025-12-03
  */

/*----------------------*/
/* background:  #fdf5ed */
/*----------------------*/
@import url(https://fonts.googleapis.com/css?family=Sen);

:root {
  /* --bs-font-sans-serif: "Jost", sans-serif; */
  --bs-font-sans-serif: "Sen", sans-serif;
}

body {
  font-size: 10pt;
  width: 100%;
  overflow-x: hidden;
  background-color: #fdf5ed;
}

html {
  height: 100%;
  background-color: #fdf5ed;
}

/* avoids growing of the home page image */
.page-wrapper {
  width: 100%; /* Fluid width */
  max-width: 850px; /* Stops growing after 890px */
  margin-left: auto; /* Centers the wrapper horizontally */
  margin-right: auto;
}

#content-area {
  text-align: left;
}

/* ------------------ */
/* main menu 
/* ------------------ */

/* set background for entire menubar  f2b483 */
.navbar-nav {
  background-color: #f2b483;
  border-radius: 5px;
}

nav ul li a:not(.active-item):hover {
  color: white;
  border-radius: 5px;
}

.nav-link {
  padding: 0 0 0 0;
}

/* dbbf70 */
.nav-link-item.active-item {
  background-color: #f2b483;
  color: white;
  text-decoration: underline;
  border-radius: 5px;
}

/* Change background on hover/focus ffb86a */
.nav-link-item:hover {
  background-color: #f2b483;
  color: white;
  text-decoration: underline;
}

/* ------------------ */
/* dropdown menu 
/* ------------------ */
.dropdown-menu {
  background-color: white;
}

/* top right bottom left */
.dropdown-item {
  padding: 0px 0px 0px 10px;
}

.mobile-image {
  max-width: 100%;
  height: auto;
}

/* ------------------ */
/* price section
/* ------------------ */

.service-pricing-section {
  padding: 10px 10px;
  max-width: 800px;
  /* margin: auto; */ /* Center the list on the screen */
  background-color: #f9d7ba;
}

.category {
  margin-bottom: 10px;
}

.category h2 {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #8a5c39; /* ef8432  */
  border-bottom: 2px solid #f3b483;
  /* f3b483 */
}

.service-item {
  display: flex; /* Place name and price side by side */
  justify-content: space-between; /* Slide the price all the way to the right. */
  padding: 5px 0;
  margin-bottom: 5px; /* Space between different items */
  padding-bottom: 5px; /* Adds space BETWEEN the title and the description */
  border-bottom: 1px dotted darkslategray; /* #f1f1f1; */
}

.service-name {
  flex-grow: 1; /* Takes up most of the space */
}

.service-name-clickable:active,
.service-name-clickable:hover {
  color: white;
}

.service-description {
  display: none; /* This hides the element initially */
  justify-content: space-between;
  margin-top: 10px; /* Adds space ABOVE the description content */
  color: #000404;
  padding: 10px;
  /*background-color: #b46e18; */
  border-top: 1px solid #eee;
  font-size: 0.8em;
}

.service-description.active {
  display: block; /* This makes it visible */
}

.service-price {
  font-weight: bold;
  color: #000; /* Important price, must be visible */
  white-space: nowrap;
}

/* ------------------ */
/* special styling 
/* ------------------ */

/* #f4b383 Textfarbe */
/* #f9d7ba Hintergrund */

h1 {
  font-size: 17pt;
}
h2 {
  font-size: 18pt;
  color: white;
}
h3 {
  font-size: 14pt;
}
h4 {
  font-size: 12pt;
}
h5 {
  font-size: 10pt;
}
h6 {
  font-size: 8pt;
}

.overlapping-div {
  pointer-events: none; /* Mouse clicks pass right through this element */
}

#home-image {
  width: 90%;
  height: auto;
}

@keyframes fadeInEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The animation for the home page image */
.home-hero-image {
  /* forwards - ensures that the image remains visible at the end of the animation */
  /* ease-out - starts fast end stops smooth */
  animation: fadeInEffect 2s ease-in-out forwards;
}

.product-image {
  margin-top: 50px;
  height: 102px;
  width: 150px;
}

.anniversary-image {
  height: 109px;
  margin: 0 auto;
  width: 100px;
}

.imprint-image {
  float: right;
  height: 109px;
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
}

#report {
  background-color: white;
}

/* #f9d7ba, whitesmoke */
.report-image {
  margin: 40px;
  height: auto;
  width: 60%;
  background-color: white;
}

.text-column {
  background-color: #f9d7ba;
  /* This centers the content vertically within the available space of its parent (the column) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
}

.text-block {
  margin-bottom: 30px;
}

.text-column h2 {
  margin-top: 20px;
}

.text-column ul {
  margin: 0 0 0 18px;
  padding: 0;
  list-style-image: url("../images/logo-punkt.png");
}

a {
  font-size: 10pt;
  text-decoration: none;
  color: #000;
}

/* Only define the styles that change when hovered */
a:hover {
  color: white;
}

.span-fix-space {
  display: inline-block;
  width: 10px;
}

.span-highlight {
  color: #f2b483;
}

#footer-area {
  max-width: 600 px;
  /* margin: 0 0 0 0; */
  text-align: center;
  padding: 5px 0 20px 0;
  background-color: #fdf5ed;
  line-height: 20px;
  color: #f2b483;
  text-transform: uppercase;
}

#copyright {
  text-align: right;
}

.list-letters {
  list-style-type: upper-alpha;
}

/* The animation (global defined) */
@keyframes errorFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* The assignment to the error page */
.error-page-404 {
  animation: errorFloat 3s ease-in-out infinite;
  display: inline-block; /* Wichtig: Transform funktioniert am besten auf Block-Elementen */
}