/* FR Slider — v1.1.2 */

/* Prevent initial column flash before slider JS/CSS loads */
.fr-slider-wrap { overflow: hidden; }
.fr-slider { position: relative; }
.fr-track { display: flex; }
.fr-slide { flex: 0 0 100%; }

/* Wrapper */
.fr-slider-wrap { 
  position: relative; 
}

/* Slider frame: preserve 1170x780 ratio */
.fr-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1170 / 780;
  max-height: 100dvh;
  overflow: hidden;
  user-select: none;
touch-action: pan-x pan-y pinch-zoom;
  cursor: grab;
}
.fr-slider:active { cursor: grabbing; }

.fr-track {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
  transition: transform 600ms ease; /* keep in sync with JS TRANSITION_MS */
}

.fr-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.fr-slide img,
.fr-slide .fr-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* mobile: no crop */
  pointer-events: none;
  user-select: none;
}

/* Tablet+ fill the frame (avoid letterboxing) */
@media (min-width: 769px){
  .fr-slide img,
  .fr-slide .fr-slide-img{
    object-fit: cover;
  }
}

/* ----- DOTS (filled bullets) ----- */
.fr-dots {
  position: static;
  display: flex !important;
  justify-content: center;
  gap: 10px !important;
  margin-top: 28px !important;
}

.fr-dots .fr-dot,
.fr-slider-wrap .fr-dots .fr-dot {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-block !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 44px !important;  /* touch target */
  height: 44px !important; /* touch target */
  background: transparent !important;
  opacity: 1 !important;
  box-shadow: none !important;
  line-height: 0 !important;
  position: relative !important;
  cursor: pointer;
  touch-action: manipulation;
}

/* Visual dot (small), centered inside the larger tap area */
.fr-dots .fr-dot::before,
.fr-slider-wrap .fr-dots .fr-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: #aaa; /* inactive */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fr-dots .fr-dot[aria-current="true"]::before,
.fr-slider-wrap .fr-dots .fr-dot[aria-current="true"]::before {
  background-color: #222; /* active */
}

.fr-dots .fr-dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Mobile: make dots more compact */
@media (max-width: 768px){
  .fr-dots { 
    gap: 6px !important;
    margin-top: 18px !important;
  }
  .fr-dots .fr-dot::before { 
    width: 7px;        
    height: 7px; 
  }
}

/* STARTPAGE – SERVICE BLOCKS
   -------------------------------------------------- */

/* base row */
.fr-service-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 48px 0;     /* vertical spacing between rows (desktop) */
}

/* alternating layout: image left / right */
.fr-service-row:nth-of-type(odd) {
  flex-direction: row;          /* image left, text right */
}

.fr-service-row:nth-of-type(even) {
  flex-direction: row-reverse;  /* image right, text left */
}

/* image column */
.fr-service-image {
  flex: 0 0 260px;              /* desktop image column width */
}

.fr-service-image .fr-mini-frame {
  width: 100%;
  aspect-ratio: 3 / 4;          /* identical 3:4 tiles */
  overflow: hidden;
}

.fr-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* text column */
.fr-service-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;      /* vertical centering */
}

/* push text slightly inward depending on side */
.fr-service-row:nth-of-type(odd) .fr-service-text {
  padding-left: 40px;           /* image left → text pushed right */
  padding-right: 0;
}

.fr-service-row:nth-of-type(even) .fr-service-text {
  padding-right: 40px;          /* image right → text pushed left */
  padding-left: 0;
}

/* typography spacing */
.fr-service-text h3 {
  margin: 0 0 0.4rem 0;
}

.fr-service-text p {
  margin: 0 0 0.4rem 0 !important;
}

/* --------------------------------------------------
   MOBILE – stack image + text, no alternation
   -------------------------------------------------- */
@media (max-width: 768px) {

  .fr-service-row,
  .fr-service-row:nth-of-type(even),
  .fr-service-row:nth-of-type(odd) {
    flex-direction: column;
    align-items: center;
    margin: 0 0 32px 0;         /* slightly tighter spacing on mobile */
  }

  .fr-service-image {
    flex: 0 0 auto;
    width: 80%;
    max-width: 320px;
  }

  .fr-service-text {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-top: 12px;
  }
}
@media (max-width: 768px) {
  .fr-service-row .fr-service-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Anchor offset so sections are not hidden behind sticky header */
.fr-service-row, .fr-service-row-last {
  scroll-margin-top: 110px;
}
/* english rating banner */
.fr-rating-banner-en {
    text-align: center;
    font-size: 15px;
    padding: 14px 0;
    color: #444;
    margin: 25px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    line-height: 1.6;
}

.fr-rating-stars {
    color: #d4a017; /* same gold tone */
    font-size: 15px;
    letter-spacing: 1px;
    margin-right: 4px;
}

.fr-rating-score,
.fr-rating-date {
    color: #444;
}

.fr-rating-sep {
    margin: 0 6px;
    color: #999;
}
.fr-rating-link:hover {
    text-decoration: none;
}
#leistungen .fr-service-text p { margin-bottom: 0.3em !important; }

/* Two images side-by-side by default */
.fr-studio-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Only on mobile: stack */
@media (max-width: 600px){
  .fr-studio-row{
    grid-template-columns: 1fr;
  }
}
/* FR Slider v1.1.2 — dots closer (overrides plugin even if plugin CSS loads after) */
.entry-content .fr-slider-wrap .fr-dots{
  gap: 14px !important; /* default was 10px */
}

/* OPTIONAL: slightly larger dots */
.entry-content .fr-slider-wrap .fr-dots .fr-dot{
  width: 12px !important;   /* default 10px */
  height: 12px !important;
}
/* OPTIONAL: mobile tuning (keep them close + a bit bigger) */
@media (max-width: 768px){
  .entry-content .fr-slider-wrap .fr-dots{
    gap: 12px !important;    /* default was 6px */
  }
  .fr-slider-wrap .fr-dots .fr-dot::before{
    width: 11px !important;
    height: 11px !important;
  }

	
/* FR Slider v1.1.2 — subtle hover on INACTIVE dots */
.fr-dots .fr-dot:hover:not([aria-selected="true"]),
.fr-dots .fr-dot:focus-visible:not([aria-selected="true"]),
.fr-slider-wrap .fr-dots .fr-dot:hover:not([aria-selected="true"]),
.fr-slider-wrap .fr-dots .fr-dot:focus-visible:not([aria-selected="true"]) {
  opacity: 0.85 !important;
}