/*
 * Style sheet for the one‑page website of the Kfz‑Sachverständigenbüro Sabah.
 *
 * This design uses a modern colour palette of dark blues, soft greys and a subtle accent colour.
 * The layout is responsive: navigation collapses into a hamburger menu on small screens,
 * sections have generous spacing, and cards arrange themselves in a grid.
 */

/* CSS variables for colours and spacing */
:root {
  /*
   * Colour variables are tuned to evoke modern automotive professionalism with
   * hints of Dekra‑green and TÜV‑blue. The dark base anchors the design while
   * accents provide visual interest and clear interactive states.
   */
  --primary: #0a1f44;      /* deep navy background */
  --primary-dark: #05132b; /* darker shade for gradients */
  --secondary: #0e3470;    /* reserved for secondary elements */
  --accent-blue: #0076b6;  /* TÜV‑inspired blue for highlights */
  --accent-green: #008f56; /* Dekra‑inspired green for calls to action */
  --accent: var(--accent-green); /* default accent colour for buttons */
  --light-bg: #ffffff;     /* light section background: pure white for clear contrast */
  --text-dark: #0a2140;    /* dark text */
  --text-light: #ffffff;   /* light text */
  --border-radius: 8px;
  --max-width: 1200px;
  /* Increase navigation bar height to accommodate larger logo */
  /* Increase navigation bar height slightly to accommodate a larger logo */
  /* Increase the navigation bar further to accommodate a taller logo */
  /* Increase navigation bar height again to allow the logo to be displayed even larger */
  /* Final increase of navigation bar height to accommodate a very large logo */
  /* Restore the navigation bar height so a larger logo can be displayed
     clearly without crowding. A taller bar also aligns with the user's
     request for better legibility of the main mark. */
  /* Increase the navigation bar height a bit more so that the larger logo has room
     to breathe. A taller bar also improves legibility and gives the top section
     a more balanced proportion. */
  /* Reduce the navigation bar height back to a more balanced proportion. A
     110 px bar keeps the header compact while still accommodating a large
     logo. */
  /* Keep the navigation bar compact. A 110 px height is sufficient to
     accommodate the larger logo without making the bar feel oversized. */
  /* Reduce the navigation bar height slightly. A 100 px bar keeps the
     header compact while still accommodating the cropped logo. */
  --nav-height: 100px;
  --topbar-height: 40px; /* height of the contact bar above the nav */
}

/* Reset some default styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--text-dark);
  background-color: var(--light-bg);
  line-height: 1.6;
}

/*
 * Top contact bar
 * A slim bar above the navigation to display phone and email placeholders.
 */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--topbar-height);
  /* Slightly darker shade than the navigation for contrast */
  background-color: #03192f;
  color: #cfd7e4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  z-index: 1001;
}

.topbar .contact-line {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  align-items: center;
}

/* Container helper class */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Navigation bar */
.navbar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background-color: var(--primary);
  color: var(--text-light);
  z-index: 1000;
  display: flex;
  align-items: center;
  /* Remove the drop shadow to avoid a visible light line beneath the navigation */
  box-shadow: none;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Header logo inside the navigation bar */
/* Increase the header logo size for better visibility */
.header-logo {
  /* Adjust the logo dimensions and add a subtle white backing so it remains
     sichtbar against the dark navigation bar. The padding and rounded
     corners help to separate the mark from the background. */
  /* Set the logo height proportionally to the 110 px navigation bar. A 100 px
     mark fills most of the bar while allowing comfortable padding above and
     below. */
  /* Scale the logo to fill the navigation bar without forcing the bar
     itself to grow taller. A 90 px height leaves comfortable padding
     within a 110 px bar and allows the mark to appear larger now that
     the white margins in the image have been trimmed. */
  /* Scale the logo down slightly to reduce its visual dominance while
     still keeping it legible. A 70 px height leaves ample vertical
     padding within a 100 px bar and centres the mark vertically. */
  /* Reduce the logo size slightly so it appears less dominant on the navigation bar */
  height: 60px;
  /* Position the logo slightly higher in the navigation bar by removing the
     auto margins. A small top margin lifts the logo closer to the top
     of the bar. */
  display: block;
  margin-top: 0.25rem;
  margin-bottom: auto;
  width: auto;
  display: block;
  /* Remove the white backing so the mark itself is more prominent. The
     transparent PNG already contains adequate white space. Remove padding
     and background to let the logo fill its container. */
  border-radius: 0;
  /* Add a light drop shadow so the logo stands out against the dark navigation
     bar without needing a solid white backing. */
  /* Increase the drop shadow brightness and spread so that the logo stands
     out against the dark navigation bar. */
  /* Remove the heavy drop shadow now that the logo is rendered in a single
     green tone on a dark background. The transparent PNG ensures
     sufficient contrast on its own. */
  filter: none;
}

