/*
 * Aurevo Website Stylesheet
 *
 * This stylesheet defines the visual language for the Aurevo website.
 * The design is inspired by the minimal and elegant aesthetic of apple.de
 * while incorporating the warm beige and gold tones of the Aurevo brand.
 *
 * Colour variables are defined at the root so that the palette can be
 * tweaked in one place. The layout is responsive – navigation collapses
 * gracefully on smaller screens and the content stacks vertically.
 */

:root {
  --color-background: #f2e7de;
  --color-surface: #ffffff;
  --color-primary: #0a192f;
  --color-accent: #c39a50;
  --color-muted: #706f6f;
  --color-light: #faf7f2;
  --max-width: 1200px;
  /* Gap used in navigation between logo and first link and between menu items.
     Increased slightly to ensure the logo and first link have the same breathing room as the other links. */
  --nav-gap: 1.8rem;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-background);
  color: var(--color-primary);
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover,
a:focus {
  color: var(--color-accent);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.btn {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-surface);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* When hovering over buttons, slightly raise them and add a subtle shadow to make the interaction feel responsive */
.btn:hover,
.btn:focus {
  background-color: #ad823f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

header {
  background-color: var(--color-surface);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/*
 * Navigation
 *
 * The logo and navigation links should sit side by side and be centered within the header.
 * On desktop screens the list of links and the logo are centered; the menu toggle is pushed
 * to the far right via margin-left:auto. Mobile behaviour remains unchanged by the media query.
 */
.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

/* Push the menu toggle to the far right so that the logo and nav items remain centered */
.nav .menu-toggle {
  margin-left: auto;
}

.nav .logo {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  /* Provide space between the logo and the first navigation link equivalent to the gap between nav items */
  margin-right: var(--nav-gap);
}

.logo svg {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  flex-shrink: 0;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav ul li a {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
}

.nav ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width 0.3s;
}

.nav ul li a:hover::after,
.nav ul li a:focus::after {
  width: 100%;
}

.nav .menu-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.hero {
  background-color: var(--color-light);
  padding: 4rem 1rem;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  color: var(--color-muted);
  margin-bottom: 2rem;
}

.services {
  padding: 3rem 0;
  background-color: var(--color-background);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  background-color: var(--color-surface);
  border-radius: 6px;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  /* Allow content and call‑to‑action link to align consistently */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card:hover {
  /* Stronger hover animation: lift the card higher, enlarge more and give a slight rotation */
  transform: translateY(-12px) scale(1.08) rotateZ(-0.6deg);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.service-card p {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.service-card a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-accent);
  margin-top: auto;
  align-self: flex-start;
  /* Give links a subtle underline and change colour on hover instead of darkening */
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

/* Hover effect for service card links – lighten the accent and show underline */
.service-card a:hover,
.service-card a:focus {
  color: #d9b56e;
  border-color: #d9b56e;
}

.cta {
  background-color: var(--color-light);
  padding: 3rem 1rem;
  text-align: center;
}

.cta h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta p {
  font-size: 1.1rem;
  color: var(--color-muted);
  margin-bottom: 2rem;
}

footer {
  background-color: var(--color-surface);
  padding: 2rem 0 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.8rem;
  color: var(--color-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-grid h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.footer-grid ul {
  list-style: none;
}

.footer-grid li {
  margin-bottom: 0.4rem;
}

.footer-grid li a {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.footer-grid li a:hover,
.footer-grid li a:focus {
  color: var(--color-primary);
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 1rem;
  font-size: 0.75rem;
}

/* Display the tagline on its own line beneath the motto */
.footer-bottom .tagline {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-muted);
  font-size: 0.75rem;
}

/* Social media icons in footer */
.social-links {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-links a svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
  transition: fill 0.2s;
}

.social-links a:hover svg,
.social-links a:focus svg {
  fill: var(--color-accent);
}

/* Page reveal overlay removed: definitions for #page-reveal and animations reveal-slide, roll-across removed. */

/*
 * Cookie banner styles
 * The banner appears as a centred card near the bottom of the page with a light
 * background and a subtle border. The `.show` class controls its visibility.
 */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  max-width: 480px;
  z-index: 4000;
  font-size: 0.9rem;
}

.cookie-banner span {
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.cookie-banner button {
  align-self: flex-end;
  background-color: var(--color-accent);
  color: var(--color-surface);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.2s, transform 0.2s;
}

.cookie-banner button:hover,
.cookie-banner button:focus {
  background-color: #ad823f;
  transform: translateY(-2px);
}

.cookie-banner.show {
  display: flex;
}

@media (max-width: 768px) {
  .nav ul {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: var(--color-surface);
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-200%);
    transition: transform 0.3s ease-in-out;
  }

  .nav ul.active {
    transform: translateY(0);
  }

  .nav .menu-toggle {
    display: block;
  }
}

/* Contact form styling */
.contact-section {
  padding: 3rem 1rem;
  background-color: var(--color-background);
  text-align: center;
}

.contact-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-section p {
  font-size: 1.1rem;
  color: var(--color-muted);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  background-color: var(--color-surface);
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  max-width: 600px;
  margin: 0 auto;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
}

.contact-form textarea {
  height: 150px;
  resize: vertical;
}

.contact-form button {
  background-color: var(--color-accent);
  color: var(--color-surface);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s;
}

.contact-form button:hover,
.contact-form button:focus {
  background-color: #ad823f;
}

/* Feature grid for detailed service descriptions */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature-card {
  background-color: var(--color-surface);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-card:hover {
  /* Intensified hover effect for feature cards */
  transform: translateY(-12px) scale(1.08) rotateZ(-0.4deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.feature-card p,
.feature-card ul {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* Feature card lists
   Replace default bullets with elegant check icons and better spacing. */
.feature-card ul {
  list-style: none;
  padding-left: 0;
}

.feature-card ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.feature-card ul li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--color-accent);
  font-size: 1rem;
}

/* Fade-in animation for subtle appearance */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease both;
}

/* Elements marked with fade-in-on-scroll will animate into view when they enter the viewport.
   Initially invisible and translated down slightly; on becoming visible the class 'visible' is added via JS. */
/* Scroll animation: elements start invisible and lower on the page, then slide up and fade in
   when they enter the viewport. Increased distance and duration for a more noticeable effect. */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide-in from left animation for hero and headings. Similar to fade-in-on-scroll but horizontal. */
.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hover zoom effect for gallery images */
.gallery-section .gallery-grid .gallery-item img,
.gallery-section .gallery-item img {
  transition: transform 0.3s ease;
}
.gallery-section .gallery-grid .gallery-item:hover img,
.gallery-section .gallery-item:hover img {
  transform: scale(1.05);
}

/* Informational popup styling */
.info-popup {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: var(--color-surface);
  color: var(--color-primary);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 1.5rem;
  max-width: 300px;
  z-index: 2000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: none;
}
.info-popup.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.info-popup h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.info-popup p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.info-popup .btn {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}
.info-popup .close-popup {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--color-muted);
}
.info-popup .close-popup:hover,
.info-popup .close-popup:focus {
  color: var(--color-accent);
}

/* Logo image styling */
.logo img {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Styles for select input and checkbox in contact form */
.contact-form select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  background-color: var(--color-surface);
}

/* Layout for the privacy checkbox.  Wrap the checkbox and text inside a single label
   so the text stays next to the checkbox and wraps gracefully on small screens. */
.contact-form .privacy-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  flex-wrap: wrap;
}
.contact-form .privacy-checkbox input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.contact-form .privacy-checkbox a {
  color: var(--color-accent);
  text-decoration: underline;
}
.contact-form .privacy-checkbox a:hover,
.contact-form .privacy-checkbox a:focus {
  color: #ad823f;
}

/* Standardgröße (für große Bildschirme) */
.hero h1 {
  font-size: 3rem; /* Kannst du nach Geschmack ändern */
  line-height: 1.2;
  word-wrap: break-word; /* verhindert Überlauf */
  text-align: center; /* optional, für sauberen Look */
}

/* Tablets */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }
}

/* Smartphones */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.6rem;
  }
}