/* ============================================================
   Contemporary Art Therapy – eigene Ergänzungen
   Basis: css/webflow.css (Original-Design), hier nur Neues.
   ============================================================ */

:root{
  --green:#6d755e;
  --green-light:#838c72;
  --green-faded:#f2f4ee;
}

/* ---------- Hero ---------- */
.hero-v2-text{max-width:440px}

/* ---------- DesignTribe-Logo im Footer ---------- */
.wrapper-nicolas-mondre.relative .image-2{transition:opacity .3s ease}
.wrapper-nicolas-mondre.relative:hover .image-2{opacity:1}

/* ---------- Portraits / Bildausschnitte ---------- */
.mini-gallery-image-01.bild-theresa{background-position:50% 28%}
.mini-gallery-image-01.bild-suchtentzug{background-image:url(../img/P1062994.webp);width:100%;height:520px}
.mini-gallery-image-01.bild-repair{background-image:url(../img/P1062998.webp);width:100%;height:560px}

/* ---------- Fließtext in zwei Spalten ---------- */
.prose{max-width:1000px;margin:0 auto;padding:0 15px}
.prose-columns{column-count:2;column-gap:64px}
.prose p{color:var(--grey-2);margin-bottom:20px}
.prose p.lead{color:var(--dark);font-size:20px;line-height:32px;margin-bottom:28px}
.prose .lead-single{column-span:all;max-width:720px;margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Poetische Vierer-Zeilen (Gregor Methode) ---------- */
.method-lines{display:grid;grid-template-columns:repeat(4,1fr);margin:56px 15px 0}
.method-line{border:1px solid var(--grey-4);margin-right:-1px;padding:48px 32px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:180px}
.method-line span{display:block;color:var(--grey-2);letter-spacing:2px;text-transform:uppercase;font-size:11px;font-weight:700;margin-bottom:14px}
.method-line p{margin:0;font-size:19px;line-height:28px}

/* ---------- Preise ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:0 15px}
.price-card{border:1px solid var(--grey-4);margin-right:-1px;padding:56px 32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.price-card .price-kind{color:var(--grey-2);letter-spacing:2px;text-transform:uppercase;font-size:11px;font-weight:700;margin-bottom:20px}
.price-card .price-value{font-size:40px;line-height:48px;margin-bottom:4px}
.price-card .price-unit{color:var(--grey-2);font-size:14px;line-height:24px}
.price-note{text-align:center;color:var(--grey-2);font-size:13px;line-height:24px;margin-top:32px}

/* ---------- Angebots-Übersicht (Hero-Anschluss) ---------- */
.offer-row{display:grid;grid-template-columns:repeat(3,1fr);margin:0 15px}
.offer{border:1px solid var(--grey-4);margin-right:-1px;padding:44px 32px;display:flex;flex-direction:column;align-items:flex-start}
.offer h4{margin-bottom:10px}
.offer p{color:var(--grey-2);font-size:14px;line-height:24px;margin-bottom:20px}
.offer .offer-link{margin-top:auto;color:var(--dark);letter-spacing:2px;text-transform:uppercase;font-size:10px;font-weight:700;line-height:16px;text-decoration:none;box-shadow:inset 0 -1px 0 0 var(--grey-3);padding-bottom:4px;transition:box-shadow .2s}
.offer .offer-link:hover{box-shadow:inset 0 -1px 0 0 var(--green)}

/* ---------- Über mich: Institut-Hinweis ---------- */
.institut-note{border-left:2px solid var(--green);padding:4px 0 4px 20px;margin:8px 0 28px;color:var(--grey-2)}
.institut-note a{color:var(--green);text-decoration:none;box-shadow:inset 0 -1px 0 0 var(--green)}
.institut-note a:hover{color:var(--dark);box-shadow:inset 0 -1px 0 0 var(--dark)}

/* ---------- CTA-Abschluss ---------- */
.closing-lines{max-width:760px;margin:0 auto;text-align:center}
.closing-lines .quote-text{font-style:normal;margin-left:auto;margin-right:auto;margin-bottom:20px}
.closing-lines .closing-sub{color:var(--grey-2);margin-bottom:32px}
.closing-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}

/* ---------- Hilfsklassen ---------- */
.section.no-padding-top{padding-top:0}
/* Strich, der einem Unterzeile-Absatz folgt, etwas absetzen */
.intro > p + .divider{margin-top:20px}

/* ---------- Hinweis-Box ---------- */
.hint{border:1px solid var(--grey-4);background-color:var(--haze);padding:20px 24px;color:var(--grey-2);font-size:14px;line-height:24px;margin-top:8px}
.hint + .button{margin-top:32px}

