/* ==========================================================================
   OmniMentis – organisationen.css
   Page layer for organisationen/index.html, on top of base.css (same role
   familien.css plays for the home page). Repeats none of base's tokens,
   header, footer, .btn, .wrap, .eyebrow, .dot or .to-top.
   ========================================================================== */


/* ---------- Background decoration ---------- */
.o-deco {
  position: absolute;
  height: auto;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
  color: var(--ink);
}
.o-deco--hero     { width: clamp(380px,48vw,760px); left: -14vw; top: -18%;  animation: om-bob 32s ease-in-out infinite; }
.o-deco--warum    { width: clamp(320px,38vw,580px); right: -10vw; top: -14%; animation: om-bob 29s ease-in-out infinite; }
.o-deco--workshop { width: clamp(320px,38vw,580px); right: -10vw; bottom: -14%; opacity: 0.08; animation: om-bob 27s ease-in-out infinite; }
.o-deco--faq      { width: clamp(320px,38vw,580px); left: -11vw; top: 10%;   animation: om-bob 31s ease-in-out infinite; }
.o-deco--familien { width: clamp(260px,30vw,440px); right: -6vw; top: 50%; margin-top: calc(clamp(260px,30vw,440px) / -2); opacity: 0.08; animation: om-bob 28s ease-in-out infinite; }
.o-deco--kontakt  { width: clamp(340px,42vw,660px); right: -10vw; top: -10%; opacity: 0.08; color: var(--mint); animation: om-bob 30s ease-in-out infinite reverse; }

.o-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(217,242,234,0.7);
  pointer-events: none;
}
.o-blob--hero     { width: clamp(180px,26vw,340px); height: clamp(180px,26vw,340px); background: rgba(217,242,234,0.55); top: -8vw; right: 6vw; animation: om-float 22s ease-in-out infinite; }
.o-blob--warum    { width: clamp(180px,22vw,320px); height: clamp(180px,22vw,320px); right: -6vw; top: -8vw; animation: om-float 26s ease-in-out infinite; }
.o-blob--workshop { width: clamp(180px,24vw,320px); height: clamp(180px,24vw,320px); right: -6vw; top: -8vw; animation: om-float 24s ease-in-out infinite; }
.o-blob--familien { width: clamp(160px,20vw,280px); height: clamp(160px,20vw,280px); right: -5vw; bottom: -8vw; animation: om-float 22s ease-in-out infinite; }

/* ---------- Sections and layout ---------- */
.o-sec {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-top: 1px solid rgba(15,61,71,0.14);
  padding: clamp(52px,7vw,104px) var(--edge);
  scroll-margin-top: 78px;
}
.o-sec--tint { background: var(--tint); }
.o-sec--dark { background: var(--ink); color: var(--cream); }
.o-sec--slim { padding: clamp(40px,5vw,72px) var(--edge); }

.o-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(28px,4vw,64px);
  align-items: start;
}
.o-narrow { position: relative; max-width: 900px; margin: 0 auto; }

/* ---------- Type ---------- */
.o-h2 {
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(32px,4.6vw,58px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  max-width: 18ch;
}
.o-h2--gap { margin-bottom: clamp(30px,4.4vw,52px); }
.o-h3 {
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(22px,2.4vw,30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.o-lead {
  font-size: 19px;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 54ch;
}
.o-lead:last-child { margin-bottom: 0; }
.o-hand {
  font-family: var(--hand);
  color: var(--teal);
  transform-origin: left;
}

/* ---------- Buttons ---------- */
.o-btn {
  display: inline-block;
  text-decoration: none;
  color: var(--cream);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 15px 28px;
  font-weight: 700;
  font-size: 17px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}
.o-btn:hover  { color: var(--cream); transform: translateY(-2px); box-shadow: 4px 4px 0 var(--ink); }
.o-btn:active { transform: translateY(0); box-shadow: 2px 2px 0 var(--ink); }
.o-btn--light, .o-btn--light:hover { color: var(--ink); background: var(--cream); }

/* ---------- Cards and lists ---------- */
.o-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(24px,3vw,38px);
  box-shadow: var(--shadow);
}
.o-card--flat { box-shadow: none; padding: clamp(20px,2.6vw,30px); }
.o-card__title {
  display: block;
  font-family: var(--h);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 14px;
}
.o-card__foot {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  border-top: 2px solid rgba(15,61,71,0.15);
  padding-top: 18px;
}

.o-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.o-bullets > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.55;
}
.o-bullets > li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
}
.o-bullets--space { margin-bottom: 22px; }
.o-bullets--lg > li { font-size: 17px; }
.o-bullets--sm { gap: 8px; }
.o-bullets--sm > li::before { width: 8px; height: 8px; }

