:root {
  --blue-700:#164e9b;
  --blue-600:#1f66c1;
  --blue-500:#2a7ae4;
  --blue-100:#e8f1ff;
  --gray-900:#0f172a;
  --gray-700:#334155;
  --gray-500:#64748b;
  --gray-200:#e5e7eb;
  --white:#ffffff;
}

.hero-overlay-text h1 {
  white-space: nowrap; /* kein Zeilenumbruch */
}



html, body {
  overflow-x: hidden; /* verhindert horizontales Scrollen */
}




/* Basis */
* {
  box-sizing:border-box;
}

html, body {
  margin:0;
  padding:0;
  font-family:Inter,Roboto,Arial,sans-serif;
  color:var(--gray-900);
  background:#fff;
  line-height:1.6;
}

a {
  color:var(--blue-600);
  text-decoration:none;
}

a:hover {
  text-decoration:none;
}

.container {
  width:min(1100px,92%);
  margin:0 auto;
}

.section {
  padding:64px 0;
}

.section-title {
  text-align:center;
  font-size:clamp(22px,2.4vw,34px);
  margin:0 0 32px;
}

/* Header */
.site-header {
  position:sticky;
  top:0;
  background:#ffffffd9;
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--gray-200);
  z-index:40;
  height:70px;
  display:flex;
  align-items:center;
}

.navbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  padding:0;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:20px;
  color:var(--blue-700);
}

.brand-mark {
  width:34px;
  height:34px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
}

.nav-links, .menu {
  display:flex;
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}

.nav-links a, .menu a {
  padding:8px 10px;
  border-radius:10px;
  color:var(--gray-900);
}

.nav-links a:hover, .menu a:hover {
  background:var(--blue-100);
}

.custom-logo {
  max-height:180px;
  height:auto;
  width:auto;
  display:block;
  margin-left:-200px;
}

/* Hero */
.hero-slider {
  position:relative;
}

.hero-overlay-text {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
}

.hero-overlay-text h1 {
  font-size:clamp(28px,5vw,54px);
  margin-bottom:15px;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
}

.hero-overlay-text p {
  font-size:20px;
  margin-bottom:20px;
  text-shadow:0 1px 5px rgba(0,0,0,0.3);
}

.hero-btn {
  display:inline-block;
  padding:14px 30px;
  border-radius:9999px;
  background:var(--gray-500);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  font-size:18px;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  transition:background .2s,transform .2s;
}

.hero-btn:hover {
  background:var(--gray-700);
  transform:translateY(-3px);
}

/* Intro */
.intro-grid {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:40px;
  align-items:center;
}

.intro-image {
  display:flex;
  justify-content:center;
}

.intro-image img {
  width:250px;
  height:250px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.intro-text-block h2 {
  text-align:left;
  margin-bottom:16px;
  color:var(--blue-700);
}

.intro-text-block p {
  font-size:18px;
  line-height:1.7;
  color:var(--gray-700);
}

/* Vita Timeline */
.vita-timeline {
  position:relative;
  margin:40px auto;
  max-width:700px;
  padding-left:40px;
  border-left:3px solid var(--blue-600);
}

.vita-item {
  position:relative;
  margin-bottom:30px;
}

.vita-item::before {
  content:"";
  position:absolute;
  left:-11px;
  top:4px;
  width:16px;
  height:16px;
  background:var(--blue-600);
  border-radius:50%;
}

.vita-year {
  font-weight:600;
  color:var(--blue-700);
  margin-bottom:6px;
}

.vita-content {
  color:var(--gray-700);
  line-height:1.6;
}

/* Motivation */
.motivation-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}

.motivation-box {
  background:#f9fbff;
  border:1px solid var(--gray-200);
  padding:24px;
  border-radius:14px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  text-align:center;
}

.motivation-box h3 {
  color:var(--blue-700);
  margin-bottom:12px;
}

.motivation {
  margin-top:-115px;
}

/* Zitat */
.cta-quote {
  text-align:center;
}

.cta-quote blockquote {
  font-size:20px;
  font-weight:500;
  color:var(--gray-700);
  margin-bottom:24px;
  font-style:italic;
}

/* Leistungen */
.leistungen .leistungen-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}

.leistung {
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:14px;
  padding:24px;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  transition:transform .2s;
}