/* Screen reader only text, hidden visually but available to assistive technologies */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-light);
  text-decoration: none;
}

/* Nav links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links li a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem;
  transition: color 0.2s;
}

/* Active navigation state */
.nav-links li a.active {
  color: var(--accent-blue);
  border-bottom: none;
  border-top: 3px solid var(--accent-blue);
}

.nav-links li a:hover {
  /* on hover, adopt the green accent for subtle feedback */
  color: var(--accent);
}

/* Hamburger menu */
.menu-toggle {
  display: none;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}

.hamburger span {
  width: 24px;
  height: 3px;
  background-color: var(--text-light);
  transition: all 0.3s;
}

/* Hero section */
/*
 * The hero uses a realistic SUV driving through a mountainous landscape. A semi‑transparent
 * overlay darkens the photo just enough to ensure that white text remains legible while
 * still allowing the car and mountains to be clearly visible. If you wish to replace
 * the background image, swap out the URL below with another file in the `img` folder.
 */
.hero {
  /* Lighten the overlay a little further and reposition the image so that
     sowohl die Bergspitzen als auch der Straßenverlauf sichtbar bleiben.
     Ein grösserer Sichtbereich wird erreicht, indem die Mindesthöhe des
     Heldenbereichs reduziert wird. */
  background-image:
    linear-gradient(rgba(5,19,43,0.1), rgba(10,31,68,0.1)),
    url('img/hero-car.jpg');
  /* Keep the background covering the container but shift the focal point
     slightly downward to reveal mehr vom Himmel und der Strasse. */
  background-size: cover;
  /* Shift the focal point slightly weiter nach unten, damit mehr von der
     Fahrzeugfront und der Straße sichtbar ist, während auch die
     Bergspitzen erhalten bleiben. */
  /* Move the focal point slightly upward to hide das Emblem auf der Fahrzeugfront
     und gleichzeitig mehr von den Bergspitzen zu zeigen. Ein Versatz von
     40 % sorgt für ein ausgewogenes Verhältnis zwischen Fahrzeug und
     Panorama. */
  background-position: center 40%;
  color: var(--text-light);
  padding: 6rem 0;
  /* offset for fixed navigation and top bar */
  padding-top: calc(6rem + var(--nav-height) + var(--topbar-height));
  /* Reduce the height of the hero section to expose more of the background
     image without changing the navigation offset. */
  /* Further increase the minimum height of the hero section so that both the
     weisse Pickup und die Bergspitzen sichtbar werden. Durch 90 % Höhe
     gewinnt der Hintergrund deutlich mehr Vertikalfläche und offenbart
     gleichzeitig den oberen und unteren Bildbereich. */
  /* Increase the height slightly to show mehr Fahrzeug (bis zur unteren
     Heckscheibenkante) und zugleich mehr Bergspitze. 90 % der
     Viewport‑Höhe bieten genug Fläche für beide. */
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
}

/* Hero benefit icons row */
.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.hero-benefit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  color: var(--text-light);
  backdrop-filter: blur(2px);
}

.hero-icon {
  font-size: 1.2rem;
}

.hero-label {
  font-size: 0.85rem;
}

/* Call-out list inside hero */
.cta-list {
  list-style: none;
  margin-top: 0.75rem;
  padding-left: 0;
}

.cta-list li {
  font-size: 0.8rem;
  color: #dce7f2;
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}

.cta-list li::before {
  content: '✔';
  margin-right: 0.5rem;
  color: var(--accent);
}

/* Hero inner container splits content into two columns */
.hero-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  gap: 2rem;
}