/* ---------- Hero ---------- */
.o-hero { position: relative; overflow: hidden; background: var(--cream); }
.o-hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
}
.o-hero__wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px,7vw,104px) var(--edge) clamp(44px,6vw,88px);
}
.o-hero__inner { padding-left: clamp(0px,3.5vw,56px); min-width: 0; }
.o-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1px solid rgba(15,61,71,0.25);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 26px;
  animation: om-pop 700ms cubic-bezier(.34,1.56,.64,1) both;
}
.o-hero__h1 {
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(34px,4.8vw,68px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 24ch;
}
.o-hero__line {
  display: block;
  text-wrap: balance;
  animation: om-rise 800ms cubic-bezier(.22,1,.36,1) both;
}
.o-hero__line--2 { animation-delay: 160ms; color: var(--coral); }
.o-hero__line--3 {
  font-weight: 500;
  font-size: 0.66em;
  margin-top: 0.4em;
  letter-spacing: -0.01em;
  animation-delay: 280ms;
}
.o-hero__hand {
  font-size: clamp(26px,3vw,38px);
  margin: 20px 0 0;
  transform: rotate(-2deg);
  animation: om-fade 700ms ease 800ms both;
}
.o-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: clamp(22px,4vw,56px);
  align-items: start;
  margin-top: clamp(30px,4.2vw,52px);
}
.o-hero__text {
  font-size: 20px;
  line-height: 1.65;
  margin: 0;
  max-width: 52ch;
  animation: om-rise 800ms ease 300ms both;
}
.o-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  animation: om-rise 800ms ease 400ms both;
}
.o-hero__fig {
  margin: clamp(34px,4.6vw,56px) 0 0;
  animation: om-rise 900ms cubic-bezier(.22,1,.36,1) 500ms both;
}

.o-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.o-photo--wide  { aspect-ratio: 21 / 9; object-position: 62% 30%; box-shadow: 0 2px 4px rgba(15,61,71,0.06), 0 20px 48px rgba(15,61,71,0.12); }
.o-photo--group { aspect-ratio: 16 / 7; object-position: 50% 40%; }

.o-facts {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(15,61,71,0.14);
}
.o-facts__item {
  flex: 1 1 260px;
  padding: 20px var(--edge);
  background: var(--cream);
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  animation: om-rise 700ms cubic-bezier(.22,1,.36,1) both;
}
.o-facts__item + .o-facts__item { border-left: 1px solid rgba(15,61,71,0.14); }
.o-facts__item:nth-child(1) { animation-delay: 740ms; }
.o-facts__item:nth-child(2) { animation-delay: 880ms; }
.o-facts__item:nth-child(3) { animation-delay: 1020ms; }
.o-facts__item .dot { width: 12px; height: 12px; flex: none; }

/* ---------- Passung: benefits with icons ---------- */
.o-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 36px clamp(24px,3vw,44px);
  align-self: center;
}
.o-benefits > div { min-width: 0; }
.o-benefits__label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,61,71,0.18);
}
.o-iconlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.o-iconlist > li {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 16px;
  align-items: center;
  font-size: 17px;
  line-height: 1.45;
}
.o-iconlist__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mint);
  display: grid;
  place-items: center;
}

/* ---------- Workshop ---------- */
.o-workshop__fig { position: relative; max-width: 1180px; margin: 0 auto clamp(36px,5vw,64px); }
.o-workshop__text { margin: 0 0 24px; font-size: 18px; line-height: 1.68; max-width: 48ch; }
.o-workshop .o-h2 { font-size: clamp(30px,4.4vw,56px); }
.o-workshop .o-split { gap: clamp(28px,4vw,60px); }