.leistung:hover {
  transform:translateY(-4px);
}

.leistung .icon {
  font-size:36px;
  margin-bottom:12px;
}

.leistung h3 {
  color:var(--blue-700);
}

/* Horizontale Timeline */
.vita-timeline-horizontal {
  display:flex;
  justify-content:space-between;
  position:relative;
  margin:60px auto;
  padding:0;
  max-width:1000px;
}

.vita-timeline-horizontal::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:var(--blue-600);
  top:40px;
}

.vita-item {
  text-align:center;
  position:relative;
  flex:1;
}

.vita-item::before {
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:16px;
  height:16px;
  background:var(--blue-600);
  border-radius:50%;
  z-index:1;
  top:32px;
}

.vita-year {
  font-weight:600;
  color:var(--blue-700);
  margin-bottom:20px;
}

.vita-content {
  margin-top:40px;
  color:var(--gray-700);
}

/* Produkte Grid */
.woocommerce ul.products {
  display:grid !important;
  grid-template-columns:repeat(3, minmax(280px, 1fr)) !important;
  gap:28px !important;
  list-style:none !important;
  margin:0 auto !important;
  padding:0 !important;
  max-width:1200px;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display:none !important;
}

/* Produktkacheln */
.woocommerce ul.products li.product {
  float:none !important;
  margin:0 !important;
  width:100% !important;
  max-width:100% !important;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  padding:20px;
  text-align:center;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start;
  height:400px;
  transition:all 0.25s ease;
}

.woocommerce ul.products li.product:hover {
  transform:translateY(-6px);
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

/* Produktbilder */
.woocommerce ul.products li.product img {
  height:220px !important;
  width:auto;
  object-fit:contain;
  margin:0 auto 16px auto;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  transition:transform 0.3s ease;
}

.woocommerce ul.products li.product:hover img {
  transform:scale(1.05);
}

/* Titel */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size:17px;
  font-weight:600;
  color:var(--gray-900);
  margin:12px 0 18px 0;
  flex-grow:1;
}

/* Button */
.woocommerce ul.products li.product .button {
  margin-top:auto;
  align-self:center;
  background:var(--blue-600) !important;
  color:#fff !important;
  border-radius:9999px !important;
  padding:12px 28px !important;
  font-size:15px !important;
  font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
  transition:all 0.25s ease;
}

.woocommerce ul.products li.product .button:hover {
  background:var(--blue-700) !important;
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,0.18);
}






/* Header-Kontaktdaten */
.header-contact {
  display: flex;
  flex-direction: column;      /* nebeneinander */
  align-items: center;      /* vertikal mittig */
  gap: 5px;                /* Abstand zwischen Telefon und Mail */
  margin-left: 60px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gray-700);
  white-space: nowrap;      /* verhindert Umbruch */
}

.header-contact a {
  display: inline-flex;     /* Icon + Text in einer Reihe */
  align-items: center;
  gap: 6px;                 /* kleiner Abstand zwischen Icon und Text */
  color: var(--gray-900);
  text-decoration: none;
  font-size: 13px;
}

.header-contact a:hover {
  color: var(--blue-600);
  text-decoration: underline;
}


/* Menü etwas weiter nach rechts */
.nav-links, .menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0 0 0 180px;   /* schiebt Menü nach rechts */
  padding: 0;
  align-items: center;
}

/* Aktive Seite markieren */
.nav-links .current-menu-item a,
.menu .current-menu-item a {
  background: var(--blue-600);
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px;
}

/* Menü: kein Zeilenumbruch bei einzelnen Menüpunkten */
.nav-links a {
  white-space: nowrap;
}








/* Produktseite Layout */
.custom-product-page {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  margin: 50px auto;
  max-width: 1200px;
  padding: 0 20px;
}

/* Linke Seite: Produktbild */
.custom-product-image {
  flex: 1 1 45%;
}

.custom-product-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  object-fit: contain;
}

/* Rechte Seite: Infos */
.custom-product-summary {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Titel */
.product-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--gray-900);
}

/* Kurzbeschreibung */
.product-short-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--gray-700);
  margin-bottom: 25px;
}

/* Buttons nebeneinander */
.product-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 40px;
}

