.elementor-631 .elementor-element.elementor-element-8be2181{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-631 .elementor-element.elementor-element-b2d75ee{background-image:url("https://kigru.at/wp-content/uploads/2025/09/Kind-sein.-Frei-sein.-Gemeinsam-mitten-in-Wien-scaled.png");}/* Start custom CSS for html, class: .elementor-element-b2d75ee *//* ===== Brand-Mapping: Elementor Global Colors ===== */
.gl-testimony--brand{
  --text:   var(--e-global-color-text, #0f172a);
  --muted:  var(--e-global-color-secondary, #475569);
  --brand:  var(--e-global-color-primary, #2a7f7a);
  --accent: var(--e-global-color-accent, #BDECE9);
  --bg:     var(--e-global-color-background, #ffffff);
  --line:   var(--e-global-color-border, #e8edf2);
}

/* ===== Wrapper ===== */
.gl-testimony{
  display: grid;
  grid-template-columns: 1.05fr .95fr; /* Text : Galerie */
  gap: clamp(18px, 4vw, 36px);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 36px);
  color: var(--text);
  background:
    radial-gradient(220px 160px at 8% 6%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 65%),
    var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}

/* Textseite */
.gl-testimony__name{
  margin: 0 0 .2rem 0;
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .01em;
}
.gl-testimony__meta{
  margin: 0 0 .8rem 0; color: var(--muted);
  font-size: .98rem;
}
.gl-testimony__lead{
  margin: 0 0 .8rem 0; color: var(--text);
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  line-height: 1.75;
}

/* Details / Mehr lesen */
.gl-testimony__more{ margin-top: .4rem; }
.gl-testimony__more > summary{
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--brand); font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.gl-testimony__more > summary::-webkit-details-marker{ display:none; }
.gl-testimony__more > summary::after{
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.gl-testimony__more[open] > summary::after{ transform: rotate(225deg); }
.gl-testimony__more > summary:hover{
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}

/* Versteckter Inhalt mit sanftem Reveal */
.gl-testimony__content{
  margin-top: .8rem; color: var(--muted); line-height: 1.75; animation: gl-reveal .28s ease;
}
@keyframes gl-reveal{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}
.gl-testimony__content h4{
  margin: .8rem 0 .35rem 0; font-size: 1.05rem; font-weight: 700; color: var(--text);
}
.gl-quote{
  margin: .6rem 0; padding: .6rem .8rem;
  border-left: 3px solid color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  border-radius: 8px;
}
.gl-quote blockquote{ margin: 0; color: var(--text); }
.gl-quote figcaption{ margin-top: .35rem; font-size: .95rem; color: var(--muted); }
.gl-quote--team{
  border-left-color: var(--brand);
  background: color-mix(in srgb, var(--accent) 22%, #fff);
}
.gl-letter{
  margin: .4rem 0; padding: .6rem .8rem; background: #fff;
  border: 1px dashed var(--line); border-radius: 8px; color: var(--text); font-style: italic;
}

/* ===== Mosaic-Galerie (rechts) ===== */
.gl-media-mosaic{
  --gap: clamp(10px, 1.8vw, 16px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 120px;                   /* Grundhöhe der Kacheln */
  gap: var(--gap);
  list-style: none; padding: 0; margin: 0;
}

/* Große Hauptkachel */
.gl-media-mosaic .is-main{
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

/* Wabbly-Frame – universell */
.wabbly-frame{
  --accent: var(--accent, #BDECE9);
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, #ffffff);
  border-radius: 34% 66% 62% 38% / 44% 34% 66% 56%;
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
  transform: translateZ(0) scale(1);
  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    box-shadow .26s ease,
    border-color .26s ease,
    filter .26s ease,
    opacity .26s ease;
  will-change: transform;
}
.wabbly-frame img{
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 50%;
  filter: brightness(1.06) saturate(1.06);
}
.wabbly-frame::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(180px 120px at 12% 10%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 65%),
    radial-gradient(220px 150px at 88% 86%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
}

/* subtiler Hover-Fokus: Zoom + stärkerer Schatten; Nachbarn leicht dämpfen */
@media (hover:hover){
  .gl-media-mosaic:hover .wabbly-frame{
    opacity: .88; filter: saturate(.96) brightness(.98);
  }
  .gl-media-mosaic .wabbly-frame:hover{
    opacity: 1; filter: saturate(1.05) brightness(1.04);
    transform: scale(1.06);
    z-index: 1;
    box-shadow: 0 20px 50px rgba(2,6,23,.18);
    border-color: color-mix(in srgb, var(--brand) 30%, var(--accent));
  }
}

/* optionale, sehr sanfte Formbewegung – Klasse is-animated entfernen, wenn statisch gewünscht */
.wabbly-frame.is-animated{ animation: wobble-frame 12s ease-in-out infinite; will-change: border-radius; }
@keyframes wobble-frame{
  0%{   border-radius:34% 66% 62% 38% / 44% 34% 66% 56%;}
  50%{  border-radius:60% 40% 32% 68% / 46% 58% 42% 54%;}
  100%{ border-radius:34% 66% 62% 38% / 44% 34% 66% 56%;}
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .gl-testimony{ grid-template-columns: 1fr; }
  .gl-testimony__head, .gl-testimony__lead{ text-align: center; }

  .gl-media-mosaic{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 130px;
  }
  .gl-media-mosaic .is-main{
    grid-column: 1 / -1;         /* oben volle Breite */
    grid-row: 1 / span 2;
  }
}
@media (max-width: 640px){
  .gl-media-mosaic{
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }
  .gl-media-mosaic .is-main{
    grid-column: 1; grid-row: 1; /* einfach der erste Block */
  }
}
@media (prefers-reduced-motion: reduce){
  .wabbly-frame.is-animated{ animation: none; }
}/* End custom CSS */