.o-table {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.o-table > li {
  display: grid;
  grid-template-columns: 11ch 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(15,61,71,0.1);
}
.o-table > li:last-child { padding-bottom: 0; border-bottom: 0; }
.o-table__key { font-weight: 700; }

/* ---------- Team ---------- */
.o-team .o-h2 { max-width: 22ch; }
.o-team__intro {
  margin: calc(-1 * clamp(14px,2.2vw,30px)) 0 clamp(30px,4.4vw,52px);
  font-size: 19px;
  line-height: 1.65;
  max-width: 62ch;
}
.o-team__stack { display: grid; gap: clamp(28px,4vw,48px); }
.o-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap: clamp(20px,3vw,32px);
}
.o-person {
  padding: clamp(22px,2.8vw,34px);
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 20px;
  align-content: start;
}
.o-person__head {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 20px;
  align-items: center;
}
.o-person__img {
  display: block;
  width: 96px;
  height: 120px;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.o-person__name {
  font-family: var(--h);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.o-person__role { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--teal); }
.o-person__stat {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(15,61,71,0.12);
  border-bottom: 1px solid rgba(15,61,71,0.12);
  font-size: 15px;
  line-height: 1.5;
}
.o-person__num { font-family: var(--h); font-weight: 700; font-size: 40px; line-height: 1; }
.o-person__close { margin: 0; font-size: 17px; line-height: 1.6; }

.o-clients {
  display: grid;
  grid-template-columns: minmax(0,16ch) minmax(0,1fr);
  gap: 10px 24px;
  align-items: baseline;
  padding: clamp(22px,3vw,32px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.o-clients__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(15,61,71,0.65);
}
.o-clients__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(18px,1.8vw,22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(15,61,71,0.8);
}
.o-clients__list > li + li::before { content: "·"; color: var(--coral); padding: 0 10px; }

.o-quote {
  margin: 0;
  background: var(--tint);
  border-radius: 16px;
  padding: clamp(20px,2.6vw,28px);
  display: grid;
  gap: 14px;
  align-content: space-between;
}
.o-quote blockquote { margin: 0; font-size: 16px; line-height: 1.6; }
.o-quote figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,61,71,0.12);
  font-size: 14px;
  font-weight: 700;
}
.o-quote__badge { display: block; line-height: 0; transition: transform 200ms ease; }
.o-quote__badge:hover { transform: translateY(-2px); }
.o-quote__badge img { display: block; width: 64px; height: auto; }

/* ---------- Entwicklungsreise ---------- */
.o-journey .o-h2 { font-size: clamp(34px,5vw,64px); line-height: 1.02; margin-bottom: 24px; max-width: 24ch; }
.o-journey__hand { font-size: clamp(24px,2.6vw,34px); margin: 0 0 26px; transform: rotate(-1.6deg); }
.o-journey__lead { margin-bottom: clamp(34px,4.6vw,56px); max-width: 58ch; }
.o-path {
  --step-gap: clamp(24px,3.2vw,38px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--step-gap);
}
.o-path > li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.o-path > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 54px;
  bottom: calc(-1 * var(--step-gap));
  border-left: 2px dashed rgba(15,61,71,0.22);
}
.o-path__num {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--h);
  font-weight: 800;
  font-size: 20px;
  color: var(--teal);
}
.o-path__card { padding: 22px 26px; }
.o-path__title {
  display: block;
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(22px,2.4vw,29px);
  line-height: 1.12;
  margin-bottom: 8px;
}
.o-path__text { display: block; font-size: 17px; line-height: 1.62; max-width: 56ch; }

.o-explain { margin-top: clamp(36px,5vw,64px); padding: clamp(24px,3.2vw,40px); max-width: 900px; }
.o-explain .o-h3 { font-size: clamp(24px,2.8vw,34px); margin-bottom: 16px; }
.o-explain p { margin: 0 0 14px; font-size: 17px; line-height: 1.66; }
.o-explain p:last-child { margin-bottom: 0; }
.o-tag {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 16px;
}

/* ---------- Ablauf ---------- */
.o-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap: clamp(18px,2.4vw,28px);
}
.o-step {
  padding: clamp(22px,2.4vw,28px);
  display: grid;
  gap: 10px;
  align-content: start;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.o-step:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15,61,71,0.06), 0 16px 36px rgba(15,61,71,0.1); }
.o-step__num { font-family: var(--h); font-weight: 800; font-size: 34px; line-height: 1; color: var(--teal); }
.o-step__title { font-family: var(--h); font-weight: 700; font-size: 22px; line-height: 1.15; }
.o-step__text { font-size: 16px; line-height: 1.6; }

