/* STYLESHEET FOR THOMASGLAUSER.CH */
/* ******************************* */

body {
  font-family: 'Roboto', sans-serif; /* Default font for the body */
}
h3, h4, h5 {
  font-family: 'Roboto Condensed', sans-serif; /* Use Roboto Condensed for headings */
  font-weight: 700; /* Optional: Bold weight for headings */
}
p {
  font-family: 'Roboto', sans-serif; /* Use Roboto for paragraphs */
  font-size: 25px;
  font-weight: 400; /* Regular weight for paragraphs */
  color: #666666; /* Middle gray color */
}

.profilbild {
    border-radius: 25px;
}

/* CUSTOM NAVBAR */
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Allows wrapping for smaller screens */
  max-width: 800px; /* Limit total width */
  margin: 0 auto; /* Center the navbar */
  padding-left: 20px; /* Add some padding */
  padding-right: 20px; /* Add some padding */
  padding-top: 5px; /* Add some padding */
  padding-bottom: 5px; /* Add some padding */
  background-color: #f8f9fa; /* Navbar background color */
  z-index: 1000; /* Ensure the navbar stays above other content */
  position: sticky; /* Make it sticky */
  top: 0; /* Stick to the top of the viewport */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow for better visibility */
}
.navbar-items {
  display: flex;
  gap: 25px; /* Add spacing between items */
  flex-wrap: wrap; /* Allow items to wrap into two lines if needed */
  text-decoration: none;
  padding-top: 15px;
  padding-left: 0px;
  padding-bottom: 0px;
  list-style: none;
  font-family: 'Roboto Condensed', sans-serif; /* Use Roboto for paragraphs */
  font-size: 16px;
  font-weight: 400; /* Regular weight for paragraphs */
}
.navbar-items li {
  padding-top: 0px;
}
.navbar-logo img {
  max-height: 50px; /* Adjust logo size */
  padding-left: 0px;
}
.navbar-items a {
  color: #555; /* Dark gray color for links */
  text-decoration: none; /* Remove underlining */
}

.navbar-items a:hover {
  color: #000; /* Black color when hovered */
  text-decoration: none; /* Keep underline removed on hover */
}


/* GENERAL LINKS */
a {
  text-decoration: none; /* Remove underline */
  color: #6c757d; /* Dark gray */
  transition: color 0.3s ease; /* Smooth transition effect */
}
a:hover {
  color: #000; /* Turn black on hover */
  text-decoration: none; /* Ensure no underline on hover */
}

.content-container {
  max-width: 800px; /* Limit width */
  margin: 0 auto; /* Center the content */
  padding-left: 20px; /* Optional: Add some padding */
  padding-right: 20px; /* Optional: Add some padding */
}
.content-container img {
  width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 30px; /* Add spacing between images */
}
.content-container p {
  font-size: 16px; /* Optional: Adjust paragraph text size */
  line-height: 1.6; /* Optional: Improve readability */
}

/* BUTTON CONTAINER */
.b-con {
  display: flex; /* Use flexbox */
  justify-content: space-between; /* Space between H1 and link */
  align-items: center; /* Vertically align items */	
  max-width: 800px; /* Limit width */
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 20px auto; /* Center container horizontally with auto */
}
.b-con a {
  font-family: 'Roboto Condensed', sans-serif; /* Match the font */
  font-size: 16px; /* Smaller font size for the link */
  color: #666666; /* Middle gray for consistency */
  text-decoration: none; /* Remove underline */
  padding: 5px 10px; /* Add some padding */
  border: 1px solid #666666; /* Add a border */
  border-radius: 5px; /* Optional: rounded corners */
  transition: all 0.3s ease; /* Smooth hover effect */
}
.b-con a:hover {
  color: #ffffff; /* White text on hover */
  background-color: #666666; /* Gray background on hover */
}