/* Add extra padding at the top of the hero section so the heading has
   sufficient clearance below the navigation bar. Without this, the text
   appears too close to the top of the viewport. */
#hero.section {
  /* Increase the top padding further to compensate for the taller navigation bar.
     This ensures the hero heading sits comfortably below the fixed header. */
  /* Adjust the hero top padding to align with the reduced navigation bar.
     A 7rem offset provides comfortable space below the fixed header. */
  /* Use slightly less offset now that the hero image is zoomed out and the
     navigation bar height is modest. 6rem sorgt für einen angenehmen Abstand
     zwischen Überschrift und Navigationsleiste. */
  /* Increase the top padding even further so the Überschrift deutlich
     weiter unterhalb der Navigationsleiste steht. Dadurch wirkt der
     Abstand harmonischer, wenn der Heldenbereich größer wird. */
  padding-top: 10rem;
}

.hero-left h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.75rem;
  margin-bottom: 1rem;
}

.hero-left p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  max-width: 550px;
}

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Silhouette car overlay in the hero section */
.hero-car {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  max-width: 480px;
  bottom: -1rem;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
}

/* Call‑to‑action box on the right side of the hero */
.cta-box {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  max-width: 320px;
  width: 100%;
}

.phone-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.cta-text strong {
  font-size: 1.2rem;
  color: var(--text-light);
}

.cta-text small {
  font-size: 0.85rem;
  color: #dce7f2;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s, transform 0.2s;
}

.btn-primary {
  background-color: var(--accent);
  color: var(--text-light);
}

.btn-primary:hover {
  /* Use a slight darkening on hover via brightness filter */
  filter: brightness(0.9);
  transform: translateY(-2px);
}

/* Sections */
.section {
  padding: 4rem 0;
}

.section-light {
  background-color: var(--light-bg);
}

/* Section headings */
section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--primary);
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background-color: #ffffff;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

/* Icons displayed at the top of service cards */
.card-icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--accent-blue);
  display: inline-block;
}

.card p {
  font-size: 0.95rem;
  color: var(--text-dark);
}

/* Feature lists inside service cards */
.card-features {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
}
.card-features li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-dark);
}
.card-features li::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-green);
}

/* Highlights list */
.highlights {
  list-style: none;
  margin-top: 1.5rem;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.highlights li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.4;
}

.highlights li::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
}

/* About list replacing long paragraphs with icons */
.about-list {
  list-style: none;
  /* Increase spacing above the about list so the paragraph has more breathing room */
  /* Increase spacing above the about list so the paragraph has more breathing room */
  margin-top: 2.5rem;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  font-size: 0.95rem;
}

.about-list li {
  background-color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.about-icon {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent);
}

/* Process list */
.process-list {
  list-style: none;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Horizontal process steps
 * The Ablauf section displays the four Schritte (Kontakt, Begutachtung, Gutachten, Übergabe)
 * in a horizontal grid. Each step card has its own icon, heading and description.
 */
.process-horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.process-step {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.process-icon {
  font-size: 2rem;
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--accent-blue);
}
.process-step h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.process-step p {
  font-size: 0.9rem;
  color: var(--text-dark);
  line-height: 1.4;
}

.process-list li {
  background-color: #ffffff;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: relative;
}

.process-list li strong {
  color: var(--primary);
}

/* Smaller cards (used in target groups) */
.small-cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.small-cards .card {
  font-size: 0.9rem;
  font-weight: 400;
}

/* FAQ details */
.faq details {
  background-color: #ffffff;
  border-radius: var(--border-radius);
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  /* Remove bottom margin – spacing handled by grid gap */
  margin-bottom: 0;
}

.faq summary {
  font-weight: 500;
  cursor: pointer;
  color: var(--primary);
}

/* Arrange FAQ items in a responsive grid for better overview */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.faq p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

/* Contact section */
.contact-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.contact-info h2,
.contact-form h2 {
  margin-bottom: 1rem;
  color: var(--primary);
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-form label {
  font-weight: 500;
  color: var(--primary);
}

.contact-form input,
.contact-form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  font-size: 0.95rem;
}

.contact-form textarea {
  resize: vertical;
}

/* Benefits section */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.benefit-card {
  background-color: #ffffff;
  border-radius: var(--border-radius);
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: inline-block;
  color: var(--accent);
}

.benefit-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.benefit-card p {
  font-size: 0.9rem;
  color: var(--text-dark);
}

.form-note {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
}

/* Footer */
footer {
  background-color: var(--primary);
  color: var(--text-light);
  /* Make the dark bottom bar slimmer by reducing the vertical padding. The
     previous padding produced a very tall footer; this change shrinks it
     without compromising readability. */
  /* Further reduce the footer height so the bottom line appears slimmer. */
  /* Increase the vertical padding slightly to ensure that all footer
     information (company name, contact details and links) remains
     visible now that the overall footer height has been reduced. */
  /* Slim down the footer height to be closer to the top bar */
  padding: 0.75rem 0;
  /* Reset the top margin so the footer no longer overlaps content. */
  margin-top: 0;
  /* Remove the default top margin so the contact section blends directly into
     the footer without a light strip. The separation between sections is
     still clear thanks to the contrasting colours. */
  margin-top: 0;
}

/*
 * Animations
 * To bring a modern touch, sections fade in softly as they enter the viewport.
 * The Intersection Observer (see index.html script) toggles the `visible` class
 * when a section appears. By default sections are slightly translated and
 * transparent; once visible, they slide into place and become opaque.
 */
.section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}