/* ---------- FAQ (behaviour: main.js, data-faq-*) ---------- */
.o-faq .o-h2 { line-height: 1.02; margin-bottom: clamp(28px,4vw,46px); max-width: none; }
.o-faq__list { display: grid; gap: 14px; }
.o-faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.o-faq__q {
  width: 100%;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(19px,2vw,23px);
  color: var(--ink);
  line-height: 1.2;
}
.o-faq__sign { font-size: 30px; color: var(--coral); flex: none; line-height: 1; }
.o-faq__a {
  margin: 0;
  padding: 20px 24px 22px;
  font-size: 17px;
  line-height: 1.65;
  border-top: 2px solid rgba(15,61,71,0.12);
}

/* ---------- Teaser to the families page ---------- */
.o-teaser {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: center;
  justify-content: space-between;
}
.o-teaser > div { min-width: 0; flex: 1 1 420px; }
.o-teaser .eyebrow { margin-bottom: 12px; }
.o-teaser .o-h2 { font-size: clamp(26px,3.4vw,42px); line-height: 1.06; margin-bottom: 12px; max-width: 24ch; }
.o-teaser p { margin: 0; font-size: 18px; line-height: 1.6; max-width: 54ch; }

/* ---------- Contact ---------- */
.o-contact .o-split { gap: clamp(30px,5vw,72px); }
.o-contact .o-h2 { font-size: clamp(32px,4.4vw,56px); line-height: 1.02; max-width: none; }
.o-contact__text { margin: 0 0 18px; font-size: 17px; line-height: 1.68; max-width: 42ch; color: rgba(255,253,247,0.92); }
.o-contact__mail { margin: 0; font-size: 17px; font-weight: 600; }
.o-form {
  display: grid;
  gap: 16px;
  background: rgba(255,253,247,0.06);
  border: 2px solid rgba(255,253,247,0.28);
  border-radius: 16px;
  padding: clamp(22px,3vw,34px);
}
.o-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 16px;
}
.o-form__label {
  display: grid;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,253,247,0.85);
}
.o-form__field {
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 2px solid rgba(255,253,247,0.32);
  background: rgba(255,255,255,0.08);
  color: var(--cream);
}
.o-form__field:focus { border-color: var(--sun); outline: none; }
textarea.o-form__field { resize: vertical; }
.o-form__note { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255,253,247,0.7); }
.o-form__note a { color: var(--sun); font-weight: 600; }
.o-form__submit {
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--cream);
  border-radius: 999px;
  padding: 15px 28px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(255,253,247,0.5);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.o-form__submit:hover  { transform: translateY(-2px); box-shadow: 4px 4px 0 rgba(255,253,247,0.5); }
.o-form__submit:active { transform: translateY(0); box-shadow: 1px 1px 0 rgba(255,253,247,0.5); }
.o-form__submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.o-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Playbook (sold like the Praxispaket on the start page) ---------- */
.o-deco--playbook { width: clamp(320px,38vw,580px); left: -10vw; bottom: -16%; opacity: 0.08; color: var(--mint); animation: om-bob 29s ease-in-out infinite; }
.o-playbook .o-split { align-items: center; gap: clamp(36px,6vw,88px); }
.o-playbook .o-h2 { max-width: 16ch; margin-bottom: 22px; }
.o-playbook__text { margin: 0 0 28px; font-size: 19px; line-height: 1.65; max-width: 52ch; color: rgba(255,253,247,0.92); }
.o-playbook__card { color: var(--ink); display: grid; gap: 22px; justify-items: start; max-width: 460px; }
.o-playbook__price { display: grid; gap: 4px; }
.o-playbook__amount { font-family: var(--h); font-weight: 800; font-size: clamp(40px,4.4vw,54px); line-height: 1; letter-spacing: -0.02em; }
.o-playbook__meta { font-size: 15px; font-weight: 600; color: rgba(15,61,71,0.7); }
.o-playbook__cover { display: flex; justify-content: center; }
.o-playbook__cover img {
  display: block;
  width: min(340px, 78vw);
  height: auto;
  border: 2px solid rgba(255,253,247,0.85);
  border-radius: 14px;
  box-shadow: 10px 10px 0 var(--mint);
  transform: rotate(2.4deg);
}