/* H1 und H2 HEADER */
.h1-container {
  display: flex; /* Use flexbox */
  justify-content: space-between; /* Space between H1 and link */
  align-items: center; /* Vertically align items */
  max-width: 800px; /* Limit width */
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 20px auto; /* Center container horizontally with auto */
}
/* H1 styling */
.h1-container h1 {
  font-family: 'Roboto Condensed', sans-serif; /* Use Roboto Condensed */
  font-size: 40px; /* Font size */
  font-weight: 400;
  color: #666666; /* Middle gray color */
  margin: 0; /* Remove default margins */
}

.h1-container a {
  font-family: 'Roboto Condensed', sans-serif; /* Match the font */
  font-size: 16px; /* Smaller font size for the link */
  color: #666666; /* Middle gray for consistency */
  text-decoration: none; /* Remove underline */
  padding: 5px 10px; /* Add some padding */
  border: 1px solid #666666; /* Add a border */
  border-radius: 5px; /* Optional: rounded corners */
  transition: all 0.3s ease; /* Smooth hover effect */
}
.h1-container a:hover {
  color: #ffffff; /* White text on hover */
  background-color: #666666; /* Gray background on hover */
}
h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 30px; /* Slightly smaller than H1 */
  font-weight: 200;
  color: #666666; /* Same middle-gray color */
  margin: 16px 0; /* Smaller margin than H1 */
}
.TitelH3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  color: #666666;/* Same middle-gray color */

  margin-top: 10px ;
margin-bottom: -5px;
}

/* PREISE */
.container-prices {
  display: flex;
  flex-wrap: wrap; /* Makes the layout responsive */
  max-width: 800px; /* Limit the width of the container */
  padding: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 30px; /* Slightly smaller than H1 */
  font-weight: 100;
  margin: 0 auto; /* Center the container */
  gap: 20px; /* Add spacing between columns */
}

.prices-text {
  flex: 2; /* Takes 2/3 of the space */
  font-size: 24px; /* Slightly smaller than H1 */
  font-weight: 100;
  color: #333; /* Dark gray text */
}

.prices2 {
  flex: 1; /* Takes 1/3 of the space */
  text-align: center; /* Center-align the image */
}

.prices2 img {
  max-width: 100%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow */
}


.prices-image {
  flex: 1; /* Takes 1/3 of the space */
  text-align: center; /* Center-align the image */
}

.prices-image img {
  max-width: 100%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 0px; /* Optional: Add rounded corners */
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow */
}
.prices-image60 img {
  max-width: 100%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 0px; /* Optional: Add rounded corners */
}

@media (max-width: 768px) {
  .container-prices {
    flex-direction: column; /* Stack columns vertically on smaller screens */
  }

  .prices-image {
    margin-top: 20px; /* Add spacing between text and image */
  }
}


/* FOOTER */
.footer {
  background-color: #333333; /* Dark gray background */
  color: #cccccc; /* Light gray text */
  padding: 20px 10px; /* Add padding for spacing */
  display: flex; /* Use flexbox */
  justify-content: center; /* Center the content horizontally */
}
.footer .content {
  max-width: 800px; /* Limit content width */
  width: 100%; /* Ensure responsiveness */
  text-align: center; /* Center the text inside the content area */
}
.footer a {
  color: #cccccc; /* Light gray for links */
  text-decoration: none; /* No underline */
  transition: color 0.3s ease; /* Smooth hover effect */
}
.footer a:hover {
  color: #ffffff; /* Turn white on hover */
}
/* Footer text styling */
.footer p {
  font-size: 14px; /* Adjust text size */
  margin: 8px 0; /* Add spacing between elements */
}


.gallery {
  display: grid;
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Das lange Bild über zwei Reihen */
.gallery img.tall {
  grid-row: span 2;
}

/* Bild über zwei Spalten */
.gallery img.wide {
  grid-column: span 2;
}

@media (max-width: 800px) {
  .gallery {

  }

  .gallery img.wide,
  .gallery img.tall {
    grid-column: auto;
    grid-row: auto;
  }
}