/* A contrasting section background to clearly separate important sections */
.section-contrast {
  background-color: #eaf2f8;
  /* Add a subtle border at the top to clearly mark the start of a new section */
  border-top: 3px solid var(--accent-blue);
}

/* Footer content: center the single links container */
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.footer-info strong {
  font-weight: 600;
}

/* Footer links: center align horizontally in the bottom bar */
.footer-links ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
}

/*
 * Legal pages (Impressum & Datenschutz): adjust spacing between paragraphs
 * and headings for better readability. The `.legal-text` class is applied
 * to the container of the legal content. These rules increase the
 * margin between paragraphs and headings so that the text flows nicely
 * and the reader can distinguish sections easily.
 */
.legal-text p {
  margin-bottom: 1.5rem;
}

.legal-text h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.9rem;
  /* Remove block display so links sit inline */
}

.footer-links a:hover {
  text-decoration: underline;
}

.copyright {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  color: #cbd5e0;
}

/*
 * Additional components: logo slider, image grid for certificates,
 * and floating contact buttons (call & WhatsApp). These styles
 * incorporate Dekra‑green and TÜV‑blue accents for interactive elements.
 */

/* Slider container to showcase partner software logos */
/* Logo slider revamped with navigation arrows and dots */
.logo-slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Partner software tagline */
.software-tagline {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--primary);
}
.logo-slide {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.logo-slide.active {
  display: flex;
}

.logo-slide img {
  max-height: 80px;
  max-width: 100%;
  object-fit: contain;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--accent-blue);
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 1;
}

.slider-prev {
  left: 0.5rem;
}

.slider-next {
  right: 0.5rem;
}

.slider-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.slider-dots .dot {
  width: 8px;
  height: 8px;
  background-color: #cbd5e0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
}

.slider-dots .dot.active {
  background-color: var(--accent-blue);
}

/* Partner row: displays partner software slider and TÜV certificate side by side */
.partner-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: center;
  justify-items: center;
}

.partner-left {
  text-align: center;
}

.partner-right {
  text-align: center;
}

.certificate-image {
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto 1rem;
}

/*
 * New layout for the partner and certificate section: show all logos at once
 * rather than in a slider. The .logo-row uses a responsive grid layout that
 * automatically wraps the logos on smaller screens. Each logo is placed
 * inside a card with a subtle box shadow and consistent padding.
 */
.logo-row {
  display: grid;
  /* Increase the minimum width of each logo card to allow for larger logos */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  align-items: center;
  margin-top: 1.5rem;
}

.logo-card {
  background-color: #ffffff;
  /* Reduce padding so the logo occupies more of the card and increase
     the minimum height to allow larger images. */
  padding: 0.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Increase card height so larger logos fit comfortably */
  min-height: 140px;
}