/* ---------- Scroll-Reveal ----------
   Lange Dauer mit starkem Ease-out: schneller Anlauf, sehr weiches Auslaufen. */
html.js .reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 1.6s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
html.js .reveal.is-visible{opacity:1;transform:none}

/* Karten einer Reihe leicht versetzt einblenden */
html.js .offer.reveal:nth-child(2),
html.js .price-card.reveal:nth-child(2),
html.js .method-line.reveal:nth-child(2){transition-delay:.14s}
html.js .offer.reveal:nth-child(3),
html.js .price-card.reveal:nth-child(3),
html.js .method-line.reveal:nth-child(3){transition-delay:.28s}
html.js .method-line.reveal:nth-child(4){transition-delay:.42s}

/* ---------- Bild-Overlays ---------- */
/* Header-Bild: Wischer von links nach rechts */
.overlay.on-load{display:block;transition:transform 2s cubic-bezier(.16,1,.3,1)}
.is-loaded .overlay.on-load{transform:translateX(101%)}
.overlay.reveal-overlay{display:block;transform:translateY(0);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.overlay.reveal-overlay.is-open{transform:translateY(-101%)}

/* ---------- FAQ-Akkordeon ---------- */
.uui-faq01_answer{overflow:hidden;transition:height .55s cubic-bezier(.16,1,.3,1)}
.uui-faq01_question{cursor:pointer}
.accordion-icon_vertical-line{transition:transform .3s ease,opacity .3s ease}
.is-open .accordion-icon_vertical-line{transform:rotate(90deg);opacity:0}

/* ---------- Slider (Kundenstimmen) ---------- */
.testimonials-v1{position:relative;overflow:hidden}
.slider-track{display:flex;transition:transform 1.2s cubic-bezier(.16,1,.3,1);will-change:transform}
.slider-track > .testimonials-v1-slide{flex:0 0 100%;position:relative}
.testimonials-v1-button{cursor:pointer;position:absolute;z-index:3;transition:opacity .4s ease}
.testimonials-v1-dots{display:flex;justify-content:center;gap:8px;margin-top:8px}
.testimonials-v1-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--grey-3);cursor:pointer}
.testimonials-v1-dots button{transition:background-color .4s ease}
.testimonials-v1-dots button[aria-selected="true"]{background:var(--green)}

/* ---------- Mobile-Navigation ---------- */
.menu-button{display:none}
@media screen and (max-width:991px){
  .nav-bar{height:72px}
  .menu-button{display:flex;align-items:center;justify-content:center;height:100%;padding:0 8px}
  .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--grey-4);border-bottom:1px solid var(--grey-4);flex-direction:column;align-items:stretch;padding:8px 0 16px;box-shadow:0 12px 24px rgba(0,0,0,.06)}
  .nav-bar.is-open .nav-menu{display:flex}
  .nav-link{height:auto;width:100%;margin-left:0;margin-right:0;padding:16px 24px;font-size:16px;justify-content:flex-start;border-bottom:1px solid var(--grey-4)}
  .nav-menu .nav-link:last-of-type{border-bottom:0}
  .nav-bar-right{padding:12px 24px 0;justify-content:flex-start}
  .nav-bar-right .button{width:100%}
  .menu-icon-line-top,.menu-icon-line-middle,.menu-icon-line-bottom{transition:transform .3s ease,opacity .2s ease}
  .nav-bar.is-open .menu-icon-line-top{transform:translateY(6px) rotate(45deg)}
  .nav-bar.is-open .menu-icon-line-middle{opacity:0}
  .nav-bar.is-open .menu-icon-line-bottom{transform:translateY(-6px) rotate(-45deg)}
  .prose-columns{column-count:1}
  .prose p.lead{font-size:18px;line-height:28px}
  .price-card{padding:40px 24px}
  .offer{padding:36px 24px}
  .method-lines{grid-template-columns:1fr 1fr;margin-top:40px}
  .price-grid,.offer-row{grid-template-columns:1fr}
  .price-card,.offer,.method-line{margin-right:0;margin-bottom:-1px}
  .mini-gallery-image-01.bild-theresa{height:520px}
}
@media screen and (max-width:767px){
  .method-lines{grid-template-columns:1fr}
  .mini-gallery-image-01.bild-suchtentzug,.mini-gallery-image-01.bild-repair{height:400px}
}
@media screen and (max-width:479px){
  .price-card .price-value{font-size:34px;line-height:42px}
  .mini-gallery-image-01.bild-theresa{height:440px}
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal.is-visible{opacity:1;transform:none;transition:none}
  .overlay.on-load,.overlay.reveal-overlay{display:none}
  .slider-track{transition:none}
}