/* ==========================================================================
   Komponenten: Buttons, Hero, Slider, Leistungen, Karten, Formulare
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  min-height: 44px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:active{ transform: scale(0.98); }
.btn--primary{ background: var(--primary); color: #fff; }
.btn--primary:hover{ background: var(--primary-soft); box-shadow: var(--shadow-1); }
.btn--accent{ background: var(--accent-deep); color: #fff; }
.btn--accent:hover{ background: #4f7960; }
.btn--ghost{ background: transparent; color: var(--primary); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--primary); }
.section--dark .btn--ghost{ color: #fff; border-color: rgba(255,255,255,0.4); }
.section--dark .btn--ghost:hover{ border-color: #fff; }

/* ---------- Hero (textdominant, Bild darunter breit) ---------- */
.hero{
  padding-block: var(--space-l) var(--space-s);
}
.hero__head{
  max-width: 900px;
}
.hero__head h1{ margin-bottom: 0.65rem; }
.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}
.hero__figure{
  margin-top: var(--space-m);
  border-radius: var(--radius-feature);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  position: relative;
}
.hero__figure img{ width: 100%; height: clamp(320px, 46vw, 620px); object-fit: cover; }
.hero__figure figcaption{
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  background: rgba(27,58,75,0.82);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  max-width: 320px;
}

/* ---------- Slider (strukturell anderer Sektionstyp: horizontale Bahn) ---------- */
.slider-section{ overflow: hidden; }
.slider-section__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.slider{
  position: relative;
}
.slider__track{
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-deep) var(--bg-muted);
}
.slider__slide{
  scroll-snap-align: start;
  flex: 0 0 min(680px, 82vw);
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-muted);
}
.slider__slide img{ width: 100%; height: clamp(280px, 38vw, 440px); object-fit: cover; }
.slider__caption{
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(to top, rgba(27,58,75,0.86) 10%, rgba(27,58,75,0) 100%);
  color: #fff;
}
.slider__caption h3{ color: #fff; margin-bottom: 0.35rem; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); }
.slider__caption p{ margin: 0; max-width: 46ch; color: rgba(255,255,255,0.88); font-size: 0.98rem; }
.slider__controls{ display: flex; gap: 0.75rem; }
.slider__btn{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.slider__btn:hover{ border-color: var(--accent-deep); }
.slider__btn:active{ transform: scale(0.95); }
.slider__btn svg{ width: 20px; height: 20px; }
.slider__dots{ display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; }
.slider__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
  border: none; padding: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.slider__dot.is-active{ background: var(--accent-deep); transform: scale(1.3); }

/* ---------- Leistungen: versetztes Raster (Grid, keine Rounded-Card-Klischees) ---------- */
.services-grid{
  margin-top: 3rem;
}
.service-item{
  padding-top: 1.75rem;
  border-top: 2px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.service-item:hover{ border-top-color: var(--accent-deep); }
.service-item__figure{
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.service-item__figure img{ width: 100%; height: 230px; object-fit: cover; }
.service-item h3{ margin-bottom: 0.5rem; font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); }
.service-item p{ color: var(--ink-soft); }
.service-item__link{
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; color: var(--accent-deep);
  margin-top: 0.5rem;
}
.service-item__link svg{ width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease-out); }
.service-item__link:hover svg{ transform: translateX(4px); }

/* ---------- Über-uns / versetzte Zweispalten-Sektion ---------- */
.split-block{ align-items: center; }
.split-block__figure{
  border-radius: var(--radius);
  overflow: hidden;
}
.split-block__figure img{ width: 100%; height: clamp(320px, 34vw, 480px); object-fit: cover; }

/* ---------- Kontakt-CTA Break-Sektion (bewusster Bruch, vollflaechig) ---------- */
.cta-break{
  text-align: left;
}
.cta-break__grid{ align-items: center; }
.cta-break .info-line{ margin-bottom: 0.9rem; color: rgba(255,255,255,0.88); }
.cta-break .info-line .icon{ color: var(--accent); }

/* ---------- Formular (Kontaktformular / Contact Form 7) ---------- */
.contact-form-wrap{
  background: var(--bg-muted);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.wpcf7-form p{ margin-bottom: 1.15rem; }
.wpcf7-form label{
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
  color: var(--primary);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wpcf7-form textarea{ min-height: 140px; resize: vertical; }
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible{
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(127,169,138,0.28);
}
.wpcf7-form input[type="submit"]{
  appearance: none;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.85rem 1.8rem;
  font-weight: 700;
  font-size: 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wpcf7-form input[type="submit"]:hover{ background: var(--primary-soft); }
.wpcf7-form input[type="submit"]:active{ transform: scale(0.98); }
.wpcf7-spinner{ margin-left: 0.5rem; }
.wpcf7-not-valid-tip{ color: #B0453C; font-size: 0.85rem; margin-top: 0.3rem; }
.wpcf7-response-output{
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-top: 1.5rem !important;
  border-width: 1px !important;
}

/* ---------- Karte / Anfahrt ---------- */
.map-frame{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-frame iframe{ width: 100%; height: 380px; border: 0; display: block; }

/* ---------- Seiten-Content (page.php / Detailseiten) ---------- */
.page-hero{
  padding-block: var(--space-l) var(--space-s);
}
.page-hero h1{ max-width: 900px; }
.entry-content{ max-width: var(--measure); }
.entry-content h2{ margin-top: 2.4em; }
.entry-content h3{ margin-top: 1.8em; }
.entry-content ul, .entry-content ol{ margin: 0 0 1.3em; padding-left: 1.3em; }
.entry-content ul{ list-style: disc; }
.entry-content ol{ list-style: decimal; }
.entry-content li{ margin-bottom: 0.5em; }
.entry-content .wp-block-columns{ gap: clamp(1.5rem, 4vw, 3rem); }
.entry-content blockquote{
  border-left: 3px solid var(--accent-deep);
  padding-left: 1.3rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--primary);
  margin: 2rem 0;
}

/* Breadcrumb-artige Rueckverlinkung auf Detailseiten */
.back-link{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 1.75rem;
}
.back-link svg{ width: 1em; height: 1em; transform: rotate(180deg); }

.related-services{
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}