.logo-card img {
  /* Ensure all partner logos appear at a similar size, regardless of their
     intrinsic aspect ratio. Constrain both maximum height and width so
     horizontal Logos wie AutoXpert nicht überproportional größer wirken
     als Hochformatlogos wie das Zertifikat. */
  /* Allow logos to fill more of the white card area by increasing
     the maximum height and width. The object-fit property preserves the
     aspect ratio. */
  /* Make the logos themselves larger by increasing the max dimensions */
  max-height: 100px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Location list inside Einsatzgebiet */
.location-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: var(--text-dark);
}
/* Style for each location item with inline icon */
.location-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

/* Einsatzgebiet two‑column layout */
.area-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
  align-items: flex-start;
}

/* Card for the text and location list in Einsatzgebiet */
.area-text-card {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
  color: var(--text-dark);
  /* Stretch to match the height of the map embed for visual harmony */
  /* Slightly reduced height since wir einige Orte entfernt haben */
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.area-text-card p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-dark);
}

/* Grid for certificate and placeholder images */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

/* Placeholder images within the image grid */
.image-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--border-radius);
  background-color: #e2e8f0;
}

/* Floating buttons for quick contact via call or WhatsApp */
.floating-buttons {
  position: fixed;
  right: 1rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 1100;
}

/*
 * Contact section adjustments
 * The contact section originally uses the same bottom padding as other
 * sections, which leaves a pale band of the alternate background colour
 * just above the footer. Reducing the bottom padding and removing the
 * bottom margin eliminates the visible gap and extends the dark tone
 * right up to the footer.  */
#contact.section {
  /* Provide extra breathing room below the contact form so the note does not
     touch the bottom of the page. The increased padding lifts the content
     higher. */
  padding-bottom: 3rem;
  /* Reset the margin to zero to avoid overlapping the footer. */
  margin-bottom: 0;
}

/*
 * Hover effect for partner & certificate logos
 * To match the interactive feel of the service and process cards, each
 * logo card subtly lifts and casts a stronger shadow when hovered.
 */
.logo-card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.logo-card:hover {
  /* On hover, raise the card slightly and scale it up to echo the interactive
     feel of the service and process steps. The stronger shadow adds depth. */
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--text-light);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.fab svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fab-call {
  background-color: var(--accent-blue);
}

.fab-whatsapp {
  background-color: var(--accent-green);
}

/* Instagram floating button: use a vibrant pinkish tone reminiscent of the Instagram brand */
.fab-instagram {
  background-color: #C13584;
}

/* Alternate section background for visual separation */
/* Alternate section background for visual separation */
/* Slightly intensify the alternate section colour to create a clearer contrast between sections */
/* Alternate section background for visual separation */
.section-alt {
  /* Use a more prominent grey‑blue tone to create a noticeable contrast with pure white sections */
  background-color: #f1f5fb;
}

/*
 * A slightly darker light background for select sections (Über mich, Einsatzgebiet,
 * FAQ and legal pages). This tone sits between pure white and the alternate colour,
 * providing subtle contrast without overpowering the design.
 */
.section-soft {
  background-color: #f7f9fc;
}

/* When a section is faded (older sections as the user scrolls), reduce its opacity */
/* When a section is faded (sections above the currently active one), reduce its opacity but keep it visible */
.section.faded {
  opacity: 0.5;
  transform: translateY(0);
  transition: opacity 0.6s ease-out;
}

/* Info columns (Ablauf, Zielgruppen, Einsatzgebiet) */
.info-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: flex-start;
}

/* Each info column styled as its own card */
.info-column {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-column h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.info-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.info-list li {
  background-color: #ffffff;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  font-size: 0.9rem;
  color: var(--text-dark);
  display: flex;
  align-items: flex-start;
}


.info-column p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

.map-embed iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Wrapper for partner software and map columns */
/* Previously used for grid layout of partner software and map. Not needed now. */

/* The map embed inside sections inherits generic styles via .map-embed iframe */

/* Responsive: collapse nav on small screens */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    flex-direction: column;
    background-color: var(--primary);
    display: none;
  }
  .nav-links li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-links li a {
    padding: 1rem;
    display: block;
  }
  .menu-toggle:checked + .hamburger + .nav-links {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
}

/* Icons for Zielgruppen items */
/* Generic info icon preceding each target group item */
.info-icon {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--accent-blue);
  margin-right: 0.5rem;
}