.product-buttons .btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* E-Mail Button blau */
.product-buttons .btn-mail {
  background: var(--blue-600);
  color: #fff !important;
}

.product-buttons .btn-mail:hover {
  background: var(--blue-700);
  transform: translateY(-2px);
}

/* Telefon Button grün */
.product-buttons .btn-phone {
  background: #2a7a2e;
  color: #fff !important;
}

.product-buttons .btn-phone:hover {
  background: #3eb43e;
  transform: translateY(-2px);
}

/* Lange Beschreibung */
.product-description {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gray-800);
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
}

.footer {
  background: #333;
  color: #fff;
  padding: 40px 0;
  font-size: 14px;
}

.footer .footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.footer-col p {
  margin: 0 0 8px 0;
  color: #ccc;
}

.footer-link {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 6px;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin-bottom: 6px;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
}

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

/* Mobile Ansicht */
@media (max-width: 768px) {
  .footer .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}





/* Service-Seite */

/* Service-Kacheln im 2er Grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.service-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.service-card-title {
  font-size: 22px;
  color: var(--blue-700);
  margin-bottom: 16px;
  text-align: center;
}

.service-card-content {
  text-align: left;
}

.service-card-content ul {
  margin-top: 16px;
  padding-left: 20px;
  list-style-type: disc;
}

/* Mobile: nur 1 Spalte */
@media (max-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* Einleitungstext auf der Service-Seite */
.service-intro {
  max-width: 800px;              /* Textbreite begrenzen */
  margin: 0 auto 50px;           /* mittig + Abstand nach unten */
  font-size: 18px;               /* etwas größer für Lesbarkeit */
  line-height: 1.7;              /* mehr Zeilenabstand */
  color: var(--gray-700);        /* dezent graue Schriftfarbe */
  text-align: center;            /* mittig ausgerichtet */
}

/* Call-to-Action unter den Kacheln */
.service-cta {
  margin-top: 60px;
  text-align: center;
}

.service-cta p {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color: var(--gray-900);
}

.service-cta .hero-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 9999px;
  background: var(--blue-600);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background .2s, transform .2s;
}

.service-cta .hero-btn:hover {
  background: var(--blue-700);
  transform: translateY(-3px);
}






.footer {
  background: #333;
  color: #fff;
  padding: 40px 0;
  font-size: 14px;
}

.footer .footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.footer-col p {
  margin: 0 0 8px 0;
  color: #ccc;
}

.footer-link {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #1da1f2; /* Hover-Farbe, z. B. Blau */
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin-bottom: 6px;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
}

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

/* Social Media Icons */
.social-media a {
  font-size: 20px;
  margin-right: 12px;
}

.social-media a:hover {
  color: #ccc;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
  .footer .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .social-media {
    margin-top: 10px;
  }
}











.impressum-page {
  padding: 40px 0;
}

.impressum-page h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

.impressum-page h2 {
  font-size: 20px;
  margin-top: 25px;
  margin-bottom: 10px;
}

.impressum-page p {
  line-height: 1.6;
  color: #333;
}










































/* ================================
   Produkte: Desktop vs Mobile
   ================================ */

@media (min-width: 1025px) {
  .produkte-grid-wrapper {
    display: block !important;   /* Grid an */
  }
  .product-swiper {
    display: none !important;    /* Slider aus */
  }
}

/* Keine Produkte Text */
/* Desktop-Grid-Hinweis */
.no-products-text-desktop {
  text-align: center;
  color: #555;
  margin-top: 20px;
}

/* Handy-Hinweis im Slider */
.product-swiper .swiper-slide {
  display: flex !important;           /* sorgt für echtes Flex-Zentrieren */
  justify-content: center;
  align-items: center;
  min-height: 250px;                  /* sichtbare Höhe der Slide */
}

.product-swiper .swiper-slide .no-products-text {
  text-align: center;
  font-size: 1.1rem;
  color: #555;
  margin: 0;
  width: 100%;
}

/* Nur Handy zeigt den Slider-Hinweis */
@media (min-width: 769px) {
  .product-swiper .swiper-slide .no-products-text {
    display: none;
  }
}

/* Nur Desktop zeigt die Grid-Version */
@media (max-width: 768px) {
  .no-products-text-desktop {
    display: none;
  }
}